812 lines
29 KiB
Vue
812 lines
29 KiB
Vue
<template>
|
||
<div class="chartsCut">
|
||
<div v-show="$store.state.transdtr&&$store.state.transBefore">
|
||
<div
|
||
v-for="(item,index) in listImg"
|
||
:key="index"
|
||
class="chart_left"
|
||
@click="cutChartsTap(index)"
|
||
>
|
||
<img :src="item.url" alt />
|
||
</div>
|
||
</div>
|
||
<div class="chart_right">
|
||
<div
|
||
class="chart_right_area"
|
||
v-if="$route.query.type==='area'&&!$store.state.areaDimensionState"
|
||
>
|
||
{{stateChangeSDF?'指标：':'地区：'}}
|
||
<el-cascader
|
||
v-model="value"
|
||
:options="options"
|
||
@change="handleChange"
|
||
style="width:12rem"
|
||
size="small"
|
||
></el-cascader>
|
||
</div>
|
||
<!-- 根据时间筛选 -->
|
||
<div class="chart_right_time" v-if="!$store.state.areaDimensionState">
|
||
时间：
|
||
<div class="chart_right_cont">
|
||
<PullDownComponents
|
||
ref="childPullDownComponents"
|
||
:pullDowmData="cityDataTime"
|
||
:initDefaultSelect="cityDefaultNameTime"
|
||
@callBackVal="callBackVal"
|
||
@callBackValOpen="callBackValOpen"
|
||
@callBackValClose="callBackValClose"
|
||
v-if="cityDefaultNameTime"
|
||
></PullDownComponents>
|
||
<div class="bottom" v-if="showInputStu" @click.stop="showKuangCat">
|
||
<input
|
||
type="text"
|
||
placeholder="请输入时间"
|
||
v-model="timeUsrr"
|
||
@focus="focusShow"
|
||
@blur="focusShow"
|
||
/>
|
||
<span @click="trueShuru()">确认</span>
|
||
<div class="explainTrue" v-if="kuangState">
|
||
<br />
|
||
<span style="color:#67bfdc">列：输入格式如下</span>
|
||
<br />月：201901,201902
|
||
<br />
|
||
<br />季：2019A,2019B,
|
||
<br />
|
||
<br /> 2019C,2019D
|
||
<br />
|
||
<br />年：2019,2018
|
||
<br />
|
||
<br />其他：2018-2019
|
||
<br />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chart_right" v-if="$route.query.type==='area'&&$store.state.areaDimensionState">
|
||
{{leftLabel[$store.state.noSelecttDimension]}}：
|
||
<el-cascader
|
||
v-model="valueDimension"
|
||
:options="optionsDimension"
|
||
@change="handleChangeDimension"
|
||
style="width:12rem"
|
||
size="small"
|
||
></el-cascader>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
// 引入下拉组件
|
||
import PullDownComponents from '@/components/pullDownComponents/PullDownComponents.vue'
|
||
export default {
|
||
name: 'chartsCut',
|
||
props: {
|
||
// 渲染图表所需数据
|
||
defaultDataRight: {
|
||
type: Object,
|
||
required: false
|
||
},
|
||
stateDataGetVal: {
|
||
type: Boolean,
|
||
required: true
|
||
},
|
||
labelAreaState: {
|
||
type: Boolean,
|
||
required: false
|
||
},
|
||
// 地区数据维度转换状态
|
||
areaDimensionStateS: {
|
||
type: Boolean,
|
||
required: true
|
||
},
|
||
// 指标地区状态
|
||
labelAreaStateks: {
|
||
type: Boolean,
|
||
required: true
|
||
},
|
||
// 加载状态
|
||
loading: {
|
||
type: Boolean,
|
||
required: true
|
||
}
|
||
},
|
||
components: {
|
||
PullDownComponents: PullDownComponents
|
||
},
|
||
data () {
|
||
return {
|
||
// 提示语logo
|
||
explainLogo: require('../../../static/nav/xl.png'),
|
||
// 控制下拉框显示隐藏
|
||
isHideProp: true,
|
||
// 栏目数据 结构不可变
|
||
cityDataArea: [
|
||
{ 'id': '110000', 'name': '-序列-', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||
{ 'id': '110000', 'name': '居民消费价格', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||
{ 'id': '110000', 'name': '入境人数', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||
{ 'id': '110000', 'name': '工业', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
|
||
],
|
||
cityDataAreas: [
|
||
{ 'id': '110000', 'name': '-序列-', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||
{ 'id': '110000', 'name': '居民消费价格', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||
{ 'id': '110000', 'name': '入境人数', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||
{ 'id': '110000', 'name': '工业', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
|
||
],
|
||
|
||
// 栏目级数
|
||
jishuArea: 1,
|
||
// 默认显示栏目
|
||
cityDefaultNameArea: '居民价格',
|
||
// 筛选数据
|
||
selectpatternArea: [
|
||
{
|
||
field: 'userProvinceId',
|
||
placeholder: '居民消费价'
|
||
}
|
||
],
|
||
// 栏目数据 结构不可变
|
||
cityDataTime: null,
|
||
// 栏目级数
|
||
jishuTime: 1,
|
||
// 默认显示栏目
|
||
cityDefaultNameTime: null,
|
||
// 筛选数据
|
||
selectpatternTime: null,
|
||
listImg: [
|
||
{
|
||
url: require('../../../static/chartsCut/list.png'),
|
||
selectStatic: true
|
||
},
|
||
{
|
||
url: require('../../../static/chartsCut/hengzhuangtu.png'),
|
||
selectStatic: false
|
||
},
|
||
{
|
||
url: require('../../../static/chartsCut/shuzhuangtu.png'),
|
||
selectStatic: false
|
||
},
|
||
{
|
||
url: require('../../../static/chartsCut/bingtu.png'),
|
||
selectStatic: false
|
||
},
|
||
{
|
||
url: require('../../../static/chartsCut/zhexiantu.png'),
|
||
selectStatic: false
|
||
}
|
||
],
|
||
// 按时间查询
|
||
timeUsrr: '',
|
||
// 时间筛选输入框是否显示
|
||
showInputStu: false,
|
||
// 控制下拉框的显示隐藏
|
||
stateRTY: true,
|
||
// 指标地区转换状态 true为指标 false为地区
|
||
stateChangeSDF: true,
|
||
// 提示框状态
|
||
kuangState: false,
|
||
value: [],
|
||
options: [
|
||
{
|
||
value: 'zhinan',
|
||
label: '指南'
|
||
}
|
||
],
|
||
leftLabel: {
|
||
'sj': '时间',
|
||
'zb': '指标',
|
||
'dq': '地区'
|
||
},
|
||
valueDimension: [],
|
||
optionsDimension: [
|
||
{
|
||
value: '',
|
||
label: ''
|
||
}
|
||
]
|
||
}
|
||
},
|
||
watch: {
|
||
// 监听左侧菜单的数据变化
|
||
defaultDataRight: {
|
||
handler (val) {
|
||
// console.log(val, '左侧数据变化chartsCut')
|
||
if (val) {
|
||
// 初始化公共数据
|
||
if (this.$route.query.type !== 'area') {
|
||
this.searchSelect(this.$route.query.type)
|
||
} else {
|
||
this.searchSelect(val.f)
|
||
}
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
// 监听数据渲染变化
|
||
stateDataGetVal (newVal, oldVal) {
|
||
console.log(this.$store.state.transBefore, '啦啦啦')
|
||
if (!newVal) {
|
||
// this.showLabelArea()
|
||
}
|
||
},
|
||
labelAreaState (newVal, oldVal) {
|
||
console.log(newVal, 'kkkkkkkkkkkkkkkkkkkkkkk120')
|
||
if (newVal && !this.$store.state.advancedSearchState) {
|
||
console.log('kkkkkkkkkkkkkkkkkkkkkkk120')
|
||
// this.showLabelArea()
|
||
}
|
||
},
|
||
labelAreaStateks (newVal, oldVal) {
|
||
if (newVal) {
|
||
this.stateChangeSDF = !this.stateChangeSDF
|
||
// this.showLabelArea()
|
||
if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'dq') {
|
||
this.$store.state.SelecttDimension.col = 'zb'
|
||
} else if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'zb') {
|
||
this.$store.state.SelecttDimension.col = 'dq'
|
||
}
|
||
console.log(this.$store.state.transBefore, 'bbbbbbbbbbbbbbbbbbb')
|
||
this.$nextTick(() => {
|
||
this.$parent.tellChangeFan(false)
|
||
})
|
||
}
|
||
},
|
||
// 监听地区维度转换数据变换
|
||
areaDimensionStateS (newVal) {
|
||
if (newVal) {
|
||
if (this.$store.state.noSelecttDimension === 'sj') {
|
||
this.optionsDimension = this.$store.state.dataArealabelTime.timeArr.map((item, index) => {
|
||
return {
|
||
value: item,
|
||
label: item
|
||
}
|
||
})
|
||
} else if (this.$store.state.noSelecttDimension === 'dq') {
|
||
this.optionsDimension = this.$store.state.dataArealabelTime.areaArr.map((item, index) => {
|
||
return {
|
||
value: item,
|
||
label: item
|
||
}
|
||
})
|
||
} else if (this.$store.state.noSelecttDimension === 'zb') {
|
||
this.optionsDimension = this.$store.state.dataArealabelTime.quotaArr.map((item, index) => {
|
||
return {
|
||
value: item,
|
||
label: item
|
||
}
|
||
})
|
||
}
|
||
this.valueDimension = this.$store.newSelectChangeData
|
||
// 告诉父组件数据渲染完
|
||
this.$emit('emmitStateAd', false)
|
||
}
|
||
console.log(this.valueDimension, 'this.valueDimension')
|
||
}
|
||
},
|
||
methods: {
|
||
// 地区维度转换筛选
|
||
handleChangeDimension () {
|
||
console.log(this.valueDimension, 'this.valueDimension')
|
||
if (this.valueDimension) {
|
||
this.$parent.changeDimensionTrueChangeArea(this.valueDimension[0])
|
||
}
|
||
},
|
||
// 点击切换图表
|
||
cutChartsTap (ind) {
|
||
// console.log(ind)
|
||
this.$emit('cutStatic', ind)
|
||
},
|
||
// 被选中时触发
|
||
choiceCallerArea (resu) {
|
||
console.log(resu[2], '5+656565')
|
||
// this.$emit('statertfResu', resu[2])
|
||
},
|
||
// 被选中时触发
|
||
choiceCallerTime (resu) {
|
||
console.log(resu, '66666')
|
||
// console.log(this.cityDefaultName)
|
||
// 改变选中值索引
|
||
if (this.$store.state.selectData !== undefined) {
|
||
console.log(this.$store.state.selectData, '被选中的值')
|
||
console.log(resu[2], '被选中的值2')
|
||
|
||
this.$store.state.selectData = resu[2].indexID
|
||
this.showInputStu = false
|
||
this.$emit('comTime', resu[2])
|
||
}
|
||
// 将值传给父组件
|
||
|
||
// this.showInputStu = !this.showInputStu
|
||
},
|
||
changesInputStu () {
|
||
console.log(12569)
|
||
this.showInputStu = !this.showInputStu
|
||
},
|
||
// 点击非下拉框内容时改变下拉状态（下拉怡然显示）
|
||
showKuangCat () {
|
||
console.log(1250)
|
||
this.isHideProp = false
|
||
this.stateRTY = false
|
||
},
|
||
// 查询下拉筛选条件
|
||
searchSelect (type) {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'data/data/quick',
|
||
params: {
|
||
type: type
|
||
}
|
||
}).then(res => {
|
||
console.log(res, '下拉筛选条件')
|
||
// 请求接口完成 请求成功
|
||
if (res.data.code === 200) {
|
||
this.cityDataTime = Object.keys(res.data.data.list).map((item, index) => {
|
||
return { name: Object.values(res.data.data.list)[index], extendData: item }
|
||
})
|
||
// 默认选中第一个
|
||
this.cityDefaultNameTime = { name: this.cityDataTime[0].name, activeIndex: 0 }
|
||
this.$store.state.selectData = this.cityDataTime[0].extendData
|
||
// 告诉父组件我获取到了
|
||
this.$emit('stateTell', true)
|
||
if (!this.$route.query.type !== 'area') {
|
||
this.$emit('update:loading', false)
|
||
}
|
||
// 调用父组件的chuFachildChartCont方法渲染
|
||
// this.$parent.chuFachildChartCont()
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
stateInfor (val) {
|
||
if (val) {
|
||
this.stateRTY = val
|
||
} else {
|
||
this.showInputStu = val
|
||
}
|
||
},
|
||
// 指标地区数据渲染
|
||
showLabelArea () {
|
||
console.log(this.stateChangeSDF, this.$store.state.dataArealabelTime, '走走走')
|
||
if (this.$store.state.classifyIdDataState) {
|
||
if (!this.$store.state.advancedSearchState) { // 非高级查询
|
||
if (this.stateChangeSDF) { // 指标
|
||
this.options = this.$store.state.dataArealabelTime.quotaArr.map((item, index) => {
|
||
return {
|
||
value: item,
|
||
label: item
|
||
}
|
||
})
|
||
this.options.unshift({
|
||
value: '序列',
|
||
label: '序列'
|
||
})
|
||
this.value = [this.options[1].value]
|
||
console.log(this.value, 'this.options')
|
||
// 告诉父组件已经完成任务
|
||
this.$emit('stateDFGHJ', true)
|
||
this.$emit('statertfResu', this.value[0])
|
||
} else { // 地区
|
||
this.options = this.$store.state.dataArealabelTime.areaArr.map((item, index) => {
|
||
return {
|
||
value: item,
|
||
label: item
|
||
}
|
||
})
|
||
this.options.unshift({
|
||
value: '序列',
|
||
label: '序列'
|
||
})
|
||
this.value = [this.options[1].value]
|
||
console.log(this.value, 'this.options')
|
||
// 告诉父组件已经完成任务
|
||
this.$emit('stateDFGHJ', true)
|
||
this.$emit('statertfResu', this.value[0])
|
||
}
|
||
} else { // 高级查询
|
||
if (this.$route.query.type !== 'area') {
|
||
this.$emit('stateDFGHJ', true)
|
||
} else {
|
||
if (this.stateChangeSDF) { // 指标
|
||
this.options = this.$store.state.dataArealabelTime.quotaArr.map((item, index) => {
|
||
return {
|
||
value: item,
|
||
label: item
|
||
}
|
||
})
|
||
this.options.unshift({
|
||
value: '序列',
|
||
label: '序列'
|
||
})
|
||
this.value = [this.options[1].value]
|
||
console.log(this.value, 'this.options')
|
||
// 告诉父组件已经完成任务
|
||
this.$emit('stateDFGHJ', true)
|
||
this.$emit('statertfResu', this.value[0])
|
||
} else { // 地区
|
||
this.options = this.$store.state.dataArealabelTime.areaArr.map((item, index) => {
|
||
return {
|
||
value: item,
|
||
label: item
|
||
}
|
||
})
|
||
this.options.unshift({
|
||
value: '序列',
|
||
label: '序列'
|
||
})
|
||
this.value = [this.options[1].value]
|
||
console.log(this.value, 'this.options')
|
||
// 告诉父组件已经完成任务
|
||
this.$emit('stateDFGHJ', true)
|
||
this.$emit('statertfResu', this.value[0])
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// 聚焦显示提示的搜索框
|
||
focusShow () {
|
||
this.kuangState = !this.kuangState
|
||
},
|
||
// 确定输入
|
||
trueShuru () {
|
||
if (this.timeUsrr !== '') {
|
||
switch (this.$route.query.type) {
|
||
case 'monthly':
|
||
if (!(this.timeUsrr.length === 6 || this.timeUsrr.length === 13)) {
|
||
console.log(this.timeUsrr.length, true)
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
// 对于1个输入查询的验证
|
||
if (this.timeUsrr.length === 6) {
|
||
if (!(/^[0-9]+$/.test(this.timeUsrr) && this.timeUsrr[this.timeUsrr.length - 2] < 2)) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
} else if (this.timeUsrr[this.timeUsrr.length - 2] === 1 && this.timeUsrr[this.timeUsrr.length - 1] > 2) {
|
||
console.log(9996)
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
// 对于范围输入的验证
|
||
if (this.timeUsrr.length === 13) {
|
||
if (!(this.timeUsrr.length === 13 && /^[0-9]+$/.test(this.timeUsrr.split('-')[0]) && /^[0-9]+$/.test(this.timeUsrr.split('-')[1]) && this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 2] < 2 && this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 2] < 2)) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
} else if ((this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 2] === 1 && this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 1] > 2) || (this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 2] === 1 && this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 1] > 2)) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
this.$store.state.selectData = this.timeUsrr
|
||
console.log(this.$store.state.selectData, '时间')
|
||
// 调用父组件（Dataweb）中的changeBrother方法来调用ChartCont组件中的brotherFuncShowData方法
|
||
this.$parent.changeBrother()
|
||
this.timeUsrr = ''
|
||
this.childFuncChangeDown()
|
||
break
|
||
case 'quarter':
|
||
if (!(this.timeUsrr.length === 5 || this.timeUsrr.length === 11)) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
let arr = ['A', 'B', 'C', 'D']
|
||
// 对于一个季度的验证
|
||
if (this.timeUsrr.length === 5) {
|
||
if (!(/^[0-9]+$/.test(this.timeUsrr.substring(0, 4)) && arr.indexOf(this.timeUsrr[this.timeUsrr.length - 1]) !== -1)) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
// 对于季度范围的验证
|
||
if (this.timeUsrr.length === 11) {
|
||
if (!(/^[0-9]+$/.test(this.timeUsrr.split('-')[0].substring(0, 4)) && /^[0-9]+$/.test(this.timeUsrr.split('-')[1].substring(0, 4)) && arr.indexOf(this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 1]) !== -1 && arr.indexOf(this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 1]) !== -1)) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
this.$store.state.selectData = this.timeUsrr
|
||
this.$parent.changeBrother()
|
||
this.timeUsrr = ''
|
||
this.childFuncChangeDown()
|
||
break
|
||
case 'year':
|
||
if (!(this.timeUsrr.length === 4 || this.timeUsrr.length === 9)) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
// 对于一个时间的验证
|
||
if (this.timeUsrr.length === 4) {
|
||
if (!(/^[0-9]+$/.test(this.timeUsrr))) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
// 对于时间范围的验证
|
||
if (this.timeUsrr.length === 9) {
|
||
if (!(/^[0-9]+$/.test(this.timeUsrr.split('-')[0]) && /^[0-9]+$/.test(this.timeUsrr.split('-')[1]))) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
this.$store.state.selectData = this.timeUsrr
|
||
this.$parent.changeBrother()
|
||
this.timeUsrr = ''
|
||
this.childFuncChangeDown()
|
||
break
|
||
case 'area':
|
||
let arrs = ['A', 'B', 'C', 'D']
|
||
if (!(this.timeUsrr.length === 4 || this.timeUsrr.length === 5 || this.timeUsrr.length === 6 || this.timeUsrr.length === 9 || this.timeUsrr.length === 11 || this.timeUsrr.length === 13)) {
|
||
console.log(this.timeUsrr.length, true)
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
// 对于1个输入查询的验证
|
||
if (this.timeUsrr.length === 6) {
|
||
if (!(/^[0-9]+$/.test(this.timeUsrr) && this.timeUsrr[this.timeUsrr.length - 2] < 2)) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
} else if (this.timeUsrr[this.timeUsrr.length - 2] === 1 && this.timeUsrr[this.timeUsrr.length - 1] > 2) {
|
||
console.log(9996)
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
// 对于范围输入的验证
|
||
if (this.timeUsrr.length === 13) {
|
||
if (!(this.timeUsrr.length === 13 && /^[0-9]+$/.test(this.timeUsrr.split('-')[0]) && /^[0-9]+$/.test(this.timeUsrr.split('-')[1]) && this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 2] < 2 && this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 2] < 2)) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
} else if ((this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 2] === 1 && this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 1] > 2) || (this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 2] === 1 && this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 1] > 2)) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
// 对于一个季度的验证
|
||
if (this.timeUsrr.length === 5) {
|
||
if (!(/^[0-9]+$/.test(this.timeUsrr.substring(0, 4)) && arrs.indexOf(this.timeUsrr[this.timeUsrr.length - 1]) !== -1)) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
// 对于季度范围的验证
|
||
if (this.timeUsrr.length === 11) {
|
||
if (!(/^[0-9]+$/.test(this.timeUsrr.split('-')[0].substring(0, 4)) && /^[0-9]+$/.test(this.timeUsrr.split('-')[1].substring(0, 4)) && arrs.indexOf(this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 1]) !== -1 && arrs.indexOf(this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 1]) !== -1)) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
// 对于一个时间的验证
|
||
if (this.timeUsrr.length === 4) {
|
||
if (!(/^[0-9]+$/.test(this.timeUsrr))) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
// 对于时间范围的验证
|
||
if (this.timeUsrr.length === 9) {
|
||
if (!(/^[0-9]+$/.test(this.timeUsrr.split('-')[0]) && /^[0-9]+$/.test(this.timeUsrr.split('-')[1]))) {
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
this.$store.state.selectData = this.timeUsrr
|
||
this.$parent.changeBrother()
|
||
this.timeUsrr = ''
|
||
this.childFuncChangeDown()
|
||
break
|
||
}
|
||
} else {
|
||
// alert('您查询的时间格式有误，请重新输入！')
|
||
this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
},
|
||
// 选中
|
||
handleChange (value) {
|
||
console.log(value)
|
||
console.log(this.value, 'this.value')
|
||
if (value[0] === '序列') {
|
||
this.stateChangeSDF = !this.stateChangeSDF
|
||
this.$store.state.newSelectDaaState = this.stateChangeSDF
|
||
this.showLabelArea()
|
||
if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'dq') {
|
||
this.$store.state.SelecttDimension.col = 'zb'
|
||
} else if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'zb') {
|
||
this.$store.state.SelecttDimension.col = 'dq'
|
||
}
|
||
} else {
|
||
this.$emit('statertfResu', value[0])
|
||
}
|
||
},
|
||
// 调用子组件方法改变下拉框的显示隐藏
|
||
childFuncChangeDown () {
|
||
let dataNer = JSON.parse(JSON.stringify(this.cityDataTime))
|
||
dataNer[3] = { name: this.$store.state.selectData, extendData: this.$store.state.selectData }
|
||
this.cityDataTime = dataNer
|
||
console.log(this.cityDataTime, 'this.cityDataTime')
|
||
// 默认选中最后一个
|
||
this.cityDefaultNameTime = { name: this.cityDataTime[3].name, activeIndex: 3 }
|
||
this.$store.state.selectData = this.cityDataTime[3].extendData
|
||
},
|
||
// 当前选中的时间列表
|
||
callBackVal (res) {
|
||
console.log(res.extendData, '开始')
|
||
// 调用父组件的chuFachildChartCont方法渲染
|
||
this.$store.state.selectData = res.extendData
|
||
this.$parent.chuFachildChartCont()
|
||
if (this.$store.state.selectData !== undefined) {
|
||
console.log(this.$store.state.selectData, '被选中的值')
|
||
console.log(res, '被选中的值2')
|
||
this.$store.state.selectData = res.extendData
|
||
this.$emit('comTime', res)
|
||
}
|
||
},
|
||
callBackValOpen (res) { // 展开回调
|
||
console.log(res, '展开')
|
||
this.changesInputStu()
|
||
},
|
||
callBackValClose (res) { // 关闭回调
|
||
console.log(res, '关闭')
|
||
this.changesInputStu()
|
||
},
|
||
// 高级查询指标地区序列化
|
||
serializedData () {
|
||
// this.showLabelArea()
|
||
}
|
||
},
|
||
mounted () {
|
||
this.cityDataArea = this.cityDataAreas
|
||
this.cityDataTime = this.cityDataAreas
|
||
// this.showLabelArea()
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.chartsCut {
|
||
padding: 0.75rem 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
& > div:nth-child(1) {
|
||
width: 26.875rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
// border: 1px solid red;
|
||
& > .chart_left {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// border: 0.0625rem solid red;
|
||
& > img {
|
||
height: 1.625rem;
|
||
width: 1.625rem;
|
||
}
|
||
& > img:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
& > .chart_right {
|
||
width: 37.5rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
// border: 0.0625rem solid red;
|
||
font-size: 1.125rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 22px;
|
||
letter-spacing: 0.125rem;
|
||
color: #333333;
|
||
// border: 1px solid red;
|
||
& > .chart_right_area {
|
||
margin-right: 0.525rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
& > .chart_right_time {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
& > .chart_right_cont {
|
||
position: relative;
|
||
& > .bottom {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
width: 12.285rem;
|
||
height: 2.25rem;
|
||
border: 0.0625rem solid #cccccc;
|
||
background-color: #fff;
|
||
border-radius: 0.375rem;
|
||
position: absolute;
|
||
top: 430%;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1;
|
||
& > input {
|
||
width: 6.285rem;
|
||
}
|
||
& > span {
|
||
padding: 0.375rem 0.75rem;
|
||
background-color: #67bfdc;
|
||
color: #fff;
|
||
font-size: 1rem;
|
||
letter-spacing: 0.25rem;
|
||
border-radius: 0.375rem;
|
||
}
|
||
& > span:hover {
|
||
cursor: pointer;
|
||
}
|
||
& > .explainTrue {
|
||
position: absolute;
|
||
top: 1.8rem;
|
||
width: 18.75rem;
|
||
height: 22.5rem;
|
||
background-image: url("../../../static/nav/xl.png");
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|