1406 lines
56 KiB
Vue
1406 lines
56 KiB
Vue
<template>
|
||
<div>
|
||
<div class="chartsCont" v-if="transBefore&&!loadings">
|
||
<Echarts
|
||
v-if="indStatic!==0"
|
||
:echartsDatarts="echartsDatarts"
|
||
@rowColInd="rowColInd"
|
||
:echartsDatartsPie="echartsDatartsPie"
|
||
></Echarts>
|
||
<el-table :data="tableData" style="width: 100%" height="360px" ref="table">
|
||
<el-table-column
|
||
:prop="item.labelId"
|
||
:label="item.label"
|
||
:fixed="index===0?true:false"
|
||
:width="computedWidth(index)"
|
||
sortable
|
||
show-overflow-tooltip
|
||
v-for="(item,index) in tableLine"
|
||
:key="index"
|
||
>
|
||
<template slot-scope="scope" slot="header">
|
||
<img
|
||
:src="indexToExplain"
|
||
alt
|
||
v-if="index!==0&&!transState&&areaDataState!=='area'&&!computedLineSty(index)"
|
||
class="slotExplain"
|
||
:style="{'margin':indStatic===0?'0':''}"
|
||
@click="indexExplain(scope.column.label)"
|
||
/>
|
||
<input
|
||
v-if="index!==0&&indStatic!==0"
|
||
type="checkbox"
|
||
style="cursor: pointer;"
|
||
@click.stop="listInput(index)"
|
||
:style="{'margin':'0 0.45rem'}"
|
||
:checked="listInputVal.indexOf(index)!==-1"
|
||
ref="listInputSelect"
|
||
/>
|
||
<span :style="{'color':computedLineSty(index)?'red':''}">{{scope.column.label}}</span>
|
||
</template>
|
||
<template slot-scope="scope">
|
||
<input
|
||
v-if="index===0&&indStatic!==0"
|
||
type="checkbox"
|
||
style="cursor: pointer;"
|
||
@click.stop="lineInput(scope.$index)"
|
||
:checked="lineInputVal.indexOf(scope.$index)!==-1"
|
||
ref="lineInputSelect"
|
||
/>
|
||
<img
|
||
:src="indexToExplain"
|
||
alt
|
||
v-if="index===0&&transState&&areaDataState!=='area'&&!computedListSty(scope.$index)"
|
||
class="slotExplain"
|
||
:style="{'margin':indStatic===0?'0':''}"
|
||
@click="indexExplain(scope.row['table_line0'])"
|
||
/>
|
||
<span
|
||
:style="{'color':(computedListSty(scope.$index)||computedLineSty(index))?'red':''}"
|
||
>{{scope.row['table_line'+index]}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 列表 表说明-->
|
||
<div class="tableExplain" v-html="computedTableExplain"></div>
|
||
<!-- 指标弹窗 -->
|
||
</div>
|
||
<div v-if="!transBefore&&!loadings" class="tishi54">暂无数据</div>
|
||
<div v-loading="loadings" class="tishi54"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 引入数据计算js用于机选渲染的数据
|
||
import ComputedData from '../../assets/js/computeddata'
|
||
// 引入echarts 组件
|
||
import Echarts from '../echarts/echarts'
|
||
export default {
|
||
name: 'chartsCont',
|
||
components: {
|
||
Echarts: Echarts
|
||
},
|
||
props: {
|
||
indStatic: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
// 图表状态管理器
|
||
chartsStatusMegger: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
// 渲染图表所需数据
|
||
defaultDataRight: {
|
||
type: Object,
|
||
required: false
|
||
},
|
||
// 表数据状态
|
||
statesDf: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
stateTells: {
|
||
type: Boolean,
|
||
required: true
|
||
},
|
||
// downLaSelects: {
|
||
// type: String,
|
||
// required: true
|
||
// },
|
||
showTableState: {
|
||
type: Boolean,
|
||
required: true
|
||
},
|
||
areaDimensionStateS: {
|
||
type: Boolean,
|
||
required: true
|
||
},
|
||
advancedStates: {
|
||
type: Boolean,
|
||
required: true
|
||
},
|
||
// 加载状态
|
||
loadings: {
|
||
type: Boolean,
|
||
required: true
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
// 指标解释
|
||
indexToExplain: require('../../../static/chatCont/zhibiaojieshi.png'),
|
||
tableData: [
|
||
{
|
||
table_line1: '(1,1)5456456456456456456454564564',
|
||
table_line2: '(1,2)',
|
||
table_line3: '(1,3)',
|
||
table_line4: '(1,4)',
|
||
table_line5: '(1,5)',
|
||
table_line6: '(1,6)',
|
||
table_line7: '(1,7)',
|
||
table_line8: '(1,8)',
|
||
table_line9: '(1,9)',
|
||
table_line10: '(1,10)',
|
||
table_line11: '(1,11)',
|
||
table_line12: '(1,12)',
|
||
table_line13: '(1,13)',
|
||
table_line14: '(1,14)',
|
||
table_line15: '(1,15)',
|
||
table_line16: '(1,16)'
|
||
},
|
||
{
|
||
table_line1: '(1,1)546454',
|
||
table_line2: '(1,2)',
|
||
table_line3: '(1,3)',
|
||
table_line4: '(1,4)',
|
||
table_line5: '(1,5)',
|
||
table_line6: '(1,6)',
|
||
table_line7: '(1,7)',
|
||
table_line8: '(1,8)',
|
||
table_line9: '(1,9)',
|
||
table_line10: '(1,10)',
|
||
table_line11: '(1,11)',
|
||
table_line12: '(1,12)',
|
||
table_line13: '(1,13)',
|
||
table_line14: '(1,14)',
|
||
table_line15: '(1,15)',
|
||
table_line16: '(1,16)'
|
||
}
|
||
],
|
||
tableDataS: [
|
||
{
|
||
date: '2016-05-03',
|
||
name: '王小名',
|
||
province: '上海',
|
||
city: '普陀区',
|
||
address: '上海市普陀区金沙江路 1518 弄',
|
||
zip: 200333
|
||
}, {
|
||
date: '2016-05-02',
|
||
name: '王小虎',
|
||
province: '上海',
|
||
city: '普陀区',
|
||
address: '上海市普陀区金沙江路 1518 弄',
|
||
zip: 200333
|
||
}, {
|
||
date: '2016-05-04',
|
||
name: '王小虎',
|
||
province: '上海',
|
||
city: '普陀区',
|
||
address: '上海市普陀区金沙江路 1518 弄',
|
||
zip: 200333
|
||
}, {
|
||
date: '2016-05-01',
|
||
name: '王小虎',
|
||
province: '上海',
|
||
city: '普陀区',
|
||
address: '上海市普陀区金沙江路 1518 弄',
|
||
zip: 200333
|
||
}, {
|
||
date: '2016-05-08',
|
||
name: '王小虎',
|
||
province: '上海',
|
||
city: '普陀区',
|
||
address: '上海市普陀区金沙江路 1518 弄',
|
||
zip: 200333
|
||
}, {
|
||
date: '2016-05-06',
|
||
name: '王小虎',
|
||
province: '上海',
|
||
city: '普陀区',
|
||
address: '上海市普陀区金沙江路 1518 弄',
|
||
zip: 200333
|
||
}, {
|
||
date: '2016-05-07',
|
||
name: '王小虎',
|
||
province: '上海',
|
||
city: '普陀区',
|
||
address: '上海市普陀区金沙江路 1518 弄',
|
||
zip: 200333
|
||
}
|
||
],
|
||
// 列数据（label，labelId）
|
||
tableLine: [
|
||
{
|
||
labelId: 'table_line1',
|
||
label: '指标'
|
||
},
|
||
{
|
||
labelId: 'table_line2',
|
||
label: '2019年10月1日'
|
||
},
|
||
{
|
||
labelId: 'table_line3',
|
||
label: '2019年10月2日'
|
||
},
|
||
{
|
||
labelId: 'table_line4',
|
||
label: '2019年10月3日'
|
||
},
|
||
{
|
||
labelId: 'table_line5',
|
||
label: '2019年10月5日'
|
||
},
|
||
{
|
||
labelId: 'table_line6',
|
||
label: '2019年10月5日'
|
||
},
|
||
{
|
||
labelId: 'table_line7',
|
||
label: '2019年10月6日'
|
||
},
|
||
{
|
||
labelId: 'table_line8',
|
||
label: '2019年10月7日'
|
||
},
|
||
{
|
||
labelId: 'table_line9',
|
||
label: '2019年10月8日'
|
||
},
|
||
{
|
||
labelId: 'table_line10',
|
||
label: '2019年10月9日'
|
||
},
|
||
{
|
||
labelId: 'table_line11',
|
||
label: '2019年10月10日'
|
||
},
|
||
{
|
||
labelId: 'table_line12',
|
||
label: '2019年10月11日'
|
||
},
|
||
{
|
||
labelId: 'table_line13',
|
||
label: '2019年10月12日'
|
||
},
|
||
{
|
||
labelId: 'table_line14',
|
||
label: '2019年10月13日'
|
||
},
|
||
{
|
||
labelId: 'table_line15',
|
||
label: '2019年10月14日'
|
||
},
|
||
{
|
||
labelId: 'table_line16',
|
||
label: '2019年10月15日'
|
||
}
|
||
],
|
||
// 转置状态(true：时间在表头上，false：指标名称或者地区名称在表头上)
|
||
transState: false,
|
||
// 当前数据状态（monthly：月度数据，quarter：季度数据，year：年度数据，area：地区数据）
|
||
areaDataState: this.$route.query.type,
|
||
// 当前数据，统计数据中的哪一种text:('无','SUM求和','x平均数','MAX最大值','MIN最小值','MD中位数','MO众数','S²方差','S标准差'),stateType:('line','list')
|
||
nowDataTJ: { text: '无', stateType: 'line' },
|
||
// 转置前总数据
|
||
// transBefore: {
|
||
// tableExplain: '',
|
||
// timeArr: [],
|
||
// termsName: [],
|
||
// termsExplain: [],
|
||
// areaName: [],
|
||
// transBeforeTermsData: [],
|
||
// transBeforeAreaData: []
|
||
// },
|
||
transBefore: null,
|
||
// transBefore: {
|
||
// // 数据表说明
|
||
// tableExplain: '注： 按照统计制度要求，我国CPI每五年进行一次基期轮换，2016年1月开始使用2015年作为新一轮的对比基期，前三轮基期分别为2000年、2005年和2010年。CPI基期轮换是一项国际惯例，目的是使CPI调查所涉及到的商品和服务更具有代表性，更及时准确反映居民消费结构的新变化和物价的实际变动。 参考联合国制定的《按目的划分的个人消费分类》（COICOP）和国家统计局发布的《居民消费支出分类（2013）》，我们对CPI调查目录进行了调整，新基期调查目录和规格品与国际标准更为接近，一些新产品新服务纳入其中，能进一步反映居民消费和经济结构的变化。与上一轮基期相比，本轮基期的CPI调查目录有几个主要变化。一是按照《居民消费支出分类（2013）》，原来的“食品”、“烟酒”合并为现在的“食品烟酒”；原来的“医疗保健和个人用品”被拆分到现在的“生活用品及服务”、“医疗保健”和“其他用品和服务”中；原来的“娱乐教育文化用品及服务”被拆分到现在的“教育文化和娱乐”和“其他用品和服务”中；原来的“家庭设备用品及维修服务”被拆分到现在的“生活用品及服务”和“其他用品及服务”中。二是食品的指标内涵发生了变化，旧分类中的“食品”为大类，包括粮食、肉禽、鲜菜、鲜果、水产品、茶及饮料、在外餐饮等分类；新“食品”为“食品烟酒”大类下的中类，仅包括粮食、畜肉、禽肉、鲜菜、鲜果、水产品等，不再包括“茶及饮料”和“在外餐饮”两项。三是新增了“园艺花卉及用品”、“宠物及用品”、“养老服务”和“金融服务”等居民支出增加较快的分类，能够更加及时准确反映居民消费结构的新变化。',
|
||
// // 时间（2019年10月30日）
|
||
// timeArr: ['2019年10月23日', '2019年10月24日', '2019年10月25日', '2019年10月26日', '2019年10月27日', '2019年10月28日', '2019年10月29日', '2019年10月30日'],
|
||
// // 指标名称
|
||
// termsName: ['价格指数', '工业', '能源', '固定资产投资', '服务业生产指数', '城镇调查失业率', '房地产', '国内贸易'],
|
||
// // 指标解释
|
||
// termsExplain: ['价格指数指标解释', '工业指标解释', '能源指标解释', '固定资产投资指标解释', '服务业生产指数指标解释', '城镇调查失业率指标解释', '房地产指标解释', '国内贸易指标解释'],
|
||
// // 地区名
|
||
// areaName: ['北京市', '临沂市', '上海市', '河北省', '兰陵县', '天津市', '兰山区', '荣盛锦绣外滩'],
|
||
// // (行：指标名称，列：指标、时间)===>第一列为指标 { 指标名称数据 }
|
||
// transBeforeTermsData: [
|
||
// ['10210.23', '10152.23', '12556.23', '23689.23', '25698.01', '54565.26', '48915.32', '15862.32'],
|
||
// ['10520.23', '10212.23', '12526.23', '23689.23', '25658.01', '54665.26', '57915.32', '71762.32'],
|
||
// ['10530.23', '10242.23', '12565.23', '23389.23', '25698.01', '46365.26', '59145.32', '16233.32'],
|
||
// ['10320.23', '10252.23', '15650.23', '23089.23', '25498.01', '53065.26', '55845.32', '45633.32'],
|
||
// ['13230.23', '10622.23', '89785.23', '23889.23', '25498.01', '78965.26', '46845.32', '36733.32'],
|
||
// ['14520.23', '45622.23', '89455.23', '45739.23', '49898.01', '53965.26', '49845.32', '16733.32'],
|
||
// ['14540.23', '44562.23', '89945.23', '45576.23', '56898.01', '46965.26', '59845.32', '54563.32'],
|
||
// ['14210.23', '44562.23', '48994.23', '43476.23', '25698.01', '79696.26', '44565.32', '65563.32']
|
||
// ],
|
||
// // (行：地区名，列：地区、时间)===>第一列为地区{ 地区名称数据 }
|
||
// transBeforeAreaData: [
|
||
// ['23210.23', '10562.23', '12456.23', '23696.23', '69598.01', '54543.26', '57157.32', '15352.32'],
|
||
// ['10350.23', '10612.23', '12786.23', '26589.23', '56698.01', '56934.26', '56915.32', '45962.32'],
|
||
// ['10450.23', '10542.23', '12665.23', '29639.23', '21259.01', '54495.26', '25945.32', '55483.32'],
|
||
// ['13692.23', '10262.23', '12625.23', '22628.23', '25298.01', '52625.26', '52245.32', '26233.32'],
|
||
// ['13690.23', '26222.23', '89762.23', '23889.23', '25428.01', '56265.26', '57445.32', '56233.32'],
|
||
// ['13690.23', '45622.23', '89225.23', '45629.23', '25298.01', '32965.26', '57845.32', '14533.32'],
|
||
// ['13650.23', '46222.23', '32445.23', '45576.23', '21528.01', '45265.26', '56245.32', '14263.32'],
|
||
// ['14230.23', '42622.23', '48262.23', '43426.23', '21268.01', '78626.26', '56265.32', '16263.32']
|
||
// ]
|
||
// },
|
||
// 调用存储的对象
|
||
objCompBefore: null,
|
||
// echarts渲染的数据======>非饼图
|
||
echartsDatarts: {},
|
||
// 饼图数据
|
||
echartsDatartsPie: {},
|
||
// 行列转换索引状态0行1列
|
||
rowColIndex: 0,
|
||
// 存input列选中的值
|
||
listInputVal: [1, 2, 3], // 初始化选中3个
|
||
// 存input行选中的值
|
||
lineInputVal: [0, 1, 2, 3], // 初始化选中4个
|
||
lineStatic: true,
|
||
// 上一次图形是否为执行状态，
|
||
pieStatic: false,
|
||
// 获取数据所用参数
|
||
// 晒选状态 1筛选指标 2筛选地区
|
||
selectState: 1,
|
||
// 下来帅选的数据
|
||
downLaSelect: {
|
||
area: '',
|
||
label: ''
|
||
},
|
||
// 执行状态
|
||
hangZhiState: false,
|
||
// 高级查询数据
|
||
startsyui: false,
|
||
// 初始化左侧状态
|
||
leftState: false,
|
||
// 列宽数组
|
||
lieWidthArr: [],
|
||
// 指标或地区次数 true为1次 false为非1次
|
||
labelAreaNum: true
|
||
}
|
||
},
|
||
watch: {
|
||
// 监听父组件高级查询
|
||
startsyui (val, oldValue) {
|
||
console.log(val, oldValue, '12333333')
|
||
if (val) {
|
||
console.log(this.$store.state.transBefore, '12')
|
||
this.transBefore = this.$store.state.transBefore
|
||
this.$store.state.noChangeData = JSON.parse(JSON.stringify(this.transBefore))
|
||
// // 告诉父组件渲染完毕
|
||
this.$emit('tellParentsShowClos', false)
|
||
this.startsyui = false
|
||
}
|
||
},
|
||
listInputVal: {
|
||
handler () {
|
||
this.$store.state.listInputVal = this.listInputVal
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
lineInputVal: {
|
||
handler () {
|
||
this.$store.state.lineInputVal = this.lineInputVal
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
tableData: {
|
||
handler () {
|
||
this.$store.state.tableData = this.tableData
|
||
// console.log('需要保存默认的数据')
|
||
this.needSaveDefaultData()
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
tableLine: {
|
||
handler () {
|
||
this.$store.state.tableLine = this.tableLine
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
transBefore: {
|
||
handler (newval, oldval) {
|
||
console.log(newval, 1020202)
|
||
if (newval && this.transBefore) {
|
||
console.log(this.transBefore, 'kkkkkkkkkkkkkkkkkkkkk')
|
||
this.showTable()
|
||
}
|
||
},
|
||
immediate: false,
|
||
deep: true
|
||
},
|
||
indStatic (newValue, oldValue) {
|
||
console.log(newValue, 'newValue1212')
|
||
console.log(this.transBefore, 'this.transBefore111000')
|
||
if (this.transBefore) {
|
||
this.chartsShow()
|
||
}
|
||
},
|
||
'chartsStatusMegger.transState': {
|
||
handler () {
|
||
this.transState = this.chartsStatusMegger.transState
|
||
if (this.transBefore) {
|
||
this.showTable()
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
'chartsStatusMegger.computedStatic': {
|
||
handler () {
|
||
if (this.transBefore) {
|
||
console.log(this.chartsStatusMegger, 1255555)
|
||
this.nowDataTJ = this.chartsStatusMegger.computedStatic
|
||
this.dataTJComput()
|
||
// 重新渲染表
|
||
this.$nextTick(() => {
|
||
console.log(this.$refs.table, 'this.$refs.table')
|
||
if (this.$refs.table !== undefined) {
|
||
this.$refs.table.doLayout()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
// 监听行列图表转换
|
||
rowColIndex (newVal, oldVal) {
|
||
if (this.transBefore) {
|
||
this.chartsShow()
|
||
}
|
||
},
|
||
// 监听左侧菜单的数据变化
|
||
defaultDataRight: {
|
||
handler (val) {
|
||
console.log(val, '左侧数据变化')
|
||
this.$store.state.defaultShowDataState = false
|
||
// 还原转置状态和行列状态
|
||
this.transState = true
|
||
this.chartsStatusMegger.transState = this.transState
|
||
if (this.$route.query.type !== 'area') {
|
||
this.$store.state.SelecttDimension = {
|
||
row: 'sj',
|
||
col: 'zb'
|
||
}
|
||
} else {
|
||
this.$store.state.SelecttDimension = {
|
||
row: 'sj',
|
||
col: 'dq'
|
||
}
|
||
}
|
||
if (val) {
|
||
// 初始化公共数据
|
||
// console.log(this.defaultDataRight, '获取左侧选中数据555')
|
||
this.leftState = false
|
||
// 恢复高级查询状态
|
||
this.$store.state.advancedSearchState = false
|
||
// 调接口拿到所有当前分类下的所有的指标、地区、时间
|
||
this.getInfor([val.id])
|
||
}
|
||
// 默认数据关闭
|
||
},
|
||
immediate: false,
|
||
deep: true
|
||
},
|
||
// 监听下拉状态变化
|
||
stateTells (val) {
|
||
console.log(val, 'jjjjjj')
|
||
// if (val) {
|
||
// if (JSON.parse(sessionStorage.getItem('classFiyData')) && JSON.parse(sessionStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id)) {
|
||
// this.transBefore = {}
|
||
// this.transBefore.tableExplain = JSON.parse(sessionStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.tableExplain
|
||
// this.transBefore.timeArr = JSON.parse(sessionStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.timeArr.map((item, index) => { return item.toString() })
|
||
// this.transBefore.termsName = JSON.parse(sessionStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.termsName
|
||
// this.transBefore.termsExplain = JSON.parse(sessionStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.termsExplain
|
||
// this.transBefore.areaName = JSON.parse(sessionStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.areaName
|
||
// this.transBefore.transBeforeTermsData = JSON.parse(sessionStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.transBeforeTermsData
|
||
// this.transBefore.transBeforeAreaData = JSON.parse(sessionStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.transBeforeAreaData
|
||
// console.log(this.transBefore, '000')
|
||
// // this.$store.state.transdtr = true
|
||
// // 全局总数据
|
||
// this.$store.state.transBefore = this.transBefore
|
||
// // 全局永久不变数据
|
||
// this.$store.state.noChangeData = JSON.parse(JSON.stringify(this.transBefore))
|
||
// }
|
||
// }
|
||
},
|
||
// 筛选
|
||
statesDf (val) {
|
||
if (val === 2) {
|
||
this.transBefore = {}
|
||
this.transBefore.tableExplain = this.$store.state.transBefore.tableExplain
|
||
this.transBefore.timeArr = this.$store.state.transBefore.timeArr
|
||
this.transBefore.termsName = this.$store.state.transBefore.termsName
|
||
this.transBefore.termsExplain = this.$store.state.transBefore.termsExplain
|
||
this.transBefore.areaName = this.$store.state.transBefore.areaName
|
||
this.transBefore.transBeforeTermsData = this.$store.state.transBefore.transBeforeTermsData
|
||
this.transBefore.transBeforeAreaData = this.$store.state.transBefore.transBeforeAreaData
|
||
// 重新渲染表格
|
||
this.$refs.table.doLayout()
|
||
// 告诉父组件改完了
|
||
this.$emit('tellAreadly', 1)
|
||
}
|
||
},
|
||
showTableState (val) { // 监听清除空行空列后重新渲染表格
|
||
if (val) {
|
||
this.transBefore = {}
|
||
this.transBefore.tableExplain = this.$store.state.transBefore.tableExplain
|
||
this.transBefore.timeArr = this.$store.state.transBefore.timeArr
|
||
this.transBefore.termsName = this.$store.state.transBefore.termsName
|
||
this.transBefore.termsExplain = this.$store.state.transBefore.termsExplain
|
||
this.transBefore.areaName = this.$store.state.transBefore.areaName
|
||
this.transBefore.transBeforeTermsData = this.$store.state.transBefore.transBeforeTermsData
|
||
this.transBefore.transBeforeAreaData = this.$store.state.transBefore.transBeforeAreaData
|
||
this.$store.state.noChangeData = JSON.parse(JSON.stringify(this.transBefore))
|
||
this.$refs.table.doLayout()
|
||
// 告诉父组件重新渲染表格完毕
|
||
this.$emit('statertyui', false)
|
||
}
|
||
},
|
||
// 监听地区数据维度转换状态
|
||
areaDimensionStateS (newVal) {
|
||
console.log(newVal, '1011111')
|
||
// if (newVal) {
|
||
if (this.$store.state.transBefore !== null) {
|
||
this.transBefore = {}
|
||
this.transBefore.tableExplain = this.$store.state.transBefore.tableExplain
|
||
this.transBefore.timeArr = this.$store.state.transBefore.timeArr
|
||
this.transBefore.termsName = this.$store.state.transBefore.termsName
|
||
this.transBefore.termsExplain = this.$store.state.transBefore.termsExplain
|
||
this.transBefore.areaName = this.$store.state.transBefore.areaName
|
||
this.transBefore.transBeforeTermsData = this.$store.state.transBefore.transBeforeTermsData
|
||
this.transBefore.transBeforeAreaData = this.$store.state.transBefore.transBeforeAreaData
|
||
} else {
|
||
this.transBefore = null
|
||
}
|
||
this.$store.state.noChangeData = JSON.parse(JSON.stringify(this.transBefore))
|
||
this.$refs.table.doLayout()
|
||
this.showTable()
|
||
// 告诉父组件重新渲染表格完毕
|
||
this.$emit('statertyui', false)
|
||
// }
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* @desc 显示默认的数据
|
||
*
|
||
* */
|
||
showSaveDefaultData () {
|
||
|
||
},
|
||
/**
|
||
* @desc 调接口显示表格数据
|
||
* @param valStrinf string 当前选中的时间
|
||
*
|
||
* */
|
||
downLaSelectArea (valStrinf) {
|
||
console.log(valStrinf, '555222000选中')
|
||
console.log(this.$store.state.AreaAllCountData, 'kkkkk数据')
|
||
if (this.$store.state.defaultShowDataState && this.labelAreaNum) {
|
||
this.transBefore = this.$store.state.transBefore
|
||
} else {
|
||
if (!this.$store.state.advancedSearchState) {
|
||
if (this.$store.state.newSelectDaaState) {
|
||
this.$store.state.labelIndexName = valStrinf
|
||
this.$store.state.areaIndexName = ''
|
||
this.selectState = 1
|
||
} else {
|
||
this.$store.state.labelIndexName = ''
|
||
this.$store.state.areaIndexName = valStrinf
|
||
this.selectState = 2
|
||
}
|
||
this.getDatas()
|
||
} else {
|
||
console.log(this.leftState, '走这里')
|
||
if (this.$store.state.newSelectDaaState) {
|
||
this.$store.state.labelIndexName = valStrinf
|
||
this.$store.state.areaIndexName = ''
|
||
this.selectState = 1
|
||
} else {
|
||
this.$store.state.labelIndexName = ''
|
||
this.$store.state.areaIndexName = valStrinf
|
||
this.selectState = 2
|
||
}
|
||
this.advancedSearchDataShow()
|
||
}
|
||
}
|
||
this.labelAreaNum = false
|
||
},
|
||
/**
|
||
* @desc 计算需要保存默认的数据
|
||
* @return 返回一个保存默认数据的对象改变store中的数据
|
||
*
|
||
* */
|
||
needSaveDefaultData () {
|
||
// console.log(this.tableLine)
|
||
// console.log(this.tableData)
|
||
},
|
||
/**
|
||
* @desc 计算列宽，返回每一列中内容最大的那个的内容长度
|
||
* @return 返回一个含有每列最大的内容的长度的数组
|
||
*
|
||
* */
|
||
lieWidthComputed () {
|
||
// 总数据
|
||
let AllCountData = (this.tableData.map((item, index) => { return Object.values(item) }))
|
||
AllCountData.unshift(this.tableLine.map((item, index) => { return item.label }))
|
||
// 将数据进行行列转换
|
||
let zhuanChange = AllCountData[0].map((col, index) => {
|
||
return AllCountData.map((row, key) => {
|
||
return row[index].length
|
||
})
|
||
})
|
||
console.log(zhuanChange, 'AllCountData')
|
||
this.lieWidthArr = zhuanChange.map((item, index) => {
|
||
return item.reduce((total, currentValue) => {
|
||
return total > currentValue ? total : currentValue
|
||
})
|
||
})
|
||
console.log(this.lieWidthArr, 'this.lieWidthArr')
|
||
this.$nextTick(() => {
|
||
this.$refs.table.doLayout()
|
||
})
|
||
},
|
||
/**
|
||
* @desc 请求时间完成 后就执行
|
||
*
|
||
* */
|
||
/* eslint-disable */
|
||
downLaSelects() {
|
||
console.log(this.$store.state.advancedSearchState, 'this.$store.state.advancedSearchState0000000000000000000000')
|
||
if (this.leftState) {
|
||
if (!this.$store.state.advancedSearchState) {
|
||
this.getDatas()
|
||
} else {
|
||
this.advancedSearchDataShow()
|
||
}
|
||
}
|
||
},
|
||
// 获取所有当前分类下的所有的指标、地区、时间
|
||
getInfor(classifyId) {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'data/data/classify-detail',
|
||
params: {
|
||
id: classifyId
|
||
}
|
||
}).then(res => {
|
||
console.log(res, '获取分类下的地区、指标、时间')
|
||
// 请求接口完成 请求成功
|
||
if (res.data.code === 200) {
|
||
this.$store.state.dataArealabelTime = res.data.data
|
||
// 该分类下有数据
|
||
this.$store.state.classifyIdDataState = true
|
||
} else {
|
||
this.$store.state.dataArealabelTime = res.data.data
|
||
// 该分类下无数据
|
||
this.$store.state.classifyIdDataState = false
|
||
// =======================
|
||
this.$store.state.transdtr = true
|
||
this.transBefore = null
|
||
// 全局总数据
|
||
this.$store.state.transBefore = null
|
||
this.$store.state.allNochangeInitData = null
|
||
this.$store.state.noChangeData = null
|
||
// 调用父组件的comTime方法告诉父组件重置状态
|
||
this.$store.state.noDataState = false
|
||
this.leftState = true
|
||
}
|
||
if (this.$store.state.defaultShowDataState && this.$route.query.type !== 'area') {
|
||
this.$store.state.transdtr = true
|
||
// 全局总数据
|
||
this.transBefore = this.$store.state.transBefore
|
||
this.leftState = true
|
||
console.log(this.$store.state.transBefore, 'this.transBefore if')
|
||
console.log(this.$store.state.SelecttDimension, 'this.$store.state.SelecttDimension')
|
||
if (this.$store.state.SelecttDimension.col === 'zb' && this.$store.state.SelecttDimension.row === 'sj') {
|
||
this.transState = true
|
||
} else if (this.$store.state.SelecttDimension.col === 'sj' && this.$store.state.SelecttDimension.row === 'zb') {
|
||
this.transState = false
|
||
}
|
||
this.chartsStatusMegger.transState = this.transState
|
||
} else {
|
||
console.log(this.$store.state.transBefore, 'this.transBefore else')
|
||
this.$parent.childChartsCutShow()
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
// 非地区数据转置
|
||
wrongAreaTrans() {
|
||
if (this.transState) { // 当时间在表头上的时候
|
||
this.objCompBefore = new ComputedData(this.transBefore)
|
||
var objDatasBefore = this.objCompBefore.comTransBefore()
|
||
this.tableLine = objDatasBefore.tableLine
|
||
this.tableData = objDatasBefore.countData
|
||
console.log(objDatasBefore, 'objDatasBefore')
|
||
} else { // 当指标名称在表头上
|
||
this.objCompBefore = new ComputedData(this.transBefore)
|
||
var objDatasAfter = this.objCompBefore.comTransAfter()
|
||
this.tableLine = objDatasAfter.tableLine
|
||
this.tableData = objDatasAfter.countData
|
||
console.log(objDatasAfter, 'objDatasAfter')
|
||
}
|
||
// 计算列宽的数组
|
||
this.lieWidthComputed()
|
||
},
|
||
// 地区数据转置
|
||
areaTrans() {
|
||
console.log(this.transState, 'this.transState')
|
||
console.log(this.$store.state.SelecttDimension, '2020')
|
||
if (this.$route.query.type === 'area' && this.$store.state.transClickState) {
|
||
let transpositionData = JSON.parse(JSON.stringify(this.transBefore.transBeforeAreaData))
|
||
this.transBefore.transBeforeAreaData = transpositionData[0].map(function (col, index) {
|
||
return transpositionData.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
console.log(this.transBefore, 'transpositionData')
|
||
// let transpositionDatas = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData.transBeforeAreaData))
|
||
// this.$store.state.allNochangeInitData.transBeforeAreaData = transpositionDatas[0].map(function (col, index) {
|
||
// return transpositionDatas.map((row, key) => {
|
||
// return row[index]
|
||
// })
|
||
// })
|
||
console.log(this.$store.state.allNochangeInitData.transBeforeAreaData, 'this.$store.state.allNochangeInitData.transBeforeAreaData')
|
||
// 数据转置完成恢复
|
||
this.$store.state.transClickState = false
|
||
}
|
||
if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'dq') {
|
||
this.objCompBefore = new ComputedData(this.transBefore)
|
||
var objDatasBefore = this.objCompBefore.comTransAreabefore()
|
||
this.tableLine = objDatasBefore.tableLine
|
||
this.tableData = objDatasBefore.countData
|
||
console.log(objDatasBefore, 'objDatasAfter1')
|
||
} else if (this.$store.state.SelecttDimension.row === 'dq' && this.$store.state.SelecttDimension.col === 'sj') {
|
||
let objCompAfter = new ComputedData(this.transBefore)
|
||
var objDatasAfter = objCompAfter.comTransAreaAfter()
|
||
this.tableLine = objDatasAfter.tableLine
|
||
this.tableData = objDatasAfter.countData
|
||
console.log(objDatasAfter, 'objDatasAfter2')
|
||
this.objCompBefore = objCompAfter
|
||
} else if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'zb') {
|
||
console.log(this.transBefore, 'this.transBeforethis.transBeforethis.transBefore')
|
||
let objCompAfter = new ComputedData(this.transBefore)
|
||
var comTransAreabeforeLabelTime = objCompAfter.comTransAreabeforeLabelTime()
|
||
this.tableLine = comTransAreabeforeLabelTime.tableLine
|
||
this.tableData = comTransAreabeforeLabelTime.countData
|
||
console.log(comTransAreabeforeLabelTime, 'comTransAreabeforeLabelTime')
|
||
this.objCompBefore = objCompAfter
|
||
} else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'sj') {
|
||
let objCompAfter = new ComputedData(this.transBefore)
|
||
var comTransAreabeforeTimeLabel = objCompAfter.comTransAreabeforeTimeLabel()
|
||
this.tableLine = comTransAreabeforeTimeLabel.tableLine
|
||
this.tableData = comTransAreabeforeTimeLabel.countData
|
||
console.log(comTransAreabeforeTimeLabel, 'comTransAreabeforeTimeLabel')
|
||
this.objCompBefore = objCompAfter
|
||
} else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'dq') {
|
||
let objCompAfter = new ComputedData(this.transBefore)
|
||
var comTransAreabeforeAreaLabel = objCompAfter.comTransAreabeforeAreaLabel()
|
||
this.tableLine = comTransAreabeforeAreaLabel.tableLine
|
||
this.tableData = comTransAreabeforeAreaLabel.countData
|
||
console.log(comTransAreabeforeAreaLabel, 'comTransAreabeforeAreaLabel')
|
||
this.objCompBefore = objCompAfter
|
||
} else if (this.$store.state.SelecttDimension.row === 'dq' && this.$store.state.SelecttDimension.col === 'zb') {
|
||
let objCompAfter = new ComputedData(this.transBefore)
|
||
var comTransAreabeforeLabelArea = objCompAfter.comTransAreabeforeLabelArea()
|
||
this.tableLine = comTransAreabeforeLabelArea.tableLine
|
||
this.tableData = comTransAreabeforeLabelArea.countData
|
||
console.log(comTransAreabeforeLabelArea, 'comTransAreabeforeLabelArea')
|
||
this.objCompBefore = objCompAfter
|
||
}
|
||
// 计算列宽的数组
|
||
this.lieWidthComputed()
|
||
},
|
||
// 渲染列表数据
|
||
showTable() {
|
||
// 改变转置状态
|
||
console.log(121212121)
|
||
if (this.$route.query.type !== 'area') { // 非地区数据转置
|
||
this.wrongAreaTrans()
|
||
} else { // 地区数据转置
|
||
this.areaTrans()
|
||
console.log(10000)
|
||
}
|
||
},
|
||
// 指标解释
|
||
indexExplain(labIndexName) {
|
||
if (this.transBefore.termsName.indexOf(labIndexName) !== -1) {
|
||
console.log('指标解释：', this.transBefore.termsExplain[this.transBefore.termsName.indexOf(labIndexName)])
|
||
this.$store.state.labelExplainData = this.transBefore.termsExplain[this.transBefore.termsName.indexOf(labIndexName)]
|
||
this.$store.state.labelExplainState = true
|
||
}
|
||
},
|
||
// 统计数据对行，对列处理
|
||
dataTJComput() {
|
||
if (this.nowDataTJ.stateType === 'line') {
|
||
switch (this.nowDataTJ.text) {
|
||
case '无':
|
||
break
|
||
case 'SUM求和':
|
||
let datartSUM = this.objCompBefore.dataSumLine()
|
||
this.tableLine = datartSUM.tableLine
|
||
this.tableData = datartSUM.countData
|
||
console.log(datartSUM, 'sum')
|
||
break
|
||
case 'x平均数':
|
||
let datartAVG = this.objCompBefore.dataAVGLine()
|
||
this.tableLine = datartAVG.tableLine
|
||
this.tableData = datartAVG.countData
|
||
console.log(datartAVG, 'AVG')
|
||
break
|
||
case 'MAX最大值':
|
||
let datartMAX = this.objCompBefore.dataMAXLine()
|
||
this.tableLine = datartMAX.tableLine
|
||
this.tableData = datartMAX.countData
|
||
console.log(datartMAX, 'MAX')
|
||
break
|
||
case 'MIN最小值':
|
||
let datartMIN = this.objCompBefore.dataMINLine()
|
||
this.tableLine = datartMIN.tableLine
|
||
this.tableData = datartMIN.countData
|
||
console.log(datartMIN, 'MIN')
|
||
break
|
||
case 'MD中位数':
|
||
let datartMD = this.objCompBefore.dataMDLine()
|
||
this.tableLine = datartMD.tableLine
|
||
this.tableData = datartMD.countData
|
||
console.log(datartMD, 'MD')
|
||
break
|
||
case 'MO众数':
|
||
let datartMO = this.objCompBefore.dataMOLine()
|
||
this.tableLine = datartMO.tableLine
|
||
this.tableData = datartMO.countData
|
||
console.log(datartMO, 'MO')
|
||
break
|
||
case 'S²方差':
|
||
let datartSS = this.objCompBefore.dataSSLine()
|
||
this.tableLine = datartSS.tableLine
|
||
this.tableData = datartSS.countData
|
||
console.log(datartSS, 'SS')
|
||
break
|
||
case 'S标准差':
|
||
let datartS = this.objCompBefore.dataSLine()
|
||
this.tableLine = datartS.tableLine
|
||
this.tableData = datartS.countData
|
||
console.log(datartS, 'S')
|
||
break
|
||
}
|
||
} else {
|
||
switch (this.nowDataTJ.text) {
|
||
case '无':
|
||
break
|
||
case 'SUM求和':
|
||
let datartSUM = this.objCompBefore.dataSumList()
|
||
this.tableLine = datartSUM.tableLine
|
||
this.tableData = datartSUM.countData
|
||
console.log(datartSUM, 'sum')
|
||
break
|
||
case 'x平均数':
|
||
let datartAVG = this.objCompBefore.dataAVGList()
|
||
this.tableLine = datartAVG.tableLine
|
||
this.tableData = datartAVG.countData
|
||
console.log(datartAVG, 'AVG')
|
||
break
|
||
case 'MAX最大值':
|
||
let datartMAX = this.objCompBefore.dataMAXList()
|
||
this.tableLine = datartMAX.tableLine
|
||
this.tableData = datartMAX.countData
|
||
console.log(datartMAX, 'MAX')
|
||
break
|
||
case 'MIN最小值':
|
||
let datartMIN = this.objCompBefore.dataMINList()
|
||
this.tableLine = datartMIN.tableLine
|
||
this.tableData = datartMIN.countData
|
||
console.log(datartMIN, 'MIN')
|
||
break
|
||
case 'MD中位数':
|
||
let datartMD = this.objCompBefore.dataMDList()
|
||
this.tableLine = datartMD.tableLine
|
||
this.tableData = datartMD.countData
|
||
console.log(datartMD, 'MD')
|
||
break
|
||
case 'MO众数':
|
||
let datartMO = this.objCompBefore.dataMOList()
|
||
this.tableLine = datartMO.tableLine
|
||
this.tableData = datartMO.countData
|
||
console.log(datartMO, 'MO')
|
||
break
|
||
case 'S²方差':
|
||
let datartSS = this.objCompBefore.dataSSList()
|
||
this.tableLine = datartSS.tableLine
|
||
this.tableData = datartSS.countData
|
||
console.log(datartSS, 'SS')
|
||
break
|
||
case 'S标准差':
|
||
let datartS = this.objCompBefore.dataSList()
|
||
this.tableLine = datartS.tableLine
|
||
this.tableData = datartS.countData
|
||
console.log(datartS, 'S')
|
||
break
|
||
}
|
||
}
|
||
this.chartsShow()
|
||
// 计算列宽的数组
|
||
this.lieWidthComputed()
|
||
},
|
||
// 图表渲染
|
||
chartsShow() {
|
||
// 改变值行值
|
||
console.log(this.$route.query.type, '1010111')
|
||
console.log(this.indStatic, 'this.indStatic')
|
||
console.log(this.objCompBefore, 'this.objCompBefore')
|
||
switch (this.indStatic) {
|
||
case 1:
|
||
if (this.pieStatic) {
|
||
// 存input列选中的值
|
||
this.listInputVal = [1, 2, 3] // 初始化选中3个
|
||
// 存input行选中的值
|
||
this.lineInputVal = [0, 1, 2, 3]// 初始化选中4个
|
||
}
|
||
console.log('k11111111111')
|
||
this.objCompBefore.inputSelectData(this.listInputVal, this.lineInputVal)
|
||
this.rowColIndex === 0 ? (this.echartsDatarts = this.objCompBefore.dataVerticalMapRow()) : (this.echartsDatarts = this.objCompBefore.dataVerticalMapCol())
|
||
this.pieStatic = false
|
||
// this.lineStatic = true
|
||
break
|
||
case 2:
|
||
if (this.pieStatic) {
|
||
// 存input列选中的值
|
||
this.listInputVal = [1, 2, 3] // 初始化选中3个
|
||
// 存input行选中的值
|
||
this.lineInputVal = [0, 1, 2, 3]// 初始化选中4个
|
||
console.log(2121)
|
||
}
|
||
this.objCompBefore.inputSelectData(this.listInputVal, this.lineInputVal)
|
||
this.rowColIndex === 0 ? (this.echartsDatarts = this.objCompBefore.dataAcrossMapRow()) : (this.echartsDatarts = this.objCompBefore.dataAcrossMapCol())
|
||
this.pieStatic = false
|
||
// this.lineStatic = true
|
||
break
|
||
case 3:
|
||
console.log(this.lineStatic, this.rowColIndex, '状态改变')
|
||
console.log(this.listInputVal, this.lineInputVal, '行列数据前')
|
||
console.log(this.lineStatic, this.rowColIndex, '状态改变')
|
||
if (this.lineStatic && this.rowColIndex === 0) {
|
||
console.log(10086)
|
||
this.lineInputVal = [0]
|
||
this.listInputVal = [1, 2, 3]
|
||
// this.lineStatic = true
|
||
} else if (!this.lineStatic && this.rowColIndex === 1) {
|
||
this.lineInputVal = [0, 1, 2, 3]
|
||
this.listInputVal = [1]
|
||
// this.lineStatic = true
|
||
console.log(10087)
|
||
}
|
||
console.log(this.listInputVal, this.lineInputVal, '行列数据后')
|
||
this.objCompBefore.inputSelectData(this.listInputVal, this.lineInputVal)
|
||
this.rowColIndex === 0 ? (this.echartsDatarts = this.objCompBefore.dataPieMapRow()) : (this.echartsDatarts = this.objCompBefore.dataPieMapCol())
|
||
this.pieStatic = true
|
||
if (this.rowColIndex === 0) {
|
||
this.lineStatic = false
|
||
} else if (this.rowColIndex === 1) {
|
||
this.lineStatic = true
|
||
}
|
||
break
|
||
case 4:
|
||
if (this.pieStatic) {
|
||
// 存input列选中的值
|
||
this.listInputVal = [1, 2, 3] // 初始化选中3个
|
||
// 存input行选中的值
|
||
this.lineInputVal = [0, 1, 2, 3]// 初始化选中4个
|
||
}
|
||
this.objCompBefore.inputSelectData(this.listInputVal, this.lineInputVal)
|
||
this.rowColIndex === 0 ? (this.echartsDatarts = this.objCompBefore.dataBrokenLineMapRow()) : (this.echartsDatarts = this.objCompBefore.dataBrokenLineMapCol())
|
||
this.pieStatic = false
|
||
// this.lineStatic = true
|
||
break
|
||
}
|
||
},
|
||
// 图表行列转换
|
||
rowColInd(ind) {
|
||
// 0行1列
|
||
this.rowColIndex = ind
|
||
console.log(ind, this.lineStatic)
|
||
// 重置默认
|
||
if (ind === 0) {
|
||
this.lineStatic = true
|
||
} else if (ind === 1) {
|
||
this.lineStatic = false
|
||
}
|
||
},
|
||
// 每列input选中
|
||
listInput(ind) {
|
||
console.log(ind, '列')
|
||
if (this.indStatic === 3 && this.rowColIndex === 1) {
|
||
console.log(this.listInputVal, this.lineInputVal, '好哥们1')
|
||
this.listInputVal = [ind]
|
||
// this.$refs.lineInputSelect[ind].checked = true
|
||
console.log(this.listInputVal, this.lineInputVal, '好哥们2')
|
||
} else {
|
||
this.listInputVal.indexOf(ind) === -1 ? (this.listInputVal.push(ind)) : (this.listInputVal.splice(this.listInputVal.indexOf(ind), 1))
|
||
}
|
||
this.chartsShow()
|
||
},
|
||
// 每行input选中
|
||
lineInput(ind) {
|
||
console.log(ind, '行')
|
||
console.log(this.rowColIndex, '行this.rowColIndex')
|
||
console.log(this.indStatic, '行this.indStatic')
|
||
console.log(this.$refs.lineInputSelect, '行this.lineInputSelect')
|
||
if (this.indStatic === 3 && this.rowColIndex === 0) {
|
||
console.log(this.listInputVal, this.lineInputVal, '好哥们1')
|
||
this.lineInputVal = [ind]
|
||
// this.$refs.lineInputSelect[ind].checked = true
|
||
console.log(this.listInputVal, this.lineInputVal, '好哥们2')
|
||
} else {
|
||
this.lineInputVal.indexOf(ind) === -1 ? (this.lineInputVal.push(ind)) : (this.lineInputVal.splice(this.lineInputVal.indexOf(ind), 1))
|
||
}
|
||
this.chartsShow()
|
||
},
|
||
// 获取后台数据表中的数据
|
||
getDatas() {
|
||
if (!this.$store.state.advancedSearchState) {
|
||
// 初始化计算数据
|
||
if (this.transBefore) {
|
||
this.objCompBefore.initAllData()
|
||
}
|
||
console.log(this.$store.state.selectData, '执行')
|
||
console.log(this.$store.state.selectDataLeft, '左侧选中')
|
||
if (this.$store.state.selectDataLeft) {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'data/data/detail',
|
||
params: {
|
||
type: this.$route.query.type === 'area' ? 2 : 1, // 1非地区 2地区
|
||
table_name: this.$store.state.selectDataLeft.table_name, // 表名
|
||
id: this.$store.state.selectDataLeft.id, // 分类id
|
||
area: this.$store.state.areaIndexName, // 选中的地区
|
||
quota: this.$store.state.labelIndexName, // 选中的指标
|
||
cate: this.selectState, // 1筛选指标 2筛选地区
|
||
f: this.$store.state.selectfilter, // year=>年度分类，monthly=>月度分类，quarter=>季度分类
|
||
data: this.$store.state.selectData // 时间
|
||
}
|
||
}).then(res => {
|
||
console.log(res, '获取数据展示数据')
|
||
// 请求接口完成 请求成功
|
||
if (res.data.code === 200) {
|
||
if (res.data.data.areaName.length !== 0) {
|
||
if (this.downLaSelect.area === '' || this.downLaSelect.label === '') {
|
||
console.log(this.downLaSelect.area, 'this.downLaSelect.area')
|
||
let brrtf = {}
|
||
// this.transBefore = {}
|
||
brrtf.tableExplain = res.data.data.tableExplain
|
||
brrtf.timeArr = res.data.data.timeArr.map((item, index) => { return item.toString() })
|
||
brrtf.termsName = res.data.data.termsName
|
||
brrtf.termsExplain = res.data.data.termsExplain
|
||
brrtf.areaName = res.data.data.areaName
|
||
if (this.$route.query.type === 'area') {
|
||
console.log('走这里')
|
||
brrtf.transBeforeAreaData = res.data.data.transBeforeAreaData[0]
|
||
brrtf.transBeforeTermsData = res.data.data.transBeforeTermsData
|
||
} else {
|
||
brrtf.transBeforeAreaData = res.data.data.transBeforeAreaData
|
||
brrtf.transBeforeTermsData = res.data.data.transBeforeTermsData[0]
|
||
}
|
||
console.log(brrtf, 'brrtf')
|
||
this.transBefore = brrtf
|
||
console.log(this.transBefore, '000')
|
||
this.$store.state.transdtr = true
|
||
// 全局总数据
|
||
this.$store.state.transBefore = this.transBefore
|
||
// 全局永久不变数据
|
||
this.$store.state.noChangeData = JSON.parse(JSON.stringify(this.transBefore))
|
||
if (this.selectState === 1) {
|
||
this.$store.state.labelArea = this.transBefore.termsName
|
||
} else {
|
||
this.$store.state.labelArea = this.transBefore.areaName
|
||
}
|
||
this.$store.state.AreaAllCountData = res.data.data
|
||
// 告诉父组件我完成任务重置状态
|
||
this.$emit('prentsState', false)
|
||
console.log(this.$store.state.noChangeData, 'this.$store.state.noChangeDatathis.$store.state.noChangeDatathis.$store.state.noChangeData')
|
||
} else {
|
||
this.transBefore = {}
|
||
this.transBefore.tableExplain = res.data.data.tableExplain
|
||
this.transBefore.timeArr = res.data.data.timeArr.map((item, index) => { return item.toString() })
|
||
this.transBefore.termsName = res.data.data.termsName
|
||
this.transBefore.termsExplain = res.data.data.termsExplain
|
||
this.transBefore.areaName = res.data.data.areaName
|
||
this.transBefore.transBeforeTermsData = res.data.data.transBeforeTermsData
|
||
this.transBefore.transBeforeAreaData = res.data.data.transBeforeAreaData
|
||
console.log(this.transBefore, '000')
|
||
this.$store.state.transdtr = true
|
||
// 全局总数据
|
||
this.$store.state.transBefore = this.transBefore
|
||
// 全局永久不变数据
|
||
this.$store.state.noChangeData = JSON.parse(JSON.stringify(this.transBefore))
|
||
|
||
// 告诉父组件我完成任务重置状态
|
||
this.$emit('prentsState', false)
|
||
}
|
||
} else {
|
||
this.transBefore = {}
|
||
this.transBefore.tableExplain = res.data.data.tableExplain
|
||
this.transBefore.timeArr = res.data.data.timeArr.map((item, index) => { return item.toString() })
|
||
this.transBefore.termsName = res.data.data.termsName
|
||
this.transBefore.termsExplain = res.data.data.termsExplain
|
||
this.transBefore.areaName = res.data.data.areaName
|
||
this.transBefore.transBeforeTermsData = res.data.data.transBeforeTermsData
|
||
this.transBefore.transBeforeAreaData = res.data.data.transBeforeAreaData
|
||
console.log(this.transBefore, '000')
|
||
this.$store.state.transdtr = true
|
||
// 全局总数据
|
||
this.$store.state.transBefore = this.transBefore
|
||
// 全局永久不变数据
|
||
this.$store.state.noChangeData = JSON.parse(JSON.stringify(this.transBefore))
|
||
// 告诉父组件我完成任务重置状态
|
||
this.$emit('prentsState', false)
|
||
}
|
||
this.hangZhiState = true
|
||
this.$emit('update:loading', false)
|
||
} else {
|
||
this.transBefore = null
|
||
// this.$store.state.transdtr = null
|
||
// 全局总数据
|
||
this.$store.state.transBefore = null
|
||
this.$store.state.noChangeData = null
|
||
// 调用父组件的comTime方法告诉父组件重置状态
|
||
this.$parent.comTime({ name: '', extendData: '', active: true })
|
||
this.$store.state.noDataState = false
|
||
this.$emit('update:loading', false)
|
||
}
|
||
if (this.$route.query.type !== 'area') {
|
||
this.$store.state.SelecttDimension.col = 'zb'
|
||
this.$store.state.SelecttDimension.row = 'sj'
|
||
}
|
||
this.leftState = true
|
||
this.$store.state.allNochangeInitData = JSON.parse(JSON.stringify(this.transBefore))
|
||
}).catch((fail) => {
|
||
console.log(fail, 2369)
|
||
})
|
||
}
|
||
} else {
|
||
this.transBefore = this.$store.state.transBefore
|
||
this.$store.state.noChangeData = JSON.parse(JSON.stringify(this.transBefore))
|
||
}
|
||
},
|
||
// 高级查询数据渲染
|
||
advancedSearchDataShow() {
|
||
this.$axios({
|
||
method: 'POST',
|
||
url: 'data/data/query',
|
||
data: {
|
||
type: this.$route.query.type === 'area' ? 2 : 1,
|
||
data: this.$store.state.advanceData,
|
||
area: this.$store.state.areaIndexName,
|
||
quota: this.$store.state.labelIndexName,
|
||
cate: this.selectState,
|
||
f: this.$store.state.selectDataLeft.f,
|
||
date: this.$store.state.selectData
|
||
}
|
||
}).then(res => {
|
||
console.log(res, '高级查询数据展示555666')
|
||
// 请求接口完成 请求成功
|
||
if (res.data.code === 200) {
|
||
let transBefore = {}
|
||
transBefore.tableExplain = res.data.data.tableExplain
|
||
transBefore.timeArr = res.data.data.timeArr.map((item, index) => { return item.toString() })
|
||
transBefore.termsName = res.data.data.termsName
|
||
transBefore.termsExplain = res.data.data.termsExplain
|
||
transBefore.areaName = res.data.data.areaName
|
||
transBefore.transBeforeTermsData = res.data.data.transBeforeTermsData
|
||
transBefore.transBeforeAreaData = res.data.data.transBeforeAreaData[0]
|
||
console.log(transBefore, '000')
|
||
this.$store.state.transdtr = true
|
||
// 全局总数据
|
||
this.$store.state.transBefore = transBefore
|
||
this.transBefore = transBefore
|
||
// 全局永久不变数据
|
||
this.$store.state.noChangeData = JSON.parse(JSON.stringify(transBefore))
|
||
this.$emit('update:loading', false)
|
||
} else {
|
||
this.transBefore = null
|
||
this.$store.state.transBefore = null
|
||
this.$store.state.noDataState = false
|
||
this.$emit('update:loading', false)
|
||
}
|
||
// 改变状态
|
||
this.leftState = true
|
||
// 告诉父组件我完成任务重置状态
|
||
this.$emit('prentsState', false)
|
||
this.$store.state.allNochangeInitData = JSON.parse(JSON.stringify(this.transBefore))
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
// 兄弟组件调用此方法实现查询数据重渲染
|
||
brotherFuncShowData() {
|
||
if (this.$store.state.advancedSearchState) {
|
||
this.advancedSearchDataShow()
|
||
} else {
|
||
this.getDatas()
|
||
}
|
||
},
|
||
// 重新初始化表格数据
|
||
initTableData() {
|
||
this.objCompBefore.initAllData()
|
||
}
|
||
},
|
||
computed: {
|
||
// 计算表说明字符串
|
||
computedTableExplain() {
|
||
this.transBefore.tableExplain ? this.transBefore.tableExplain = this.transBefore.tableExplain : this.transBefore.tableExplain = ''
|
||
return this.transBefore.tableExplain.replace(/\\n/gm, "<br/>")
|
||
},
|
||
// 行计算样式
|
||
computedLineSty() {
|
||
return (ind) => {
|
||
// console.log(this.$store.state.allNochangeInitData, 'this.$store.state.allNochangeInitData')
|
||
// console.log(this.transBefore, 'this.transBefores19')
|
||
let styStatic = false
|
||
if (this.transState) {
|
||
if (this.$route.query.type !== 'area') {
|
||
if (ind > (this.$store.state.allNochangeInitData.transBeforeTermsData[0].length)) {
|
||
styStatic = true
|
||
}
|
||
} else {
|
||
if (ind > (this.$store.state.allNochangeInitData.transBeforeAreaData[0].length)) {
|
||
styStatic = true
|
||
}
|
||
}
|
||
} else {
|
||
if (this.$route.query.type !== 'area') {
|
||
if (ind > (this.$store.state.allNochangeInitData.transBeforeTermsData.length)) {
|
||
styStatic = true
|
||
}
|
||
} else {
|
||
if (ind > (this.$store.state.allNochangeInitData.transBeforeAreaData.length)) {
|
||
styStatic = true
|
||
}
|
||
}
|
||
}
|
||
return styStatic
|
||
}
|
||
},
|
||
// 列计算样式
|
||
computedListSty() {
|
||
return (ind) => {
|
||
let styStatic = false
|
||
if (this.transState) {
|
||
if (this.$route.query.type !== 'area') {
|
||
if (ind > (this.$store.state.allNochangeInitData.transBeforeTermsData.length - 1)) {
|
||
styStatic = true
|
||
}
|
||
} else {
|
||
if (ind > (this.$store.state.allNochangeInitData.transBeforeAreaData.length - 1)) {
|
||
styStatic = true
|
||
}
|
||
}
|
||
} else {
|
||
if (this.$route.query.type !== 'area') {
|
||
if (ind > (this.$store.state.allNochangeInitData.transBeforeTermsData[0].length - 1)) {
|
||
styStatic = true
|
||
}
|
||
} else {
|
||
if (ind > (this.$store.state.allNochangeInitData.transBeforeAreaData[0].length - 1)) {
|
||
styStatic = true
|
||
}
|
||
}
|
||
}
|
||
return styStatic
|
||
}
|
||
},
|
||
// 监听全局表数据的的变化从而改变渲染数据
|
||
transBefores() {
|
||
return this.$store.state.allState
|
||
},
|
||
// 计算列宽
|
||
computedWidth() {
|
||
return (strings) => {
|
||
return this.lieWidthArr[strings] * 20
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
// 还原高级查询状态
|
||
// this.$store.state.advancedSearchState = false
|
||
this.startsyui = this.advancedStates
|
||
this.leftState = false
|
||
},
|
||
updated() {
|
||
// 重新渲染表格
|
||
if (this.transBefore) {
|
||
this.$refs.table.doLayout()
|
||
}
|
||
},
|
||
mounted() {
|
||
// console.log(new ComputedData())
|
||
// this.showTable()
|
||
// 转置状态
|
||
this.transState = this.chartsStatusMegger.transState
|
||
this.leftState = false
|
||
if (this.$route.query.defaultLeftId !== 'default') {
|
||
this.$store.state.defaultShowDataState = false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.tishi54 {
|
||
margin-top: 12rem;
|
||
font-size: 2rem;
|
||
text-align: center;
|
||
color: #ccc;
|
||
}
|
||
.chartsCont {
|
||
margin: 1.5rem 0;
|
||
padding: 0 1.5rem;
|
||
& > .tableExplain {
|
||
padding: 0.75rem;
|
||
margin: 1.75rem auto;
|
||
height: 18rem;
|
||
border: 0.0625rem solid rgba(172, 172, 172, 0.38);
|
||
border-radius: 0.5rem;
|
||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||
overflow-y: scroll;
|
||
font-size: 1.2rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 2rem;
|
||
letter-spacing: 0.125rem;
|
||
color: #333333;
|
||
}
|
||
& > .tableExplain::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
// 指标解释
|
||
.slotExplain {
|
||
margin: 0 0.2rem 0 0.6rem;
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
}
|
||
.slotExplain:hover {
|
||
cursor: pointer;
|
||
}
|
||
/deep/ .cell {
|
||
display: flex !important;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
}
|
||
/deep/ .cell > span {
|
||
// white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
/deep/ .cell > span:hover {
|
||
cursor: pointer;
|
||
}
|
||
/deep/ .cell > img {
|
||
display: inline;
|
||
flex-shrink: 0;
|
||
}
|
||
</style>
|