1987 lines
82 KiB
Vue
1987 lines
82 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 首页导航 -->
|
||
<Navs></Navs>
|
||
<!-- content -->
|
||
<section class="content">
|
||
<div class="content_cont">
|
||
<!-- 全局搜索 -->
|
||
<search></search>
|
||
<!-- 主内容 -->
|
||
<div class="mainCont">
|
||
<div class="header">
|
||
<div class="left">{{posaite[dataPos]}}</div>
|
||
<div class="right">
|
||
<img :src="imgurl.pos" alt />
|
||
<span>当前位置：</span>
|
||
<span @click="$router.push('/')">首页</span>
|
||
>
|
||
<span @click="$router.go(0)">数据</span>
|
||
</div>
|
||
</div>
|
||
<!-- 中间部分 -->
|
||
<div class="data_title" v-if="cutStateSeach==='simpleness'">
|
||
<div
|
||
v-for="(item,index) in titleDatas"
|
||
:key="index"
|
||
@mouseover="mouseoverAllCate('hierarchy1',index)"
|
||
@mouseleave="mouseleaveAllCate('hierarchy1',index)"
|
||
@click="clickAllCate('hierarchy1',index)"
|
||
>
|
||
<img :src="item.iconUrl" alt />
|
||
<span v-if="computStatic(index,titleDatas)">{{item.text}}</span>
|
||
<div
|
||
v-if="index===(titleDatas.length-1)||index===(titleDatas.length-2)"
|
||
class="title_relative"
|
||
>
|
||
<div>{{item.text}}</div>
|
||
<div class="title_div" v-if="item.static">
|
||
<div
|
||
v-for="(list,key) in item.secondText"
|
||
:key="key"
|
||
@mouseover="mouseoverCate('hierarchy2',key)"
|
||
@mouseleave="mouseleaveCate('hierarchy2',key)"
|
||
@click.stop="clickCate('hierarchy2',key,list.text)"
|
||
>
|
||
{{list.text}}
|
||
<div class="secondWindow" v-if="list.text==='统计' && list.static">
|
||
<div v-for="(item2,index2) in item.threeText" :key="index2">
|
||
<div
|
||
@mouseover="mouseoverThree('hierarchy3',index2)"
|
||
@mouseleave="mouseleaveThree('hierarchy3',index2)"
|
||
>
|
||
{{item2.text}}
|
||
<div class="threeWindow" v-if="item2.text==='对行运算' && item2.static">
|
||
<div
|
||
v-for="(item3,index3) in item.fourText"
|
||
:key="index3"
|
||
@click="computedLine(item3.text)"
|
||
>{{item3.text}}</div>
|
||
</div>
|
||
<div class="threeWindow" v-if="item2.text==='对列运算' && item2.static">
|
||
<div
|
||
v-for="(item3,index3) in item.fourText"
|
||
:key="index3"
|
||
@click="computedList(item3.text)"
|
||
>{{item3.text}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="data_title" v-if="cutStateSeach==='advanced'">
|
||
<div
|
||
v-for="(item,index) in titleDatas"
|
||
:key="index"
|
||
@mouseover="mouseoverAllCate('hierarchy1',index)"
|
||
@mouseleave="mouseleaveAllCate('hierarchy1',index)"
|
||
@click="clickAllCate('hierarchy1',index)"
|
||
>
|
||
<img :src="item.iconUrl" alt v-if="index<3" />
|
||
<div v-if="index<3" class="title_relative">
|
||
<div>{{item.text}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="searchData" @click="clickAllCate('hierarchy1','search')">查询数据</div>
|
||
</div>
|
||
<div class="data_title" v-if="cutStateSeach==='map'">
|
||
<div
|
||
v-for="(item,index) in titleDatas"
|
||
:key="index"
|
||
@mouseover="mouseoverAllCate('hierarchy1',index)"
|
||
@mouseleave="mouseleaveAllCate('hierarchy1',index)"
|
||
@click="clickAllCate('hierarchy1',index)"
|
||
:style="{position:index>=4?'absolute':'','margin-left':index===3?'33rem':''}"
|
||
>
|
||
<img :src="item.iconUrl" alt v-if="index<4" />
|
||
<span v-if="index<4">{{item.text}}</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="data_content"
|
||
:style="{'height':indStatic===0?'59.0125rem':'91.125rem'}"
|
||
v-if="cutStateSeach==='simpleness'"
|
||
>
|
||
<div
|
||
class="data_left"
|
||
:style="{'width':(left!=initValue?left>initValue?(25.375+computedNumberRem(left-initValue)):(25.375-computedNumberRem(initValue-left)):25.375)+'rem','height':'100%'}"
|
||
>
|
||
<!-- 左侧导航 -->
|
||
<el-row class="tac" v-if="leftCateData">
|
||
<el-col :span="24">
|
||
<el-menu
|
||
:default-openeds="defaultSelectLies"
|
||
@open="handleOpen"
|
||
@close="handleClose"
|
||
@select="selectActive"
|
||
:unique-opened="true"
|
||
>
|
||
<el-submenu
|
||
:index="''+index1"
|
||
v-for="(item1,index1) in leftCateData"
|
||
:key="index1"
|
||
:style="{'background-color':$store.state.selectDataLeft?$store.state.selectDataLeft.id===item1.id?'#95CEE4':'':''}"
|
||
>
|
||
<template slot="title">{{item1.name}}</template>
|
||
<el-submenu
|
||
:index="index1+'-'+index2"
|
||
v-for="(item2,index2) in item1.children"
|
||
:key="index2"
|
||
:style="{'background-color':$store.state.selectDataLeft?$store.state.selectDataLeft.id===item2.id?'#95CEE4':'':''}"
|
||
>
|
||
<template slot="title">{{item2.name}}</template>
|
||
<el-submenu
|
||
:index="index1+'-'+index2+'-'+index3"
|
||
v-for="(item3,index3) in item2.children"
|
||
:key="index3"
|
||
:style="{'background-color':$store.state.selectDataLeft?$store.state.selectDataLeft.id===item3.id?'#95CEE4':'':''}"
|
||
>
|
||
<template slot="title">{{item3.name}}</template>
|
||
<el-submenu
|
||
:index="index1+'-'+index2+'-'+index3+'-'+index4"
|
||
v-for="(item4,index4) in item3.children"
|
||
:key="index4"
|
||
:style="{'background-color':$store.state.selectDataLeft?$store.state.selectDataLeft.id===item4.id?'#95CEE4':'':''}"
|
||
>
|
||
<template slot="title">{{item4.name}}</template>
|
||
<el-submenu
|
||
:index="index1+'-'+index2+'-'+index3+'-'+index4+'-'+index5"
|
||
v-for="(item5,index5) in item4.children"
|
||
:key="index5"
|
||
:style="{'background-color':$store.state.selectDataLeft?$store.state.selectDataLeft.id===item5.id?'#95CEE4':'':''}"
|
||
>
|
||
<template slot="title">{{item5.name}}</template>
|
||
</el-submenu>
|
||
</el-submenu>
|
||
</el-submenu>
|
||
</el-submenu>
|
||
</el-submenu>
|
||
</el-menu>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="data_center">
|
||
<div>..</div>
|
||
<div>..</div>
|
||
<div>..</div>
|
||
<div>..</div>
|
||
<div>..</div>
|
||
<div>..</div>
|
||
<div>..</div>
|
||
</div>
|
||
<div
|
||
class="data_right"
|
||
:style="{'width':(left!=initValue?left>initValue?(58.125-computedNumberRem(left-initValue)):(58.125+computedNumberRem(initValue-left)):58.125)+'rem','height':'100%'}"
|
||
>
|
||
<!-- 列表 -->
|
||
<!-- 图标切换 -->
|
||
<ChartsCut
|
||
v-show="$store.state.classifyIdDataState"
|
||
@cutStatic="cutStatic"
|
||
:defaultDataRight="defaultDataRight"
|
||
@stateTell="stateTell"
|
||
@comTime="comTime"
|
||
:stateDataGetVal="stateDataGetVal"
|
||
@stateDFGHJ="stateDFGHJ"
|
||
@statertfResu="statertfResu"
|
||
:labelAreaState="labelAreaState"
|
||
:areaDimensionStateS="areaDimensionStateS"
|
||
@emmitStateAd="emmitStateAd"
|
||
:labelAreaStateks="labelAreaStateks"
|
||
:loading.sync="loading"
|
||
ref="childChartsCut"
|
||
></ChartsCut>
|
||
<!-- 列表内容 -->
|
||
<ChartsCont
|
||
ref="childChartCont"
|
||
:indStatic="indStatic"
|
||
:chartsStatusMegger="chartsStatusMegger"
|
||
:defaultDataRight="defaultDataRight"
|
||
:stateTells="stateTells"
|
||
:statesDf="statesDf"
|
||
@tellAreadly="tellAreadly"
|
||
@prentsState="prentsState"
|
||
@stateDataGet="stateDataGet"
|
||
:showTableState="showTableState"
|
||
@statertyui="statertyui"
|
||
:areaDimensionStateS="areaDimensionStateS"
|
||
:advancedStates="advancedStates"
|
||
@tellParentsShowClos="tellParentsShowClos"
|
||
@tellChangeFan="tellChangeFan"
|
||
></ChartsCont>
|
||
</div>
|
||
<div class="container">
|
||
<VueDragResize
|
||
:isActive="true"
|
||
:isResizable="false"
|
||
:w="10"
|
||
:h="120"
|
||
:z="0"
|
||
:x="computedNumberPx(200)"
|
||
:parentLimitation="true"
|
||
@resizing="resizeEvents"
|
||
@dragging="resizeEvents"
|
||
axis="x"
|
||
style="position:relative;border:none;display: flex;flex-direction:column;justify-content: center;align-items: center;pointer-events:auto;"
|
||
>
|
||
<!-- <h3>Hello World!</h3>
|
||
<p>{{ top }} х {{ left }}</p>
|
||
<p>{{ width }} х {{ height }}</p>-->
|
||
</VueDragResize>
|
||
</div>
|
||
</div>
|
||
<AdvancedQuery v-if="cutStateSeach==='advanced'"></AdvancedQuery>
|
||
<MapData v-if="cutStateSeach==='map'"></MapData>
|
||
<div
|
||
class="advancedStyle"
|
||
v-if="cutStateSeach==='advanced'"
|
||
@click="clickAllCate('hierarchy1','search')"
|
||
>
|
||
<div>查询数据</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 页脚信息 -->
|
||
<FooterInfors></FooterInfors>
|
||
<!-- 指标解释 -->
|
||
<LabelExplain v-if="$store.state.labelExplainState"></LabelExplain>
|
||
<!-- 新增指标 -->
|
||
<InsertLabel v-if="$store.state.insertWindowState" @emitState="emitStatesd"></InsertLabel>
|
||
<!-- 筛选 -->
|
||
<ScreenCom v-if="$store.state.selcettWindowState" @emitState="emitStatesd"></ScreenCom>
|
||
<!-- 编辑 -->
|
||
<EditCom v-if="$store.state.editWindowState" @emitState="emitStatesd">></EditCom>
|
||
<!-- 添加收藏 -->
|
||
<AddCollect v-if="$store.state.addCollectState"></AddCollect>
|
||
<!-- 维度转换 -->
|
||
<!--地区-->
|
||
<Dimension
|
||
ref="childDimension"
|
||
v-show="$store.state.dimensionState"
|
||
@changeValue="changeValue"
|
||
@areaDimensionState="areaDimensionState"
|
||
></Dimension>
|
||
<!-- 维度转换 -->
|
||
<!--非地区-->
|
||
<NoAreaDimension v-if="$store.state.noAreadimensionState" @changeSetZZ="changeValue"></NoAreaDimension>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 导航
|
||
import Nav from '@/components/nav/Nav.vue'
|
||
// 页脚信息
|
||
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
||
// 全局搜索
|
||
import search from '@/components/search/search.vue'
|
||
// 引入拖拽组件
|
||
import VueDragResize from 'vue-drag-resize'
|
||
// 引入图表切换组件
|
||
import ChartsCut from '@/components/chartsCut/ChartsCut.vue'
|
||
// 引入图表组件
|
||
import ChartsCont from '@/components/chartsCont/ChartsCont.vue'
|
||
// 引入高级查询组件
|
||
import AdvancedQuery from '@/components/advancedQuery/AdvancedQuery.vue'
|
||
// 引入数据地图组件
|
||
import MapData from '@/components/mapData/MapData.vue'
|
||
// 新增指标组件
|
||
import InsertLabel from '@/components/insertLabel/InsertLabel.vue'
|
||
// 筛选
|
||
import ScreenCom from '@/components/screenCom/ScreenCom.vue'
|
||
// 编辑
|
||
import EditCom from '@/components/editCom/EditCom.vue'
|
||
// 添加收藏
|
||
import AddCollect from '@/components/addCollect/AddCollect.vue'
|
||
// 指标解释
|
||
import LabelExplain from '@/components/labelExplain/LabelExplain.vue'
|
||
// 维度转换 地区
|
||
import Dimension from '@/components/dimension/Dimension.vue'
|
||
// 维度转换 非地区
|
||
import NoAreaDimension from '@/components/noAreaDimension/NoAreaDimension.vue'
|
||
// 引入数据计算js用于机选渲染的数据
|
||
import ComputedData from '../../assets/js/computeddata'
|
||
// 引入全局的createObjectUrl用于覆盖window.URL
|
||
// import '../../assets/js/createObjectUrl'
|
||
|
||
export default {
|
||
name: 'index',
|
||
components: {
|
||
Navs: Nav,
|
||
FooterInfors: FooterInfor,
|
||
search: search,
|
||
VueDragResize: VueDragResize,
|
||
ChartsCut: ChartsCut,
|
||
ChartsCont: ChartsCont,
|
||
AdvancedQuery: AdvancedQuery,
|
||
MapData: MapData,
|
||
InsertLabel: InsertLabel,
|
||
ScreenCom: ScreenCom,
|
||
EditCom: EditCom,
|
||
AddCollect: AddCollect,
|
||
LabelExplain: LabelExplain,
|
||
Dimension: Dimension,
|
||
NoAreaDimension: NoAreaDimension
|
||
},
|
||
data () {
|
||
return {
|
||
loading: true,
|
||
// 左侧当前默认
|
||
defaultSelectLies: [],
|
||
// 右侧默认显示数据
|
||
defaultDataRight: null,
|
||
// 菜单配置
|
||
activeIndex: '1',
|
||
activeIndex2: '1',
|
||
imgurl: {
|
||
pos: require('../../../static/company/posweizhi.png'),
|
||
tz: require('../../../static/data/tz145.png')
|
||
},
|
||
// 本页所有位置
|
||
posaite: {
|
||
monthly: '月度数据',
|
||
quarter: '季度数据',
|
||
year: '年度数据',
|
||
area: '地区数据'
|
||
},
|
||
// 当前位置状态
|
||
dataPos: null,
|
||
// data_title数据
|
||
titleDatas: [
|
||
{ text: '简单查询', iconUrl: require('../../../static/data/jdcx.png') },
|
||
{ text: '高级查询', iconUrl: require('../../../static/data/gjcx.png') },
|
||
{ text: '数据地图', iconUrl: require('../../../static/data/sjdt.png') },
|
||
{ text: '添加收藏', iconUrl: require('../../../static/data/tjsc.png') },
|
||
{ text: '导出至Excel', iconUrl: require('../../../static/data/dcexcel.png') },
|
||
{
|
||
text: '数据管理',
|
||
iconUrl: require('../../../static/data/sjgl.png'),
|
||
secondText: [
|
||
{ text: '新增指标', static: false },
|
||
{ text: '筛选', static: false },
|
||
{ text: '统计', static: false },
|
||
{ text: '恢复', static: false },
|
||
{ text: '清除空行空列', static: false }
|
||
],
|
||
threeText: [
|
||
{ text: '对行运算', static: false },
|
||
{ text: '对列运算', static: false }
|
||
],
|
||
fourText: [
|
||
{ text: 'SUM求和', static: false },
|
||
{ text: 'x平均数', static: false },
|
||
{ text: 'MAX最大值', static: false },
|
||
{ text: 'MIN最小值', static: false },
|
||
{ text: 'MD中位数', static: false },
|
||
{ text: 'MO众数', static: false },
|
||
{ text: 'S²方差', static: false },
|
||
{ text: 'S标准差', static: false }
|
||
],
|
||
static: false
|
||
},
|
||
{
|
||
text: '报表管理',
|
||
iconUrl: require('../../../static/data/bbgl.png'),
|
||
secondText: [
|
||
{ text: '编辑', static: false },
|
||
{ text: '转置', static: false },
|
||
{ text: '维度转换', static: false },
|
||
{ text: '保存默认', static: false },
|
||
{ text: '恢复默认', static: false }
|
||
],
|
||
static: false
|
||
}
|
||
],
|
||
// 拖拽start
|
||
width: 10,
|
||
height: 120,
|
||
top: 0,
|
||
left: 147,
|
||
// 拖拽end
|
||
// 初始值
|
||
initValue: null,
|
||
// 重置左、右侧高度
|
||
Heights: null,
|
||
// 切换状态 默认0
|
||
indStatic: 0,
|
||
// 数据管理 =================>
|
||
dataManage: ['新增指标', '筛选', '统计', '恢复', '清除空行空列'],
|
||
// 统计数据
|
||
dataManageTJ: ['对行运算', '对列运算'],
|
||
// 运算
|
||
dataManageTJComputed: ['SUM求和', 'x平均数', 'MAX最大值', 'MIN最小值', 'MD中位数', 'MO众数', 'S²方差', 'S标准差'],
|
||
// 报表管理 ================>
|
||
reportManage: ['编辑', '转置', '维度转换', '保存默认', '恢复默认'],
|
||
// 数据管理状态
|
||
dataManageStatic: {
|
||
mainStatic: false,
|
||
TJStatic: false,
|
||
hangStatic: false,
|
||
lieStatic: false,
|
||
compuStatic: false
|
||
},
|
||
// 图表状态管理器
|
||
chartsStatusMegger: {
|
||
// 转置
|
||
transState: true,
|
||
// 计算状态
|
||
computedStatic: { text: '无', stateType: 'line' }
|
||
},
|
||
leftCateData: null,
|
||
// 简单查询、高级查询、数据地图切换状态(simpleness（简单）、advanced（高级） 、map（地图）)
|
||
cutStateSeach: 'simpleness',
|
||
// 下拉筛选的数据时间
|
||
downLaSelect: '',
|
||
// 下拉筛选的数据地区
|
||
downLaSelectArea: '',
|
||
// 新增指标状态
|
||
statesDf: 1,
|
||
// 数据加载状态
|
||
stateTells: false,
|
||
// 维度转换时(若不是地区数据只进行转置操作)
|
||
changeState: false,
|
||
// 数据请求成功后的状态
|
||
stateDataGetVal: false,
|
||
// 扩展数据完成后
|
||
labelAreaState: false,
|
||
// 清除空行空列
|
||
showTableState: false,
|
||
// 地区数据维度转换状态
|
||
areaDimensionStateS: false,
|
||
// 高级查询数据渲染
|
||
advancedStates: false,
|
||
// 指标与地区互换状态
|
||
labelAreaStateks: false,
|
||
// 存储过滤出来的所有值 左侧菜单
|
||
filterDataArr: null
|
||
}
|
||
},
|
||
watch: {
|
||
changeState (val) {
|
||
if (val) {
|
||
this.chartsStatusMegger.transState = !this.chartsStatusMegger.transState
|
||
this.$store.state.transState = this.chartsStatusMegger.transState
|
||
this.changeState = false
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
/*
|
||
* @desc 触发子组件 childChartCont 的downLaSelects方法
|
||
*/
|
||
chuFachildChartCont () {
|
||
console.log(this.$refs, 'this.$refs789')
|
||
this.$nextTick(() => {
|
||
this.$refs.childChartCont.downLaSelects()
|
||
})
|
||
},
|
||
// 地区数据维度转换状态
|
||
areaDimensionState (val) {
|
||
console.log(val, 'bbbval')
|
||
this.areaDimensionStateS = !this.areaDimensionStateS
|
||
},
|
||
// 维度转换非地区转置
|
||
changeValue (val) {
|
||
this.changeState = val
|
||
},
|
||
// 获取左侧菜单数据
|
||
getCateData () {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'data/data/list',
|
||
params: {
|
||
type: this.$route.query.type === 'area' ? 2 : 1,
|
||
f: this.$route.query.type === 'area' ? '' : this.$route.query.type
|
||
}
|
||
}).then(res => {
|
||
console.log(res, '左侧菜单')
|
||
// 请求接口完成 请求成功
|
||
if (res.data.code === 200) {
|
||
this.leftCateData = res.data.data.list
|
||
this.defaultSelectLie()
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
// 菜单选中配置
|
||
handleSelect (key, keyPath) {
|
||
// console.log(key, keyPath)
|
||
},
|
||
handleClick (tab, event) {
|
||
// console.log(tab, event, '选中')
|
||
},
|
||
// 拖拽事件
|
||
resizeEvents (newRect) {
|
||
console.log(newRect)
|
||
this.width = newRect.width
|
||
this.height = newRect.height
|
||
this.top = newRect.top
|
||
this.left = newRect.left
|
||
},
|
||
handleOpen (key, keyPath) {
|
||
console.log(key, keyPath, '开')
|
||
this.$store.state.openOpenLeft = keyPath
|
||
console.log(key.split('-'))
|
||
let datart = []
|
||
key.split('-').forEach((item, index) => {
|
||
if (index === 0) {
|
||
datart = this.leftCateData[item]
|
||
} else {
|
||
datart = datart.children[item]
|
||
}
|
||
})
|
||
console.log(datart)
|
||
this.defaultDataRight = datart
|
||
this.$store.state.selectDataLeft = this.defaultDataRight
|
||
this.$store.state.selectfilter = this.defaultDataRight.f
|
||
this.$store.state.yesNoClickChange = false
|
||
this.$store.state.timeNum = true
|
||
this.$store.state.yesNoClickZZ = false
|
||
this.$store.state.defaultShowLabelAreaState = 'normal'
|
||
},
|
||
handleClose (key, keyPath) {
|
||
console.log(key, keyPath, '关闭打印')
|
||
},
|
||
selectActive (key, keyPath) {
|
||
// console.log(key, keyPath)
|
||
this.showColoect(key)
|
||
},
|
||
// 点击5按钮切换图表
|
||
cutStatic (ind) {
|
||
// ind 0 1 2 3 4
|
||
this.indStatic = ind
|
||
},
|
||
// top上的computed
|
||
mouseoverAllCate (hierarchy, ind) {
|
||
// console.log(hierarchy, ind, '鼠标移动到')
|
||
switch (ind) {
|
||
case 5:
|
||
this.titleDatas[ind].static = true
|
||
break
|
||
case 6:
|
||
this.titleDatas[ind].static = true
|
||
break
|
||
}
|
||
},
|
||
mouseleaveAllCate (hierarchy, ind) {
|
||
switch (ind) {
|
||
case 5:
|
||
this.titleDatas[ind].static = false
|
||
this.titleDatas[5].threeText[0].static = false
|
||
this.titleDatas[5].threeText[1].static = false
|
||
break
|
||
case 6:
|
||
this.titleDatas[ind].static = false
|
||
break
|
||
}
|
||
// console.log('鼠标离开')
|
||
},
|
||
clickAllCate (hierarchy, ind) {
|
||
let that = this
|
||
switch (ind) {
|
||
case 0:
|
||
this.$store.state.advancedSearchState = false
|
||
this.cutStateSeach = 'simpleness'
|
||
this.$router.go(0)
|
||
break
|
||
case 1:
|
||
this.$store.state.advancedSearchState = true
|
||
this.cutStateSeach = 'advanced'
|
||
break
|
||
case 2:
|
||
if (this.$route.query.type === 'area') {
|
||
this.cutStateSeach = 'map'
|
||
} else {
|
||
this.$store.state.advancedSearchState = false
|
||
// alert('地图功能对非地区数据无效！')
|
||
this.$alert('地图功能对非地区数据无效！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
break
|
||
case 3:// 添加收藏
|
||
if (this.$store.state.transBefore) {
|
||
this.$store.state.addCollectState = true
|
||
} else {
|
||
this.$alert('暂无数据，无法进行收藏', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
break
|
||
case 4:// 导出至excel！！
|
||
if (this.$store.state.transBefore) {
|
||
let brt = new ComputedData()
|
||
let objData = null
|
||
if (this.indStatic === 0) {
|
||
objData = brt.exportDataAll(JSON.parse(JSON.stringify(this.$store.state.tableData)), JSON.parse(JSON.stringify(this.$store.state.tableLine)))
|
||
} else {
|
||
objData = brt.insertCollectS(JSON.parse(JSON.stringify(this.$store.state.tableData)), JSON.parse(JSON.stringify(this.$store.state.tableLine)), JSON.parse(JSON.stringify(this.$store.state.listInputVal)), JSON.parse(JSON.stringify(this.$store.state.lineInputVal)))
|
||
}
|
||
// 调用接口导出至excel
|
||
this.$axios({
|
||
method: 'POST',
|
||
url: 'data/data/download',
|
||
data: {
|
||
classify: this.$store.state.selectDataLeft.id,
|
||
tableData: objData.tableData,
|
||
header: objData.header
|
||
},
|
||
responseType: 'blob'// 防止接收文件流乱码 格式blob
|
||
}).then(res => {
|
||
console.log(res, '导出至excel！！')
|
||
// 请求接口完成 请求成功
|
||
if (res.status === 200) {
|
||
const a = document.createElement('a')
|
||
a.download = res.headers['content-disposition'].split('"')[1]
|
||
a.style.display = 'none'
|
||
a.href = window.URL.createObjectURL(res.data)
|
||
a.click()
|
||
a.remove()
|
||
window.URL.revokeObjectURL(window.URL.createObjectURL(res.data))
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
} else {
|
||
this.$alert('暂无数据，无法进行导出操作！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
break
|
||
case 5:
|
||
break
|
||
case 6:
|
||
break
|
||
case 'search':// 调接进行高级查询
|
||
// 调用接口查询高级查询的数据
|
||
console.log(this.$store.state.advanceData)
|
||
if (this.$store.state.advanceData.length < 1) {
|
||
// alert('筛选数据数据不能少于4条！')
|
||
this.$alert('筛选数据数据不能少于1条！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
} else if (this.$store.state.advanceData.length > 101) {
|
||
this.$alert('最多选择100条数据进行查询！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
return
|
||
}
|
||
that.cutStateSeach = 'simpleness'
|
||
that.advancedStates = true
|
||
// 调用子组件 的方法渲染高级查询数据
|
||
that.$store.state.advancedSearchState = true
|
||
console.log(this.$store.state.dataArealabelTime, 'this.$store.state.dataArealabelTime')
|
||
console.log(this.$store.state.advanceData, 'this.$store.state.advanceData')
|
||
this.$store.state.advancedSelectClassfiid = this.$store.state.advanceData.map((item, index) => {
|
||
return item.classify_id
|
||
})
|
||
this.$nextTick(() => {
|
||
this.$store.state.defaultShowLabelAreaState = 'normal'
|
||
console.log(this.$store.state.advancedSelectClassfiid, 'this.$store.state.advancedSelectClassfiid')
|
||
// 左侧菜单数据
|
||
this.$refs.childChartsCut.searchSelect(this.$store.state.selectDataLeft.f, null)
|
||
this.getCateData()
|
||
this.childChartContShow(this.$store.state.advancedSelectClassfiid)
|
||
this.$store.state.labelIndexName = this.$store.state.advanceData[0].nameText
|
||
this.$store.state.timeNum = true
|
||
})
|
||
break
|
||
}
|
||
},
|
||
mouseoverCate (hierarchy, ind) {
|
||
// console.log(hierarchy, ind, '鼠标移动到')
|
||
switch (ind) {
|
||
case 2:
|
||
this.titleDatas[5].secondText[ind].static = true
|
||
break
|
||
}
|
||
},
|
||
mouseleaveCate (hierarchy, ind) {
|
||
// console.log(hierarchy, ind, '鼠标离开')
|
||
switch (ind) {
|
||
case 2:
|
||
this.titleDatas[5].threeText[0].static = false
|
||
this.titleDatas[5].threeText[1].static = false
|
||
this.titleDatas[5].secondText[ind].static = false
|
||
break
|
||
}
|
||
},
|
||
clickCate (hierarchy, ind, textType) {
|
||
switch (textType) {
|
||
case '新增指标':
|
||
this.cutStatic(0)
|
||
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
|
||
if (this.$store.state.transBefore) {
|
||
this.$store.state.insertWindowState = true
|
||
} else {
|
||
this.$alert('暂无数据，新增指标功能无法使用！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
break
|
||
case '筛选':
|
||
this.cutStatic(0)
|
||
if (this.$store.state.transBefore) {
|
||
this.$store.state.selcettWindowState = true
|
||
} else {
|
||
this.$alert('暂无数据，筛选功能无法使用！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
break
|
||
case '恢复':// 恢复
|
||
this.cutStatic(0)
|
||
if (this.$store.state.transBefore) {
|
||
this.$router.go(0)
|
||
} else {
|
||
this.$alert('暂无数据，恢复功能无法使用！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
break
|
||
case '清除空行空列':// 清除空行空列
|
||
this.cutStatic(0)
|
||
// this.$router.go(0)
|
||
// console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
|
||
if (this.$store.state.transBefore) {
|
||
if (this.$route.query.type === 'area') {
|
||
// 先过滤每一行
|
||
let firstHang = []// 过滤掉的下标=====》地区
|
||
this.$store.state.transBefore.transBeforeAreaData = this.$store.state.transBefore.transBeforeAreaData.filter((item, index) => {
|
||
if (item.every((item, index) => { return item === '' })) {
|
||
firstHang.push(index)
|
||
}
|
||
return !item.every((item, index) => {
|
||
return item === ''
|
||
}) === true
|
||
})
|
||
// 在过滤每一列
|
||
// 行列转置
|
||
let brrCe = this.$store.state.transBefore.transBeforeAreaData
|
||
this.$store.state.transBefore.transBeforeAreaData = brrCe[0].map(function (col, index) {
|
||
return brrCe.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
// 在过滤每一行
|
||
let secendHang = []// 过滤掉的下标=====》时间
|
||
this.$store.state.transBefore.transBeforeAreaData = this.$store.state.transBefore.transBeforeAreaData.filter((item, index) => {
|
||
if (item.every((item, index) => { return item === '' })) {
|
||
secendHang.push(index)
|
||
}
|
||
return !item.every((item, index) => {
|
||
return item === ''
|
||
}) === true
|
||
})
|
||
// 行列转置
|
||
let arrCe = this.$store.state.transBefore.transBeforeAreaData
|
||
this.$store.state.transBefore.transBeforeAreaData = arrCe[0].map(function (col, index) {
|
||
return arrCe.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
// 将时间和地区名过滤掉
|
||
this.$store.state.transBefore.areaName = this.$store.state.transBefore.areaName.filter((item, index) => {
|
||
return firstHang.indexOf(index) === -1
|
||
})
|
||
this.$store.state.transBefore.timeArr = this.$store.state.transBefore.timeArr.filter((item, index) => {
|
||
return secendHang.indexOf(index) === -1
|
||
})
|
||
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore.transBeforeAreaData')
|
||
this.showTableState = true
|
||
} else { // 非地区数据
|
||
// 先过滤每一行
|
||
let firstHang = []// 过滤掉的下标=====》地区
|
||
this.$store.state.transBefore.transBeforeTermsData = this.$store.state.transBefore.transBeforeTermsData.filter((item, index) => {
|
||
if (item.every((item, index) => { return item === '' })) {
|
||
firstHang.push(index)
|
||
}
|
||
return !item.every((item, index) => {
|
||
return item === ''
|
||
}) === true
|
||
})
|
||
// 在过滤每一列
|
||
// 行列转置
|
||
let brrCe = this.$store.state.transBefore.transBeforeTermsData
|
||
this.$store.state.transBefore.transBeforeTermsData = brrCe[0].map(function (col, index) {
|
||
return brrCe.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
// 在过滤每一行
|
||
let secendHang = []// 过滤掉的下标=====》时间
|
||
this.$store.state.transBefore.transBeforeTermsData = this.$store.state.transBefore.transBeforeTermsData.filter((item, index) => {
|
||
if (item.every((item, index) => { return item === '' })) {
|
||
secendHang.push(index)
|
||
}
|
||
return !item.every((item, index) => {
|
||
return item === ''
|
||
}) === true
|
||
})
|
||
// 行列转置
|
||
let arrCe = this.$store.state.transBefore.transBeforeTermsData
|
||
this.$store.state.transBefore.transBeforeTermsData = arrCe[0].map(function (col, index) {
|
||
return arrCe.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
// 将时间和地区名过滤掉
|
||
this.$store.state.transBefore.termsName = this.$store.state.transBefore.termsName.filter((item, index) => {
|
||
return firstHang.indexOf(index) === -1
|
||
})
|
||
this.$store.state.transBefore.termsExplain = this.$store.state.transBefore.termsExplain.filter((item, index) => {
|
||
return firstHang.indexOf(index) === -1
|
||
})
|
||
this.$store.state.transBefore.timeArr = this.$store.state.transBefore.timeArr.filter((item, index) => {
|
||
return secendHang.indexOf(index) === -1
|
||
})
|
||
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore.transBeforeAreaData')
|
||
this.showTableState = true
|
||
}
|
||
} else {
|
||
this.$alert('暂无数据，清除空行空列功能无法使用！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
break
|
||
case '编辑':
|
||
this.cutStatic(0)
|
||
if (this.$store.state.transBefore) {
|
||
this.$store.state.editWindowState = true
|
||
} else {
|
||
this.$alert('暂无数据，编辑功能无法使用！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
break
|
||
case '转置':
|
||
// 是否点击转置
|
||
this.$store.state.yesNoClickZZ = !this.$store.state.yesNoClickZZ
|
||
if (this.$store.state.befaultAfter === 'zz') {
|
||
this.$store.state.befaultAfter = 'no'
|
||
} else {
|
||
this.$store.state.befaultAfter = 'zz'
|
||
}
|
||
this.cutStatic(0)
|
||
if (this.$store.state.transBefore) {
|
||
// 当前数据是地区数据时点击转置需要将数据进行转置
|
||
if (this.$route.query.type === 'area') {
|
||
// let transpositionData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData.transBeforeAreaData))
|
||
// this.$store.state.allNochangeInitData.transBeforeAreaData = transpositionData[0].map(function (col, index) {
|
||
// return transpositionData.map((row, key) => {
|
||
// return row[index]
|
||
// })
|
||
// })
|
||
this.$store.state.transClickState = true
|
||
}
|
||
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore0022555')
|
||
// 改变转置状态
|
||
let zhuanChange = {
|
||
row: this.$store.state.SelecttDimension.col,
|
||
col: this.$store.state.SelecttDimension.row
|
||
}
|
||
this.$store.state.SelecttDimension = zhuanChange
|
||
console.log(this.$store.state.SelecttDimension, '非地区数据维度转换=》转置')
|
||
this.change3Ds()
|
||
this.chartsStatusMegger.transState = !this.chartsStatusMegger.transState
|
||
this.$store.state.transState = this.chartsStatusMegger.transState
|
||
} else {
|
||
this.$alert('暂无数据，转置功能无法使用！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
// this.$refs.childChartCont.lieWidthComputed()
|
||
break
|
||
case '维度转换':
|
||
this.cutStatic(0)
|
||
if (this.$store.state.transBefore) {
|
||
if (this.$route.query.type === 'area') {
|
||
this.$store.state.dimensionState = true
|
||
} else {
|
||
this.$store.state.noAreadimensionState = true
|
||
}
|
||
} else {
|
||
this.$alert('暂无数据，维度转换功能无法使用！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
break
|
||
case '保存默认':// 将分类id 和 分类数据存入本地
|
||
this.cutStatic(0)
|
||
// 获取本地保存数据
|
||
if (this.$store.state.transBefore) {
|
||
if (this.$route.query.type !== 'area') { // 非地区数据
|
||
if (!this.$store.state.advancedSearchState) { // 非高级查询数据存默认数据
|
||
if (JSON.parse(localStorage.getItem('classFiyData'))) { // 本地存在
|
||
let arrtsBGY = JSON.parse(localStorage.getItem('classFiyData'))
|
||
if (!arrtsBGY.find(item => item.type === this.$route.query.type)) {
|
||
arrtsBGY.push({
|
||
type: this.$route.query.type,
|
||
allNochangeInitData: this.$store.state.allNochangeInitData,
|
||
transBefore: this.$store.state.transBefore,
|
||
selectDate: {
|
||
time: this.$store.state.newSelectTime
|
||
},
|
||
selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
|
||
SelecttDimension: this.$store.state.SelecttDimension, // 左侧选中
|
||
advancedSearchState: this.$store.state.advancedSearchState
|
||
})
|
||
localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
|
||
} else {
|
||
console.log('走这里')
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).transBefore = this.$store.state.transBefore
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).allNochangeInitData = this.$store.state.allNochangeInitData
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).selectDate = {
|
||
time: this.$store.state.newSelectTime
|
||
}
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).selectDataLeft = this.$store.state.selectDataLeft
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).SelecttDimension = this.$store.state.SelecttDimension
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).advancedSearchState = this.$store.state.advancedSearchState
|
||
|
||
localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
|
||
}
|
||
} else { // 本地不存在
|
||
localStorage.setItem('classFiyData', JSON.stringify([{
|
||
type: this.$store.state.selectDataLeft.f,
|
||
allNochangeInitData: this.$store.state.allNochangeInitData,
|
||
transBefore: this.$store.state.transBefore,
|
||
selectDate: {
|
||
time: this.$store.state.newSelectTime
|
||
},
|
||
selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
|
||
SelecttDimension: this.$store.state.SelecttDimension,
|
||
advancedSearchState: this.$store.state.advancedSearchState
|
||
}]))
|
||
}
|
||
} else { // 高级查询保存默认数据
|
||
if (JSON.parse(localStorage.getItem('classFiyData'))) { // 本地存在
|
||
let arrtsBGY = JSON.parse(localStorage.getItem('classFiyData'))
|
||
if (!arrtsBGY.find(item => item.type === this.$route.query.type)) {
|
||
arrtsBGY.push({
|
||
type: this.$route.query.type,
|
||
allNochangeInitData: this.$store.state.allNochangeInitData,
|
||
transBefore: this.$store.state.transBefore,
|
||
selectDate: {
|
||
time: this.$store.state.newSelectTime
|
||
},
|
||
selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
|
||
SelecttDimension: this.$store.state.SelecttDimension, // 左侧选中
|
||
advancedSearchState: this.$store.state.advancedSearchState, // 高级查询状态
|
||
advanceData: this.$store.state.advanceData, // 高级查询数据
|
||
areaIndexName: this.$store.state.areaIndexName, // 地区名称
|
||
labelIndexName: this.$store.state.labelIndexName // 指标名称
|
||
})
|
||
localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
|
||
} else {
|
||
console.log('走这里')
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).transBefore = this.$store.state.transBefore
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).allNochangeInitData = this.$store.state.allNochangeInitData
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).selectDate = {
|
||
time: this.$store.state.newSelectTime
|
||
}
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).selectDataLeft = this.$store.state.selectDataLeft
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).SelecttDimension = this.$store.state.SelecttDimension
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).advancedSearchState = this.$store.state.advancedSearchState
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).advanceData = this.$store.state.advanceData
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).areaIndexName = this.$store.state.areaIndexName
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).labelIndexName = this.$store.state.labelIndexName
|
||
|
||
localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
|
||
}
|
||
} else { // 本地不存在
|
||
localStorage.setItem('classFiyData', JSON.stringify([{
|
||
type: this.$store.state.selectDataLeft.f,
|
||
allNochangeInitData: this.$store.state.allNochangeInitData,
|
||
transBefore: this.$store.state.transBefore,
|
||
selectDate: {
|
||
time: this.$store.state.newSelectTime
|
||
},
|
||
selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
|
||
SelecttDimension: this.$store.state.SelecttDimension,
|
||
advancedSearchState: this.$store.state.advancedSearchState, // 高级查询状态
|
||
advanceData: this.$store.state.advanceData, // 高级查询数据
|
||
areaIndexName: this.$store.state.areaIndexName, // 地区名称
|
||
labelIndexName: this.$store.state.labelIndexName // 指标名称
|
||
}]))
|
||
}
|
||
}
|
||
} else { // 地区数据
|
||
if (!this.$store.state.advancedSearchState) { // 非高级查询数据存默认数据
|
||
if (JSON.parse(localStorage.getItem('classFiyData'))) { // 本地存在
|
||
let arrtsBGY = JSON.parse(localStorage.getItem('classFiyData'))
|
||
if (!arrtsBGY.find(item => item.type === this.$route.query.type)) {
|
||
let btyData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData))
|
||
if (this.$store.state.yesNoClickZZ) {
|
||
let btyAreaData = btyData.transBeforeAreaData
|
||
btyData.transBeforeAreaData = btyAreaData[0].map((col, index) => {
|
||
return btyAreaData.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
}
|
||
arrtsBGY.push({
|
||
type: this.$route.query.type,
|
||
allNochangeInitData: btyData,
|
||
transBefore: btyData,
|
||
selectDate: {
|
||
time: this.$store.state.newSelectTime,
|
||
sequence: this.$store.state.yesNoClickChange ? { sequenceCont: this.$store.state.newSelectChangeData, sequenceState: 3 } : this.$store.state.newSelectLabelArea
|
||
},
|
||
selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
|
||
SelecttDimension: this.$store.state.SelecttDimension,
|
||
yesNoClickChange: this.$store.state.yesNoClickChange, // 维度转换是否被点击
|
||
yesNoClickZZ: this.$store.state.yesNoClickZZ, // 转置是否被点击
|
||
advancedSearchState: this.$store.state.advancedSearchState
|
||
})
|
||
localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
|
||
} else {
|
||
console.log('走这里')
|
||
let btyData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData))
|
||
if (this.$store.state.yesNoClickZZ) {
|
||
let btyAreaData = btyData.transBeforeAreaData
|
||
btyData.transBeforeAreaData = btyAreaData[0].map((col, index) => {
|
||
return btyAreaData.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
}
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).transBefore = btyData
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).allNochangeInitData = btyData
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).selectDate = {
|
||
time: this.$store.state.newSelectTime,
|
||
sequence: this.$store.state.yesNoClickChange ? { sequenceCont: this.$store.state.newSelectChangeData, sequenceState: 3 } : this.$store.state.newSelectLabelArea
|
||
}
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).selectDataLeft = this.$store.state.selectDataLeft
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).SelecttDimension = this.$store.state.SelecttDimension
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).yesNoClickChange = this.$store.state.yesNoClickChange
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).yesNoClickZZ = this.$store.state.yesNoClickZZ
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).advancedSearchState = this.$store.state.advancedSearchState
|
||
localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
|
||
}
|
||
} else { // 本地不存在
|
||
let btyData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData))
|
||
if (this.$store.state.yesNoClickZZ) {
|
||
let btyAreaData = btyData.transBeforeAreaData
|
||
btyData.transBeforeAreaData = btyAreaData[0].map((col, index) => {
|
||
return btyAreaData.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
}
|
||
localStorage.setItem('classFiyData', JSON.stringify([{
|
||
type: this.$route.query.type,
|
||
allNochangeInitData: btyData,
|
||
transBefore: btyData,
|
||
selectDate: {
|
||
time: this.$store.state.newSelectTime,
|
||
sequence: this.$store.state.yesNoClickChange ? { sequenceCont: this.$store.state.newSelectChangeData, sequenceState: 3 } : this.$store.state.newSelectLabelArea
|
||
// sequenceCont:,//序列选中内容
|
||
// sequenceState://序列状态 筛选指标 筛选地区
|
||
},
|
||
selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
|
||
SelecttDimension: this.$store.state.SelecttDimension, // 行列代表的是指标、地区、时间
|
||
yesNoClickChange: this.$store.state.yesNoClickChange, // 维度转换是否被点击
|
||
yesNoClickZZ: this.$store.state.yesNoClickZZ, // 维度转换是否被点击
|
||
advancedSearchState: this.$store.state.advancedSearchState
|
||
}]))
|
||
}
|
||
} else { // 高级查询数据存默认数据
|
||
if (JSON.parse(localStorage.getItem('classFiyData'))) { // 本地存在
|
||
let arrtsBGY = JSON.parse(localStorage.getItem('classFiyData'))
|
||
if (!arrtsBGY.find(item => item.type === this.$route.query.type)) {
|
||
let btyData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData))
|
||
if (this.$store.state.yesNoClickZZ) {
|
||
let btyAreaData = btyData.transBeforeAreaData
|
||
btyData.transBeforeAreaData = btyAreaData[0].map((col, index) => {
|
||
return btyAreaData.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
}
|
||
arrtsBGY.push({
|
||
type: this.$route.query.type,
|
||
allNochangeInitData: btyData,
|
||
transBefore: btyData,
|
||
selectDate: {
|
||
time: this.$store.state.newSelectTime,
|
||
sequence: this.$store.state.yesNoClickChange ? { sequenceCont: this.$store.state.newSelectChangeData, sequenceState: 3 } : this.$store.state.newSelectLabelArea
|
||
},
|
||
selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
|
||
SelecttDimension: this.$store.state.SelecttDimension,
|
||
yesNoClickChange: this.$store.state.yesNoClickChange, // 维度转换是否被点击
|
||
yesNoClickZZ: this.$store.state.yesNoClickZZ, // 转置是否被点击
|
||
advancedSearchState: this.$store.state.advancedSearchState, // 高级查询状态
|
||
advanceData: this.$store.state.advanceData, // 高级查询数据
|
||
areaIndexName: this.$store.state.areaIndexName, // 地区名称
|
||
labelIndexName: this.$store.state.labelIndexName // 指标名称
|
||
})
|
||
localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
|
||
} else {
|
||
console.log('走这里')
|
||
let btyData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData))
|
||
if (this.$store.state.yesNoClickZZ) {
|
||
let btyAreaData = btyData.transBeforeAreaData
|
||
btyData.transBeforeAreaData = btyAreaData[0].map((col, index) => {
|
||
return btyAreaData.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
}
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).transBefore = btyData
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).allNochangeInitData = btyData
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).selectDate = {
|
||
time: this.$store.state.newSelectTime,
|
||
sequence: this.$store.state.yesNoClickChange ? { sequenceCont: this.$store.state.newSelectChangeData, sequenceState: 3 } : this.$store.state.newSelectLabelArea
|
||
}
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).selectDataLeft = this.$store.state.selectDataLeft
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).SelecttDimension = this.$store.state.SelecttDimension
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).yesNoClickChange = this.$store.state.yesNoClickChange
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).yesNoClickZZ = this.$store.state.yesNoClickZZ
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).advancedSearchState = this.$store.state.advancedSearchState
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).advanceData = this.$store.state.advanceData
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).areaIndexName = this.$store.state.areaIndexName
|
||
arrtsBGY.find(item => item.type === this.$route.query.type).labelIndexName = this.$store.state.labelIndexName
|
||
localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
|
||
}
|
||
} else { // 本地不存在
|
||
let btyData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData))
|
||
if (this.$store.state.yesNoClickZZ) {
|
||
let btyAreaData = btyData.transBeforeAreaData
|
||
btyData.transBeforeAreaData = btyAreaData[0].map((col, index) => {
|
||
return btyAreaData.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
}
|
||
localStorage.setItem('classFiyData', JSON.stringify([{
|
||
type: this.$route.query.type,
|
||
allNochangeInitData: btyData,
|
||
transBefore: btyData,
|
||
selectDate: {
|
||
time: this.$store.state.newSelectTime,
|
||
sequence: this.$store.state.yesNoClickChange ? { sequenceCont: this.$store.state.newSelectChangeData, sequenceState: 3 } : this.$store.state.newSelectLabelArea
|
||
// sequenceCont:,//序列选中内容
|
||
// sequenceState://序列状态 筛选指标 筛选地区
|
||
},
|
||
selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
|
||
SelecttDimension: this.$store.state.SelecttDimension, // 行列代表的是指标、地区、时间
|
||
yesNoClickChange: this.$store.state.yesNoClickChange, // 维度转换是否被点击
|
||
yesNoClickZZ: this.$store.state.yesNoClickZZ, // 维度转换是否被点击
|
||
advancedSearchState: this.$store.state.advancedSearchState, // 高级查询状态
|
||
advanceData: this.$store.state.advanceData, // 高级查询数据
|
||
areaIndexName: this.$store.state.areaIndexName, // 地区名称
|
||
labelIndexName: this.$store.state.labelIndexName // 指标名称
|
||
}]))
|
||
}
|
||
}
|
||
}
|
||
this.$alert('默认数据已保存！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
} else {
|
||
this.$alert('暂无数据，保存默认功能无法使用！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
break
|
||
case '恢复默认':// 将分类id 和 分类数据从本地删除
|
||
this.cutStatic(0)
|
||
if (this.$store.state.transBefore) {
|
||
if (JSON.parse(localStorage.getItem('classFiyData'))) {
|
||
let arrtsBGY = JSON.parse(localStorage.getItem('classFiyData'))
|
||
console.log(arrtsBGY)
|
||
if (!arrtsBGY.find(item => item.type === this.$route.query.type)) {
|
||
this.$alert('默认数据已恢复！', '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
callback: actioon => {
|
||
this.$router.go(0)
|
||
}
|
||
})
|
||
} else {
|
||
arrtsBGY = arrtsBGY.filter((item, index) => {
|
||
console.log(item, 'item0')
|
||
return item.type !== this.$route.query.type
|
||
})
|
||
if (arrtsBGY.length > 0) {
|
||
localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
|
||
} else {
|
||
localStorage.removeItem('classFiyData')
|
||
}
|
||
this.$alert('默认数据已恢复！', '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
callback: actioon => {
|
||
this.$router.go(0)
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
this.$alert('默认数据已恢复！', '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
callback: actioon => {
|
||
this.$router.go(0)
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
this.$alert('暂无数据，恢复默认功能无法使用！', '温馨提示', {
|
||
confirmButtonText: '确定'
|
||
})
|
||
}
|
||
break
|
||
}
|
||
},
|
||
mouseoverThree (hierarchy, ind) {
|
||
// console.log(hierarchy, ind, '鼠标离开')
|
||
switch (ind) {
|
||
case 0:
|
||
this.titleDatas[5].threeText[ind + 1].static = false
|
||
this.titleDatas[5].threeText[ind].static = true
|
||
break
|
||
case 1:
|
||
this.titleDatas[5].threeText[ind - 1].static = false
|
||
this.titleDatas[5].threeText[ind].static = true
|
||
break
|
||
}
|
||
},
|
||
mouseleaveThree (hierarchy, ind) {
|
||
// console.log(hierarchy, ind, '鼠标离开')
|
||
switch (ind) {
|
||
case 0:
|
||
// this.titleDatas[5].threeText[ind].static = false
|
||
break
|
||
case 1:
|
||
// this.titleDatas[5].threeText[ind].static = false
|
||
break
|
||
}
|
||
},
|
||
// 对行运算
|
||
computedLine (typeText) {
|
||
switch (typeText) {
|
||
case 'SUM求和':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'line'
|
||
}
|
||
break
|
||
case 'x平均数':// 注意x小写
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'line'
|
||
}
|
||
break
|
||
case 'MAX最大值':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'line'
|
||
}
|
||
break
|
||
case 'MIN最小值':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'line'
|
||
}
|
||
break
|
||
case 'MD中位数':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'line'
|
||
}
|
||
break
|
||
case 'MO众数':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'line'
|
||
}
|
||
break
|
||
case 'S²方差':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'line'
|
||
}
|
||
break
|
||
case 'S标准差':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'line'
|
||
}
|
||
break
|
||
}
|
||
},
|
||
// 对列运算
|
||
computedList (typeText) {
|
||
switch (typeText) {
|
||
case 'SUM求和':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'list'
|
||
}
|
||
break
|
||
case 'x平均数':// 注意x小写
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'list'
|
||
}
|
||
break
|
||
case 'MAX最大值':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'list'
|
||
}
|
||
break
|
||
case 'MIN最小值':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'list'
|
||
}
|
||
break
|
||
case 'MD中位数':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'list'
|
||
}
|
||
break
|
||
case 'MO众数':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'list'
|
||
}
|
||
break
|
||
case 'S²方差':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'list'
|
||
}
|
||
break
|
||
case 'S标准差':
|
||
console.log(typeText)
|
||
this.chartsStatusMegger.computedStatic = {
|
||
text: typeText, stateType: 'list'
|
||
}
|
||
break
|
||
}
|
||
},
|
||
// 当数据不是从导航进来时找到其选中其选中的数据作为默认的左侧选中数据
|
||
defaultDataSelectDG () { // 此方法返回一个默认选中的代码数组
|
||
let defaultCodeIndex = null
|
||
let objectData = null
|
||
// 最终默认选中
|
||
this.leftCateData.forEach((item1, index1) => {
|
||
if (this.$route.query.defaultLeftId.toString() === item1.id) {
|
||
defaultCodeIndex = [index1]
|
||
objectData = item1
|
||
console.log(111)
|
||
} else {
|
||
if (item1.children !== undefined) {
|
||
item1.children.forEach((item2, index2) => {
|
||
if (this.$route.query.defaultLeftId.toString() === item2.id) {
|
||
defaultCodeIndex = [index1, index2]
|
||
objectData = item2
|
||
console.log(222)
|
||
} else {
|
||
if (item2.children !== undefined) {
|
||
item2.children.forEach((item3, index3) => {
|
||
if (this.$route.query.defaultLeftId.toString() === item3.id) {
|
||
defaultCodeIndex = [index1, index2, index3]
|
||
objectData = item3
|
||
console.log(defaultCodeIndex, objectData, 333)
|
||
} else {
|
||
if (item3.children !== undefined) {
|
||
item3.children.forEach((item4, index4) => {
|
||
if (this.$route.query.defaultLeftId.toString() === item4.id) {
|
||
defaultCodeIndex = [index1, index2, index3, index4]
|
||
objectData = item4
|
||
console.log(444)
|
||
} else {
|
||
if (item4.children !== undefined) {
|
||
item4.children.forEach((item5, index5) => {
|
||
if (this.$route.query.defaultLeftId.toString() === item5.id) {
|
||
defaultCodeIndex = [index1, index2, index3, index4, index5]
|
||
objectData = item5
|
||
console.log(555)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
this.filterDataArr = {
|
||
defaultCode: defaultCodeIndex.map((item, index) => {
|
||
return defaultCodeIndex.filter((list, key) => { return key <= index }).join('-')
|
||
}),
|
||
objectData: objectData
|
||
}
|
||
},
|
||
// 默认选中的列
|
||
defaultSelectLie () {
|
||
console.log(this.leftCateData, 'this.leftCateDatathis.leftCateDatathis.leftCateData')
|
||
console.log(this.$route.query.defaultLeftId, 'this.$router.query.defaultLeftId')
|
||
// 非高级查询
|
||
if (!this.$store.state.advancedSearchState) {
|
||
if (this.$route.query.defaultLeftId !== 'default') { // 从数据更新，快速
|
||
this.defaultDataSelectDG()
|
||
console.log(this.filterDataArr, '非导航左侧选中')
|
||
console.log(this.filterDataArr.defaultCode, '代码')
|
||
this.defaultSelectLies = this.filterDataArr.defaultCode
|
||
this.$store.state.openOpenLeft = this.filterDataArr.defaultCode
|
||
this.$store.state.selectDataLeft = this.filterDataArr.objectData
|
||
this.defaultDataRight = this.filterDataArr.objectData
|
||
this.$store.state.selectfilter = this.filterDataArr.objectData.f
|
||
} else {
|
||
// 处理默认显示数据
|
||
this.defaultShowData()
|
||
}
|
||
}
|
||
},
|
||
// 默认选中的数据
|
||
defaultShowData () {
|
||
// 调用子组件showSaveDefaultData方法显示默认数据
|
||
// this.$refs.childChartCont.showSaveDefaultData()
|
||
// 本地存在保存的数据
|
||
// 调用接口请求默认显示数据
|
||
let arrData = localStorage.getItem('classFiyData')
|
||
if (!arrData) {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'data/data/default',
|
||
params: {
|
||
type: this.$route.query.type
|
||
}
|
||
}).then(res => {
|
||
console.log(res, '默认展示id10')
|
||
this.$store.state.defaultDataId = res.data.data
|
||
this.$store.state.selectDataLeft = res.data.data
|
||
this.$store.state.selectfilter = this.$store.state.defaultDataId.f
|
||
this.$refs.childChartsCut.searchSelect(this.$store.state.defaultDataId.f, 'default3')
|
||
this.$refs.childChartCont.getInfor(this.$store.state.defaultDataId.id)
|
||
})
|
||
return
|
||
}
|
||
if (JSON.parse(arrData).find(item => item.type === this.$route.query.type)) {
|
||
this.$store.state.defaultShowLabelAreaState = 'defaultLocal'
|
||
console.log(JSON.parse(arrData).find(item => item.type === this.$route.query.type))
|
||
// 调用子组件 searchSelect 方法渲染下拉
|
||
// 赋值数据
|
||
this.$store.state.selectDataLeft = JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDataLeft
|
||
console.log(JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDate.time.value, '全职0')
|
||
this.$store.state.selectData = JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDate.time.value
|
||
console.log(this.$store.state.selectDataLeft, '赋值数据')
|
||
this.$store.state.selectfilter = this.$store.state.selectDataLeft.f
|
||
this.$store.state.SelecttDimension = JSON.parse(arrData).find(item => item.type === this.$route.query.type).SelecttDimension
|
||
this.$store.state.yesNoClickZZ = JSON.parse(arrData).find(item => item.type === this.$route.query.type).yesNoClickZZ
|
||
this.$store.state.yesNoClickChange = JSON.parse(arrData).find(item => item.type === this.$route.query.type).yesNoClickChange
|
||
this.$store.state.advancedSearchState = JSON.parse(arrData).find(item => item.type === this.$route.query.type).advancedSearchState
|
||
// 高级查询
|
||
if (this.$store.state.advancedSearchState) {
|
||
this.$store.state.advanceData = JSON.parse(arrData).find(item => item.type === this.$route.query.type).advanceData
|
||
this.$store.state.areaIndexName = JSON.parse(arrData).find(item => item.type === this.$route.query.type).areaIndexName
|
||
this.$store.state.labelIndexName = JSON.parse(arrData).find(item => item.type === this.$route.query.type).labelIndexName
|
||
}
|
||
if (this.$route.query.type === 'area') {
|
||
let changeDarat = JSON.parse(JSON.stringify(JSON.parse(arrData).find(item => item.type === this.$route.query.type).allNochangeInitData))
|
||
this.$store.state.transBefore = JSON.parse(JSON.stringify(changeDarat))
|
||
this.$store.state.noChangeData = JSON.parse(JSON.stringify(changeDarat))
|
||
this.$store.state.allNochangeInitData = JSON.parse(JSON.stringify(changeDarat))
|
||
this.$store.state.newSelectLabelArea = JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDate.sequence
|
||
this.$store.state.areaDimensionState = JSON.parse(arrData).find(item => item.type === this.$route.query.type).yesNoClickChange
|
||
this.$store.state.yesNoClickChange = JSON.parse(arrData).find(item => item.type === this.$route.query.type).yesNoClickChange
|
||
} else {
|
||
this.$store.state.transBefore = JSON.parse(arrData).find(item => item.type === this.$route.query.type).allNochangeInitData
|
||
this.$store.state.noChangeData = JSON.parse(JSON.stringify(this.$store.state.transBefore))
|
||
this.$store.state.allNochangeInitData = JSON.parse(arrData).find(item => item.type === this.$route.query.type).allNochangeInitData
|
||
}
|
||
console.log(this.$store.state.SelecttDimension, 'this.$store.state.advancedSearchState0000000000000000000000')
|
||
if (this.$store.state.yesNoClickChange && this.$route.query.type === 'area') {
|
||
if ((this.$store.state.SelecttDimension.col === 'zb' && this.$store.state.SelecttDimension.row === 'sj') || (this.$store.state.SelecttDimension.col === 'sj' && this.$store.state.SelecttDimension.row === 'zb')) {
|
||
this.$store.state.noSelecttDimension = 'dq'
|
||
} else if ((this.$store.state.SelecttDimension.col === 'dq' && this.$store.state.SelecttDimension.row === 'sj') || (this.$store.state.SelecttDimension.col === 'sj' && this.$store.state.SelecttDimension.row === 'dq')) {
|
||
this.$store.state.noSelecttDimension = 'zb'
|
||
} else if ((this.$store.state.SelecttDimension.col === 'dq' && this.$store.state.SelecttDimension.row === 'zb') || (this.$store.state.SelecttDimension.col === 'zb' && this.$store.state.SelecttDimension.row === 'dq')) {
|
||
this.$store.state.noSelecttDimension = 'sj'
|
||
}
|
||
this.$store.state.newSelectChangeData = [JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDate.sequence.sequenceCont]
|
||
}
|
||
this.$refs.childChartsCut.searchSelect(JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDataLeft.f, JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDate)
|
||
this.$refs.childChartCont.getInfor(JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDataLeft.id)
|
||
if (this.$store.state.advancedSearchState) {
|
||
this.$refs.childChartCont.advancedSearchDataShow()
|
||
}
|
||
} else {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'data/data/default',
|
||
params: {
|
||
type: this.$route.query.type
|
||
}
|
||
}).then(res => {
|
||
console.log(res, '默认展示id')
|
||
this.$store.state.defaultDataId = res.data.data
|
||
this.$store.state.selectDataLeft = res.data.data
|
||
this.$store.state.selectfilter = this.$store.state.defaultDataId.f
|
||
this.$refs.childChartsCut.searchSelect(this.$store.state.defaultDataId.f, 'default3')
|
||
this.$refs.childChartCont.getInfor(this.$store.state.defaultDataId.id)
|
||
})
|
||
}
|
||
},
|
||
comTime (res) {
|
||
console.log(res, '被选中的111')
|
||
this.downLaSelect = res.extendData
|
||
},
|
||
// 接收子组件传值新增指标
|
||
emitStatesd (val) {
|
||
console.log(val, 'val')
|
||
if (val) {
|
||
console.log(val)
|
||
this.statesDf = 2
|
||
} else {
|
||
this.statesDf = 1
|
||
}
|
||
},
|
||
// 重置参数
|
||
tellAreadly (val) {
|
||
this.statesDf = val
|
||
},
|
||
// 接收并且改变参数
|
||
stateTell (val) {
|
||
this.stateTells = val
|
||
},
|
||
// 重置参数
|
||
prentsState (val) {
|
||
this.stateTells = val
|
||
this.labelAreaState = true
|
||
},
|
||
// 改变状态
|
||
stateDataGet (val) {
|
||
this.stateDataGetVal = val
|
||
},
|
||
stateDFGHJ (val) {
|
||
this.stateDataGetVal = val
|
||
this.labelAreaState = false
|
||
// 恢复最初的选择
|
||
},
|
||
// 地区数据下拉发生变化
|
||
statertfResu (val) {
|
||
console.log(val, '1010110')
|
||
this.downLaSelectArea = val
|
||
this.indStatic = 0
|
||
// 调用childChartCont组件方法获取数据
|
||
this.$refs.childChartCont.downLaSelectArea(this.downLaSelectArea)
|
||
},
|
||
// 重置清除空行空列状态
|
||
statertyui (val) {
|
||
this.showTableState = val
|
||
},
|
||
// 重置维度转换状态
|
||
emmitStateAd (val) {
|
||
// this.areaDimensionStateS = val
|
||
},
|
||
// 重置高级查询状态
|
||
tellParentsShowClos (val) {
|
||
this.advancedStates = val
|
||
},
|
||
// 改变状态
|
||
tellChangeFan (val) {
|
||
this.labelAreaStateks = val
|
||
},
|
||
// 调用子组件的方法
|
||
changeBrother () {
|
||
this.$refs.childChartCont.brotherFuncShowData()
|
||
},
|
||
// 调用子组件的方法
|
||
changeDimensionTrueChangeArea (res) {
|
||
this.$refs.childDimension.trueChangeArea(res)
|
||
},
|
||
// 调用子组件的方法重置数据
|
||
changeScreenCom () {
|
||
this.$refs.childChartCont.initTableData()
|
||
},
|
||
// 调用子组件的方法重置筛选数据
|
||
childChartsCutShow () {
|
||
console.log('kfa555')
|
||
this.$refs.childChartsCut.showLabelArea()
|
||
},
|
||
// 调用子组件的方法重置筛选数据
|
||
childChartContShow (res) {
|
||
this.$refs.childChartCont.getInfor(res)
|
||
},
|
||
// 调用子组件的方法重置维度转换下拉筛选数据
|
||
changeCutShow () {
|
||
this.$refs.childChartsCut.areaDimensionDo(true)
|
||
// 重置三维转换默认选中
|
||
this.$refs.childDimension.change3D()
|
||
},
|
||
// 调用子组件的方法重置维度转换下拉筛选数据
|
||
change3Ds () {
|
||
// 重置三维转换默认选中
|
||
this.$refs.childDimension.change3D()
|
||
}
|
||
},
|
||
computed: {
|
||
// 计算字符串
|
||
computedStr () {
|
||
return (str) => {
|
||
let Strs = ''
|
||
str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
|
||
return Strs
|
||
}
|
||
},
|
||
// 根据传入的数值计算出实际px值
|
||
computedNumberPx () {
|
||
return (pszhi) => {
|
||
let sizes = 160 / ((1920 - 17) / document.body.clientWidth) / 10 / 16 * pszhi
|
||
return sizes
|
||
}
|
||
},
|
||
// 根据传入的值计算出实际的rem值
|
||
computedNumberRem () {
|
||
return (pszhi) => {
|
||
let sizes = pszhi / (160 / ((1920 - 17) / document.body.clientWidth) / 10 / 16) / 16
|
||
return sizes
|
||
}
|
||
},
|
||
// 计算文字显示状态
|
||
computStatic () {
|
||
return (index, arr) => {
|
||
let staticd = false
|
||
if (((arr.length - 1) === index) || (arr.length - 2) === index) {
|
||
staticd = false
|
||
} else {
|
||
staticd = true
|
||
}
|
||
return staticd
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
this.dataPos = this.$route.query.type
|
||
// console.log(this.$route.query.type)
|
||
this.initValue = this.computedNumberPx(200)
|
||
// console.log(this.computedNumberPx(200))
|
||
// 获取菜单信息
|
||
this.getCateData()
|
||
if (this.$route.query.type !== 'area') {
|
||
this.$store.state.SelecttDimension = {
|
||
row: 'sj',
|
||
col: 'zb'
|
||
}
|
||
} else {
|
||
this.$store.state.SelecttDimension = {
|
||
row: 'sj',
|
||
col: 'dq'
|
||
}
|
||
}
|
||
},
|
||
updated () {
|
||
// console.log(this.defaultDataRight, 'this.defaultSelectLies')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/deep/ .el-col-24 {
|
||
min-width: 100%;
|
||
width: auto;
|
||
}
|
||
/deep/ .el-menu {
|
||
border: none;
|
||
}
|
||
/deep/ .el-menu--horizontal .el-menu .el-menu-item,
|
||
.el-menu--horizontal .el-menu .el-submenu__title {
|
||
color: #8fa3ae;
|
||
}
|
||
// .el-menu--horizontal .el-menu .el-menu-item,
|
||
// .el-menu--horizontal .el-menu .el-submenu__title:hover {
|
||
// color: #52b6e3;
|
||
// }
|
||
/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
|
||
color: #8fa3ae;
|
||
}
|
||
/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
|
||
color: #52b6e3;
|
||
}
|
||
/deep/ .el-menu.el-menu--horizontal {
|
||
border: none;
|
||
}
|
||
/deep/ .el-submenu__title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
flex-flow: row-reverse;
|
||
// border: 1px solid red;
|
||
padding: 0;
|
||
}
|
||
/deep/ .el-submenu__icon-arrow {
|
||
position: static;
|
||
margin-top: 0.25rem;
|
||
margin-right: 0.42rem;
|
||
// left: 0;
|
||
// right: auto;
|
||
}
|
||
.content {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
& > .swipersty {
|
||
width: 100%;
|
||
height: 33.25rem;
|
||
}
|
||
& > .content_cont {
|
||
width: 84.25rem;
|
||
// border: 1px solid red;
|
||
& > .mainCont {
|
||
// margin-top: 3.125rem;
|
||
margin-bottom: 3.125rem;
|
||
width: 100%;
|
||
// border: 0.0625rem solid red;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
& > .header {
|
||
width: 84.25rem;
|
||
height: 4.25rem;
|
||
// border: 1px solid red;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
& > .left {
|
||
// margin-left: 1.5rem;
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0.125rem;
|
||
color: #000000;
|
||
}
|
||
& > .right {
|
||
// margin-right: 1.5rem;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #8fa3ae;
|
||
& > img {
|
||
width: 1rem;
|
||
height: 1.25rem;
|
||
margin-right: 0.45rem;
|
||
}
|
||
& > span:nth-child(n + 3):hover {
|
||
cursor: pointer;
|
||
color: #52b6e3;
|
||
}
|
||
}
|
||
}
|
||
& > .data_title {
|
||
width: 100%;
|
||
height: 5.875rem;
|
||
background-color: #ffffff;
|
||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
& > .searchData {
|
||
margin-left: 17.5625rem;
|
||
width: 7.875rem;
|
||
height: 3.125rem;
|
||
background-color: #52b6e3;
|
||
border-radius: 0.1875rem;
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 1.25rem;
|
||
}
|
||
& > .searchData:hover {
|
||
cursor: pointer;
|
||
}
|
||
.title_relative {
|
||
position: relative;
|
||
& > .title_div {
|
||
padding: 0.3625rem 0;
|
||
position: absolute;
|
||
top: 2.8rem;
|
||
left: -3.2rem;
|
||
z-index: 10;
|
||
border: 1px solid #bdbdbd;
|
||
width: 10rem;
|
||
background-color: #fff;
|
||
border-radius: 0.625rem;
|
||
& > div {
|
||
position: relative;
|
||
padding: 0.255rem 1.125rem;
|
||
& > .secondWindow {
|
||
padding: 0.3625rem 0;
|
||
position: absolute;
|
||
top: 0rem;
|
||
left: 10rem;
|
||
z-index: 10;
|
||
border: 1px solid #bdbdbd;
|
||
width: 10rem;
|
||
background-color: #fff;
|
||
border-radius: 0.625rem;
|
||
& > div {
|
||
padding: 0.255rem 1.125rem;
|
||
color: #8fa3ae;
|
||
& > div {
|
||
position: relative;
|
||
& > .threeWindow {
|
||
padding: 0.3625rem 0;
|
||
position: absolute;
|
||
top: -1rem;
|
||
left: -11.275rem;
|
||
z-index: 10;
|
||
border: 1px solid #bdbdbd;
|
||
width: 10rem;
|
||
background-color: #fff;
|
||
border-radius: 0.625rem;
|
||
& > div {
|
||
padding: 0.255rem 1.125rem;
|
||
color: #8fa3ae;
|
||
}
|
||
& > div:hover {
|
||
background-color: #52b6e3;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
& > div:hover {
|
||
background-color: #52b6e3;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
& > div:hover {
|
||
background-color: #52b6e3;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
& > div {
|
||
height: 5.875rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #8fa3ae;
|
||
& > img {
|
||
margin-right: 0.625rem;
|
||
width: 1.375rem;
|
||
height: 1.375rem;
|
||
}
|
||
}
|
||
& > div:nth-child(3) {
|
||
margin-right: 10.125rem;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
& > .data_content {
|
||
position: relative;
|
||
margin-top: 1.25rem;
|
||
width: 100%;
|
||
height: 50rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
// border: 1px solid red;
|
||
& > .data_left {
|
||
overflow: auto;
|
||
// width: 25.375rem;
|
||
// height: 50.25rem;
|
||
background-color: #ffffff;
|
||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
|
||
}
|
||
.data_center {
|
||
width: 0.75rem;
|
||
// height: 9.86rem;
|
||
background-color: #8fa3ae;
|
||
font-size: 0.75rem;
|
||
color: #fff;
|
||
letter-spacing: 0.1865rem;
|
||
}
|
||
|
||
& > .data_center:hover {
|
||
cursor: w-resize;
|
||
cursor: e-resize;
|
||
user-select: none;
|
||
}
|
||
& > .data_right {
|
||
// width: 58.125rem;
|
||
// height: 50.25rem;
|
||
background-color: #ffffff;
|
||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||
}
|
||
// 拖动
|
||
& > .container {
|
||
width: 25rem;
|
||
height: 9.86rem;
|
||
position: absolute;
|
||
left: 12.6875rem;
|
||
// border: 1px solid black;
|
||
pointer-events: none;
|
||
/deep/.vdr.active:before {
|
||
outline: none;
|
||
}
|
||
}
|
||
& > .container:hover {
|
||
cursor: w-resize;
|
||
}
|
||
}
|
||
& > .advancedStyle {
|
||
margin-top: 0.75rem;
|
||
width: 100%;
|
||
height: 5.875rem;
|
||
background-color: #ffffff;
|
||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
& > div {
|
||
margin-right: 1.5625rem;
|
||
width: 7.875rem;
|
||
height: 3.125rem;
|
||
background-color: #52b6e3;
|
||
border-radius: 0.1875rem;
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 1.25rem;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|