asd/shujuwang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fanzhen 1209

Browse Source
This commit is contained in:
fanzhen123
2019-12-09 09:24:07 +08:00
parent 4666cefaec
commit 2b4a599268
20 changed files with 2152 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
package-lock.json generated
View File

@@ -3566,8 +3566,8 @@
}, },
"complex.js": { "complex.js": {
"version": "2.0.11", "version": "2.0.11",
"resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.0.11.tgz", "resolved": "https://registry.npm.taobao.org/complex.js/download/complex.js-2.0.11.tgz",
"integrity": "sha512-6IArJLApNtdg1P1dFtn3dnyzoZBEF0MwMnrfF1exSBRpZYoy4yieMkpZhQDC0uwctw48vii0CFVyHfpgZ/DfGw==" "integrity": "sha1-Cahz+/Ff/YwYycIgHM70JcMri/E="
}, },
"component-emitter": { "component-emitter": {
"version": "1.3.0", "version": "1.3.0",
@@ -4404,8 +4404,8 @@
}, },
"decimal.js": { "decimal.js": {
"version": "10.2.0", "version": "10.2.0",
"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.2.0.tgz", "resolved": "https://registry.npm.taobao.org/decimal.js/download/decimal.js-10.2.0.tgz",
"integrity": "sha512-vDPw+rDgn3bZe1+F/pyEwb1oMG2XTlRVgAa6B4KccTEpYgF8w6eQllVbQcfIJnZyvzFtFpxnpGtx8dd7DJp/Rw==" "integrity": "sha1-OUZhE6ngNhEdAvgkibX9awte0jE="
}, },
"decode-uri-component": { "decode-uri-component": {
"version": "0.2.0", "version": "0.2.0",
@@ -5081,8 +5081,8 @@
}, },
"escape-latex": { "escape-latex": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz", "resolved": "https://registry.npm.taobao.org/escape-latex/download/escape-latex-1.2.0.tgz",
"integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==" "integrity": "sha1-B8A4GM99rCUMzlF/T9obAB7yvKE="
}, },
"escape-string-regexp": { "escape-string-regexp": {
"version": "1.0.5", "version": "1.0.5",
@@ -6400,8 +6400,8 @@
}, },
"fraction.js": { "fraction.js": {
"version": "4.0.12", "version": "4.0.12",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.0.12.tgz", "resolved": "https://registry.npm.taobao.org/fraction.js/download/fraction.js-4.0.12.tgz",
"integrity": "sha512-8Z1K0VTG4hzYY7kA/1sj4/r1/RWLBD3xwReT/RCrUCbzPszjNQCCsy3ktkU/eaEqX3MYa4pY37a52eiBlPMlhA==" "integrity": "sha1-BSbUfGWl+0hU33i8d/e+xwjXuMM="
}, },
"fragment-cache": { "fragment-cache": {
"version": "0.2.1", "version": "0.2.1",
@@ -8473,7 +8473,7 @@
}, },
"javascript-natural-sort": { "javascript-natural-sort": {
"version": "0.7.1", "version": "0.7.1",
"resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz", "resolved": "https://registry.npm.taobao.org/javascript-natural-sort/download/javascript-natural-sort-0.7.1.tgz",
"integrity": "sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k=" "integrity": "sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k="
}, },
"javascript-stringify": { "javascript-stringify": {
@@ -10058,9 +10058,9 @@
"dev": true "dev": true
}, },
"mathjs": { "mathjs": {
"version": "6.2.3", "version": "6.2.5",
"resolved": "https://registry.npmjs.org/mathjs/-/mathjs-6.2.3.tgz", "resolved": "https://registry.npm.taobao.org/mathjs/download/mathjs-6.2.5.tgz",
"integrity": "sha512-IEYTyz8tu7nslF4j2TtDs7C+9Emi2/iJTYXjc5WLoIKTJOLLtjp3Aglys0ZbV9KSiaJhpfGPLXm8Z5d7vEGN3w==", "integrity": "sha1-jn9XF6QIMQD8/Mcgh4h6qU1LKd8=",
"requires": { "requires": {
"complex.js": "2.0.11", "complex.js": "2.0.11",
"decimal.js": "10.2.0", "decimal.js": "10.2.0",
@@ -13074,7 +13074,7 @@
}, },
"seed-random": { "seed-random": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/seed-random/-/seed-random-2.2.0.tgz", "resolved": "https://registry.npm.taobao.org/seed-random/download/seed-random-2.2.0.tgz",
"integrity": "sha1-KpsZ4lCoFwmSMaW5mk2vgLf77VQ=" "integrity": "sha1-KpsZ4lCoFwmSMaW5mk2vgLf77VQ="
}, },
"select-hose": { "select-hose": {
@@ -14349,8 +14349,8 @@
}, },
"tiny-emitter": { "tiny-emitter": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", "resolved": "https://registry.npm.taobao.org/tiny-emitter/download/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" "integrity": "sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM="
}, },
"tmp": { "tmp": {
"version": "0.0.33", "version": "0.0.33",
@@ -14561,8 +14561,8 @@
}, },
"typed-function": { "typed-function": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/typed-function/-/typed-function-1.1.1.tgz", "resolved": "https://registry.npm.taobao.org/typed-function/download/typed-function-1.1.1.tgz",
"integrity": "sha512-RbN7MaTQBZLJYzDENHPA0nUmWT0Ex80KHItprrgbTPufYhIlTePvCXZxyQK7wgn19FW5bnuaBIKcBb5mRWjB1Q==" "integrity": "sha1-oTFhh+w2KMniGbkcqWkYZgoQE44="
}, },
"typedarray": { "typedarray": {
"version": "0.0.6", "version": "0.0.6",

2
package.json
View File

@@ -14,7 +14,7 @@
"echarts": "^4.4.0", "echarts": "^4.4.0",
"element-resize-detector": "^1.1.15", "element-resize-detector": "^1.1.15",
"element-ui": "^2.12.0", "element-ui": "^2.12.0",
"mathjs": "^6.2.3", "mathjs": "^6.2.5",
"splitpanes": "^2.0.0", "splitpanes": "^2.0.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-awesome-swiper": "^3.1.3", "vue-awesome-swiper": "^3.1.3",

164
src/assets/js/computeddata.js
View File

@@ -122,6 +122,126 @@ class computedFunc {
} }
console.log(this.transBeforeData) console.log(this.transBeforeData)
} }
// 初始化所有的数据
initAllData () {
// 处理好的数据需要返回的值 ===========all
this.restur = {
// 表头数据
tableLine: [],
// 总数据处理
countData: [],
// 计算次数
computedNum: 0
}
// 处理好的转置数据
this.transData = []
// 处理好的图表数据======>折线、柱状图
this.chartsDatazz = {
legend: {
type: 'scroll',
bottom: 0,
data: ['蒸发量', '降水量']
// zlevel: 1
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
calculable: true,
grid: {
top: '7%',
left: '1%',
bottom: '9%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value',
splitNumber: 4
}],
series: [{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
}
// 饼图数据
this.chartsDatazzPie = {
// title: {
// text: '某站点用户访问来源',
// subtext: '纯属虚构',
// x: 'center'
// },
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
bottom: '0',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', 'jhjgbh', '45445455445']
},
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [{
value: 335,
name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 234,
name: '联盟广告'
},
{
value: 135,
name: '视频广告'
},
{
value: 1548,
name: '搜索引擎'
},
{
value: 15458,
name: 'jhjgbh'
},
{
value: 15458,
name: '45445455445'
}
],
itemStyle: {
emphasis: {
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
}
// 选中数据 ==========input
this.selectData = {
// 表头数据
tableLine: [],
// 总数据处理
countData: []
}
}
// 处理input选中数据 // 处理input选中数据
inputSelectData (listArr, lineArr) { // listArr 列选中的数组 //line行选中的数组 inputSelectData (listArr, lineArr) { // listArr 列选中的数组 //line行选中的数组
// 重定向数组 // 重定向数组
@@ -963,5 +1083,49 @@ class computedFunc {
console.log(this.chartsDatazzPie, 'this.chartsDatazzPie') console.log(this.chartsDatazzPie, 'this.chartsDatazzPie')
return this.chartsDatazzPie return this.chartsDatazzPie
} }
// 导出至EXcel tableData:表数据 tableLine：列数据 listInputVal:选中列下标 lineInputVal：选中行下标
insertCollectS (tableData, tableLine, listInputVal, lineInputVal) {
// 定义一个对象用来分发数据
let objData = {
header: null,
tableData: null
}
let yuan = JSON.parse(JSON.stringify(listInputVal))
yuan.unshift(0)
// 除了第一行剩下的行的所有选中的数据
let shHangData = []
// 第一行所有选中的数据
// let hangAllDatas=[]
// let hangAllDatas = tableLine.filter((item, index) => {
// return listInputVal.indexOf(index) !== -1
// }).map((item, index) => {
// return item.label
// })
// lastAllData.push(hangAllDatas)
shHangData = tableData.map((item, index) => {
// console.log(Object.values(item).filter((list, key) => { return yuan.indexOf(key) !== -1 }))
// tableData.forEach((list, key) => {
return Object.values(item).filter((list, key) => { return yuan.indexOf(key) !== -1 })
// })
}).filter((item, index) => {
return lineInputVal.indexOf(index) !== -1
})
let hangAllDatas = yuan.map((item, index) => {
return tableLine[item].label
})
// shHangData.unshift(hangAllDatas)
objData.header = hangAllDatas.map((item, index) => {
return [item, index]
})
objData.tableData = shHangData
// 导出的数据
// console.log(objData, '导出的数据')
return objData
}
// 新增指标
// 参数 labelState：hang/lie 行列状态 labelName新增指标名称 表达式expression 表达式中指标对应的下标labelDownB type：array
insertLabelCom (labelState, labelName, expression, labelDownB) {
}
} }
export default computedFunc export default computedFunc

39
src/components/addCollect/AddCollect.vue
View File

@@ -9,13 +9,15 @@
<input type="text" placeholder="请输入名称" v-model="nameCollect" /> <input type="text" placeholder="请输入名称" v-model="nameCollect" />
</div> </div>
<div class="bottom"> <div class="bottom">
<div>保存</div> <div @click="baoCun()">保存</div>
<div @click="$store.state.addCollectState=false">取消</div> <div @click="$store.state.addCollectState=false">取消</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// 引入数据计算js用于机选渲染的数据
import ComputedData from '../../assets/js/computeddata'
export default { export default {
name: 'addCollect', name: 'addCollect',
data () { data () {
@@ -23,6 +25,41 @@ export default {
imgUrl: require('../../../static/nav/deleteImg.png'), imgUrl: require('../../../static/nav/deleteImg.png'),
nameCollect: '' nameCollect: ''
} }
},
watch: {
nameCollect (val) {
this.$store.state.nameCollect = val
}
},
methods: {
baoCun () {
if (this.$store.state.nameCollect !== '') {
let brt = new ComputedData()
this.$axios({
method: 'POST',
url: 'member/index/add',
data: {
type: this.$route.query.type === 'area' ? 2 : 1,
adv: this.$store.state.searchState,
classify_id: this.$store.state.selectDataLeft.id,
// 简单查询/高级查询
data: this.$store.state.searchState === 1 ? [] : brt.insertCollectS(this.$store.state.tableData, this.$store.state.tableLine, this.$store.state.listInputVal, this.$store.state.lineInputVal),
name: this.$store.state.nameCollect
}
}).then(res => {
console.log(res, '高级查询数据展示')
// 请求接口完成 请求成功
if (res.data.code === 200) {
alert('添加成功')
this.$store.state.addCollectState = false
}
}).catch((fail) => {
console.log(fail)
})
} else {
alert('您添加的收藏名称不能为空！请重新填写！')
}
}
} }
} }
</script> </script>

131
src/components/advancedQuery/AdvancedQuery.vue
View File

@@ -8,7 +8,6 @@
<el-row class="tac" style="overflow: auto;height:44.875rem;"> <el-row class="tac" style="overflow: auto;height:44.875rem;">
<el-col :span="24"> <el-col :span="24">
<el-menu <el-menu
default-active="1-1-1"
class="el-menu-vertical-demo" class="el-menu-vertical-demo"
@open="handleOpen" @open="handleOpen"
@close="handleClose" @close="handleClose"
@@ -54,10 +53,10 @@
<pane min-size="48" size="47.5"> <pane min-size="48" size="47.5">
<div class="centerNavs"> <div class="centerNavs">
<div class="title"> <div class="title">
<input type="text" placeholder="请输入你要查询的指标" /> <input type="text" placeholder="请输入你要查询的指标" v-model="labelNameSDFD" />
<div>查询</div> <div @click="searchArealy()">查询</div>
<input type="checkbox" v-model="checkboxState" /> <input type="checkbox" v-model="checkboxState" />
<span>从结果中筛选 共3200条</span> <span>从结果中筛选 共{{searchDatas.length}}条</span>
</div> </div>
<div class="titleContSelect"> <div class="titleContSelect">
<span @click="clickStateOption('checkAll')">全选</span> <span @click="clickStateOption('checkAll')">全选</span>
@@ -73,7 +72,7 @@
@change="clickStateOption('oneClick',index)" @change="clickStateOption('oneClick',index)"
:ref="'input'+index" :ref="'input'+index"
/> />
<img :src="zhibiaoImg" alt /> <img :src="zhibiaoImg" alt @click="explainSd(item.desc)" />
<span>{{item.nameText}}</span> <span>{{item.nameText}}</span>
</div> </div>
</div> </div>
@@ -94,27 +93,33 @@
@change="clickStateOption('oneClick',index)" @change="clickStateOption('oneClick',index)"
:ref="'input'+index" :ref="'input'+index"
/> />
<img :src="zhibiaoImg" alt /> <img :src="zhibiaoImg" alt @click="explainSd(item.desc)" />
<span>{{item.nameText}}</span> <span>{{item.nameText}}</span>
</div> </div>
</div> </div>
</div> </div>
</pane> </pane>
</splitpanes> </splitpanes>
<!-- 指标解释 -->
<LabelExplain v-if="$store.state.labelExplainState"></LabelExplain>
</div> </div>
</template> </template>
<script> <script>
// 引入窗口拆分组件 // 引入窗口拆分组件
import { Splitpanes, Pane } from 'splitpanes' import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css' import 'splitpanes/dist/splitpanes.css'
// 指标解释
import LabelExplain from '@/components/labelExplain/LabelExplain.vue'
export default { export default {
name: 'advancedQuery', name: 'advancedQuery',
components: { components: {
Splitpanes, Splitpanes,
Pane Pane,
LabelExplain: LabelExplain
}, },
data () { data () {
return { return {
// 默认展开
zhibiaoImg: require('../../../static/chatCont/zhibiaojieshi.png'), zhibiaoImg: require('../../../static/chatCont/zhibiaojieshi.png'),
leftCateData: null, leftCateData: null,
checkboxState: false, checkboxState: false,
@@ -156,12 +161,27 @@ export default {
// 选中的指标(右侧) // 选中的指标(右侧)
changeActive: [], changeActive: [],
// 右侧打钩总数 // 右侧打钩总数
rightGoCount: 0 rightGoCount: 0,
// 选中的指标展开分类id
selectClassId: null,
// 查询的指标
labelNameSDFD: ''
}
},
// 监听对象变化
watch: {
changeActive: {
handler: function (data) {
this.valueSearches()
},
immediate: true,
deep: true
} }
}, },
methods: { methods: {
handleOpen (key, keyPath) { handleOpen (key, keyPath) {
console.log(key, keyPath) console.log(key, keyPath)
this.getCateData()
}, },
handleClose (key, keyPath) { handleClose (key, keyPath) {
console.log(key, keyPath) console.log(key, keyPath)
@@ -177,14 +197,20 @@ export default {
this.searchDatas.forEach((item, index) => { this.searchDatas.forEach((item, index) => {
/* eslint-disable */ /* eslint-disable */
rightGoCount < 100 ? (item.inputState = true, this.changeActive.find((list, key) => { return list.nameText === item.nameText }) === undefined ? this.changeActive.push(item) : 1) : (item.inputState = false) this.rightGoCount < 100 ? (item.inputState = true, this.changeActive.find((list, key) => { return list.nameText === item.nameText }) === undefined ? this.changeActive.push(item) : 1) : (item.inputState = false)
}) })
this.rightGoCount = this.searchDatas.length
break break
case 'inverse':// 反选 case 'inverse':// 反选
let numSd = []
this.searchDatas.forEach((item, index) => { this.searchDatas.forEach((item, index) => {
/* eslint-disable */ /* eslint-disable */
rightGoCount < 100 ? (item.inputState = !item.inputState, this.changeActive.find((list, key) => { return list.nameText === item.nameText }) === undefined ? this.changeActive.push(item) : 1) : (item.inputState = false) this.rightGoCount < 100 ? (item.inputState = !item.inputState, this.changeActive.find((list, key) => { return list.nameText === item.nameText }) === undefined ? this.changeActive.push(item) : 1) : (item.inputState = false)
if (item.inputState) {
numSd.push(item.inputState)
}
}) })
this.rightGoCount = numSd.length
break break
case 'empty':// 清空 case 'empty':// 清空
this.searchDatas = [] this.searchDatas = []
@@ -209,6 +235,9 @@ export default {
prev[next] = (prev[next] + 1) || 1 prev[next] = (prev[next] + 1) || 1
return prev return prev
}, {})['true'] }, {})['true']
if (this.rightGoCount === undefined) {
this.rightGoCount = 0
}
break break
} }
}, },
@@ -225,10 +254,90 @@ export default {
// 请求接口完成 请求成功 // 请求接口完成 请求成功
if (res.data.code === 200) { if (res.data.code === 200) {
this.leftCateData = res.data.data.list this.leftCateData = res.data.data.list
this.selectClassId = this.leftCateData[0].id
console.log(this.selectClassId,'this.selectClassId000')
this.searchArealy()
} }
}).catch((fail) => { }).catch((fail) => {
console.log(fail) console.log(fail)
}) })
},
// 高级查询指标数据
searchDatasf() {
this.$axios({
method: 'GET',
url: 'data/data/quota',
params: {
id: this.selectClassId //分类id
}
}).then(res => {
console.log(res, '高级查询指标数据')
// 请求接口完成 请求成功
if (res.data.code === 200) {
this.searchDatas = res.data.data.list.map((item, index) => {
return {
// input选中状态
inputState: false,
// 指标解释显示状态
zbjsState: false,
// 指标名称
nameText: item.name,
id: item.id,
name: item.name
}
})
}
}).catch((fail) => {
console.log(fail)
})
},
// 按照指标名称从已有的指标集中查询
searchArealy() {
// if (this.labelNameSDFD !== '') {
this.$axios({
method: 'GET',
url: 'data/data/search',
params: {
id: this.selectClassId, //分类id
key: this.labelNameSDFD //搜索关键词
}
}).then(res => {
console.log(res, '查询指标数据')
// 请求接口完成 请求成功
if (res.data.code === 200) {
this.searchDatas = res.data.data.list.map((item, index) => {
return {
// input选中状态
inputState: false,
// 指标解释显示状态
zbjsState: false,
// 指标名称
nameText: item.name,
id: item.id,
classify_id: item.classify_id,
desc: item.desc,
name: item.name
}
})
}
}).catch((fail) => {
console.log(fail)
})
// } else {
// alert('查询的指标名称不能为空！')
// }
},
// 点击查询数据代参数跳到简单查询，高级查询数据
valueSearches() {
this.$store.state.advanceData = this.changeActive.filter((item, index) => {
return item.inputState === true
})
},
// 指标解释
explainSd(expl) {
this.$store.state.labelExplainData = expl
this.$store.state.labelExplainState = true
} }
}, },
mounted() { mounted() {
@@ -245,7 +354,7 @@ export default {
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
border: 1px solid red; // border: 1px solid red;
.leftNavS { .leftNavS {
width: 100%; width: 100%;
height: 50rem; height: 50rem;

346
src/components/chartsCont/ChartsCont.vue
View File

@@ -1,72 +1,75 @@
<template> <template>
<div class="chartsCont" v-if="transBefore.tableExplain!==''"> <div>
<Echarts <div class="chartsCont" v-if="transBefore">
v-if="indStatic!==0" <Echarts
:echartsDatarts="echartsDatarts" v-if="indStatic!==0"
@rowColInd="rowColInd" :echartsDatarts="echartsDatarts"
:echartsDatartsPie="echartsDatartsPie" @rowColInd="rowColInd"
></Echarts> :echartsDatartsPie="echartsDatartsPie"
<el-table :data="tableData" style="width: 100%" height="360" ref="table"> ></Echarts>
<!-- <el-table-column fixed prop="date" label="日期" width="150" sortable></el-table-column> <el-table :data="tableData" style="width: 100%" height="360" ref="table">
<el-table-column prop="name" label="姓名" width="120" sortable></el-table-column> <!-- <el-table-column fixed prop="date" label="日期" width="150" sortable></el-table-column>
<el-table-column prop="province" label="省份" width="120" sortable></el-table-column> <el-table-column prop="name" label="姓名" width="120" sortable></el-table-column>
<el-table-column prop="city" label="市区" width="120" sortable></el-table-column> <el-table-column prop="province" label="省份" width="120" sortable></el-table-column>
<el-table-column prop="address" label="地址" width="300" sortable></el-table-column>--> <el-table-column prop="city" label="市区" width="120" sortable></el-table-column>
<el-table-column <el-table-column prop="address" label="地址" width="300" sortable></el-table-column>-->
:prop="item.labelId" <el-table-column
:label="item.label" :prop="item.labelId"
:fixed="index===0?true:false" :label="item.label"
width="180" :fixed="index===0?true:false"
sortable width="180"
v-for="(item,index) in tableLine" sortable
:key="index" v-for="(item,index) in tableLine"
> :key="index"
<template slot-scope="scope" slot="header"> >
<img <template slot-scope="scope" slot="header">
:src="indexToExplain" <img
alt :src="indexToExplain"
v-if="index!==0&&!transState&&areaDataState!=='area'&&!computedLineSty(index)" alt
class="slotExplain" v-if="index!==0&&!transState&&areaDataState!=='area'&&!computedLineSty(index)"
:style="{'margin':indStatic===0?'0':''}" class="slotExplain"
@click="indexExplain(scope.column.label)" :style="{'margin':indStatic===0?'0':''}"
/> @click="indexExplain(scope.column.label)"
<input />
v-if="index!==0&&indStatic!==0" <input
type="checkbox" v-if="index!==0&&indStatic!==0"
style="cursor: pointer;" type="checkbox"
@click.stop="listInput(index)" style="cursor: pointer;"
:style="{'margin':'0 0.45rem'}" @click.stop="listInput(index)"
:checked="listInputVal.indexOf(index)!==-1" :style="{'margin':'0 0.45rem'}"
ref="listInputSelect" :checked="listInputVal.indexOf(index)!==-1"
/> ref="listInputSelect"
<span :style="{'color':computedLineSty(index)?'red':''}">{{scope.column.label}}</span> />
</template> <span :style="{'color':computedLineSty(index)?'red':''}">{{scope.column.label}}</span>
<template slot-scope="scope"> </template>
<input <template slot-scope="scope">
v-if="index===0&&indStatic!==0" <input
type="checkbox" v-if="index===0&&indStatic!==0"
style="cursor: pointer;" type="checkbox"
@click.stop="lineInput(scope.$index)" style="cursor: pointer;"
:checked="lineInputVal.indexOf(scope.$index)!==-1" @click.stop="lineInput(scope.$index)"
ref="lineInputSelect" :checked="lineInputVal.indexOf(scope.$index)!==-1"
/> ref="lineInputSelect"
<img />
:src="indexToExplain" <img
alt :src="indexToExplain"
v-if="index===0&&transState&&areaDataState!=='area'&&!computedListSty(scope.$index)" alt
class="slotExplain" v-if="index===0&&transState&&areaDataState!=='area'&&!computedListSty(scope.$index)"
:style="{'margin':indStatic===0?'0':''}" class="slotExplain"
@click="indexExplain(scope.row['table_line0'])" :style="{'margin':indStatic===0?'0':''}"
/> @click="indexExplain(scope.row['table_line0'])"
<span />
:style="{'color':(computedListSty(scope.$index)||computedLineSty(index))?'red':''}" <span
>{{scope.row['table_line'+index]}}</span> :style="{'color':(computedListSty(scope.$index)||computedLineSty(index))?'red':''}"
</template> >{{scope.row['table_line'+index]}}</span>
</el-table-column> </template>
</el-table> </el-table-column>
<!-- 列表 表说明--> </el-table>
<div class="tableExplain">{{transBefore.tableExplain}}</div> <!-- 列表 表说明-->
<!-- 指标弹窗 --> <div class="tableExplain">{{transBefore.tableExplain}}</div>
<!-- 指标弹窗 -->
</div>
<div v-if="!transBefore" class="tishi54">暂无数据</div>
</div> </div>
</template> </template>
@@ -94,6 +97,15 @@ export default {
defaultDataRight: { defaultDataRight: {
type: Object, type: Object,
required: false required: false
},
// 表数据状态
statesDf: {
type: Number,
default: 1
},
stateTells: {
type: Boolean,
required: true
} }
}, },
data () { data () {
@@ -264,15 +276,16 @@ export default {
// 当前数据，统计数据中的哪一种text:('无','SUM求和','x平均数','MAX最大值','MIN最小值','MD中位数','MO众数','S²方差','S标准差'),stateType:('line','list') // 当前数据，统计数据中的哪一种text:('无','SUM求和','x平均数','MAX最大值','MIN最小值','MD中位数','MO众数','S²方差','S标准差'),stateType:('line','list')
nowDataTJ: { text: '无', stateType: 'line' }, nowDataTJ: { text: '无', stateType: 'line' },
// 转置前总数据 // 转置前总数据
transBefore: { // transBefore: {
tableExplain: '', // tableExplain: '',
timeArr: [], // timeArr: [],
termsName: [], // termsName: [],
termsExplain: [], // termsExplain: [],
areaName: [], // areaName: [],
transBeforeTermsData: [], // transBeforeTermsData: [],
transBeforeAreaData: [] // transBeforeAreaData: []
}, // },
transBefore: null,
// transBefore: { // transBefore: {
// // 数据表说明 // // 数据表说明
// tableExplain: '注： 按照统计制度要求，我国CPI每五年进行一次基期轮换，2016年1月开始使用2015年作为新一轮的对比基期，前三轮基期分别为2000年、2005年和2010年。CPI基期轮换是一项国际惯例，目的是使CPI调查所涉及到的商品和服务更具有代表性，更及时准确反映居民消费结构的新变化和物价的实际变动。 参考联合国制定的《按目的划分的个人消费分类》（COICOP）和国家统计局发布的《居民消费支出分类（2013）》，我们对CPI调查目录进行了调整，新基期调查目录和规格品与国际标准更为接近，一些新产品新服务纳入其中，能进一步反映居民消费和经济结构的变化。与上一轮基期相比，本轮基期的CPI调查目录有几个主要变化。一是按照《居民消费支出分类（2013）》，原来的“食品”、“烟酒”合并为现在的“食品烟酒”；原来的“医疗保健和个人用品”被拆分到现在的“生活用品及服务”、“医疗保健”和“其他用品和服务”中；原来的“娱乐教育文化用品及服务”被拆分到现在的“教育文化和娱乐”和“其他用品和服务”中；原来的“家庭设备用品及维修服务”被拆分到现在的“生活用品及服务”和“其他用品及服务”中。二是食品的指标内涵发生了变化，旧分类中的“食品”为大类，包括粮食、肉禽、鲜菜、鲜果、水产品、茶及饮料、在外餐饮等分类；新“食品”为“食品烟酒”大类下的中类，仅包括粮食、畜肉、禽肉、鲜菜、鲜果、水产品等，不再包括“茶及饮料”和“在外餐饮”两项。三是新增了“园艺花卉及用品”、“宠物及用品”、“养老服务”和“金融服务”等居民支出增加较快的分类，能够更加及时准确反映居民消费结构的新变化。', // tableExplain: '注： 按照统计制度要求，我国CPI每五年进行一次基期轮换，2016年1月开始使用2015年作为新一轮的对比基期，前三轮基期分别为2000年、2005年和2010年。CPI基期轮换是一项国际惯例，目的是使CPI调查所涉及到的商品和服务更具有代表性，更及时准确反映居民消费结构的新变化和物价的实际变动。 参考联合国制定的《按目的划分的个人消费分类》（COICOP）和国家统计局发布的《居民消费支出分类（2013）》，我们对CPI调查目录进行了调整，新基期调查目录和规格品与国际标准更为接近，一些新产品新服务纳入其中，能进一步反映居民消费和经济结构的变化。与上一轮基期相比，本轮基期的CPI调查目录有几个主要变化。一是按照《居民消费支出分类（2013）》，原来的“食品”、“烟酒”合并为现在的“食品烟酒”；原来的“医疗保健和个人用品”被拆分到现在的“生活用品及服务”、“医疗保健”和“其他用品和服务”中；原来的“娱乐教育文化用品及服务”被拆分到现在的“教育文化和娱乐”和“其他用品和服务”中；原来的“家庭设备用品及维修服务”被拆分到现在的“生活用品及服务”和“其他用品及服务”中。二是食品的指标内涵发生了变化，旧分类中的“食品”为大类，包括粮食、肉禽、鲜菜、鲜果、水产品、茶及饮料、在外餐饮等分类；新“食品”为“食品烟酒”大类下的中类，仅包括粮食、畜肉、禽肉、鲜菜、鲜果、水产品等，不再包括“茶及饮料”和“在外餐饮”两项。三是新增了“园艺花卉及用品”、“宠物及用品”、“养老服务”和“金融服务”等居民支出增加较快的分类，能够更加及时准确反映居民消费结构的新变化。',
@@ -310,7 +323,7 @@ export default {
// 调用存储的对象 // 调用存储的对象
objCompBefore: null, objCompBefore: null,
// echarts渲染的数据======>非饼图 // echarts渲染的数据======>非饼图
echartsDatarts: {}, echartsDatarts: { ghg: 1 },
// 饼图数据 // 饼图数据
echartsDatartsPie: {}, echartsDatartsPie: {},
// 行列转换索引状态0行1列 // 行列转换索引状态0行1列
@@ -343,50 +356,134 @@ export default {
// immediate: true, // immediate: true,
// deep: true // deep: true
// } // }
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
},
immediate: true,
deep: true
},
tableLine: {
handler () {
this.$store.state.tableLine = this.tableLine
},
immediate: true,
deep: true
},
transBefore (newval, oldval) { transBefore (newval, oldval) {
if (newval) { if (newval && this.transBefore) {
this.showTable() this.showTable()
} }
}, },
indStatic (newValue, oldValue) { indStatic (newValue, oldValue) {
console.log(newValue, 'newValue1212') console.log(newValue, 'newValue1212')
this.chartsShow() if (this.transBefore) {
this.chartsShow()
}
}, },
'chartsStatusMegger.transState': { 'chartsStatusMegger.transState': {
handler () { handler () {
this.transState = this.chartsStatusMegger.transState this.transState = this.chartsStatusMegger.transState
this.showTable() if (this.transBefore) {
this.showTable()
}
}, },
immediate: true, immediate: true,
deep: true deep: true
}, },
'chartsStatusMegger.computedStatic': { 'chartsStatusMegger.computedStatic': {
handler () { handler () {
console.log(this.chartsStatusMegger, 1255555) if (this.transBefore) {
this.nowDataTJ = this.chartsStatusMegger.computedStatic console.log(this.chartsStatusMegger, 1255555)
this.dataTJComput() this.nowDataTJ = this.chartsStatusMegger.computedStatic
// 重新渲染表 this.dataTJComput()
this.$nextTick(() => { // 重新渲染表
console.log(this.$refs.table, 'this.$refs.table') this.$nextTick(() => {
if (this.$refs.table !== undefined) { console.log(this.$refs.table, 'this.$refs.table')
this.$refs.table.doLayout() if (this.$refs.table !== undefined) {
} this.$refs.table.doLayout()
}) }
})
}
}, },
immediate: true, immediate: true,
deep: true deep: true
}, },
// 监听行列图表转换 // 监听行列图表转换
rowColIndex (newVal, oldVal) { rowColIndex (newVal, oldVal) {
this.chartsShow() if (this.transBefore) {
this.chartsShow()
}
}, },
// 监听左侧菜单的数据变化 // 监听左侧菜单的数据变化
defaultDataRight: { defaultDataRight: {
handler () { handler (val) {
this.getDatas() console.log(val, '左侧数据变化')
if (val) {
// 初始化公共数据
// console.log(this.objCompBefore, 'this.objCompBefore')
}
}, },
immediate: true, immediate: true,
deep: true deep: true
},
// 监听下拉状态变化
stateTells (val) {
if (val) {
if (JSON.parse(localStorage.getItem('classFiyData')) && JSON.parse(localStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id)) {
this.transBefore = {}
this.transBefore.tableExplain = JSON.parse(localStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.tableExplain
this.transBefore.timeArr = JSON.parse(localStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.timeArr.map((item, index) => { return item.toString() })
this.transBefore.termsName = JSON.parse(localStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.termsName
this.transBefore.termsExplain = JSON.parse(localStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.termsExplain
this.transBefore.areaName = JSON.parse(localStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.areaName
this.transBefore.transBeforeTermsData = JSON.parse(localStorage.getItem('classFiyData')).find(item => item.id === this.defaultDataRight.id).data.transBeforeTermsData
this.transBefore.transBeforeAreaData = JSON.parse(localStorage.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))
} else {
console.log(this.defaultDataRight, '获取左侧选中数据555')
console.log(this.$store.state.selectData, 'this.$store.state.selectData')
console.log(this.$store.state.selectfilter, 'this.$store.state.selectfilter')
this.getDatas()
}
}
},
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
// console.log(this.transBefore, '我要改变')
// 重新渲染表格
this.$refs.table.doLayout()
// 告诉父组件改完了
this.$emit('tellAreadly', 1)
}
} }
}, },
methods: { methods: {
@@ -638,8 +735,10 @@ export default {
}, },
// 获取后台数据表中的数据 // 获取后台数据表中的数据
getDatas () { getDatas () {
console.log(this.defaultDataRight, '获取数据')
// 初始化计算数据 // 初始化计算数据
if (this.transBefore) {
this.objCompBefore.initAllData()
}
this.$axios({ this.$axios({
method: 'GET', method: 'GET',
url: 'data/data/detail', url: 'data/data/detail',
@@ -649,22 +748,39 @@ export default {
id: this.defaultDataRight.id, // 分类id id: this.defaultDataRight.id, // 分类id
area: this.downLaSelect.area, // 选中的地区 area: this.downLaSelect.area, // 选中的地区
quota: this.downLaSelect.label, // 选中的指标 quota: this.downLaSelect.label, // 选中的指标
cate: this.selectState// 1帅选指标 2筛选地区 cate: this.selectState, // 1筛选指标 2筛选地区
f: this.$store.state.selectfilter, // year=>年度分类，monthly=>月度分类，quarter=>季度分类
// filters: this.$store.state.selectfilter, // year=>年度分类，monthly=>月度分类，quarter=>季度分类
data: this.$store.state.selectData // 时间
} }
}).then(res => { }).then(res => {
console.log(res, '获取数据展示数据') console.log(res, '获取数据展示数据')
// 请求接口完成 请求成功 // 请求接口完成 请求成功
if (res.data.code === 200) { if (res.data.code === 200) {
// if (res.data.data.areaName.length !== 0) { // if (res.data.data.areaName.length !== 0) {
// this.transBefore = {} this.transBefore = {}
// this.transBefore.tableExplain = res.data.data.tableExplain this.transBefore.tableExplain = res.data.data.tableExplain
// this.transBefore.timeArr = res.data.data.timeArr this.transBefore.timeArr = res.data.data.timeArr.map((item, index) => { return item.toString() })
// this.transBefore.termsName = res.data.data.termsName this.transBefore.termsName = res.data.data.termsName
// this.transBefore.termsExplain = res.data.data.termsExplain this.transBefore.termsExplain = res.data.data.termsExplain
// this.transBefore.areaName = res.data.data.areaName this.transBefore.areaName = res.data.data.areaName
// this.transBefore.transBeforeTermsData = res.data.data.transBeforeTermsData this.transBefore.transBeforeTermsData = res.data.data.transBeforeTermsData
// this.transBefore.transBeforeAreaData = res.data.data.transBeforeAreaData 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 = null
this.$store.state.transdtr = null
// 全局总数据
this.$store.state.transBefore = null
this.$store.state.noChangeData = null
} }
}).catch((fail) => { }).catch((fail) => {
console.log(fail, 2369) console.log(fail, 2369)
@@ -677,11 +793,11 @@ export default {
return (ind) => { return (ind) => {
let styStatic = false let styStatic = false
if (this.transState) { if (this.transState) {
if (ind > (this.transBefore.transBeforeTermsData.length)) { if (ind > (this.transBefore.transBeforeTermsData[0].length)) {
styStatic = true styStatic = true
} }
} else { } else {
if (ind > (this.transBefore.transBeforeTermsData[0].length)) { if (ind > (this.transBefore.transBeforeTermsData.length)) {
styStatic = true styStatic = true
} }
} }
@@ -703,10 +819,18 @@ export default {
} }
return styStatic return styStatic
} }
},
// 监听全局表数据的的变化从而改变渲染数据
transBefores () {
return this.$store.state.allState
} }
}, },
created () { created () {
this.getDatas() // this.getDatas()
},
updated () {
// 重新渲染表格
this.$refs.table.doLayout()
}, },
mounted () { mounted () {
// console.log(new ComputedData()) // console.log(new ComputedData())
@@ -717,9 +841,15 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tishi54 {
margin-top: 3rem;
font-size: 2rem;
text-align: center;
color: #ccc;
}
.chartsCont { .chartsCont {
margin: 1.5rem 0; margin: 1.5rem 0;
border: 0.0625rem solid red; // border: 0.0625rem solid red;
padding: 0 1.5rem; padding: 0 1.5rem;
& > .tableExplain { & > .tableExplain {
padding: 0.75rem; padding: 0.75rem;

76
src/components/chartsCut/ChartsCut.vue
View File

@@ -21,7 +21,7 @@
></cityPicker> ></cityPicker>
</div> </div>
<!-- 根据时间筛选 --> <!-- 根据时间筛选 -->
<div class="chart_right_time"> <div class="chart_right_time" v-if="cityDataTime">
时间： 时间：
<div class="chart_right_cont"> <div class="chart_right_cont">
<cityPicker <cityPicker
@@ -48,7 +48,11 @@ import cityPicker from '@/components/cityPicker/CityPicker.vue'
export default { export default {
name: 'chartsCut', name: 'chartsCut',
props: { props: {
// 渲染图表所需数据
defaultDataRight: {
type: Object,
required: false
}
}, },
components: { components: {
cityPicker: cityPicker cityPicker: cityPicker
@@ -83,16 +87,7 @@ export default {
} }
], ],
// 栏目数据 结构不可变 // 栏目数据 结构不可变
cityDataTime: [ cityDataTime: null,
{ 'id': '110000', 'name': '最近13个月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
{ 'id': '110000', 'name': '最近24个月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
{ 'id': '110000', 'name': '最近36个月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
],
citNewTime: [
{ 'id': '110000', 'name': '最近13个月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
{ 'id': '110000', 'name': '最近24个月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
{ 'id': '110000', 'name': '最近36个月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
],
// 栏目级数 // 栏目级数
jishuTime: 1, jishuTime: 1,
// 默认显示栏目 // 默认显示栏目
@@ -132,6 +127,24 @@ export default {
showInputStu: false showInputStu: false
} }
}, },
watch: {
// 监听左侧菜单的数据变化
defaultDataRight: {
handler (val) {
console.log(val, '左侧数据变化chartsCut')
if (val) {
// 初始化公共数据
if (this.$route.query.type !== 'area') {
this.searchSelect(this.$route.query.type)
} else {
}
}
},
immediate: true,
deep: true
}
},
methods: { methods: {
// 点击切换图表 // 点击切换图表
cutChartsTap (ind) { cutChartsTap (ind) {
@@ -146,7 +159,13 @@ export default {
// 被选中时触发 // 被选中时触发
choiceCallerTime (resu) { choiceCallerTime (resu) {
console.log(resu, '66666') console.log(resu, '66666')
console.log(this.cityDefaultName) // console.log(this.cityDefaultName)
// 改变选中值索引
if (this.$store.state.selectData !== undefined) {
console.log(this.$store.state.selectData, '被选中的值')
this.$store.state.selectData = resu[2].indexID
}
// 将值传给父组件 // 将值传给父组件
this.$emit('comTime', resu[2].name) this.$emit('comTime', resu[2].name)
this.showInputStu = !this.showInputStu this.showInputStu = !this.showInputStu
@@ -159,10 +178,39 @@ export default {
showKuangCat () { showKuangCat () {
console.log(1250) console.log(1250)
this.isHideProp = false this.isHideProp = false
},
// 查询下拉筛选条件
async searchSelect (type) {
await this.$axios({
method: 'GET',
url: 'data/data/quick',
params: {
type: type
}
}).then(res => {
console.log(res, '下拉筛选条件')
// 请求接口完成 请求成功
if (res.data.code === 200) {
if (this.$route.query.type !== 'area') {
// console.log(Object.keys(res.data.data.list))
// console.log(Object.values(res.data.data.list))
this.cityDataTime = Object.keys(res.data.data.list).map((item, index) => {
return { 'id': '110000', 'name': Object.values(res.data.data.list)[index], 'parentId': '100000', 'shortName': '北京', 'cityCode': '', indexID: item }
})
// 默认选中第一个
this.$store.state.selectData = this.cityDataTime[0].indexID
console.log(this.$store.state.selectData, 'this.cityDataTime[0].indexID')
// 告诉父组件我获取到了
this.$emit('stateTell', true)
}
}
}).catch((fail) => {
console.log(fail)
})
} }
}, },
mounted () { mounted () {
this.cityDataTime = this.citNewTime
this.cityDataArea = this.cityDataAreas this.cityDataArea = this.cityDataAreas
} }
} }

4
src/components/cityPicker/CityPicker.vue
View File

@@ -111,7 +111,7 @@ export default {
watch: { watch: {
cityData: { cityData: {
handler: function (newVal, oldVal) { handler: function (newVal, oldVal) {
console.log(newVal, '5555555555') // console.log(newVal, '5555555555')
this.initDatakf() this.initDatakf()
}, },
immediate: true, immediate: true,
@@ -120,7 +120,7 @@ export default {
}, },
computed: { computed: {
newCityData () { newCityData () {
console.log(this.cityData, 'this.cityData') // console.log(this.cityData, 'this.cityData')
/* eslint-disable */ /* eslint-disable */
this.inlay[0].filterDatas = [] this.inlay[0].filterDatas = []
return JSON.parse(JSON.stringify(this.cityData)) return JSON.parse(JSON.stringify(this.cityData))

1
src/components/dimension/Dimension.vue
View File

@@ -87,6 +87,7 @@ export default {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 10;
& > .container { & > .container {
width: 64.375rem; width: 64.375rem;
height: 33rem; height: 33rem;

10
src/components/echarts/echarts.vue
View File

@@ -146,8 +146,10 @@ export default {
echartsDatarts: { echartsDatarts: {
handler (newVal, oldVal) { handler (newVal, oldVal) {
console.log(newVal, '11111') console.log(newVal, '11111')
this.option = JSON.parse(JSON.stringify(newVal)) if (newVal !== undefined) {
this.drawEcharts() this.option = JSON.parse(JSON.stringify(newVal))
this.drawEcharts()
}
}, },
immediate: true, immediate: true,
deep: true deep: true
@@ -198,11 +200,11 @@ export default {
.echarts { .echarts {
width: 100%; width: 100%;
height: 32rem; height: 32rem;
border: 1px solid red; // border: 1px solid red;
& > div:nth-child(2) { & > div:nth-child(2) {
max-width: 100%; max-width: 100%;
min-height: 30rem; min-height: 30rem;
border: 1px solid red; // border: 1px solid red;
} }
& > div:nth-child(1) { & > div:nth-child(1) {
width: 100%; width: 100%;

247
src/components/editCom/EditCom.vue
View File

@@ -11,9 +11,9 @@
<input type="radio" value="lie" v-model="radioSelect" />列 <input type="radio" value="lie" v-model="radioSelect" />列
</div> </div>
<div> <div>
<span>全选</span> <span @click="allSelect()">全选</span>
<span>|</span> <span>|</span>
<span>反选</span> <span @click="fanselect()">反选</span>
</div> </div>
</div> </div>
<div class="contanin"> <div class="contanin">
@@ -24,7 +24,7 @@
</div> </div>
<!-- 确定取消 --> <!-- 确定取消 -->
<div class="bottom"> <div class="bottom">
<div>确定</div> <div @click="trueEdit">确定</div>
<div @click="$store.state.editWindowState=false">取消</div> <div @click="$store.state.editWindowState=false">取消</div>
</div> </div>
</div> </div>
@@ -66,6 +66,245 @@ export default {
{ text: '接收到符合', state: false } { text: '接收到符合', state: false }
] ]
} }
},
watch: {
radioSelect (newVal, oldVal) {
console.log(newVal)
if (newVal === 'hang') {
// 行列新增渲染
if (this.$route.query.type === 'area') {
this.datalist = this.$store.state.noChangeData.areaName
} else {
if (!this.$store.state.selectLabelHang) {
this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
return {
text: item,
state: true,
id: index
}
})
} else {
this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
let state = true
if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
state = false
} else {
state = true
}
console.log(state, 'state')
return {
text: item,
state: state,
id: index
}
})
}
}
} else if (newVal === 'lie') {
if (!this.$store.state.selectLabelLie) {
this.datalist = this.$store.state.noChangeData.timeArr.map((item, index) => {
return {
text: item,
state: true,
id: index
}
})
} else {
this.datalist = this.$store.state.noChangeData.timeArr.map((item, index) => {
let state = true
if (this.$store.state.selectLabelLie.indexOf(index) === -1) {
state = false
} else {
state = true
}
console.log(state, 'state')
return {
text: item,
state: state,
id: index
}
})
}
}
}
},
methods: {
allSelect () {
this.datalist.forEach((item, index) => {
item.state = true
})
},
fanselect () {
this.datalist.forEach((item, index) => {
item.state = !item.state
})
},
// 筛选确定
trueEdit () {
if (this.radioSelect === 'hang') {
if (this.$route.query.type !== 'area') {
// 选中的下标
let lebalIndex = this.datalist.filter((item, index) => {
return item.state === true
}).map((item, index) => {
return item.id
})
this.$store.state.selectLabelHang = lebalIndex
console.log(lebalIndex, '下标')
this.$store.state.transBefore.termsExplain = this.$store.state.noChangeData.termsExplain.filter((item, index) => {
return lebalIndex.indexOf(index) !== -1
})
this.$store.state.transBefore.termsName = this.$store.state.noChangeData.termsName.filter((item, index) => {
return lebalIndex.indexOf(index) !== -1
})
this.$store.state.transBefore.transBeforeTermsData = this.$store.state.noChangeData.transBeforeTermsData.filter((item, index) => {
return lebalIndex.indexOf(index) !== -1
})
this.$store.state.editWindowState = false
this.$emit('emitState', true)
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
} else {
// 选中的下标
let lebalIndex = this.datalist.filter((item, index) => {
return item.state === true
}).map((item, index) => {
return item.id
})
this.$store.state.selectLabelHang = lebalIndex
console.log(lebalIndex, '下标')
this.$store.state.transBefore.termsExplain = this.$store.state.noChangeData.termsExplain.filter((item, index) => {
return lebalIndex.indexOf(index) !== -1
})
this.$store.state.transBefore.termsName = this.$store.state.noChangeData.termsName.filter((item, index) => {
return lebalIndex.indexOf(index) !== -1
})
this.$store.state.transBefore.transBeforeAreaData = this.$store.state.noChangeData.transBeforeAreaData.filter((item, index) => {
return lebalIndex.indexOf(index) !== -1
})
this.$store.state.editWindowState = false
this.$emit('emitState', true)
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
}
} else if (this.radioSelect === 'lie') {
if (this.$route.query.type !== 'area') {
// 选中的下标
let lebalIndex = this.datalist.filter((item, index) => {
return item.state === true
}).map((item, index) => {
return item.id
})
this.$store.state.selectLabelLie = lebalIndex
console.log(lebalIndex, '下标')
// this.$store.state.transBefore.termsExplain = this.$store.state.transBefore.termsExplain.filter((item, index) => {
// return lebalIndex.indexOf(index) !== -1
// })
// this.$store.state.transBefore.termsName = this.$store.state.transBefore.termsName.filter((item, index) => {
// return lebalIndex.indexOf(index) !== -1
// })
// 数据转置
let gdt = JSON.parse(JSON.stringify(this.$store.state.noChangeData.transBeforeTermsData))
let waiBrr = gdt[0].map(function (col, index) {
return gdt.map((row, key) => {
return row[index]
})
})
waiBrr = waiBrr.filter((item, index) => {
return lebalIndex.indexOf(index) !== -1
})
// 转置回来
waiBrr = waiBrr.map(function (col, index) {
return waiBrr.map((row, key) => {
return row[index]
})
})
// 赋值
this.$store.state.transBefore.transBeforeTermsData = waiBrr
this.$store.state.transBefore.timeArr = this.$store.state.noChangeData.timeArr.filter((item, index) => {
return lebalIndex.indexOf(index) !== -1
})
this.$store.state.editWindowState = false
this.$emit('emitState', true)
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
} else { // 地区列
// 选中的下标
let lebalIndex = this.datalist.filter((item, index) => {
return item.state === true
}).map((item, index) => {
return item.id
})
this.$store.state.selectLabelLie = lebalIndex
console.log(lebalIndex, '下标')
// this.$store.state.transBefore.termsExplain = this.$store.state.transBefore.termsExplain.filter((item, index) => {
// return lebalIndex.indexOf(index) !== -1
// })
// this.$store.state.transBefore.termsName = this.$store.state.transBefore.termsName.filter((item, index) => {
// return lebalIndex.indexOf(index) !== -1
// })
// 数据转置
let gdt = JSON.parse(JSON.stringify(this.$store.state.noChangeData.transBeforeAreaData))
let waiBrr = gdt[0].map(function (col, index) {
return gdt.map((row, key) => {
return row[index]
})
})
waiBrr = waiBrr.filter((item, index) => {
return lebalIndex.indexOf(index) !== -1
})
// 转置回来
waiBrr = waiBrr.map(function (col, index) {
return waiBrr.map((row, key) => {
return row[index]
})
})
// 赋值
this.$store.state.transBefore.transBeforeAreaData = waiBrr
this.$store.state.transBefore.timeArr = this.$store.state.noChangeData.timeArr.filter((item, index) => {
return lebalIndex.indexOf(index) !== -1
})
this.$store.state.editWindowState = false
this.$emit('emitState', true)
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
}
}
}
},
mounted () {
// 行列新增渲染
this.radioSelect = 'hang'
console.log(this.$store.state.selectLabelHang)
if (this.$route.query.type === 'area') {
this.datalist = this.$store.state.noChangeData.areaName
} else {
if (!this.$store.state.selectLabelHang) {
this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
return {
text: item,
state: true,
id: index
}
})
} else {
this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
let state = true
if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
state = false
} else {
state = true
}
console.log(state, 'state')
return {
text: item,
state: state,
id: index
}
})
}
}
// console.log(this.datalist, 'this.dataList')
} }
} }
</script> </script>
@@ -110,7 +349,7 @@ export default {
width: 1.3125rem; width: 1.3125rem;
height: 1.3125rem; height: 1.3125rem;
} }
& > img:hover{ & > img:hover {
cursor: pointer; cursor: pointer;
} }
} }

270
src/components/insertLabel/InsertLabel.vue
View File

@@ -19,18 +19,22 @@
v-for="(item,index) in labelData" v-for="(item,index) in labelData"
:key="index" :key="index"
:class="{bgcolor:item.state}" :class="{bgcolor:item.state}"
@click="bgclick(index)" @click="labelSelInd(index)"
>{{item.text}}</div> >{{item.text}}</div>
</div> </div>
</div> </div>
<div class="center"> <div class="center">
<div>=</div> <div>=</div>
<div>></div> <div @click="bgclick(inds)">></div>
</div> </div>
<div class="right"> <div class="right">
<textarea v-model="fontComput"></textarea> <textarea v-model="fontComput"></textarea>
<div class="computer"> <div class="computer">
<div v-for="(item,index) in computers" :key="index">{{item.text}}</div> <div
v-for="(item,index) in computers"
:key="index"
@click="computSS(index)"
>{{item.text}}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -38,13 +42,14 @@
<div class="explains">说明：指标只能从上表中显示</div> <div class="explains">说明：指标只能从上表中显示</div>
<!-- 确认取消 --> <!-- 确认取消 -->
<div class="bnottom"> <div class="bnottom">
<div>确认</div> <div @click="trueVerify">确认</div>
<div @click="closeX">取消</div> <div @click="closeX">取消</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import verify from '../../assets/js/verifyMathematicalExpression'
export default { export default {
name: 'insertLabel', name: 'insertLabel',
data () { data () {
@@ -90,17 +95,254 @@ export default {
{ text: '3', state: false }, { text: '3', state: false },
{ text: '.', state: false }, { text: '.', state: false },
{ text: '0', state: false } { text: '0', state: false }
] ],
// 左侧选中的指标下标
inds: false
}
},
watch: {
radioValue (newValue, oldValue) {
if (newValue === 'hang') {
// 行列新增渲染
if (this.$route.query.type === 'area') {
this.labelData = this.$store.state.transBefore.areaName
} else {
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
return {
text: item,
state: false
}
})
}
} else if (newValue === 'lie') {
// 行列新增渲染
this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
return {
text: item,
state: false
}
})
}
} }
}, },
methods: { methods: {
bgclick (ind) { labelSelInd (ind) {
this.inds = ind
this.labelData.forEach((item, index) => { this.labelData.forEach((item, index) => {
index === ind ? item.state = true : item.state = false /*eslint-disable*/
index === ind ? (item.state = true) : item.state = false
})
},
bgclick(ind) {
console.log(ind)
if (ind !== false) {
this.labelData.forEach((item, index) => {
/*eslint-disable*/
index === ind ? (this.fontComput += '#' + item.text + '#') : ''
})
} else {
alert('请选择指标！')
}
},
closeX() {
this.$store.state.insertWindowState = false
},
// 计算器
computSS(ind) {
// console.log(ind)
// console.log(this.fontComput,'this.fontComput')
this.computers.forEach((item, index) => {
index === ind ? (item.state = true, this.fontComput += item.text) : item.state = false
}) })
}, },
closeX () { // 确定
this.$store.state.insertWindowState = false trueVerify() {
let Str = JSON.parse(JSON.stringify(this.fontComput)).replace(/#.*?#/gi, '$').split('')
console.log(Str, '处理成表达式')
let bty = Str.map((item, index) => {
let sft = item
if (item === '$') {
if (index === 0) {
sft = (/^[0-9]+/.test(Str[index + 1]) || /^[$]+/.test(Str[index + 1])) ? '1*' : '1'
} else if (index === Str.length - 1) {
sft = (/^[0-9]+/.test(Str[index - 1]) || /^[$]+/.test(Str[index - 1])) ? '*1' : '1'
} else {
if ((/^[$]+/.test(Str[index + 1]))) {
sft = '1*'
} else if ((/^[$]+/.test(Str[index - 1]))) {
sft = '*1'
} else {
sft = '1'
}
}
} else {
sft = item
}
return sft
})
console.log(bty.join(''))
// 验证表达式是否正确
// verify(bty.join(''), {})
if (verify(bty.join(''), {})) {
let newArrat = this.fontComput.split('#').filter((item, index) => {
return item !== ''
})
console.log(newArrat)
// 定义一个新数组用来存放新增指标的数据
let newarr = []
if (this.radioValue === 'hang') {
if (this.$route.query.type !== 'area') {
// 循环指标名称 回调一个计算后的数组
let dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
// console.log(this.$store.state.transBefore.transBeforeTermsData[index])
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeTermsData[index][this.$store.state.transBefore.termsName.indexOf(list)]
} else {
comStr += list
}
})
// console.log(comStr)
// console.log(eval(comStr))
return eval(comStr).toString()
})
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.termsName.push(this.insertName)
this.$store.state.transBefore.termsExplain.push('')
this.$store.state.transBefore.transBeforeTermsData.push(dataStrArr)
this.closeX()
this.$emit('emitState', true)
} else {
// 循环地区名称 回调一个计算后的数组
let dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
// console.log(this.$store.state.transBefore.transBeforeTermsData[index])
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeTermsData[index][this.$store.state.transBefore.termsName.indexOf(list)]
} else {
comStr += list
}
})
// console.log(comStr)
// console.log(eval(comStr))
return eval(comStr).toString()
})
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.termsName.push(this.insertName)
this.$store.state.transBefore.termsExplain.push('')
this.$store.state.transBefore.transBeforeTermsData.push(dataStrArr)
this.closeX()
this.$emit('emitState', true)
}
} else {
if (this.$route.query.type !== 'area') {
// console.log(this.$store.state.transBefore.transBeforeTermsData)
let bsfyu = this.$store.state.transBefore.transBeforeTermsData
// 将数据进行转置
let datarts = bsfyu[0].map(function (col, index) {
return bsfyu.map((row, key) => {
return row[index]
})
})
console.log(datarts)
// 循环年
let dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
// console.log(this.$store.state.transBefore.transBeforeTermsData[index])
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
comStr += datarts[index][this.$store.state.transBefore.timeArr.indexOf(list)]
} else {
comStr += list
}
})
// console.log(comStr)
// console.log(eval(comStr))
return eval(comStr).toString()
})
console.log(dataStrArr, '101025')
datarts.push(dataStrArr)
// 将数据转置回来
let newZz = datarts[0].map(function (col, index) {
return datarts.map((row, key) => {
return row[index]
})
})
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.timeArr.push(this.insertName)
this.$store.state.transBefore.transBeforeTermsData = newZz
this.closeX()
this.$emit('emitState', true)
} else {
// console.log(this.$store.state.transBefore.transBeforeTermsData)
let bsfyu = this.$store.state.transBefore.transBeforeTermsData
// 将数据进行转置
let datarts = bsfyu[0].map(function (col, index) {
return bsfyu.map((row, key) => {
return row[index]
})
})
console.log(datarts)
// 循环年
let dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
// console.log(this.$store.state.transBefore.transBeforeTermsData[index])
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
comStr += datarts[index][this.$store.state.transBefore.timeArr.indexOf(list)]
} else {
comStr += list
}
})
// console.log(comStr)
// console.log(eval(comStr))
return eval(comStr).toString()
})
console.log(dataStrArr, '101025')
datarts.push(dataStrArr)
// 将数据转置回来
let newZz = datarts[0].map(function (col, index) {
return datarts.map((row, key) => {
return row[index]
})
})
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.timeArr.push(this.insertName)
this.$store.state.transBefore.transBeforeTermsData = newZz
this.closeX()
this.$emit('emitState', true)
}
}
} else {
alert('您输入的表达式正确，请重新输入！')
}
}
},
mounted() {
// 行列新增渲染
if (this.$route.query.type === 'area') {
this.labelData = this.$store.state.transBefore.areaName
} else {
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
return {
text: item,
state: false
}
})
} }
} }
@@ -147,7 +389,7 @@ export default {
width: 1.3125rem; width: 1.3125rem;
height: 1.3125rem; height: 1.3125rem;
} }
& > img:hover{ & > img:hover {
cursor: pointer; cursor: pointer;
} }
} }
@@ -294,15 +536,15 @@ export default {
letter-spacing: 0rem; letter-spacing: 0rem;
} }
& > div { & > div {
margin:1rem; margin: 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
& > div:hover{ & > div:hover {
cursor: pointer; cursor: pointer;
} }
} }
} }
} }

16
src/components/labelExplain/LabelExplain.vue
View File

@@ -6,9 +6,10 @@
<img :src="imgUrl" alt @click="$store.state.labelExplainState=false" /> <img :src="imgUrl" alt @click="$store.state.labelExplainState=false" />
</div> </div>
<div class="contanin">{{$store.state.labelExplainData}}</div> <div class="contanin">{{$store.state.labelExplainData}}</div>
<input type="hidden" :value="$store.state.labelExplainData" />
<!-- 确定取消 --> <!-- 确定取消 -->
<div class="bottom"> <div class="bottom">
<div>复制到粘贴板</div> <div @click="fuzhi()">复制到粘贴板</div>
</div> </div>
</div> </div>
</div> </div>
@@ -21,6 +22,19 @@ export default {
imgUrl: require('../../../static/nav/deleteImg.png') imgUrl: require('../../../static/nav/deleteImg.png')
} }
},
methods: {
fuzhi () {
var input = document.createElement('input')
input.setAttribute('readonly', 'readonly') // 防止手机上弹出软键盘
input.setAttribute('value', this.$store.state.labelExplainData)
document.body.appendChild(input)
// input.setSelectionRange(0, 9999);
input.select()
document.execCommand('copy')
document.body.removeChild(input)
alert('已经复制到粘贴板！')
}
} }
} }
</script> </script>

162
src/components/mapData/MapData.vue
View File

@@ -1,51 +1,13 @@
<template> <template>
<div class="mapData"> <div class="mapData">
<div class="mapDataLeft"> <div class="mapDataLeft" v-if="leftDafrt">
<!-- 左侧导航 --> <div>指标名称</div>
<el-row class="tac" style="overflow: auto;height:54.875rem;" v-if="defaultSelectLies"> <!-- 指标名称 -->
<el-col :span="24"> <div
<el-menu v-for="(item,index) in leftDafrt"
:default-openeds="defaultSelectLies" :key="index"
class="el-menu-vertical-demo" :class="{bgcolor:item.state}"
@open="handleOpen" >{{item.name}}</div>
@close="handleClose"
@select="selectActive"
style="border:none"
>
<el-submenu :index="''+index1" v-for="(item1,index1) in leftCateData" :key="index1">
<template slot="title">{{item1.name}}</template>
<el-submenu
:index="index1+'-'+index2"
v-for="(item2,index2) in item1.children"
:key="index2"
>
<template slot="title">{{item2.name}}</template>
<el-submenu
:index="index1+'-'+index2+'-'+index3"
v-for="(item3,index3) in item2.children"
:key="index3"
>
<template slot="title">{{item3.name}}</template>
<el-submenu
:index="index1+'-'+index2+'-'+index3+'-'+index4"
v-for="(item4,index4) in item3.children"
:key="index4"
>
<template slot="title">{{item4.name}}</template>
<el-submenu
:index="index1+'-'+index2+'-'+index3+'-'+index4+'-'+index5"
v-for="(item5,index5) in item4.children"
:key="index5"
>
<template slot="title">{{item5.name}}</template>
</el-submenu>
</el-submenu>
</el-submenu>
</el-submenu>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</div> </div>
<div class="mapDataRight"> <div class="mapDataRight">
<div class="maptopSty"> <div class="maptopSty">
@@ -60,9 +22,10 @@
@visible-change="changesInputStu" @visible-change="changesInputStu"
></cityPicker> ></cityPicker>
</div> </div>
<!-- 月 --> <!-- 季 --> <!-- 月 -->
<!-- 季 -->
<div class="monthD"> <div class="monthD">
<cityPicker <cityPicker
:level="jishuTime" :level="jishuTime"
:selectpattern="selectMonth" :selectpattern="selectMonth"
:city-data="monthDatas" :city-data="monthDatas"
@@ -80,7 +43,7 @@
// 引入下拉组件 // 引入下拉组件
import cityPicker from '@/components/cityPicker/CityPicker.vue' import cityPicker from '@/components/cityPicker/CityPicker.vue'
// 引入数据计算js用于机选渲染的数据 // 引入数据计算js用于机选渲染的数据
import ComputedData from '../../assets/js/computeddata' // import ComputedData from '../../assets/js/computeddata'
import china from 'echarts/map/json/china.json' import china from 'echarts/map/json/china.json'
var echarts = require('echarts/lib/echarts') var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/map') require('echarts/lib/chart/map')
@@ -224,7 +187,9 @@ export default {
{ 'id': '110000', 'name': '2月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }, { 'id': '110000', 'name': '2月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
{ 'id': '110000', 'name': '3月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }, { 'id': '110000', 'name': '3月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
{ 'id': '110000', 'name': '4月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' } { 'id': '110000', 'name': '4月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
] ],
// 左侧数据
leftDafrt: null
} }
}, },
methods: { methods: {
@@ -326,17 +291,83 @@ export default {
}, },
monthDataChange () { monthDataChange () {
console.log(12569) console.log(12569)
},
// 地图左侧指标名称显示
searchDataMap () {
this.$axios({
method: 'GET',
url: 'data/data/quota',
params: {
id: this.$store.state.selectDataLeft.id
}
}).then(res => {
console.log(res, '地图左侧指标名称显示')
// 请求接口完成 请求成功
if (res.data.code === 200) {
this.leftDafrt = res.data.data.list.map((item, index) => {
let brrO = {}
if (index === 0) {
brrO = {
id: item.id,
name: item.name,
state: true
}
} else {
brrO = {
id: item.id,
name: item.name,
state: false
}
}
return brrO
})
this.getLabelDatart()
}
}).catch((fail) => {
console.log(fail)
})
},
// 获取每个指标的数据
getLabelDatart () {
this.$axios({
method: 'GET',
url: 'data/data/map-data',
params: {
id: this.$store.state.selectDataLeft.id,
quota_id: this.leftDafrt.find((item, index) => { return item.state === true }).id
}
}).then(res => {
console.log(res, '数据地图数据')
// 请求接口完成 请求成功
if (res.data.code === 200) {
console.log()
this.option.legend.data = [this.leftDafrt.find((item, index) => { return item.state === true }).name]
this.option.series[0].name = [this.leftDafrt.find((item, index) => { return item.state === true }).name]
this.option.series[0].data = res.data.data.list
this.showMapData()
}
}).catch((fail) => {
console.log(fail)
})
} }
}, },
mounted () { mounted () {
// 查询左侧数据
this.searchDataMap()
// 获取菜单信息 // 获取菜单信息
this.getCateData() // this.getCateData()
// 渲染图表 // 渲染图表
this.showMapData() // this.showMapData()
// 查询左侧数据
// this.searchDataMap()
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bgcolor {
background-color: #95cee4;
color: #fff;
}
.mapData { .mapData {
margin-top: 0.75rem; margin-top: 0.75rem;
width: 100%; width: 100%;
@@ -348,32 +379,51 @@ export default {
& > .mapDataLeft { & > .mapDataLeft {
width: 26rem; width: 26rem;
// margin-right: 2rem; // margin-right: 2rem;
min-height: 54.875rem;
overflow: auto; overflow: auto;
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1); box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
& > div {
padding-left: 10%;
width: 90%;
height: 3.2rem;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
font-size: 1.375rem;
}
& > div:nth-child(1) {
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
} }
& > .mapDataRight { & > .mapDataRight {
width: 57rem; width: 57rem;
overflow: auto; overflow: auto;
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1); box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
border: 1px solid red; // border: 1px solid red;
& > div:nth-child(2) { & > div:nth-child(2) {
width: 100%; width: 100%;
min-height: 50.875rem; min-height: 50.875rem;
} }
& > .maptopSty { & > .maptopSty {
width: 100%; width: 100%;
height:4rem; height: 4rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
& > .yearD { & > .yearD {
margin:0 2rem; margin: 0 2rem;
} }
& > .monthD { & > .monthD {
margin:0 2rem; margin: 0 2rem;
} }
} }
} }

624
src/components/screenCom/ScreenCom.vue
View File

@@ -45,16 +45,24 @@
</div> </div>
</div> </div>
<div class="center2"> <div class="center2">
<div>{{datarts.list5}}</div> <!-- 添加 -->
<div>{{datarts.list6}}</div> <div @click="insertData()">{{datarts.list5}}</div>
<!-- 删除 -->
<div @click="deleteData()">{{datarts.list6}}</div>
</div> </div>
<div class="right"> <div class="right">
<textarea v-model="textareas"></textarea> <!-- <textarea v-model="textareas"></textarea> -->
<div
v-for="(item,index) in selectDatas"
:key="index"
:class="{active:item.state}"
@click="changeBghuio(index)"
>{{item.text}}</div>
</div> </div>
</div> </div>
<!-- 确定取消 --> <!-- 确定取消 -->
<div class="bottom"> <div class="bottom">
<div>确定</div> <div @click="changeLeftData()">确定</div>
<div @click="$store.state.selcettWindowState = false">取消</div> <div @click="$store.state.selcettWindowState = false">取消</div>
</div> </div>
</div> </div>
@@ -70,88 +78,136 @@ export default {
selectAudio: 'hang', selectAudio: 'hang',
dataList: [ dataList: [
{ {
text: 'h就开始', text: 'h就开始1',
state: false state: false,
id: 1
},
{
text: 'h就开始2',
state: false,
id: 2
},
{
text: 'h就开始3',
state: false,
id: 3
},
{
text: 'h就开始4',
state: false,
id: 4
},
{
text: 'h就开始5',
state: false,
id: 5
},
{
text: 'h就开始6',
state: false,
id: 6
},
{
text: 'h就开始7',
state: false,
id: 7
}, },
{ {
text: 'h就开始', text: 'h就开始',
state: false state: false,
id: 8
}, },
{ {
text: 'h就开始', text: 'h就开始8',
state: false state: false,
id: 9
}, },
{ {
text: 'h就开始', text: 'h就开始9',
state: false state: false,
id: 10
}, },
{ {
text: 'h就开始', text: 'h就开始10',
state: false state: false,
id: 11
}, },
{ {
text: 'h就开始', text: 'h就开始11',
state: false state: false,
id: 12
}, },
{ {
text: 'h就开始', text: 'h就开始12',
state: false state: false,
id: 13
}, },
{ {
text: 'h就开始', text: 'h就开始13',
state: false state: false,
id: 14
}, },
{ {
text: 'h就开始', text: 'h就开始14',
state: false state: false,
id: 15
}, },
{ {
text: 'h就开始', text: 'h就开始15',
state: false state: false,
id: 16
}, },
{ {
text: 'h就开始', text: 'h就开始16',
state: false state: false,
id: 17
}, },
{ {
text: 'h就开始', text: 'h就开始17',
state: false state: false,
}, id: 18
{
text: 'h就开始',
state: false
},
{
text: 'h就开始',
state: false
},
{
text: 'h就开始',
state: false
},
{
text: 'h就开始',
state: false
},
{
text: 'h就开始',
state: false
},
{
text: 'h就开始',
state: false
} }
], ],
datarts: { datarts: {
list1: '大于(>)', list1: '大于(>)',
list2: '小于(<)', list2: '小于(<)',
list3: '大于等于(>=)', list3: '大于等于(>=)',
list4: '小于(<=)', list4: '小于等于(<=)',
list5: '>', list5: '>',
list6: '<' list6: '<'
}, },
selectChange: '大于(>)', selectChange: '大于(>)',
textareas: '' textareas: '',
nums: '',
// 选中的筛选条件
selectDatas: []
}
},
watch: {
selectAudio (newValue, oldValue) {
if (newValue === 'hang') {
// 行列新增渲染
if (this.$route.query.type === 'area') {
this.labelData = this.$store.state.transBefore.areaName
} else {
this.dataList = this.$store.state.transBefore.termsName.map((item, index) => {
return {
text: item,
state: false,
id: index
}
})
}
} else if (newValue === 'lie') {
// 行列新增渲染
this.dataList = this.$store.state.transBefore.timeArr.map((item, index) => {
return {
text: item,
state: false,
id: index
}
})
}
} }
}, },
methods: { methods: {
@@ -159,6 +215,437 @@ export default {
this.dataList.forEach((item, index) => { this.dataList.forEach((item, index) => {
index === ind ? item.state = true : item.state = false index === ind ? item.state = true : item.state = false
}) })
},
changeBghuio (ind) {
this.selectDatas.forEach((item, index) => {
index === ind ? item.state = true : item.state = false
})
},
// 添加筛选条件
insertData () {
console.log(this.dataList.find(item => item.state === true))
if (this.dataList.find(item => item.state === true) !== undefined && this.nums !== '' && /^[0-9]+$/.test(this.nums)) {
let fuh = ''
switch (this.selectChange) {
case '大于(>)':
fuh = '>'
break
case '小于(<)':
fuh = '<'
break
case '大于等于(>=)':
fuh = '>='
break
case '小于等于(<=)':
fuh = '<='
break
}
this.selectDatas.push({
text: '#' + this.dataList.find(item => item.state === true).text + '#' + fuh + this.nums,
id: this.dataList.find(item => item.state === true).id,
state: false
})
} else {
alert('无法添加筛选条件！筛选条件不正确！')
}
},
// 删除筛选条件
deleteData () {
if (this.selectDatas.find(item => item.state === true) !== undefined) {
this.selectDatas = this.selectDatas.filter((item, index) => {
console.log(item.state)
return item.state === false
})
} else {
alert('请选择您需要删除的筛选条件！')
}
},
// 筛选左侧数据
changeLeftData () {
if (this.selectDatas.length > 0) {
if (this.selectAudio === 'hang') {
if (this.$route.query.type !== 'area') {
// 筛选条件
// console.log(this.selectDatas, 'selectDatas')
// console.log(this.$store.state.transBefore.timeArr)
// console.log(this.selectDatas[0].text.split('#')[1], 'this.selectDatas.text.split(#)')
let newDataBefore = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeTermsData))
// 返回下标
let brre = this.selectDatas.map((list, key) => {
return this.$store.state.transBefore.termsName.indexOf(list.text.split('#')[1])
})
// 返回表达式
let brreWay = this.selectDatas.map((list, key) => {
return {
text: list.text.split('#')[1],
way: list.text.split('#')[2]
}
})
// 第一次过滤出来的数据
let firstData = newDataBefore.filter((item, index) => {
return brre.indexOf(index) !== -1
}).map((item, index) => {
return item.map((list, key) => {
return {
index: key,
value: list
}
})
})
// console.log(firstData, 'newDataBefore')
// console.log(brreWay, 'brreWay')
// 第二次过滤
let DataTwo = []
firstData.forEach((item, index) => {
DataTwo.push(
item.filter((list, key) => {
/* eslint-disable */
// console.log(eval(list.value + brreWay[index].way))
return eval(list.value + brreWay[index].way) === true
})
)
})
// console.log(DataTwo, '第二次过滤')
// 第三次过滤
// 定义一个数组用来存储全集的下标
let AllLabelIndex = []
let threeData = DataTwo.forEach((item, index) => {
let itemDAta = item.map((list, key) => {
return Object.values(list)[0]
})
// console.log(itemDAta)
AllLabelIndex = this.concat(AllLabelIndex, itemDAta)
})
console.log(AllLabelIndex, '连接数组')
// 第三次过滤并且复制
let waiBrr = firstData.map((item, index) => {
return item.map((list, key) => {
// console.log(list)
return list.value
})
}).map((item, index) => {
return item.filter((list, key) => {
return AllLabelIndex.indexOf(key) !== -1
})
})
console.log(waiBrr, '处理后的数据')
this.$store.state.transBefore.transBeforeTermsData = waiBrr
this.$store.state.transBefore.timeArr = this.$store.state.transBefore.timeArr.filter((item, index) => {
return AllLabelIndex.indexOf(index) !== -1
})
this.$store.state.transBefore.termsExplain = this.$store.state.transBefore.termsExplain.filter((item, index) => {
return brre.indexOf(index) !== -1
})
this.$store.state.transBefore.termsName = this.$store.state.transBefore.termsName.filter((item, index) => {
return brre.indexOf(index) !== -1
})
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
// 关闭窗口
this.$store.state.selcettWindowState = false
this.$emit('emitState', true)
} else {
// 筛选条件
// console.log(this.selectDatas, 'selectDatas')
// console.log(this.$store.state.transBefore.timeArr)
// console.log(this.selectDatas[0].text.split('#')[1], 'this.selectDatas.text.split(#)')
let newDataBefore = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeAreaData))
// 返回下标
let brre = this.selectDatas.map((list, key) => {
return this.$store.state.transBefore.areaName.indexOf(list.text.split('#')[1])
})
// 返回表达式
let brreWay = this.selectDatas.map((list, key) => {
return {
text: list.text.split('#')[1],
way: list.text.split('#')[2]
}
})
// 第一次过滤出来的数据
let firstData = newDataBefore.filter((item, index) => {
return brre.indexOf(index) !== -1
}).map((item, index) => {
return item.map((list, key) => {
return {
index: key,
value: list
}
})
})
// console.log(firstData, 'newDataBefore')
// console.log(brreWay, 'brreWay')
// 第二次过滤
let DataTwo = []
firstData.forEach((item, index) => {
DataTwo.push(
item.filter((list, key) => {
/* eslint-disable */
// console.log(eval(list.value + brreWay[index].way))
return eval(list.value + brreWay[index].way) === true
})
)
})
// console.log(DataTwo, '第二次过滤')
// 第三次过滤
// 定义一个数组用来存储全集的下标
let AllLabelIndex = []
let threeData = DataTwo.forEach((item, index) => {
let itemDAta = item.map((list, key) => {
return Object.values(list)[0]
})
// console.log(itemDAta)
AllLabelIndex = this.concat(AllLabelIndex, itemDAta)
})
console.log(AllLabelIndex, '连接数组')
// 第三次过滤并且复制
let waiBrr = firstData.map((item, index) => {
return item.map((list, key) => {
// console.log(list)
return list.value
})
}).map((item, index) => {
return item.filter((list, key) => {
return AllLabelIndex.indexOf(key) !== -1
})
})
console.log(waiBrr, '处理后的数据')
this.$store.state.transBefore.transBeforeAreaData = waiBrr
this.$store.state.transBefore.timeArr = this.$store.state.transBefore.timeArr.filter((item, index) => {
return AllLabelIndex.indexOf(index) !== -1
})
// this.$store.state.transBefore.termsExplain = this.$store.state.transBefore.termsExplain.filter((item, index) => {
// return brre.indexOf(index) !== -1
// })
this.$store.state.transBefore.areaName = this.$store.state.transBefore.areaName.filter((item, index) => {
return brre.indexOf(index) !== -1
})
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
// 关闭窗口
this.$store.state.selcettWindowState = false
this.$emit('emitState', true)
}
} else if (this.selectAudio === 'lie') {
if (this.$route.query.type !== 'area') {
// 筛选条件
let newDataBefore = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeTermsData))
// 转置
newDataBefore = newDataBefore[0].map(function (col, index) {
return newDataBefore.map((row, key) => {
return row[index]
})
})
// console.log(newDataBefore,'转置')
// 返回下标
let brre = this.selectDatas.map((list, key) => {
return this.$store.state.transBefore.timeArr.indexOf(list.text.split('#')[1])
})
console.log(brre, 'brre')
// 返回表达式
let brreWay = this.selectDatas.map((list, key) => {
return {
text: list.text.split('#')[1],
way: list.text.split('#')[2]
}
})
// 第一次过滤出来的数据
let firstData = newDataBefore.filter((item, index) => {
return brre.indexOf(index) !== -1
}).map((item, index) => {
return item.map((list, key) => {
return {
index: key,
value: list
}
})
})
// console.log(firstData, 'newDataBefore')
// console.log(brreWay, 'brreWay')
// 第二次过滤
let DataTwo = []
firstData.forEach((item, index) => {
DataTwo.push(
item.filter((list, key) => {
/* eslint-disable */
// console.log(eval(list.value + brreWay[index].way))
return eval(list.value + brreWay[index].way) === true
})
)
})
// console.log(DataTwo, '第二次过滤')
// 第三次过滤
// 定义一个数组用来存储全集的下标
let AllLabelIndex = []
let threeData = DataTwo.forEach((item, index) => {
let itemDAta = item.map((list, key) => {
return Object.values(list)[0]
})
// console.log(itemDAta)
AllLabelIndex = this.concat(AllLabelIndex, itemDAta)
})
console.log(AllLabelIndex, '连接数组')
// 第三次过滤并且复制
let waiBrr = firstData.map((item, index) => {
return item.map((list, key) => {
// console.log(list)
return list.value
})
}).map((item, index) => {
return item.filter((list, key) => {
return AllLabelIndex.indexOf(key) !== -1
})
})
console.log(waiBrr, '处理后的数据')
// 转置回来
waiBrr = waiBrr[0].map(function (col, index) {
return waiBrr.map((row, key) => {
return row[index]
})
})
this.$store.state.transBefore.transBeforeTermsData = waiBrr
// console.log(AllLabelIndex,'AllLabelIndex')
this.$store.state.transBefore.timeArr = this.$store.state.transBefore.timeArr.filter((item, index) => {
return brre.indexOf(index) !== -1
})
// this.$store.state.transBefore.termsExplain = this.$store.state.transBefore.termsExplain.filter((item, index) => {
// return brre.indexOf(index) !== -1
// })
// this.$store.state.transBefore.termsName = this.$store.state.transBefore.termsName.filter((item, index) => {
// return brre.indexOf(index) !== -1
// })
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
// 关闭窗口
this.$store.state.selcettWindowState = false
this.$emit('emitState', true)
} else {//地区列数据
// 筛选条件
let newDataBefore = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeAreaData))
// 转置
newDataBefore = newDataBefore[0].map(function (col, index) {
return newDataBefore.map((row, key) => {
return row[index]
})
})
// console.log(newDataBefore,'转置')
// 返回下标
let brre = this.selectDatas.map((list, key) => {
return this.$store.state.transBefore.timeArr.indexOf(list.text.split('#')[1])
})
console.log(brre, 'brre')
// 返回表达式
let brreWay = this.selectDatas.map((list, key) => {
return {
text: list.text.split('#')[1],
way: list.text.split('#')[2]
}
})
// 第一次过滤出来的数据
let firstData = newDataBefore.filter((item, index) => {
return brre.indexOf(index) !== -1
}).map((item, index) => {
return item.map((list, key) => {
return {
index: key,
value: list
}
})
})
// console.log(firstData, 'newDataBefore')
// console.log(brreWay, 'brreWay')
// 第二次过滤
let DataTwo = []
firstData.forEach((item, index) => {
DataTwo.push(
item.filter((list, key) => {
/* eslint-disable */
// console.log(eval(list.value + brreWay[index].way))
return eval(list.value + brreWay[index].way) === true
})
)
})
// console.log(DataTwo, '第二次过滤')
// 第三次过滤
// 定义一个数组用来存储全集的下标
let AllLabelIndex = []
let threeData = DataTwo.forEach((item, index) => {
let itemDAta = item.map((list, key) => {
return Object.values(list)[0]
})
// console.log(itemDAta)
AllLabelIndex = this.concat(AllLabelIndex, itemDAta)
})
console.log(AllLabelIndex, '连接数组')
// 第三次过滤并且复制
let waiBrr = firstData.map((item, index) => {
return item.map((list, key) => {
// console.log(list)
return list.value
})
}).map((item, index) => {
return item.filter((list, key) => {
return AllLabelIndex.indexOf(key) !== -1
})
})
console.log(waiBrr, '处理后的数据')
// 转置回来
waiBrr = waiBrr[0].map(function (col, index) {
return waiBrr.map((row, key) => {
return row[index]
})
})
this.$store.state.transBefore.transBeforeAreaData = waiBrr
this.$store.state.transBefore.timeArr = this.$store.state.transBefore.timeArr.filter((item, index) => {
return brre.indexOf(index) !== -1
})
// this.$store.state.transBefore.termsExplain = this.$store.state.transBefore.termsExplain.filter((item, index) => {
// return brre.indexOf(index) !== -1
// })
// this.$store.state.transBefore.termsName = this.$store.state.transBefore.termsName.filter((item, index) => {
// return brre.indexOf(index) !== -1
// })
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
// 关闭窗口
this.$store.state.selcettWindowState = false
this.$emit('emitState', true)
}
}
} else {
alert('筛选条件不能为空')
}
},
// 数组合并去重排序
concat(arr1, arr2) {
if (arguments.length <= 1) {
return false;
}
var concat_ = function (arr1, arr2) {
var arr = arr1.concat();
for (var i = 0; i < arr2.length; i++) {
arr.indexOf(arr2[i]) === -1 ? arr.push(arr2[i]) : 0;
}
return arr;
}
var result = concat_(arr1, arr2);
for (var i = 2; i < arguments.length; i++) {
result = concat_(result, arguments[i]);
}
//排序
function sortNumber(a, b) {
return a - b;
}
return result.sort(sortNumber);
}
},
mounted() {
// 行列新增渲染
if (this.$route.query.type === 'area') {
this.dataList = this.$store.state.transBefore.areaName
} else {
this.dataList = this.$store.state.transBefore.termsName.map((item, index) => {
return {
text: item,
state: false,
id: index
}
})
} }
} }
} }
@@ -287,11 +774,29 @@ export default {
color: #fff; color: #fff;
font-size: 1.2rem; font-size: 1.2rem;
} }
& > div:hover {
cursor: pointer;
}
} }
& > .right { & > .right {
& > textarea { width: 20.625rem;
width: 20.625rem; height: 22.875rem;
height: 22.875rem; border: 1px solid #bdbdbd;
overflow: auto;
& > div {
width: 100%;
height: 1.8rem;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
& > .active {
background-color: deepskyblue;
color: #fff;
}
& > div:hover {
cursor: pointer;
} }
} }
} }
@@ -331,8 +836,11 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
&>div{ & > div {
margin:3rem 1.2rem; margin: 3rem 1.2rem;
}
& > div:hover {
cursor: pointer;
} }
} }
} }

24
src/main.js
View File

@@ -51,6 +51,7 @@ var root = process.env.VUE_APP_BASE_API
// 请求拦截器(前) // 请求拦截器(前)
axios.interceptors.request.use(config => { axios.interceptors.request.use(config => {
// console.log(config, 'config')
// --请求之前重新拼装url-- // --请求之前重新拼装url--
config.url = root + config.url config.url = root + config.url
// --默认请求参数-- // --默认请求参数--
@@ -76,6 +77,29 @@ axios.interceptors.response.use(data => {
} }
return data return data
}) })
// IP端
axios({
method: 'GET',
url: 'site/check',
params: {}
}).then(res => {
// console.log(res, 'IP段')
if (res.data.code === 200) {
if (!localStorage.getItem('userLogin')) {
history.go(0)
}
// 用户信息存本地
localStorage.setItem('username', res.data.data.username)
localStorage.setItem('pic', res.data.data.pic)
localStorage.setItem('userPwd', '123456')
localStorage.setItem('token', 'Bearer ' + res.data.data.token)
// 登录状态
localStorage.setItem('userLogin', true)
}
// 请求接口完成 请求成功
}).catch((fail) => {
console.log(fail)
})
// 将图形验证码写入 // 将图形验证码写入
Vue.prototype.$identify = identify.default Vue.prototype.$identify = identify.default
Vue.prototype.$axios = axios Vue.prototype.$axios = axios

38
src/store.js
View File

@@ -18,11 +18,43 @@ export default new Vuex.Store({
// 指标解释数据 // 指标解释数据
labelExplainData: '这是指标解释使劲儿发红包健康撒大部分更健康', labelExplainData: '这是指标解释使劲儿发红包健康撒大部分更健康',
// 维度转换状态 // 维度转换状态
dimensionState: false dimensionState: false,
}, // 数据表中的数据
mutations: { transdtr: true,
// 高级查询带出来的数据
advanceData: null,
// 左侧数据选中的那个
selectDataLeft: null,
// 区分简单查询和高级查询状态1:简单查询2：高级查询
searchState: 1,
// 添加收藏的名字
nameCollect: '',
// 选中列的数据下标
listInputVal: [0, 1, 2],
// 选行的数据下标
lineInputVal: [0, 1, 2, 3],
// 渲染的表数据
tableData: null,
// 表的列数据
tableLine: null,
// 全局定义总数据
transBefore: null,
// 全聚德数据状态 1无变化 2变化
allState: 1,
// 全体的数据不会发生改变
noChangeData: null,
// 编辑
// 选中行下标
selectLabelHang: null,
// 选中列下标
selectLabelLie: null,
// 下拉筛选分类
selectfilter: null,
// 下拉筛选条件
selectData: 1010110
}, },
mutations: {},
actions: { actions: {
} }

241
src/views/datasweb/Datasweb.vue
View File

@@ -43,7 +43,7 @@
:key="key" :key="key"
@mouseover="mouseoverCate('hierarchy2',key)" @mouseover="mouseoverCate('hierarchy2',key)"
@mouseleave="mouseleaveCate('hierarchy2',key)" @mouseleave="mouseleaveCate('hierarchy2',key)"
@click="clickCate('hierarchy2',key,list.text)" @click.stop="clickCate('hierarchy2',key,list.text)"
> >
{{list.text}} {{list.text}}
<div class="secondWindow" v-if="list.text==='统计' && list.static"> <div class="secondWindow" v-if="list.text==='统计' && list.static">
@@ -177,13 +177,22 @@
> >
<!-- 列表 --> <!-- 列表 -->
<!-- 图标切换 --> <!-- 图标切换 -->
<ChartsCut @cutStatic="cutStatic"></ChartsCut> <ChartsCut
@cutStatic="cutStatic"
v-if="$store.state.transdtr"
:defaultDataRight="defaultDataRight"
@stateTell="stateTell"
></ChartsCut>
<!-- 列表内容 --> <!-- 列表内容 -->
<ChartsCont <ChartsCont
:indStatic="indStatic" :indStatic="indStatic"
:chartsStatusMegger="chartsStatusMegger" :chartsStatusMegger="chartsStatusMegger"
:defaultDataRight="defaultDataRight" :defaultDataRight="defaultDataRight"
:stateTells="stateTells"
@comTime="comTime" @comTime="comTime"
:statesDf="statesDf"
@tellAreadly="tellAreadly"
@prentsState="prentsState"
></ChartsCont> ></ChartsCont>
</div> </div>
<div class="container"> <div class="container">
@@ -223,11 +232,11 @@
<!-- 指标解释 --> <!-- 指标解释 -->
<LabelExplain v-if="$store.state.labelExplainState"></LabelExplain> <LabelExplain v-if="$store.state.labelExplainState"></LabelExplain>
<!-- 新增指标 --> <!-- 新增指标 -->
<InsertLabel v-if="$store.state.insertWindowState"></InsertLabel> <InsertLabel v-if="$store.state.insertWindowState" @emitState="emitStatesd"></InsertLabel>
<!-- 筛选 --> <!-- 筛选 -->
<ScreenCom v-if="$store.state.selcettWindowState"></ScreenCom> <ScreenCom v-if="$store.state.selcettWindowState" @emitState="emitStatesd"></ScreenCom>
<!-- 编辑 --> <!-- 编辑 -->
<EditCom v-if="$store.state.editWindowState"></EditCom> <EditCom v-if="$store.state.editWindowState" @emitState="emitStatesd">></EditCom>
<!-- 添加收藏 --> <!-- 添加收藏 -->
<AddCollect v-if="$store.state.addCollectState"></AddCollect> <AddCollect v-if="$store.state.addCollectState"></AddCollect>
<!-- 维度转换 --> <!-- 维度转换 -->
@@ -264,6 +273,10 @@ import AddCollect from '@/components/addCollect/AddCollect.vue'
import LabelExplain from '@/components/labelExplain/LabelExplain.vue' import LabelExplain from '@/components/labelExplain/LabelExplain.vue'
// 维度转换 // 维度转换
import Dimension from '@/components/dimension/Dimension.vue' import Dimension from '@/components/dimension/Dimension.vue'
// 引入数据计算js用于机选渲染的数据
import ComputedData from '../../assets/js/computeddata'
// 引入全局的createObjectUrl用于覆盖window.URL
// import '../../assets/js/createObjectUrl'
export default { export default {
name: 'index', name: 'index',
@@ -389,11 +402,15 @@ export default {
leftCateData: null, leftCateData: null,
// 简单查询、高级查询、数据地图切换状态(simpleness（简单）、advanced（高级） 、map（地图）) // 简单查询、高级查询、数据地图切换状态(simpleness（简单）、advanced（高级） 、map（地图）)
cutStateSeach: 'simpleness', cutStateSeach: 'simpleness',
// 下来帅选的数据 // 下拉筛选的数据
downLaSelect: { downLaSelect: {
area: '', area: '',
label: '' label: ''
} },
// 新增指标状态
statesDf: 1,
// 数据加载状态
stateTells: false
} }
}, },
methods: { methods: {
@@ -444,6 +461,7 @@ export default {
}) })
console.log(datart) console.log(datart)
this.defaultDataRight = datart this.defaultDataRight = datart
this.$store.state.selectfilter = this.defaultDataRight.f
}, },
handleClose (key, keyPath) { handleClose (key, keyPath) {
// console.log(key, keyPath) // console.log(key, keyPath)
@@ -493,17 +511,87 @@ export default {
case 2: case 2:
this.cutStateSeach = 'map' this.cutStateSeach = 'map'
break break
case 3: case 3:// 添加收藏
this.$store.state.addCollectState = true this.$store.state.addCollectState = true
// console.log(this.$store.state.selectDataLeft, 'this.$store.state.selectDataLeft')
break break
case 4: case 4:// 导出至excel！！
let brt = new ComputedData()
brt.insertCollectS(this.$store.state.tableData, this.$store.state.tableLine, this.$store.state.listInputVal, this.$store.state.lineInputVal)
console.log(this.$store.state.selectDataLeft, '左侧选中数据')
let 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)
})
break break
case 5: case 5:
break break
case 6: case 6:
break break
case 'search':// 调接进行高级查询 case 'search':// 调接进行高级查询
console.log(1010101010) // 调用接口查询高级查询的数据
console.log(this.$store.state.advanceData)
this.$axios({
method: 'GET',
url: 'data/data/quick',
params: {
type: this.$route.query.type
}
}).then(res => {
console.log(res, '时间筛选')
console.log(Object.keys(res.data.data.list))
// 请求接口完成 请求成功
if (res.data.code === 200) {
this.$axios({
method: 'POST',
url: 'data/data/query',
data: {
type: this.$route.query.type === 'area' ? 2 : 1,
data: this.$store.state.advanceData,
area: '',
quota: '',
cate: '',
filter: this.$route.query.type,
date: Object.keys(res.data.data.list)[0]
}
}).then(res => {
console.log(res, '高级查询数据展示')
// 请求接口完成 请求成功
if (res.data.code === 200) {
}
}).catch((fail) => {
console.log(fail)
})
}
}).catch((fail) => {
console.log(fail)
})
break break
} }
}, },
@@ -533,24 +621,88 @@ export default {
case '筛选': case '筛选':
this.$store.state.selcettWindowState = true this.$store.state.selcettWindowState = true
break break
case '恢复': case '恢复':// 恢复
this.$router.go(0)
break break
case '清除空行空列': case '清除空行空列':// 清除空行空列
this.$router.go(0)
if (this.$store.state.transBefore) {
// 先过滤每一行
this.$store.state.transBefore = this.$store.state.transBefore.filter((item, index) => {
return !item.some((item, index) => {
return item === ''
}) === true
})
// 在过滤每一列
// 行列转置
this.$store.state.transBefore = this.$store.state.transBefore[0].map(function (col, index) {
return this.$store.state.transBefore.map((row, key) => {
return row[index]
})
})
// 在过滤每一行
this.$store.state.transBefore = this.$store.state.transBefore.filter((item, index) => {
return !item.some((item, index) => {
return item === ''
}) === true
})
// 行列转置
this.$store.state.transBefore = this.$store.state.transBefore[0].map(function (col, index) {
return this.$store.state.transBefore.map((row, key) => {
return row[index]
})
})
}
break break
case '编辑': case '编辑':
this.$store.state.editWindowState = true this.$store.state.editWindowState = true
break break
case '转置': case '转置':
console.log(100000)
this.chartsStatusMegger.transState = !this.chartsStatusMegger.transState this.chartsStatusMegger.transState = !this.chartsStatusMegger.transState
console.log(this.chartsStatusMegger.transState)
break break
case '维度转换': case '维度转换':
this.$store.state.dimensionState = true this.$store.state.dimensionState = true
break break
case '保存默认': case '保存默认':// 将分类id 和 分类数据存入本地
// 获取本地保存数据
console.log(JSON.parse(localStorage.getItem('classFiyData')), 'classFiyData')
if (JSON.parse(localStorage.getItem('classFiyData'))) {
let arrtsBGY = JSON.parse(localStorage.getItem('classFiyData'))
console.log(this.defaultDataRight.id, 'this.defaultDataRight.id')
if (!arrtsBGY.find(item => item.id === this.defaultDataRight.id)) {
arrtsBGY.push({
id: this.defaultDataRight.id,
data: this.$store.state.transBefore
})
localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
} else {
console.log('走这里')
arrtsBGY.find(item => item.id === this.defaultDataRight.id).data = this.$store.state.transBefore
localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
}
} else {
localStorage.setItem('classFiyData', JSON.stringify([{
id: this.defaultDataRight.id,
data: this.$store.state.transBefore
}]))
}
alert('默认数据已保存！')
break break
case '恢复默认': case '恢复默认':// 将分类id 和 分类数据从本地删除
if (JSON.parse(localStorage.getItem('classFiyData'))) {
let arrtsBGY = JSON.parse(localStorage.getItem('classFiyData'))
if (!arrtsBGY.find(item => item.id === this.defaultDataRight.id)) {
alert('默认数据已恢复！')
} else {
arrtsBGY = arrtsBGY.filter((item, index) => {
return item.id !== this.defaultDataRight.id
})
localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
}
} else {
alert('默认数据已恢复！')
}
this.$router.go(0)
break break
} }
}, },
@@ -688,7 +840,7 @@ export default {
defaultSelectLie () { defaultSelectLie () {
let stateStatic = [] let stateStatic = []
this.leftCateData.forEach((item1, index1) => { this.leftCateData.forEach((item1, index1) => {
if (index1 === 0) { if (index1 === this.leftCateData.length - 1) {
stateStatic.push('' + index1) stateStatic.push('' + index1)
if (item1.children) { if (item1.children) {
item1.children.forEach((item2, index2) => { item1.children.forEach((item2, index2) => {
@@ -721,19 +873,57 @@ export default {
} }
}) })
this.defaultSelectLies = stateStatic this.defaultSelectLies = stateStatic
// console.log(this.defaultSelectLies, 'stateStatic') console.log(this.defaultSelectLies, 'stateStatic')
let dataDome = [] let dataDome = []
console.log(stateStatic, '数据') console.log(stateStatic, '数据')
console.log(this.leftCateData[0].children[0], '数据0') console.log(this.leftCateData[this.leftCateData.length - 1], '数据length-1')
JSON.parse(JSON.stringify(stateStatic)).forEach((item, index) => { this.$store.state.selectDataLeft = this.leftCateData[this.leftCateData.length - 1]
console.log(index) console.log(this.leftCateData[this.leftCateData.length - 1].children[0].children[0].children[0].children[0], '1')
index === 0 ? (dataDome = this.leftCateData[index]) : (dataDome = dataDome.children[0]) if (this.leftCateData[this.leftCateData.length - 1].children !== undefined) {
}) if (this.leftCateData[this.leftCateData.length - 1].children[0].children !== undefined) {
if (this.leftCateData[this.leftCateData.length - 1].children[0].children[0].children !== undefined) {
if (this.leftCateData[this.leftCateData.length - 1].children[0].children[0].children[0].children !== undefined) {
dataDome = this.leftCateData[this.leftCateData.length - 1].children[0].children[0].children[0].children[0]
} else {
dataDome = this.leftCateData[this.leftCateData.length - 1].children[0].children[0].children[0]
}
} else {
dataDome = this.leftCateData[this.leftCateData.length - 1].children[0].children[0]
}
} else {
dataDome = this.leftCateData[this.leftCateData.length - 1].children[0]
}
} else {
dataDome = this.leftCateData[this.leftCateData.length - 1]
}
this.defaultDataRight = dataDome this.defaultDataRight = dataDome
console.log(this.defaultDataRight, '1250') console.log(this.defaultDataRight, '1250')
this.$store.state.selectfilter = this.defaultDataRight.f
}, },
comTime (res) { comTime (res) {
this.downLaSelect.time = res this.downLaSelect.time = res
},
// 接收子组件传值新增指标
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
} }
}, },
computed: { computed: {
@@ -789,6 +979,9 @@ export default {
// }) // })
// 获取菜单信息 // 获取菜单信息
this.getCateData() this.getCateData()
},
updated () {
// console.log(this.defaultDataRight, 'this.defaultSelectLies')
} }
} }
</script> </script>
@@ -997,7 +1190,7 @@ export default {
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
border: 1px solid red; // border: 1px solid red;
& > .data_left { & > .data_left {
overflow: auto; overflow: auto;
// width: 25.375rem; // width: 25.375rem;

43
src/views/index/Index.vue
View File

@@ -47,6 +47,7 @@
<div <div
v-for="(listLeft,keyLeft) in item.textArrLeft" v-for="(listLeft,keyLeft) in item.textArrLeft"
:key="keyLeft" :key="keyLeft"
@click="jumpLianjie(true)"
>{{listLeft.name}}</div> >{{listLeft.name}}</div>
</div> </div>
<div class="center"></div> <div class="center"></div>
@@ -54,6 +55,7 @@
<div <div
v-for="(listRight,keyRight) in item.textArrRight" v-for="(listRight,keyRight) in item.textArrRight"
:key="keyRight" :key="keyRight"
@click="jumpLianjie(true)"
class="ListpaneRight" class="ListpaneRight"
>{{listRight.name}}</div> >{{listRight.name}}</div>
</div> </div>
@@ -113,7 +115,7 @@
<div class="title">数据更新</div> <div class="title">数据更新</div>
<div class="content"> <div class="content">
<div v-for="(item,index) in dataUpdata" :key="index"> <div v-for="(item,index) in dataUpdata" :key="index">
<div class="up"> <div class="up" @click="jumpLianjie(false,item.filter)">
{{computedStr(item.title)}} {{computedStr(item.title)}}
<!-- <div style="border:1px solid red;width:12rem;height: 2.125rem;"></div> --> <!-- <div style="border:1px solid red;width:12rem;height: 2.125rem;"></div> -->
<div class="next">({{item.updataTime}})</div> <div class="next">({{item.updataTime}})</div>
@@ -127,7 +129,7 @@
<div v-for="(item,index) in twentyFourtimeData" :key="index"> <div v-for="(item,index) in twentyFourtimeData" :key="index">
<img :src="item.url" alt /> <img :src="item.url" alt />
<div> <div>
<div class="top">{{item.title}}</div> <div class="top" :title="item.title">{{item.title}}</div>
<div class="bottom">{{item.content}}</div> <div class="bottom">{{item.content}}</div>
</div> </div>
</div> </div>
@@ -361,7 +363,10 @@ export default {
title: '这是标题', title: '这是标题',
content: '数据热文数据热文数据热文数据热文数据热文数据热文' content: '数据热文数据热文数据热文数据热文数据热文数据热文'
} }
] ],
indexDatalabel: ['monthly', 'quarter', 'year'],
// 选中的下标
selectLabelS: 0
} }
}, },
methods: { methods: {
@@ -370,7 +375,9 @@ export default {
window.location.href = url window.location.href = url
}, },
handleClick (tab, event) { handleClick (tab, event) {
console.log(101010)
console.log(tab, event) console.log(tab, event)
this.selectLabelS = tab.index
}, },
// 获取banner // 获取banner
getBanner () { getBanner () {
@@ -490,7 +497,7 @@ export default {
params: { params: {
} }
}).then(res => { }).then(res => {
// console.log(res, '数据更新') console.log(res, '数据更新')
// 请求接口完成 请求成功 // 请求接口完成 请求成功
if (res.data.code === 200) { if (res.data.code === 200) {
let arrts = [] let arrts = []
@@ -535,6 +542,28 @@ export default {
}).catch((fail) => { }).catch((fail) => {
console.log(fail) console.log(fail)
}) })
},
// 跳转至数据
jumpLianjie (state, value) {
if (state) {
this.$router.push(
{
path: '/datasweb',
query: {
type: this.indexDatalabel[this.selectLabelS]
}
}
)
} else {
this.$router.push(
{
path: '/datasweb',
query: {
type: value
}
}
)
}
} }
}, },
@@ -996,6 +1025,12 @@ export default {
// line-height: 23px; // line-height: 23px;
letter-spacing: 0rem; letter-spacing: 0rem;
color: #333333; color: #333333;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1; /* 省略号在第几行 */
-webkit-box-orient: vertical;
} }
& > .bottom { & > .bottom {
width: 16rem; width: 16rem;

4
src/views/register/Register.vue
View File

@@ -21,11 +21,11 @@
</div> </div>
<div> <div>
<div>设置密码</div> <div>设置密码</div>
<input type="text" placeholder="请输入密码" v-model="registerData.password" /> <input type="password" placeholder="请输入密码" v-model="registerData.password" />
</div> </div>
<div> <div>
<div>确认密码</div> <div>确认密码</div>
<input type="text" placeholder="请重新输入密码" v-model="registerData.passwordQR" /> <input type="password" placeholder="请重新输入密码" v-model="registerData.passwordQR" />
</div> </div>
<div> <div>
<div>机构名称</div> <div>机构名称</div>