fanzhen 1118
This commit is contained in:
fanzhen123
@@ -3,7 +3,7 @@
|
||||
ENV = 'development'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = '/api/'
|
||||
VUE_APP_BASE_API = '/v1/'
|
||||
|
||||
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
||||
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
|
||||
|
||||
@@ -2,4 +2,4 @@
|
||||
ENV = 'production'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = 'http://wechatticket.ecooth.com//api/'
|
||||
VUE_APP_BASE_API = 'http://data.it-blog.wang/api/v1/'
|
||||
94
package-lock.json
generated
94
package-lock.json
generated
@@ -2652,6 +2652,11 @@
|
||||
"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
|
||||
"dev": true
|
||||
},
|
||||
"batch-processor": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
|
||||
"integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
|
||||
},
|
||||
"bcrypt-pbkdf": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npm.taobao.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz",
|
||||
@@ -3559,6 +3564,11 @@
|
||||
"integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
|
||||
"dev": true
|
||||
},
|
||||
"complex.js": {
|
||||
"version": "2.0.11",
|
||||
"resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.0.11.tgz",
|
||||
"integrity": "sha512-6IArJLApNtdg1P1dFtn3dnyzoZBEF0MwMnrfF1exSBRpZYoy4yieMkpZhQDC0uwctw48vii0CFVyHfpgZ/DfGw=="
|
||||
},
|
||||
"component-emitter": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npm.taobao.org/component-emitter/download/component-emitter-1.3.0.tgz",
|
||||
@@ -4392,6 +4402,11 @@
|
||||
"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
|
||||
"dev": true
|
||||
},
|
||||
"decimal.js": {
|
||||
"version": "10.2.0",
|
||||
"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.2.0.tgz",
|
||||
"integrity": "sha512-vDPw+rDgn3bZe1+F/pyEwb1oMG2XTlRVgAa6B4KccTEpYgF8w6eQllVbQcfIJnZyvzFtFpxnpGtx8dd7DJp/Rw=="
|
||||
},
|
||||
"decode-uri-component": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npm.taobao.org/decode-uri-component/download/decode-uri-component-0.2.0.tgz",
|
||||
@@ -4866,6 +4881,14 @@
|
||||
"safer-buffer": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"echarts": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.4.0.tgz",
|
||||
"integrity": "sha512-zJD1YaONA2Ib6rKCpkU9rT/K+OFJ/F0/3Mj5FamGLXytBV5g36gsQGv8sYL7fVs/BFj/sn3wemyctlgIHMCA5w==",
|
||||
"requires": {
|
||||
"zrender": "4.1.1"
|
||||
}
|
||||
},
|
||||
"editorconfig": {
|
||||
"version": "0.15.3",
|
||||
"resolved": "https://registry.npm.taobao.org/editorconfig/download/editorconfig-0.15.3.tgz",
|
||||
@@ -4914,6 +4937,14 @@
|
||||
"integrity": "sha1-lIctaCMhnygS8uNaLOKn0Dweqj8=",
|
||||
"dev": true
|
||||
},
|
||||
"element-resize-detector": {
|
||||
"version": "1.1.15",
|
||||
"resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.1.15.tgz",
|
||||
"integrity": "sha512-16/5avDegXlUxytGgaumhjyQoM6hpp5j3+L79sYq5hlXfTNRy5WMMuTVWkZU3egp/CokCmTmvf18P3KeB57Iog==",
|
||||
"requires": {
|
||||
"batch-processor": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"element-ui": {
|
||||
"version": "2.12.0",
|
||||
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.12.0.tgz",
|
||||
@@ -5048,6 +5079,11 @@
|
||||
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
|
||||
"dev": true
|
||||
},
|
||||
"escape-latex": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
|
||||
"integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw=="
|
||||
},
|
||||
"escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescape-string-regexp%2Fdownload%2Fescape-string-regexp-1.0.5.tgz",
|
||||
@@ -6362,6 +6398,11 @@
|
||||
"integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
|
||||
"dev": true
|
||||
},
|
||||
"fraction.js": {
|
||||
"version": "4.0.12",
|
||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.0.12.tgz",
|
||||
"integrity": "sha512-8Z1K0VTG4hzYY7kA/1sj4/r1/RWLBD3xwReT/RCrUCbzPszjNQCCsy3ktkU/eaEqX3MYa4pY37a52eiBlPMlhA=="
|
||||
},
|
||||
"fragment-cache": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npm.taobao.org/fragment-cache/download/fragment-cache-0.2.1.tgz",
|
||||
@@ -8430,6 +8471,11 @@
|
||||
"handlebars": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"javascript-natural-sort": {
|
||||
"version": "0.7.1",
|
||||
"resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
|
||||
"integrity": "sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k="
|
||||
},
|
||||
"javascript-stringify": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npm.taobao.org/javascript-stringify/download/javascript-stringify-1.6.0.tgz",
|
||||
@@ -10011,6 +10057,21 @@
|
||||
"integrity": "sha1-XdaUPJOFSCZwFtTjTwV1gwgMUUw=",
|
||||
"dev": true
|
||||
},
|
||||
"mathjs": {
|
||||
"version": "6.2.3",
|
||||
"resolved": "https://registry.npmjs.org/mathjs/-/mathjs-6.2.3.tgz",
|
||||
"integrity": "sha512-IEYTyz8tu7nslF4j2TtDs7C+9Emi2/iJTYXjc5WLoIKTJOLLtjp3Aglys0ZbV9KSiaJhpfGPLXm8Z5d7vEGN3w==",
|
||||
"requires": {
|
||||
"complex.js": "2.0.11",
|
||||
"decimal.js": "10.2.0",
|
||||
"escape-latex": "1.2.0",
|
||||
"fraction.js": "4.0.12",
|
||||
"javascript-natural-sort": "0.7.1",
|
||||
"seed-random": "2.2.0",
|
||||
"tiny-emitter": "2.1.0",
|
||||
"typed-function": "1.1.1"
|
||||
}
|
||||
},
|
||||
"md5.js": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
|
||||
@@ -13011,6 +13072,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"seed-random": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/seed-random/-/seed-random-2.2.0.tgz",
|
||||
"integrity": "sha1-KpsZ4lCoFwmSMaW5mk2vgLf77VQ="
|
||||
},
|
||||
"select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
|
||||
@@ -13601,6 +13667,14 @@
|
||||
"extend-shallow": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"splitpanes": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.0.0.tgz",
|
||||
"integrity": "sha512-KAWDcrN7q3lYCc8eMasTqOYGBDu8u2Abew7i2WSrKVdNgQquY0gUeHVxUG9MWAISDzqviLd6fS0ONhWeEfB8kA==",
|
||||
"requires": {
|
||||
"vue-router": "^3.1.3"
|
||||
}
|
||||
},
|
||||
"sprintf-js": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsprintf-js%2Fdownload%2Fsprintf-js-1.0.3.tgz",
|
||||
@@ -14273,6 +14347,11 @@
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
|
||||
"dev": true
|
||||
},
|
||||
"tiny-emitter": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
|
||||
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
|
||||
},
|
||||
"tmp": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",
|
||||
@@ -14480,6 +14559,11 @@
|
||||
"mime-types": "~2.1.24"
|
||||
}
|
||||
},
|
||||
"typed-function": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/typed-function/-/typed-function-1.1.1.tgz",
|
||||
"integrity": "sha512-RbN7MaTQBZLJYzDENHPA0nUmWT0Ex80KHItprrgbTPufYhIlTePvCXZxyQK7wgn19FW5bnuaBIKcBb5mRWjB1Q=="
|
||||
},
|
||||
"typedarray": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npm.taobao.org/typedarray/download/typedarray-0.0.6.tgz",
|
||||
@@ -14810,6 +14894,11 @@
|
||||
"swiper": "^4.0.7"
|
||||
}
|
||||
},
|
||||
"vue-drag-resize": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-drag-resize/-/vue-drag-resize-1.3.2.tgz",
|
||||
"integrity": "sha512-XiSEep3PPh9IPQqa4vIy/YENBpYch2SIPNipcPAEGhaSa0V8A8gSq9s7JQ66p/hiINdnR7f5ZqAkOdm6zU/4Gw=="
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",
|
||||
@@ -15622,6 +15711,11 @@
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"zrender": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.1.1.tgz",
|
||||
"integrity": "sha512-epy1rl82dP/JKxhZl+JRfwcZjobKOoynxBzvBZJBPjmDMAxBE4grLjDryx8BHkHlKyWsUkis4XEL2wN61w5l4w=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,9 +11,14 @@
|
||||
"dependencies": {
|
||||
"axios": "^0.19.0",
|
||||
"core-js": "^2.6.5",
|
||||
"echarts": "^4.4.0",
|
||||
"element-resize-detector": "^1.1.15",
|
||||
"element-ui": "^2.12.0",
|
||||
"mathjs": "^6.2.3",
|
||||
"splitpanes": "^2.0.0",
|
||||
"vue": "^2.6.10",
|
||||
"vue-awesome-swiper": "^3.1.3",
|
||||
"vue-drag-resize": "^1.3.2",
|
||||
"vue-router": "^3.0.3",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
|
||||
8
src/assets/cityData.json
Normal file
8
src/assets/cityData.json
Normal file
File diff suppressed because one or more lines are too long
967
src/assets/js/computeddata.js
Normal file
967
src/assets/js/computeddata.js
Normal file
@@ -0,0 +1,967 @@
|
||||
let math = require('mathjs')
|
||||
// 定义一个计算类来计算数据
|
||||
class computedFunc {
|
||||
constructor (transBeforeData) {
|
||||
this.transBeforeData = transBeforeData
|
||||
// 处理好的数据需要返回的值 ===========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: []
|
||||
}
|
||||
console.log(this.transBeforeData)
|
||||
}
|
||||
// 处理input选中数据
|
||||
inputSelectData (listArr, lineArr) { // listArr 列选中的数组 //line行选中的数组
|
||||
// 重定向数组
|
||||
let listArrs = JSON.parse(JSON.stringify(listArr))
|
||||
let lineArrs = JSON.parse(JSON.stringify(lineArr))
|
||||
listArrs.push(0) // 必选第一项
|
||||
// 处理数据显示
|
||||
this.selectData.tableLine = []
|
||||
listArrs.forEach((items, indexs) => {
|
||||
this.selectData.tableLine.push({
|
||||
labelId: this.restur.tableLine[indexs].labelId,
|
||||
label: this.restur.tableLine[indexs].label
|
||||
})
|
||||
})
|
||||
// this.selectData.tableLine = this.restur.tableLine
|
||||
let datart = JSON.parse(JSON.stringify(this.restur.countData))
|
||||
let csd1 = datart.map((itemCol, indexCol) => {
|
||||
let newArr = {}
|
||||
Object.keys(itemCol).forEach((itemRow, indexRow) => {
|
||||
if (listArrs.indexOf(indexRow) !== -1) {
|
||||
newArr[itemRow] = itemCol[itemRow]
|
||||
}
|
||||
})
|
||||
return newArr
|
||||
})
|
||||
this.selectData.countData = lineArrs.map((lineItem, lineIndex) => {
|
||||
return csd1[lineItem]
|
||||
})
|
||||
}
|
||||
// 处理转置数据
|
||||
comTransAllData (arr) {
|
||||
this.transData = arr[0].map(function (col, index) {
|
||||
return arr.map((row, key) => {
|
||||
return row[index]
|
||||
})
|
||||
})
|
||||
// console.log(this.transData, '转置后')
|
||||
}
|
||||
// 处理行列图表数据
|
||||
comRowColAllData (arr) {
|
||||
return arr[0].map(function (col, index) {
|
||||
return arr.map((row, key) => {
|
||||
return row[index]
|
||||
})
|
||||
})
|
||||
// console.log(this.transData, '转置后')
|
||||
}
|
||||
// 处理非地区数据转置前的数据，返回可渲染的数据格式
|
||||
comTransBefore () {
|
||||
// 表头数据处理
|
||||
this.restur.tableLine.push({
|
||||
labelId: 'table_line0',
|
||||
label: '指标'
|
||||
})
|
||||
this.transBeforeData.timeArr.forEach((itemTime, indexTime) => {
|
||||
this.restur.tableLine.push({
|
||||
labelId: 'table_line' + (indexTime + 1),
|
||||
label: itemTime
|
||||
})
|
||||
})
|
||||
// 总数据处理
|
||||
this.transBeforeData.termsName.forEach((itemName, indexName) => {
|
||||
var tableLine = {}
|
||||
this.transBeforeData.transBeforeTermsData[indexName].forEach((dataList, dataKey) => {
|
||||
// console.log(dataKey)
|
||||
if (dataKey === 0) {
|
||||
tableLine['table_line0'] = itemName
|
||||
}
|
||||
tableLine['table_line' + (dataKey + 1)] = dataList
|
||||
})
|
||||
this.restur.countData.push(tableLine)
|
||||
})
|
||||
return this.restur
|
||||
}
|
||||
// 处理非地区数据转置后的数据，返回可渲染的数据格式
|
||||
comTransAfter () {
|
||||
// 表头数据处理
|
||||
this.restur.tableLine.push({
|
||||
labelId: 'table_line0',
|
||||
label: '时间'
|
||||
})
|
||||
this.transBeforeData.termsName.forEach((itemTime, indexTime) => {
|
||||
this.restur.tableLine.push({
|
||||
labelId: 'table_line' + (indexTime + 1),
|
||||
label: itemTime
|
||||
})
|
||||
})
|
||||
// 将数据转置
|
||||
this.comTransAllData(this.transBeforeData.transBeforeTermsData)
|
||||
// 总数据处理
|
||||
this.transBeforeData.timeArr.forEach((itemName, indexName) => {
|
||||
var tableLine = {}
|
||||
this.transData[indexName].forEach((dataList, dataKey) => {
|
||||
// console.log(dataKey)
|
||||
if (dataKey === 0) {
|
||||
tableLine['table_line0'] = itemName
|
||||
}
|
||||
tableLine['table_line' + (dataKey + 1)] = dataList
|
||||
})
|
||||
this.restur.countData.push(tableLine)
|
||||
})
|
||||
return this.restur
|
||||
}
|
||||
// 处理非地区数据转置后的数据，返回可渲染的数据格式
|
||||
comTransAreabefore () {
|
||||
// 表头数据处理
|
||||
this.restur.tableLine.push({
|
||||
labelId: 'table_line0',
|
||||
label: '地区'
|
||||
})
|
||||
this.transBeforeData.timeArr.forEach((itemTime, indexTime) => {
|
||||
this.restur.tableLine.push({
|
||||
labelId: 'table_line' + (indexTime + 1),
|
||||
label: itemTime
|
||||
})
|
||||
})
|
||||
// 总数据处理
|
||||
this.transBeforeData.areaName.forEach((itemName, indexName) => {
|
||||
var tableLine = {}
|
||||
this.transBeforeData.transBeforeAreaData[indexName].forEach((dataList, dataKey) => {
|
||||
// console.log(dataKey)
|
||||
if (dataKey === 0) {
|
||||
tableLine['table_line0'] = itemName
|
||||
}
|
||||
tableLine['table_line' + (dataKey + 1)] = dataList
|
||||
})
|
||||
this.restur.countData.push(tableLine)
|
||||
})
|
||||
return this.restur
|
||||
}
|
||||
// 处理地区数据转置后的数据，返回可渲染的数据格式
|
||||
comTransAreaAfter () {
|
||||
// 表头数据处理
|
||||
this.restur.tableLine.push({
|
||||
labelId: 'table_line0',
|
||||
label: '时间'
|
||||
})
|
||||
this.transBeforeData.areaName.forEach((itemTime, indexTime) => {
|
||||
this.restur.tableLine.push({
|
||||
labelId: 'table_line' + (indexTime + 1),
|
||||
label: itemTime
|
||||
})
|
||||
})
|
||||
// 将数据转置
|
||||
this.comTransAllData(this.transBeforeData.transBeforeAreaData)
|
||||
// 总数据处理
|
||||
this.transBeforeData.timeArr.forEach((itemName, indexName) => {
|
||||
var tableLine = {}
|
||||
this.transData[indexName].forEach((dataList, dataKey) => {
|
||||
// console.log(dataKey)
|
||||
if (dataKey === 0) {
|
||||
tableLine['table_line0'] = itemName
|
||||
}
|
||||
tableLine['table_line' + (dataKey + 1)] = dataList
|
||||
})
|
||||
this.restur.countData.push(tableLine)
|
||||
})
|
||||
return this.restur
|
||||
}
|
||||
// SUM求和 ============对行运算
|
||||
dataSumLine () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
dataRs.tableLine.push({
|
||||
label: 'SUM求和' + this.restur.computedNum,
|
||||
labelId: 'table_line' + dataRs.tableLine.length
|
||||
})
|
||||
let bth = dataRs.countData.map((item, index) => {
|
||||
var arr = Object.values(item)
|
||||
arr.shift()
|
||||
return math.add(...arr).toFixed(2)
|
||||
})
|
||||
// console.log(bth, '求和')
|
||||
// console.log(dataRs.countData, bth.length)
|
||||
dataRs.countData.forEach((item, index) => {
|
||||
item['table_line' + (dataRs.tableLine.length - 1)] = bth[index]
|
||||
})
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// SUM求和 ============对列运算
|
||||
dataSumList () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
// 处理现在的数据
|
||||
let datarts = this.restur.countData.map((item, index) => {
|
||||
let arrt = Object.values(item)
|
||||
arrt.shift()
|
||||
return arrt
|
||||
})
|
||||
// 将数据转置
|
||||
this.comTransAllData(datarts)
|
||||
let transSum = this.transData.map((item, index) => {
|
||||
return math.add(...item).toFixed(2)
|
||||
})
|
||||
console.log(transSum, 'transSum')
|
||||
let returObj = {}
|
||||
transSum.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
returObj['table_line' + index] = 'SUM求和' + this.restur.computedNum
|
||||
}
|
||||
returObj['table_line' + (index + 1)] = item
|
||||
})
|
||||
dataRs.countData.push(returObj)
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// x平均数 ========>对行运算
|
||||
dataAVGLine () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
dataRs.tableLine.push({
|
||||
label: 'x平均数' + this.restur.computedNum,
|
||||
labelId: 'table_line' + dataRs.tableLine.length
|
||||
})
|
||||
let bth = dataRs.countData.map((item, index) => {
|
||||
var arr = Object.values(item)
|
||||
arr.shift()
|
||||
return (math.add(...arr).toFixed(2)) / arr.length
|
||||
})
|
||||
// console.log(bth, '求和')
|
||||
// console.log(dataRs.countData, bth.length)
|
||||
dataRs.countData.forEach((item, index) => {
|
||||
item['table_line' + (dataRs.tableLine.length - 1)] = bth[index]
|
||||
})
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// x平均数 ============对列运算
|
||||
dataAVGList () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
// 处理现在的数据
|
||||
let datarts = this.restur.countData.map((item, index) => {
|
||||
let arrt = Object.values(item)
|
||||
arrt.shift()
|
||||
return arrt
|
||||
})
|
||||
// 将数据转置
|
||||
this.comTransAllData(datarts)
|
||||
let transSum = this.transData.map((item, index) => {
|
||||
return (math.add(...item).toFixed(2)) / item.length
|
||||
})
|
||||
console.log(transSum, 'transSum')
|
||||
let returObj = {}
|
||||
transSum.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
returObj['table_line' + index] = 'x平均数' + this.restur.computedNum
|
||||
}
|
||||
returObj['table_line' + (index + 1)] = item
|
||||
})
|
||||
dataRs.countData.push(returObj)
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// MAX最大值 ============对行运算
|
||||
dataMAXLine () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
dataRs.tableLine.push({
|
||||
label: 'MAX最大值' + this.restur.computedNum,
|
||||
labelId: 'table_line' + dataRs.tableLine.length
|
||||
})
|
||||
let bth = dataRs.countData.map((item, index) => {
|
||||
var arr = Object.values(item)
|
||||
arr.shift()
|
||||
return math.max(...arr)
|
||||
})
|
||||
// console.log(bth, '求和')
|
||||
// console.log(dataRs.countData, bth.length)
|
||||
dataRs.countData.forEach((item, index) => {
|
||||
item['table_line' + (dataRs.tableLine.length - 1)] = bth[index]
|
||||
})
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// MAX最大值 ============对列运算
|
||||
dataMAXList () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
// 处理现在的数据
|
||||
let datarts = this.restur.countData.map((item, index) => {
|
||||
let arrt = Object.values(item)
|
||||
arrt.shift()
|
||||
return arrt
|
||||
})
|
||||
// 将数据转置
|
||||
this.comTransAllData(datarts)
|
||||
let transSum = this.transData.map((item, index) => {
|
||||
return math.max(...item)
|
||||
})
|
||||
console.log(transSum, 'transSum')
|
||||
let returObj = {}
|
||||
transSum.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
returObj['table_line' + index] = 'MAX最大值' + this.restur.computedNum
|
||||
}
|
||||
returObj['table_line' + (index + 1)] = item
|
||||
})
|
||||
dataRs.countData.push(returObj)
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// MIN最小值 ============对行运算
|
||||
dataMINLine () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
dataRs.tableLine.push({
|
||||
label: 'MIN最小值' + this.restur.computedNum,
|
||||
labelId: 'table_line' + dataRs.tableLine.length
|
||||
})
|
||||
let bth = dataRs.countData.map((item, index) => {
|
||||
var arr = Object.values(item)
|
||||
arr.shift()
|
||||
return math.min(...arr)
|
||||
})
|
||||
// console.log(bth, '求和')
|
||||
// console.log(dataRs.countData, bth.length)
|
||||
dataRs.countData.forEach((item, index) => {
|
||||
item['table_line' + (dataRs.tableLine.length - 1)] = bth[index]
|
||||
})
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// MIN最小值 ============对列运算
|
||||
dataMINList () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
// 处理现在的数据
|
||||
let datarts = this.restur.countData.map((item, index) => {
|
||||
let arrt = Object.values(item)
|
||||
arrt.shift()
|
||||
return arrt
|
||||
})
|
||||
// 将数据转置
|
||||
this.comTransAllData(datarts)
|
||||
let transSum = this.transData.map((item, index) => {
|
||||
return math.min(...item)
|
||||
})
|
||||
console.log(transSum, 'transSum')
|
||||
let returObj = {}
|
||||
transSum.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
returObj['table_line' + index] = 'MIN最小值' + this.restur.computedNum
|
||||
}
|
||||
returObj['table_line' + (index + 1)] = item
|
||||
})
|
||||
dataRs.countData.push(returObj)
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// MD中位数 ============对行运算
|
||||
dataMDLine () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
dataRs.tableLine.push({
|
||||
label: 'MD中位数' + this.restur.computedNum,
|
||||
labelId: 'table_line' + dataRs.tableLine.length
|
||||
})
|
||||
let bth = dataRs.countData.map((item, index) => {
|
||||
var arr = Object.values(item)
|
||||
arr.shift()
|
||||
return math.median(...arr).toFixed(2)
|
||||
})
|
||||
// console.log(bth, '求和')
|
||||
// console.log(dataRs.countData, bth.length)
|
||||
dataRs.countData.forEach((item, index) => {
|
||||
item['table_line' + (dataRs.tableLine.length - 1)] = bth[index]
|
||||
})
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// MD中位数 ============对列运算
|
||||
dataMDList () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
// 处理现在的数据
|
||||
let datarts = this.restur.countData.map((item, index) => {
|
||||
let arrt = Object.values(item)
|
||||
arrt.shift()
|
||||
return arrt
|
||||
})
|
||||
// 将数据转置
|
||||
this.comTransAllData(datarts)
|
||||
let transSum = this.transData.map((item, index) => {
|
||||
return math.median(...item).toFixed(2)
|
||||
})
|
||||
console.log(transSum, 'transSum')
|
||||
let returObj = {}
|
||||
transSum.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
returObj['table_line' + index] = 'MD中位数' + this.restur.computedNum
|
||||
}
|
||||
returObj['table_line' + (index + 1)] = item
|
||||
})
|
||||
dataRs.countData.push(returObj)
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// MO众数 ============对行运算
|
||||
dataMOLine () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
dataRs.tableLine.push({
|
||||
label: 'MO众数' + this.restur.computedNum,
|
||||
labelId: 'table_line' + dataRs.tableLine.length
|
||||
})
|
||||
let bth = dataRs.countData.map((item, index) => {
|
||||
var arr = Object.values(item)
|
||||
arr.shift()
|
||||
return math.mode(...arr)
|
||||
})
|
||||
// console.log(bth, '求和')
|
||||
// console.log(dataRs.countData, bth.length)
|
||||
dataRs.countData.forEach((item, index) => {
|
||||
item['table_line' + (dataRs.tableLine.length - 1)] = bth[index]
|
||||
})
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// MO众数 ============对列运算
|
||||
dataMOList () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
// 处理现在的数据
|
||||
let datarts = this.restur.countData.map((item, index) => {
|
||||
let arrt = Object.values(item)
|
||||
arrt.shift()
|
||||
return arrt
|
||||
})
|
||||
// 将数据转置
|
||||
this.comTransAllData(datarts)
|
||||
let transSum = this.transData.map((item, index) => {
|
||||
return math.mode(...item)
|
||||
})
|
||||
console.log(transSum, 'transSum')
|
||||
let returObj = {}
|
||||
transSum.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
returObj['table_line' + index] = 'MO众数' + this.restur.computedNum
|
||||
}
|
||||
returObj['table_line' + (index + 1)] = item
|
||||
})
|
||||
dataRs.countData.push(returObj)
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// S²方差 ============对行运算
|
||||
dataSSLine () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
dataRs.tableLine.push({
|
||||
label: 'S²方差' + this.restur.computedNum,
|
||||
labelId: 'table_line' + dataRs.tableLine.length
|
||||
})
|
||||
let bth = dataRs.countData.map((item, index) => {
|
||||
var arr = Object.values(item)
|
||||
arr.shift()
|
||||
return math.variance(...arr).toFixed(2)
|
||||
})
|
||||
// console.log(bth, '求和')
|
||||
// console.log(dataRs.countData, bth.length)
|
||||
dataRs.countData.forEach((item, index) => {
|
||||
item['table_line' + (dataRs.tableLine.length - 1)] = bth[index]
|
||||
})
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// S²方差 ============对列运算
|
||||
dataSSList () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
// 处理现在的数据
|
||||
let datarts = this.restur.countData.map((item, index) => {
|
||||
let arrt = Object.values(item)
|
||||
arrt.shift()
|
||||
return arrt
|
||||
})
|
||||
// 将数据转置
|
||||
this.comTransAllData(datarts)
|
||||
let transSum = this.transData.map((item, index) => {
|
||||
return math.variance(...item).toFixed(2)
|
||||
})
|
||||
console.log(transSum, 'transSum')
|
||||
let returObj = {}
|
||||
transSum.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
returObj['table_line' + index] = 'S²方差' + this.restur.computedNum
|
||||
}
|
||||
returObj['table_line' + (index + 1)] = item
|
||||
})
|
||||
dataRs.countData.push(returObj)
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// S标准差 ============对行运算
|
||||
dataSLine () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
dataRs.tableLine.push({
|
||||
label: 'S标准差' + this.restur.computedNum,
|
||||
labelId: 'table_line' + dataRs.tableLine.length
|
||||
})
|
||||
let bth = dataRs.countData.map((item, index) => {
|
||||
var arr = Object.values(item)
|
||||
arr.shift()
|
||||
return math.std(...arr).toFixed(2)
|
||||
})
|
||||
// console.log(bth, '求和')
|
||||
// console.log(dataRs.countData, bth.length)
|
||||
dataRs.countData.forEach((item, index) => {
|
||||
item['table_line' + (dataRs.tableLine.length - 1)] = bth[index]
|
||||
})
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// S标准差 ============对列运算
|
||||
dataSList () {
|
||||
console.log(this.restur, '对行运算')
|
||||
let dataRs = JSON.parse(JSON.stringify(this.restur))
|
||||
// 处理现在的数据
|
||||
let datarts = this.restur.countData.map((item, index) => {
|
||||
let arrt = Object.values(item)
|
||||
arrt.shift()
|
||||
return arrt
|
||||
})
|
||||
// 将数据转置
|
||||
this.comTransAllData(datarts)
|
||||
let transSum = this.transData.map((item, index) => {
|
||||
return math.std(...item).toFixed(2)
|
||||
})
|
||||
console.log(transSum, 'transSum')
|
||||
let returObj = {}
|
||||
transSum.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
returObj['table_line' + index] = 'S标准差' + this.restur.computedNum
|
||||
}
|
||||
returObj['table_line' + (index + 1)] = item
|
||||
})
|
||||
dataRs.countData.push(returObj)
|
||||
this.restur = dataRs
|
||||
return this.restur
|
||||
}
|
||||
// 竖状图数据 ============行转换
|
||||
dataVerticalMapRow () {
|
||||
let termsName = []
|
||||
let cloneSarr = JSON.parse(JSON.stringify(this.selectData.countData))
|
||||
console.log(this.chartsDatazz, '1012')
|
||||
this.chartsDatazz.series = cloneSarr.map((item, index) => {
|
||||
let obju = Object.values(item)
|
||||
let keys = obju.shift()
|
||||
termsName.push(keys)
|
||||
return {
|
||||
name: keys,
|
||||
type: 'bar',
|
||||
data: obju
|
||||
}
|
||||
})
|
||||
this.chartsDatazz.legend = {
|
||||
type: 'scroll',
|
||||
bottom: 0,
|
||||
data: termsName
|
||||
}
|
||||
let timeArr = this.selectData.tableLine.map((item, index) => {
|
||||
return item.label
|
||||
})
|
||||
timeArr.shift()
|
||||
this.chartsDatazz.xAxis = [{
|
||||
type: 'category',
|
||||
data: timeArr
|
||||
}]
|
||||
this.chartsDatazz.yAxis = [{
|
||||
type: 'value',
|
||||
splitNumber: 6
|
||||
}]
|
||||
console.log(this.chartsDatazz)
|
||||
return this.chartsDatazz
|
||||
}
|
||||
// 竖状图数据 ============列转换
|
||||
dataVerticalMapCol () {
|
||||
this.chartsDatazz.yAxis = [{
|
||||
type: 'value',
|
||||
splitNumber: 6
|
||||
}]
|
||||
let cloneSarr = JSON.parse(JSON.stringify(this.selectData.countData))
|
||||
let termsName = []
|
||||
let seriess = cloneSarr.map((item, index) => {
|
||||
let obju = Object.values(item)
|
||||
let keys = obju.shift()
|
||||
termsName.push(keys)
|
||||
return obju
|
||||
})
|
||||
// 将数据转置
|
||||
this.chartsDatazz.series = this.comRowColAllData(seriess).map((item, index) => {
|
||||
console.log(this.selectData.tableLine[index + 1].label, '454545')
|
||||
return {
|
||||
name: this.selectData.tableLine[index + 1].label,
|
||||
type: 'bar',
|
||||
data: item
|
||||
}
|
||||
})
|
||||
let timeArr = this.selectData.tableLine.map((item, index) => {
|
||||
return item.label
|
||||
})
|
||||
timeArr.shift()
|
||||
this.chartsDatazz.legend = {
|
||||
type: 'scroll',
|
||||
bottom: 0,
|
||||
data: timeArr
|
||||
}
|
||||
this.chartsDatazz.xAxis = [{
|
||||
type: 'category',
|
||||
data: termsName
|
||||
}]
|
||||
this.chartsDatazz.yAxis = [{
|
||||
type: 'value',
|
||||
splitNumber: 6
|
||||
}]
|
||||
return this.chartsDatazz
|
||||
}
|
||||
// 横状图数据 ============行转换
|
||||
dataAcrossMapRow () {
|
||||
let termsName = []
|
||||
let cloneSarr = JSON.parse(JSON.stringify(this.selectData.countData))
|
||||
this.chartsDatazz.series = cloneSarr.map((item, index) => {
|
||||
let obju = Object.values(item)
|
||||
let keys = obju.shift()
|
||||
termsName.push(keys)
|
||||
return {
|
||||
name: keys,
|
||||
type: 'bar',
|
||||
data: obju
|
||||
}
|
||||
})
|
||||
this.chartsDatazz.legend = {
|
||||
type: 'scroll',
|
||||
bottom: 0,
|
||||
data: termsName
|
||||
}
|
||||
let timeArr = this.selectData.tableLine.map((item, index) => {
|
||||
return item.label
|
||||
})
|
||||
timeArr.shift()
|
||||
this.chartsDatazz.xAxis = [{
|
||||
type: 'value'
|
||||
|
||||
}]
|
||||
this.chartsDatazz.yAxis = [{
|
||||
type: 'category',
|
||||
data: timeArr
|
||||
}]
|
||||
return this.chartsDatazz
|
||||
}
|
||||
// 竖状图数据 ============列转换
|
||||
dataAcrossMapCol () {
|
||||
this.chartsDatazz.yAxis = [{
|
||||
type: 'value',
|
||||
splitNumber: 6
|
||||
}]
|
||||
let cloneSarr = JSON.parse(JSON.stringify(this.selectData.countData))
|
||||
let termsName = []
|
||||
let seriess = cloneSarr.map((item, index) => {
|
||||
let obju = Object.values(item)
|
||||
let keys = obju.shift()
|
||||
termsName.push(keys)
|
||||
return obju
|
||||
})
|
||||
// 将数据转置
|
||||
this.chartsDatazz.series = this.comRowColAllData(seriess).map((item, index) => {
|
||||
console.log(this.selectData.tableLine[index + 1].label, '454545')
|
||||
return {
|
||||
name: this.selectData.tableLine[index + 1].label,
|
||||
type: 'bar',
|
||||
data: item
|
||||
}
|
||||
})
|
||||
let timeArr = this.selectData.tableLine.map((item, index) => {
|
||||
return item.label
|
||||
})
|
||||
timeArr.shift()
|
||||
this.chartsDatazz.legend = {
|
||||
type: 'scroll',
|
||||
bottom: 0,
|
||||
data: timeArr
|
||||
}
|
||||
this.chartsDatazz.xAxis = [{
|
||||
type: 'value'
|
||||
|
||||
}]
|
||||
this.chartsDatazz.yAxis = [{
|
||||
type: 'category',
|
||||
data: termsName
|
||||
}]
|
||||
return this.chartsDatazz
|
||||
}
|
||||
// 折线图数据 ============行转换
|
||||
dataBrokenLineMapRow () {
|
||||
let termsName = []
|
||||
let cloneSarr = JSON.parse(JSON.stringify(this.selectData.countData))
|
||||
this.chartsDatazz.series = cloneSarr.map((item, index) => {
|
||||
let obju = Object.values(item)
|
||||
let keys = obju.shift()
|
||||
termsName.push(keys)
|
||||
return {
|
||||
name: keys,
|
||||
type: 'line',
|
||||
data: obju
|
||||
}
|
||||
})
|
||||
this.chartsDatazz.legend = {
|
||||
type: 'scroll',
|
||||
bottom: 0,
|
||||
data: termsName
|
||||
}
|
||||
let timeArr = this.selectData.tableLine.map((item, index) => {
|
||||
return item.label
|
||||
})
|
||||
timeArr.shift()
|
||||
this.chartsDatazz.xAxis = [{
|
||||
type: 'category',
|
||||
data: timeArr
|
||||
}]
|
||||
this.chartsDatazz.yAxis = [{
|
||||
type: 'value',
|
||||
splitNumber: 6
|
||||
}]
|
||||
return this.chartsDatazz
|
||||
}
|
||||
// 折线图数据 ============列转换
|
||||
dataBrokenLineMapCol () {
|
||||
this.chartsDatazz.yAxis = [{
|
||||
type: 'value',
|
||||
splitNumber: 6
|
||||
}]
|
||||
let cloneSarr = JSON.parse(JSON.stringify(this.selectData.countData))
|
||||
let termsName = []
|
||||
let seriess = cloneSarr.map((item, index) => {
|
||||
let obju = Object.values(item)
|
||||
let keys = obju.shift()
|
||||
termsName.push(keys)
|
||||
return obju
|
||||
})
|
||||
// 将数据转置
|
||||
this.chartsDatazz.series = this.comRowColAllData(seriess).map((item, index) => {
|
||||
console.log(this.selectData.tableLine[index + 1].label, '454545')
|
||||
return {
|
||||
name: this.selectData.tableLine[index + 1].label,
|
||||
type: 'line',
|
||||
data: item
|
||||
}
|
||||
})
|
||||
let timeArr = this.selectData.tableLine.map((item, index) => {
|
||||
return item.label
|
||||
})
|
||||
timeArr.shift()
|
||||
this.chartsDatazz.legend = {
|
||||
type: 'scroll',
|
||||
bottom: 0,
|
||||
data: timeArr
|
||||
}
|
||||
this.chartsDatazz.xAxis = [{
|
||||
type: 'category',
|
||||
data: termsName
|
||||
}]
|
||||
this.chartsDatazz.yAxis = [{
|
||||
type: 'value',
|
||||
splitNumber: 6
|
||||
}]
|
||||
return this.chartsDatazz
|
||||
}
|
||||
// 饼图数据 ============行转换
|
||||
dataPieMapRow () {
|
||||
let termsLine = []
|
||||
let cloneLine = JSON.parse(JSON.stringify(this.selectData.tableLine))
|
||||
cloneLine.forEach((item, index) => {
|
||||
if (index !== 0) {
|
||||
termsLine.push(item.label)
|
||||
}
|
||||
})
|
||||
this.chartsDatazzPie.legend.data = termsLine
|
||||
|
||||
let cloneSarr = JSON.parse(JSON.stringify(this.selectData.countData))
|
||||
console.log(this.selectData, 'this.selectData.countData')
|
||||
this.chartsDatazzPie.series = cloneSarr.map((item, index) => {
|
||||
let obju = Object.values(item)
|
||||
let keys = obju.shift()
|
||||
return {
|
||||
name: keys,
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['40%', '50%'],
|
||||
data: obju.map((itemObj, indexObj) => {
|
||||
return {
|
||||
name: termsLine[indexObj],
|
||||
value: itemObj
|
||||
}
|
||||
}),
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log(this.chartsDatazzPie, 'this.chartsDatazzPie')
|
||||
return this.chartsDatazzPie
|
||||
}
|
||||
// 饼图数据 ============列转换
|
||||
dataPieMapCol () {
|
||||
let cloneLine = JSON.parse(JSON.stringify(this.selectData.tableLine))
|
||||
console.log(cloneLine, '10236')
|
||||
let cloneSarr = JSON.parse(JSON.stringify(this.selectData.countData))
|
||||
console.log(cloneSarr, 'this.selectData.countData')
|
||||
this.chartsDatazzPie.legend.data = cloneSarr.map((item, index) => {
|
||||
return Object.values(item)[0]
|
||||
})
|
||||
this.chartsDatazzPie.series = {
|
||||
name: cloneLine[1].label,
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['40%', '50%'],
|
||||
data: cloneSarr.map((itemObj, indexObj) => {
|
||||
console.log(Object.values(itemObj))
|
||||
return {
|
||||
name: Object.values(itemObj)[0],
|
||||
value: Object.values(itemObj)[1]
|
||||
}
|
||||
}),
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(this.chartsDatazzPie, 'this.chartsDatazzPie')
|
||||
return this.chartsDatazzPie
|
||||
}
|
||||
}
|
||||
export default computedFunc
|
||||
530
src/assets/js/infographic.js
Normal file
530
src/assets/js/infographic.js
Normal file
@@ -0,0 +1,530 @@
|
||||
/* eslint-disable */
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory);
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts);
|
||||
}
|
||||
}(this, function (exports, echarts) {
|
||||
var log = function (msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg);
|
||||
}
|
||||
};
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded');
|
||||
return;
|
||||
}
|
||||
echarts.registerTheme('infographic', {
|
||||
"color": [
|
||||
"#c1232b",
|
||||
"#27727b",
|
||||
"#fcce10",
|
||||
"#e87c25",
|
||||
"#b5c334",
|
||||
"#fe8463",
|
||||
"#9bca63",
|
||||
"#fad860",
|
||||
"#f3a43b",
|
||||
"#60c0dd",
|
||||
"#d7504b",
|
||||
"#c6e579",
|
||||
"#f4e001",
|
||||
"#f0805a",
|
||||
"#26c0c0"
|
||||
],
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"textStyle": {},
|
||||
"title": {
|
||||
"textStyle": {
|
||||
"color": "#27727b"
|
||||
},
|
||||
"subtextStyle": {
|
||||
"color": "#aaaaaa"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "3"
|
||||
}
|
||||
},
|
||||
"symbolSize": "5",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": false
|
||||
},
|
||||
"radar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "3"
|
||||
}
|
||||
},
|
||||
"symbolSize": "5",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": false
|
||||
},
|
||||
"bar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"pie": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"scatter": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"boxplot": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"parallel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"sankey": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"gauge": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"candlestick": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#c1232b",
|
||||
"color0": "#b5c334",
|
||||
"borderColor": "#c1232b",
|
||||
"borderColor0": "#b5c334",
|
||||
"borderWidth": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"graph": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": 1,
|
||||
"color": "#aaaaaa"
|
||||
}
|
||||
},
|
||||
"symbolSize": "5",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": false,
|
||||
"color": [
|
||||
"#c1232b",
|
||||
"#27727b",
|
||||
"#fcce10",
|
||||
"#e87c25",
|
||||
"#b5c334",
|
||||
"#fe8463",
|
||||
"#9bca63",
|
||||
"#fad860",
|
||||
"#f3a43b",
|
||||
"#60c0dd",
|
||||
"#d7504b",
|
||||
"#c6e579",
|
||||
"#f4e001",
|
||||
"#f0805a",
|
||||
"#26c0c0"
|
||||
],
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eeeeee"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"map": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#dddddd",
|
||||
"borderColor": "#eeeeee",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(254,153,78,1)",
|
||||
"borderColor": "#444444",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#c1232b"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(100,0,0)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"geo": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#dddddd",
|
||||
"borderColor": "#eeeeee",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(254,153,78,1)",
|
||||
"borderColor": "#444444",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#c1232b"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(100,0,0)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"categoryAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#27727b"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#27727b"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#ccc"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"valueAxis": {
|
||||
"axisLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#ccc"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"logAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#27727b"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#ccc"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#27727b"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#ccc"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"toolbox": {
|
||||
"iconStyle": {
|
||||
"normal": {
|
||||
"borderColor": "#c1232b"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderColor": "#e87c25"
|
||||
}
|
||||
}
|
||||
},
|
||||
"legend": {
|
||||
"textStyle": {
|
||||
"color": "#333333"
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"axisPointer": {
|
||||
"lineStyle": {
|
||||
"color": "#27727b",
|
||||
"width": 1
|
||||
},
|
||||
"crossStyle": {
|
||||
"color": "#27727b",
|
||||
"width": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeline": {
|
||||
"lineStyle": {
|
||||
"color": "#293c55",
|
||||
"width": 1
|
||||
},
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#27727b",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#72d4e0"
|
||||
}
|
||||
},
|
||||
"controlStyle": {
|
||||
"normal": {
|
||||
"color": "#27727b",
|
||||
"borderColor": "#27727b",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#27727b",
|
||||
"borderColor": "#27727b",
|
||||
"borderWidth": 0.5
|
||||
}
|
||||
},
|
||||
"checkpointStyle": {
|
||||
"color": "#c1232b",
|
||||
"borderColor": "rgba(194,53,49,0.5)"
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#293c55"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#293c55"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"color": [
|
||||
"#c1232b",
|
||||
"#fcce10"
|
||||
]
|
||||
},
|
||||
"dataZoom": {
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"dataBackgroundColor": "rgba(181,195,52,0.3)",
|
||||
"fillerColor": "rgba(181,195,52,0.2)",
|
||||
"handleColor": "#27727b",
|
||||
"handleSize": "100%",
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"markPoint": {
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eeeeee"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#eeeeee"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}));
|
||||
199
src/assets/js/macarons.js
Normal file
199
src/assets/js/macarons.js
Normal file
@@ -0,0 +1,199 @@
|
||||
/* eslint-disable */
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory);
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts);
|
||||
}
|
||||
}(this, function (exports, echarts) {
|
||||
var log = function (msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg);
|
||||
}
|
||||
};
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded');
|
||||
return;
|
||||
}
|
||||
|
||||
var colorPalette = [
|
||||
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
|
||||
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
|
||||
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
|
||||
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
|
||||
];
|
||||
|
||||
|
||||
var theme = {
|
||||
color: colorPalette,
|
||||
|
||||
title: {
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
color: '#008acd'
|
||||
}
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
itemWidth: 15,
|
||||
color: ['#5ab1ef','#e0ffff']
|
||||
},
|
||||
|
||||
toolbox: {
|
||||
iconStyle: {
|
||||
normal: {
|
||||
borderColor: colorPalette[0]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(50,50,50,0.5)',
|
||||
axisPointer : {
|
||||
type : 'line',
|
||||
lineStyle : {
|
||||
color: '#008acd'
|
||||
},
|
||||
crossStyle: {
|
||||
color: '#008acd'
|
||||
},
|
||||
shadowStyle : {
|
||||
color: 'rgba(200,200,200,0.2)'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
dataZoom: {
|
||||
dataBackgroundColor: '#efefff',
|
||||
fillerColor: 'rgba(182,162,222,0.2)',
|
||||
handleColor: '#008acd'
|
||||
},
|
||||
|
||||
grid: {
|
||||
borderColor: '#eee'
|
||||
},
|
||||
|
||||
categoryAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#008acd'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: ['#eee']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
valueAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#008acd'
|
||||
}
|
||||
},
|
||||
splitArea : {
|
||||
show : true,
|
||||
areaStyle : {
|
||||
color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: ['#eee']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
timeline : {
|
||||
lineStyle : {
|
||||
color : '#008acd'
|
||||
},
|
||||
controlStyle : {
|
||||
normal : { color : '#008acd'},
|
||||
emphasis : { color : '#008acd'}
|
||||
},
|
||||
symbol : 'emptyCircle',
|
||||
symbolSize : 3
|
||||
},
|
||||
|
||||
line: {
|
||||
smooth : true,
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 3
|
||||
},
|
||||
|
||||
candlestick: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#d87a80',
|
||||
color0: '#2ec7c9',
|
||||
lineStyle: {
|
||||
color: '#d87a80',
|
||||
color0: '#2ec7c9'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
scatter: {
|
||||
symbol: 'circle',
|
||||
symbolSize: 4
|
||||
},
|
||||
|
||||
map: {
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: '#d87a80'
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#eee',
|
||||
areaColor: '#ddd'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#fe994e'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
graph: {
|
||||
color: colorPalette
|
||||
},
|
||||
|
||||
gauge : {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
|
||||
width: 10
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
splitNumber: 10,
|
||||
length :15,
|
||||
lineStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
length :22,
|
||||
lineStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
pointer : {
|
||||
width : 5
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
echarts.registerTheme('macarons', theme);
|
||||
}));
|
||||
31
src/assets/js/vintage.js
Normal file
31
src/assets/js/vintage.js
Normal file
@@ -0,0 +1,31 @@
|
||||
/* eslint-disable */
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory);
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts);
|
||||
}
|
||||
}(this, function (exports, echarts) {
|
||||
var log = function (msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg);
|
||||
}
|
||||
};
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded');
|
||||
return;
|
||||
}
|
||||
var colorPalette = ['#d87c7c','#919e8b', '#d7ab82', '#6e7074','#61a0a8','#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'];
|
||||
echarts.registerTheme('vintage', {
|
||||
color: colorPalette,
|
||||
backgroundColor: '#fef8ef',
|
||||
graph: {
|
||||
color: colorPalette
|
||||
}
|
||||
});
|
||||
}));
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 47 KiB |
458
src/components/advancedQuery/AdvancedQuery.vue
Normal file
458
src/components/advancedQuery/AdvancedQuery.vue
Normal file
@@ -0,0 +1,458 @@
|
||||
<template>
|
||||
<div class="advancedQuery">
|
||||
<splitpanes class="default-theme">
|
||||
<pane min-size="15" size="25">
|
||||
<div class="leftNavS">
|
||||
<div class="title">指标</div>
|
||||
<!-- 左侧导航 -->
|
||||
<el-row class="tac" style="overflow: auto;height:44.875rem;">
|
||||
<el-col :span="24">
|
||||
<el-menu
|
||||
default-active="1-1-1"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@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">{{item4.name}}</template>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</pane>
|
||||
<pane min-size="48" size="47.5">
|
||||
<div class="centerNavs">
|
||||
<div class="title">
|
||||
<input type="text" placeholder="请输入你要查询的指标" />
|
||||
<div>查询</div>
|
||||
<input type="checkbox" v-model="checkboxState" />
|
||||
<span>从结果中筛选 共3200条</span>
|
||||
</div>
|
||||
<div class="titleContSelect">
|
||||
<span @click="clickStateOption('checkAll')">全选</span>
|
||||
<span @click="clickStateOption('inverse')">反选</span>
|
||||
<span @click="clickStateOption('empty')">清空</span>
|
||||
<font>提示：最多选择100条数据进行查询！</font>
|
||||
</div>
|
||||
<div class="centerContent" style="overflow: auto;">
|
||||
<div v-for="(item,index) in searchDatas" :key="index">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="item.inputState"
|
||||
@change="clickStateOption('oneClick',index)"
|
||||
:ref="'input'+index"
|
||||
/>
|
||||
<img :src="zhibiaoImg" alt />
|
||||
<span>{{item.nameText}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pane>
|
||||
<pane min-size="25" size="27.5">
|
||||
<div class="rightNavs">
|
||||
<div class="title">指标({{rightGoCount}}/100)</div>
|
||||
<div class="titleContSelect">
|
||||
<span @click="clickStateOption('clearAll')">全部清除</span>
|
||||
<span @click="clickStateOption('clearUnselected')">清除未选项</span>
|
||||
</div>
|
||||
<div class="centerContent" style="overflow: auto;">
|
||||
<div v-for="(item,index) in changeActive" :key="index">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="item.inputState"
|
||||
@change="clickStateOption('oneClick',index)"
|
||||
:ref="'input'+index"
|
||||
/>
|
||||
<img :src="zhibiaoImg" alt />
|
||||
<span>{{item.nameText}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入窗口拆分组件
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
export default {
|
||||
name: 'advancedQuery',
|
||||
components: {
|
||||
Splitpanes,
|
||||
Pane
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
zhibiaoImg: require('../../../static/chatCont/zhibiaojieshi.png'),
|
||||
leftCateData: null,
|
||||
checkboxState: false,
|
||||
// 查询到的数据
|
||||
searchDatas: [
|
||||
{
|
||||
// input选中状态
|
||||
inputState: false,
|
||||
// 指标解释显示状态
|
||||
zbjsState: false,
|
||||
// 指标名称
|
||||
nameText: '国内生产总值_当季值'
|
||||
},
|
||||
{
|
||||
// input选中状态
|
||||
inputState: false,
|
||||
// 指标解释显示状态
|
||||
zbjsState: false,
|
||||
// 指标名称
|
||||
nameText: '信息传输、软件和信息技术服务业增加值_当季值软件和信息技术服务业增加值_当季值软件和信息技术服务业增加值_当季值软件和信息技术服务业增加值_当季值软件和信息技术服务业增加值_当季值'
|
||||
},
|
||||
{
|
||||
// input选中状态
|
||||
inputState: false,
|
||||
// 指标解释显示状态
|
||||
zbjsState: false,
|
||||
// 指标名称
|
||||
nameText: '租赁和商务服务业增加值_累计值'
|
||||
},
|
||||
{
|
||||
// input选中状态
|
||||
inputState: false,
|
||||
// 指标解释显示状态
|
||||
zbjsState: false,
|
||||
// 指标名称
|
||||
nameText: '租赁和商务服务业增加值_累计值545'
|
||||
}
|
||||
],
|
||||
// 选中的指标(右侧)
|
||||
changeActive: [],
|
||||
// 右侧打钩总数
|
||||
rightGoCount: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOpen (key, keyPath) {
|
||||
console.log(key, keyPath)
|
||||
},
|
||||
handleClose (key, keyPath) {
|
||||
console.log(key, keyPath)
|
||||
},
|
||||
selectActive (key, keyPath) {
|
||||
console.log(key, keyPath)
|
||||
this.showColoect(key)
|
||||
},
|
||||
// 全选、反选、清空、全部清除、清除未选项
|
||||
clickStateOption (state, ind) {
|
||||
switch (state) {
|
||||
case 'checkAll':// 全选
|
||||
|
||||
this.searchDatas.forEach((item, index) => {
|
||||
/* 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)
|
||||
})
|
||||
break
|
||||
case 'inverse':// 反选
|
||||
this.searchDatas.forEach((item, index) => {
|
||||
/* 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)
|
||||
})
|
||||
break
|
||||
case 'empty':// 清空
|
||||
this.searchDatas = []
|
||||
break
|
||||
case 'clearAll':// 全部清除
|
||||
this.changeActive = []
|
||||
break
|
||||
case 'clearUnselected':// 清除未选项
|
||||
this.changeActive = this.changeActive.filter((item, index) => {
|
||||
return item.inputState
|
||||
})
|
||||
break
|
||||
case 'oneClick'://单点
|
||||
let inputNum = this.searchDatas.map((item, index) => {
|
||||
/* eslint-disable */
|
||||
if (index === ind && this.changeActive.find((list, key) => { return list.nameText === item.nameText }) === undefined) {
|
||||
this.rightGoCount < 100 ? this.changeActive.push(item) : (item.inputState = false, this.$refs['input' + ind][0].checked = false)
|
||||
}
|
||||
return item.inputState
|
||||
})
|
||||
this.rightGoCount = inputNum.reduce(function (prev, next) {
|
||||
prev[next] = (prev[next] + 1) || 1
|
||||
return prev
|
||||
}, {})['true']
|
||||
break
|
||||
}
|
||||
},
|
||||
// 获取左侧菜单数据
|
||||
getCateData() {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'data/data/list',
|
||||
params: {
|
||||
type: this.$route.query.type
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res, '左侧菜单')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
this.leftCateData = res.data.data.list
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getCateData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.advancedQuery {
|
||||
margin-top: 1.25rem;
|
||||
width: 100%;
|
||||
height: 50rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border: 1px solid red;
|
||||
.leftNavS {
|
||||
width: 100%;
|
||||
height: 50rem;
|
||||
background-color: #fff;
|
||||
& > .title {
|
||||
width: 100%;
|
||||
height: 4.875rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0.0625rem;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 0.125rem solid #dbdbdb;
|
||||
}
|
||||
}
|
||||
.centerNavs {
|
||||
width: 100%;
|
||||
height: 50rem;
|
||||
background-color: #fff;
|
||||
border-left: 0.0625rem solid #dbdbdb;
|
||||
& > .title {
|
||||
width: 100%;
|
||||
height: 4.875rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0.0625rem;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-bottom: 0.125rem solid #dbdbdb;
|
||||
& > input {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
& > input:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > input:nth-child(1) {
|
||||
width: 15.625rem;
|
||||
height: 3rem;
|
||||
border-radius: 0.3125rem;
|
||||
border: solid 0.125rem #dbdbdb;
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #999999;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
margin-left: 0.9375rem;
|
||||
width: 4.75rem;
|
||||
height: 3rem;
|
||||
background-color: #52b6e3;
|
||||
border-radius: 0.3125rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
& > div:nth-child(2):hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > span {
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
& > .titleContSelect {
|
||||
width: 100%;
|
||||
height: 4.6rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > span {
|
||||
margin-left: 1.875rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #52b6e3;
|
||||
border-bottom: 0.0625rem solid #52b6e3;
|
||||
}
|
||||
& > span:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > font {
|
||||
margin-left: 4.875rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #f34f1e;
|
||||
}
|
||||
}
|
||||
& > .centerContent {
|
||||
width: 100%;
|
||||
height: 40.125rem;
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
white-space: nowrap; /*一行显示*/
|
||||
& > img {
|
||||
margin: 0 0.375rem;
|
||||
width: 1.4755rem;
|
||||
height: 1.4725rem;
|
||||
}
|
||||
& > input {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
& > span {
|
||||
padding-right: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightNavs {
|
||||
width: 100%;
|
||||
height: 50rem;
|
||||
background-color: #fff;
|
||||
border-left: 0.0625rem solid #dbdbdb;
|
||||
& > .title {
|
||||
width: 100%;
|
||||
height: 4.875rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0.0625rem;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 0.125rem solid #dbdbdb;
|
||||
}
|
||||
& > .titleContSelect {
|
||||
width: 100%;
|
||||
height: 4.6rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > span {
|
||||
margin-left: 1.875rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #52b6e3;
|
||||
border-bottom: 0.0625rem solid #52b6e3;
|
||||
}
|
||||
& > span:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .centerContent {
|
||||
width: 100%;
|
||||
height: 40.125rem;
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
white-space: nowrap; /*一行显示*/
|
||||
& > img {
|
||||
margin: 0 0.375rem;
|
||||
width: 1.4755rem;
|
||||
height: 1.4725rem;
|
||||
}
|
||||
& > input {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
& > span {
|
||||
padding-right: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
57
src/components/backTop/BackTop.vue
Normal file
57
src/components/backTop/BackTop.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="back-top" v-show="isShow.value">
|
||||
<span></span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['isShow']
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.back-top:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.back-top {
|
||||
width: 3.375rem;
|
||||
height: 3.375rem;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rem 0.125rem 0.125rem 0rem rgba(237, 237, 237, 0.4);
|
||||
border-radius: 0.3125rem;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.back-top > span:nth-child(1) {
|
||||
display: inline-block;
|
||||
width: 1.375rem;
|
||||
height: 1.75rem;
|
||||
background-image: url(../../../static/relation/zhiding.png);
|
||||
background-repeat: no-repeat;
|
||||
-o-background-size: contain;
|
||||
background-size: contain;
|
||||
}
|
||||
.back-top > span:nth-child(2) {
|
||||
color: #333;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.back-top {
|
||||
position: fixed;
|
||||
right: 1.5rem;
|
||||
bottom: 12rem;
|
||||
}
|
||||
</style>
|
||||
723
src/components/chartsCont/ChartsCont.vue
Normal file
723
src/components/chartsCont/ChartsCont.vue
Normal file
@@ -0,0 +1,723 @@
|
||||
<template>
|
||||
<div class="chartsCont">
|
||||
<Echarts
|
||||
v-if="indStatic!==0"
|
||||
:echartsDatarts="echartsDatarts"
|
||||
@rowColInd="rowColInd"
|
||||
:echartsDatartsPie="echartsDatartsPie"
|
||||
></Echarts>
|
||||
<el-table :data="tableData" style="width: 100%" height="360" ref="table">
|
||||
<!-- <el-table-column fixed prop="date" label="日期" width="150" sortable></el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="120" sortable></el-table-column>
|
||||
<el-table-column prop="province" label="省份" width="120" sortable></el-table-column>
|
||||
<el-table-column prop="city" label="市区" width="120" sortable></el-table-column>
|
||||
<el-table-column prop="address" label="地址" width="300" sortable></el-table-column>-->
|
||||
<el-table-column
|
||||
:prop="item.labelId"
|
||||
:label="item.label"
|
||||
:fixed="index===0?true:false"
|
||||
width="180"
|
||||
sortable
|
||||
v-for="(item,index) in tableLine"
|
||||
:key="index"
|
||||
>
|
||||
<template slot-scope="scope" slot="header">
|
||||
<img
|
||||
:src="indexToExplain"
|
||||
alt
|
||||
v-if="index!==0&&!transState&&areaDataState!=='area'&&!computedLineSty(index)"
|
||||
class="slotExplain"
|
||||
:style="{'margin':indStatic===0?'0':''}"
|
||||
@click="indexExplain(scope.column.label)"
|
||||
/>
|
||||
<input
|
||||
v-if="index!==0&&indStatic!==0"
|
||||
type="checkbox"
|
||||
style="cursor: pointer;"
|
||||
@click.stop="listInput(index)"
|
||||
:style="{'margin':'0 0.45rem'}"
|
||||
:checked="listInputVal.indexOf(index)!==-1"
|
||||
ref="listInputSelect"
|
||||
/>
|
||||
<span :style="{'color':computedLineSty(index)?'red':''}">{{scope.column.label}}</span>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<input
|
||||
v-if="index===0&&indStatic!==0"
|
||||
type="checkbox"
|
||||
style="cursor: pointer;"
|
||||
@click.stop="lineInput(scope.$index)"
|
||||
:checked="lineInputVal.indexOf(scope.$index)!==-1"
|
||||
ref="lineInputSelect"
|
||||
/>
|
||||
<img
|
||||
:src="indexToExplain"
|
||||
alt
|
||||
v-if="index===0&&transState&&areaDataState!=='area'&&!computedListSty(scope.$index)"
|
||||
class="slotExplain"
|
||||
:style="{'margin':indStatic===0?'0':''}"
|
||||
@click="indexExplain(scope.row['table_line0'])"
|
||||
/>
|
||||
<span
|
||||
:style="{'color':(computedListSty(scope.$index)||computedLineSty(index))?'red':''}"
|
||||
>{{scope.row['table_line'+index]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 列表 表说明-->
|
||||
<div class="tableExplain">{{transBefore.tableExplain}}</div>
|
||||
<!-- 指标弹窗 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入数据计算js用于机选渲染的数据
|
||||
import ComputedData from '../../assets/js/computeddata'
|
||||
// 引入echarts 组件
|
||||
import Echarts from '../echarts/echarts'
|
||||
export default {
|
||||
name: 'chartsCont',
|
||||
components: {
|
||||
Echarts: Echarts
|
||||
},
|
||||
props: {
|
||||
indStatic: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
// 图表状态管理器
|
||||
chartsStatusMegger: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
// 渲染图表所需数据
|
||||
defaultDataRight: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 指标解释
|
||||
indexToExplain: require('../../../static/chatCont/zhibiaojieshi.png'),
|
||||
tableData: [
|
||||
{
|
||||
table_line1: '(1,1)5456456456456456456454564564',
|
||||
table_line2: '(1,2)',
|
||||
table_line3: '(1,3)',
|
||||
table_line4: '(1,4)',
|
||||
table_line5: '(1,5)',
|
||||
table_line6: '(1,6)',
|
||||
table_line7: '(1,7)',
|
||||
table_line8: '(1,8)',
|
||||
table_line9: '(1,9)',
|
||||
table_line10: '(1,10)',
|
||||
table_line11: '(1,11)',
|
||||
table_line12: '(1,12)',
|
||||
table_line13: '(1,13)',
|
||||
table_line14: '(1,14)',
|
||||
table_line15: '(1,15)',
|
||||
table_line16: '(1,16)'
|
||||
},
|
||||
{
|
||||
table_line1: '(1,1)546454',
|
||||
table_line2: '(1,2)',
|
||||
table_line3: '(1,3)',
|
||||
table_line4: '(1,4)',
|
||||
table_line5: '(1,5)',
|
||||
table_line6: '(1,6)',
|
||||
table_line7: '(1,7)',
|
||||
table_line8: '(1,8)',
|
||||
table_line9: '(1,9)',
|
||||
table_line10: '(1,10)',
|
||||
table_line11: '(1,11)',
|
||||
table_line12: '(1,12)',
|
||||
table_line13: '(1,13)',
|
||||
table_line14: '(1,14)',
|
||||
table_line15: '(1,15)',
|
||||
table_line16: '(1,16)'
|
||||
}
|
||||
],
|
||||
tableDataS: [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小名',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-08',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-06',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-07',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}
|
||||
],
|
||||
// 列数据（label，labelId）
|
||||
tableLine: [
|
||||
{
|
||||
labelId: 'table_line1',
|
||||
label: '指标'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line2',
|
||||
label: '2019年10月1日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line3',
|
||||
label: '2019年10月2日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line4',
|
||||
label: '2019年10月3日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line5',
|
||||
label: '2019年10月5日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line6',
|
||||
label: '2019年10月5日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line7',
|
||||
label: '2019年10月6日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line8',
|
||||
label: '2019年10月7日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line9',
|
||||
label: '2019年10月8日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line10',
|
||||
label: '2019年10月9日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line11',
|
||||
label: '2019年10月10日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line12',
|
||||
label: '2019年10月11日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line13',
|
||||
label: '2019年10月12日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line14',
|
||||
label: '2019年10月13日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line15',
|
||||
label: '2019年10月14日'
|
||||
},
|
||||
{
|
||||
labelId: 'table_line16',
|
||||
label: '2019年10月15日'
|
||||
}
|
||||
],
|
||||
// 转置状态(true：时间在表头上，false：指标名称或者地区名称在表头上)
|
||||
transState: false,
|
||||
// 当前数据状态（monthly：月度数据，quarter：季度数据，year：年度数据，area：地区数据）
|
||||
areaDataState: this.$route.query.type,
|
||||
// 当前数据，统计数据中的哪一种text:('无','SUM求和','x平均数','MAX最大值','MIN最小值','MD中位数','MO众数','S²方差','S标准差'),stateType:('line','list')
|
||||
nowDataTJ: { text: '无', stateType: 'line' },
|
||||
// 转置前总数据
|
||||
transBefore: {
|
||||
// 数据表说明
|
||||
tableExplain: '注： 按照统计制度要求，我国CPI每五年进行一次基期轮换，2016年1月开始使用2015年作为新一轮的对比基期，前三轮基期分别为2000年、2005年和2010年。CPI基期轮换是一项国际惯例，目的是使CPI调查所涉及到的商品和服务更具有代表性，更及时准确反映居民消费结构的新变化和物价的实际变动。 参考联合国制定的《按目的划分的个人消费分类》（COICOP）和国家统计局发布的《居民消费支出分类（2013）》，我们对CPI调查目录进行了调整，新基期调查目录和规格品与国际标准更为接近，一些新产品新服务纳入其中，能进一步反映居民消费和经济结构的变化。与上一轮基期相比，本轮基期的CPI调查目录有几个主要变化。一是按照《居民消费支出分类（2013）》，原来的“食品”、“烟酒”合并为现在的“食品烟酒”；原来的“医疗保健和个人用品”被拆分到现在的“生活用品及服务”、“医疗保健”和“其他用品和服务”中；原来的“娱乐教育文化用品及服务”被拆分到现在的“教育文化和娱乐”和“其他用品和服务”中；原来的“家庭设备用品及维修服务”被拆分到现在的“生活用品及服务”和“其他用品及服务”中。二是食品的指标内涵发生了变化，旧分类中的“食品”为大类，包括粮食、肉禽、鲜菜、鲜果、水产品、茶及饮料、在外餐饮等分类；新“食品”为“食品烟酒”大类下的中类，仅包括粮食、畜肉、禽肉、鲜菜、鲜果、水产品等，不再包括“茶及饮料”和“在外餐饮”两项。三是新增了“园艺花卉及用品”、“宠物及用品”、“养老服务”和“金融服务”等居民支出增加较快的分类，能够更加及时准确反映居民消费结构的新变化。',
|
||||
// 时间（2019年10月30日）
|
||||
timeArr: ['2019年10月23日', '2019年10月24日', '2019年10月25日', '2019年10月26日', '2019年10月27日', '2019年10月28日', '2019年10月29日', '2019年10月30日'],
|
||||
// 指标名称
|
||||
termsName: ['价格指数', '工业', '能源', '固定资产投资', '服务业生产指数', '城镇调查失业率', '房地产', '国内贸易'],
|
||||
// 指标解释
|
||||
termsExplain: ['价格指数指标解释', '工业指标解释', '能源指标解释', '固定资产投资指标解释', '服务业生产指数指标解释', '城镇调查失业率指标解释', '房地产指标解释', '国内贸易指标解释'],
|
||||
// 地区名
|
||||
areaName: ['北京市', '临沂市', '上海市', '河北省', '兰陵县', '天津市', '兰山区', '荣盛锦绣外滩'],
|
||||
// (行：指标名称，列：指标、时间)===>第一列为指标 { 指标名称数据 }
|
||||
transBeforeTermsData: [
|
||||
['10210.23', '10152.23', '12556.23', '23689.23', '25698.01', '54565.26', '48915.32', '15862.32'],
|
||||
['10520.23', '10212.23', '12526.23', '23689.23', '25658.01', '54665.26', '57915.32', '71762.32'],
|
||||
['10530.23', '10242.23', '12565.23', '23389.23', '25698.01', '46365.26', '59145.32', '16233.32'],
|
||||
['10320.23', '10252.23', '15650.23', '23089.23', '25498.01', '53065.26', '55845.32', '45633.32'],
|
||||
['13230.23', '10622.23', '89785.23', '23889.23', '25498.01', '78965.26', '46845.32', '36733.32'],
|
||||
['14520.23', '45622.23', '89455.23', '45739.23', '49898.01', '53965.26', '49845.32', '16733.32'],
|
||||
['14540.23', '44562.23', '89945.23', '45576.23', '56898.01', '46965.26', '59845.32', '54563.32'],
|
||||
['14210.23', '44562.23', '48994.23', '43476.23', '25698.01', '79696.26', '44565.32', '65563.32']
|
||||
],
|
||||
// (行：地区名，列：地区、时间)===>第一列为地区{ 地区名称数据 }
|
||||
transBeforeAreaData: [
|
||||
['23210.23', '10562.23', '12456.23', '23696.23', '69598.01', '54543.26', '57157.32', '15352.32'],
|
||||
['10350.23', '10612.23', '12786.23', '26589.23', '56698.01', '56934.26', '56915.32', '45962.32'],
|
||||
['10450.23', '10542.23', '12665.23', '29639.23', '21259.01', '54495.26', '25945.32', '55483.32'],
|
||||
['13692.23', '10262.23', '12625.23', '22628.23', '25298.01', '52625.26', '52245.32', '26233.32'],
|
||||
['13690.23', '26222.23', '89762.23', '23889.23', '25428.01', '56265.26', '57445.32', '56233.32'],
|
||||
['13690.23', '45622.23', '89225.23', '45629.23', '25298.01', '32965.26', '57845.32', '14533.32'],
|
||||
['13650.23', '46222.23', '32445.23', '45576.23', '21528.01', '45265.26', '56245.32', '14263.32'],
|
||||
['14230.23', '42622.23', '48262.23', '43426.23', '21268.01', '78626.26', '56265.32', '16263.32']
|
||||
]
|
||||
},
|
||||
// 调用存储的对象
|
||||
objCompBefore: null,
|
||||
// echarts渲染的数据======>非饼图
|
||||
echartsDatarts: {},
|
||||
// 饼图数据
|
||||
echartsDatartsPie: {},
|
||||
// 行列转换索引状态0行1列
|
||||
rowColIndex: 0,
|
||||
// 存input列选中的值
|
||||
listInputVal: [1, 2, 3], // 初始化选中3个
|
||||
// 存input行选中的值
|
||||
lineInputVal: [0, 1, 2, 3], // 初始化选中4个
|
||||
lineStatic: true,
|
||||
// 上一次图形是否为执行状态，
|
||||
pieStatic: false,
|
||||
// 获取数据所用参数
|
||||
// 晒选状态 1筛选指标 2筛选地区
|
||||
selectState: 1
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听对象
|
||||
// chartsStatusMegger: {
|
||||
// handler (newval, oldVal) {
|
||||
// this.transState = this.chartsStatusMegger.transState
|
||||
// this.nowDataTJ = this.chartsStatusMegger.computedStatic
|
||||
// this.showTable()
|
||||
// },
|
||||
// immediate: true,
|
||||
// deep: true
|
||||
// }
|
||||
indStatic (newValue, oldValue) {
|
||||
console.log(newValue, 'newValue1212')
|
||||
this.chartsShow()
|
||||
},
|
||||
'chartsStatusMegger.transState': {
|
||||
handler () {
|
||||
this.transState = this.chartsStatusMegger.transState
|
||||
this.showTable()
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
'chartsStatusMegger.computedStatic': {
|
||||
handler () {
|
||||
console.log(this.chartsStatusMegger, 1255555)
|
||||
this.nowDataTJ = this.chartsStatusMegger.computedStatic
|
||||
this.dataTJComput()
|
||||
// 重新渲染表
|
||||
this.$nextTick(() => {
|
||||
this.$refs.table.doLayout()
|
||||
})
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
// 监听行列图表转换
|
||||
rowColIndex (newVal, oldVal) {
|
||||
this.chartsShow()
|
||||
},
|
||||
// 监听左侧菜单的数据变化
|
||||
defaultDataRight: {
|
||||
handler () {
|
||||
this.getDatas()
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 非地区数据转置
|
||||
wrongAreaTrans () {
|
||||
if (this.transState) { // 当时间在表头上的时候
|
||||
this.objCompBefore = new ComputedData(this.transBefore)
|
||||
var objDatasBefore = this.objCompBefore.comTransBefore()
|
||||
this.tableLine = objDatasBefore.tableLine
|
||||
this.tableData = objDatasBefore.countData
|
||||
console.log(objDatasBefore, 'objDatasBefore')
|
||||
} else { // 当指标名称在表头上
|
||||
let objCompAfter = new ComputedData(this.transBefore)
|
||||
var objDatasAfter = objCompAfter.comTransAfter()
|
||||
this.tableLine = objDatasAfter.tableLine
|
||||
this.tableData = objDatasAfter.countData
|
||||
console.log(objDatasAfter, 'objDatasAfter')
|
||||
}
|
||||
},
|
||||
// 地区数据转置
|
||||
areaTrans () {
|
||||
if (this.transState) { // 当时间在表头上的时候
|
||||
this.objCompBefore = new ComputedData(this.transBefore)
|
||||
var objDatasBefore = this.objCompBefore.comTransAreabefore()
|
||||
this.tableLine = objDatasBefore.tableLine
|
||||
this.tableData = objDatasBefore.countData
|
||||
console.log(objDatasBefore, 'objDatasAfter')
|
||||
} else { // 当指标名称在表头上
|
||||
let objCompAfter = new ComputedData(this.transBefore)
|
||||
var objDatasAfter = objCompAfter.comTransAreaAfter()
|
||||
this.tableLine = objDatasAfter.tableLine
|
||||
this.tableData = objDatasAfter.countData
|
||||
console.log(objDatasAfter, 'objDatasAfter')
|
||||
}
|
||||
},
|
||||
// 渲染列表数据
|
||||
showTable () {
|
||||
// 改变转置状态
|
||||
// this.transState = !this.transState
|
||||
if (this.areaDataState !== 'area') { // 非地区数据转置
|
||||
this.wrongAreaTrans()
|
||||
} else { // 地区数据转置
|
||||
this.areaTrans()
|
||||
}
|
||||
},
|
||||
// 指标解释
|
||||
indexExplain (labIndexName) {
|
||||
if (this.transBefore.termsName.indexOf(labIndexName) !== -1) {
|
||||
console.log('指标解释：', this.transBefore.termsExplain[this.transBefore.termsName.indexOf(labIndexName)])
|
||||
}
|
||||
},
|
||||
// 统计数据对行，对列处理
|
||||
dataTJComput () {
|
||||
if (this.nowDataTJ.stateType === 'line') {
|
||||
switch (this.nowDataTJ.text) {
|
||||
case '无':
|
||||
break
|
||||
case 'SUM求和':
|
||||
let datartSUM = this.objCompBefore.dataSumLine()
|
||||
this.tableLine = datartSUM.tableLine
|
||||
this.tableData = datartSUM.countData
|
||||
console.log(datartSUM, 'sum')
|
||||
break
|
||||
case 'x平均数':
|
||||
let datartAVG = this.objCompBefore.dataAVGLine()
|
||||
this.tableLine = datartAVG.tableLine
|
||||
this.tableData = datartAVG.countData
|
||||
console.log(datartAVG, 'AVG')
|
||||
break
|
||||
case 'MAX最大值':
|
||||
let datartMAX = this.objCompBefore.dataMAXLine()
|
||||
this.tableLine = datartMAX.tableLine
|
||||
this.tableData = datartMAX.countData
|
||||
console.log(datartMAX, 'MAX')
|
||||
break
|
||||
case 'MIN最小值':
|
||||
let datartMIN = this.objCompBefore.dataMINLine()
|
||||
this.tableLine = datartMIN.tableLine
|
||||
this.tableData = datartMIN.countData
|
||||
console.log(datartMIN, 'MIN')
|
||||
break
|
||||
case 'MD中位数':
|
||||
let datartMD = this.objCompBefore.dataMDLine()
|
||||
this.tableLine = datartMD.tableLine
|
||||
this.tableData = datartMD.countData
|
||||
console.log(datartMD, 'MD')
|
||||
break
|
||||
case 'MO众数':
|
||||
let datartMO = this.objCompBefore.dataMOLine()
|
||||
this.tableLine = datartMO.tableLine
|
||||
this.tableData = datartMO.countData
|
||||
console.log(datartMO, 'MO')
|
||||
break
|
||||
case 'S²方差':
|
||||
let datartSS = this.objCompBefore.dataSSLine()
|
||||
this.tableLine = datartSS.tableLine
|
||||
this.tableData = datartSS.countData
|
||||
console.log(datartSS, 'SS')
|
||||
break
|
||||
case 'S标准差':
|
||||
let datartS = this.objCompBefore.dataSLine()
|
||||
this.tableLine = datartS.tableLine
|
||||
this.tableData = datartS.countData
|
||||
console.log(datartS, 'S')
|
||||
break
|
||||
}
|
||||
} else {
|
||||
switch (this.nowDataTJ.text) {
|
||||
case '无':
|
||||
break
|
||||
case 'SUM求和':
|
||||
let datartSUM = this.objCompBefore.dataSumList()
|
||||
this.tableLine = datartSUM.tableLine
|
||||
this.tableData = datartSUM.countData
|
||||
console.log(datartSUM, 'sum')
|
||||
break
|
||||
case 'x平均数':
|
||||
let datartAVG = this.objCompBefore.dataAVGList()
|
||||
this.tableLine = datartAVG.tableLine
|
||||
this.tableData = datartAVG.countData
|
||||
console.log(datartAVG, 'AVG')
|
||||
break
|
||||
case 'MAX最大值':
|
||||
let datartMAX = this.objCompBefore.dataMAXList()
|
||||
this.tableLine = datartMAX.tableLine
|
||||
this.tableData = datartMAX.countData
|
||||
console.log(datartMAX, 'MAX')
|
||||
break
|
||||
case 'MIN最小值':
|
||||
let datartMIN = this.objCompBefore.dataMINList()
|
||||
this.tableLine = datartMIN.tableLine
|
||||
this.tableData = datartMIN.countData
|
||||
console.log(datartMIN, 'MIN')
|
||||
break
|
||||
case 'MD中位数':
|
||||
let datartMD = this.objCompBefore.dataMDList()
|
||||
this.tableLine = datartMD.tableLine
|
||||
this.tableData = datartMD.countData
|
||||
console.log(datartMD, 'MD')
|
||||
break
|
||||
case 'MO众数':
|
||||
let datartMO = this.objCompBefore.dataMOList()
|
||||
this.tableLine = datartMO.tableLine
|
||||
this.tableData = datartMO.countData
|
||||
console.log(datartMO, 'MO')
|
||||
break
|
||||
case 'S²方差':
|
||||
let datartSS = this.objCompBefore.dataSSList()
|
||||
this.tableLine = datartSS.tableLine
|
||||
this.tableData = datartSS.countData
|
||||
console.log(datartSS, 'SS')
|
||||
break
|
||||
case 'S标准差':
|
||||
let datartS = this.objCompBefore.dataSList()
|
||||
this.tableLine = datartS.tableLine
|
||||
this.tableData = datartS.countData
|
||||
console.log(datartS, 'S')
|
||||
break
|
||||
}
|
||||
}
|
||||
this.chartsShow()
|
||||
},
|
||||
// 图表渲染
|
||||
chartsShow () {
|
||||
// 改变值行值
|
||||
|
||||
switch (this.indStatic) {
|
||||
case 1:
|
||||
if (this.pieStatic) {
|
||||
// 存input列选中的值
|
||||
this.listInputVal = [1, 2, 3] // 初始化选中3个
|
||||
// 存input行选中的值
|
||||
this.lineInputVal = [0, 1, 2, 3]// 初始化选中4个
|
||||
}
|
||||
this.objCompBefore.inputSelectData(this.listInputVal, this.lineInputVal)
|
||||
this.rowColIndex === 0 ? (this.echartsDatarts = this.objCompBefore.dataVerticalMapRow()) : (this.echartsDatarts = this.objCompBefore.dataVerticalMapCol())
|
||||
this.pieStatic = false
|
||||
break
|
||||
case 2:
|
||||
if (this.pieStatic) {
|
||||
// 存input列选中的值
|
||||
this.listInputVal = [1, 2, 3] // 初始化选中3个
|
||||
// 存input行选中的值
|
||||
this.lineInputVal = [0, 1, 2, 3]// 初始化选中4个
|
||||
console.log(2121)
|
||||
}
|
||||
this.objCompBefore.inputSelectData(this.listInputVal, this.lineInputVal)
|
||||
this.rowColIndex === 0 ? (this.echartsDatarts = this.objCompBefore.dataAcrossMapRow()) : (this.echartsDatarts = this.objCompBefore.dataAcrossMapCol())
|
||||
this.pieStatic = false
|
||||
break
|
||||
case 3:
|
||||
console.log(this.lineStatic, this.rowColIndex, '555025')
|
||||
if (this.lineStatic && this.rowColIndex === 0) {
|
||||
this.lineInputVal = [0]
|
||||
this.listInputVal = [1, 2, 3]
|
||||
this.lineStatic = true
|
||||
} else if (!this.lineStatic && this.rowColIndex === 1) {
|
||||
this.lineInputVal = [0, 1, 2, 3]
|
||||
this.listInputVal = [1]
|
||||
this.lineStatic = true
|
||||
}
|
||||
console.log(this.listInputVal, this.lineInputVal)
|
||||
this.objCompBefore.inputSelectData(this.listInputVal, this.lineInputVal)
|
||||
this.rowColIndex === 0 ? (this.echartsDatarts = this.objCompBefore.dataPieMapRow()) : (this.echartsDatarts = this.objCompBefore.dataPieMapCol())
|
||||
this.pieStatic = true
|
||||
break
|
||||
case 4:
|
||||
if (this.pieStatic) {
|
||||
// 存input列选中的值
|
||||
this.listInputVal = [1, 2, 3] // 初始化选中3个
|
||||
// 存input行选中的值
|
||||
this.lineInputVal = [0, 1, 2, 3]// 初始化选中4个
|
||||
}
|
||||
this.objCompBefore.inputSelectData(this.listInputVal, this.lineInputVal)
|
||||
this.rowColIndex === 0 ? (this.echartsDatarts = this.objCompBefore.dataBrokenLineMapRow()) : (this.echartsDatarts = this.objCompBefore.dataBrokenLineMapCol())
|
||||
this.pieStatic = false
|
||||
break
|
||||
}
|
||||
},
|
||||
// 图表行列转换
|
||||
rowColInd (ind) {
|
||||
// 0行1列
|
||||
this.rowColIndex = ind
|
||||
},
|
||||
// 每列input选中
|
||||
listInput (ind) {
|
||||
console.log(ind, '列')
|
||||
if (this.indStatic === 3 && this.rowColIndex === 1) {
|
||||
this.listInputVal = [ind]
|
||||
this.$refs.listInputSelect[ind].checked = true
|
||||
} else {
|
||||
this.listInputVal.indexOf(ind) === -1 ? (this.listInputVal.push(ind)) : (this.listInputVal.splice(this.listInputVal.indexOf(ind), 1))
|
||||
}
|
||||
this.chartsShow()
|
||||
},
|
||||
// 每行input选中
|
||||
lineInput (ind) {
|
||||
console.log(ind, '行')
|
||||
if (this.indStatic === 3 && this.rowColIndex === 0) {
|
||||
this.lineInputVal = [ind]
|
||||
this.$refs.lineInputSelect[ind].checked = true
|
||||
} else {
|
||||
this.lineInputVal.indexOf(ind) === -1 ? (this.lineInputVal.push(ind)) : (this.lineInputVal.splice(this.lineInputVal.indexOf(ind), 1))
|
||||
}
|
||||
|
||||
this.chartsShow()
|
||||
},
|
||||
// 获取后台数据表中的数据
|
||||
getDatas () {
|
||||
console.log(this.defaultDataRight, '获取数据')
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'data/data/detail',
|
||||
params: {
|
||||
type: this.$route.query.type === 'area' ? 1 : 2, // 1非地区 2地区
|
||||
table_name: this.defaultDataRight.table_name, // 表名
|
||||
id: this.defaultDataRight.id, // 分类id
|
||||
area: '', // 选中的地区
|
||||
quota: this.defaultDataRight.name, // 选中的指标
|
||||
cate: this.selectState// 1帅选指标 2筛选地区
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res, '获取数据展示数据')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail, 2369)
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 行计算样式
|
||||
computedLineSty () {
|
||||
return (ind) => {
|
||||
let styStatic = false
|
||||
if (this.transState) {
|
||||
if (ind > (this.transBefore.transBeforeTermsData.length)) {
|
||||
styStatic = true
|
||||
}
|
||||
} else {
|
||||
if (ind > (this.transBefore.transBeforeTermsData[0].length)) {
|
||||
styStatic = true
|
||||
}
|
||||
}
|
||||
return styStatic
|
||||
}
|
||||
},
|
||||
// 列计算样式
|
||||
computedListSty () {
|
||||
return (ind) => {
|
||||
let styStatic = false
|
||||
if (this.transState) {
|
||||
if (ind > (this.transBefore.transBeforeTermsData.length - 1)) {
|
||||
styStatic = true
|
||||
}
|
||||
} else {
|
||||
if (ind > (this.transBefore.transBeforeTermsData[0].length - 1)) {
|
||||
styStatic = true
|
||||
}
|
||||
}
|
||||
return styStatic
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// console.log(new ComputedData())
|
||||
this.showTable()
|
||||
// 转置状态
|
||||
this.transState = this.chartsStatusMegger.transState
|
||||
this.getDatas()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chartsCont {
|
||||
margin: 1.5rem 0;
|
||||
border: 0.0625rem solid red;
|
||||
padding: 0 1.5rem;
|
||||
& > .tableExplain {
|
||||
padding: 0.75rem;
|
||||
margin: 1.75rem auto;
|
||||
// width: 53.375rem;
|
||||
height: 18rem;
|
||||
border: 0.0625rem solid rgba(172, 172, 172, 0.38);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||||
// line-height: 1.8rem;
|
||||
overflow-y: scroll;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.5rem;
|
||||
letter-spacing: 0.125rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > .tableExplain::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// 指标解释
|
||||
.slotExplain {
|
||||
margin: 0 0.2rem 0 0.6rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
.slotExplain:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
/deep/ .el-table .cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
247
src/components/chartsCut/ChartsCut.vue
Normal file
247
src/components/chartsCut/ChartsCut.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div class="chartsCut">
|
||||
<div
|
||||
v-for="(item,index) in listImg"
|
||||
:key="index"
|
||||
class="chart_left"
|
||||
@click="cutChartsTap(index)"
|
||||
>
|
||||
<img :src="item.url" alt />
|
||||
</div>
|
||||
<div class="chart_right">
|
||||
<!-- 指标地区cut -->
|
||||
<div class="chart_right_area" v-if="$route.query.type==='area'">
|
||||
指标：
|
||||
<cityPicker
|
||||
:level="jishuArea"
|
||||
:selectpattern="selectpatternArea"
|
||||
:city-data="cityDataArea"
|
||||
:default-city="cityDefaultNameArea"
|
||||
@choice-caller="choiceCallerArea"
|
||||
></cityPicker>
|
||||
</div>
|
||||
<!-- 根据时间筛选 -->
|
||||
<div class="chart_right_time">
|
||||
时间：
|
||||
<div class="chart_right_cont">
|
||||
<cityPicker
|
||||
:level="jishuTime"
|
||||
:selectpattern="selectpatternTime"
|
||||
:city-data="cityDataTime"
|
||||
:default-city="cityDefaultNameTime"
|
||||
@choice-caller="choiceCallerTime"
|
||||
@visible-change="changesInputStu"
|
||||
:isHideProp="isHideProp"
|
||||
></cityPicker>
|
||||
<div class="bottom" v-if="showInputStu" @click="showKuangCat">
|
||||
<input type="text" placeholder="请输入时间" v-model="timeUsrr" />
|
||||
<span>确认</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入下拉组件
|
||||
import cityPicker from '@/components/cityPicker/CityPicker.vue'
|
||||
export default {
|
||||
name: 'chartsCut',
|
||||
props: {
|
||||
|
||||
},
|
||||
components: {
|
||||
cityPicker: cityPicker
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 控制下拉框显示隐藏
|
||||
isHideProp: true,
|
||||
// 栏目数据 结构不可变
|
||||
cityDataArea: [
|
||||
{ 'id': '110000', 'name': '-序列-', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '居民消费价格', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '入境人数', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '工业', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
|
||||
],
|
||||
cityDataAreas: [
|
||||
{ 'id': '110000', 'name': '-序列-', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '居民消费价格', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '入境人数', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '工业', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
|
||||
],
|
||||
|
||||
// 栏目级数
|
||||
jishuArea: 1,
|
||||
// 默认显示栏目
|
||||
cityDefaultNameArea: '居民消费价格',
|
||||
// 筛选数据
|
||||
selectpatternArea: [
|
||||
{
|
||||
field: 'userProvinceId',
|
||||
placeholder: '居民消费价格'
|
||||
}
|
||||
],
|
||||
// 栏目数据 结构不可变
|
||||
cityDataTime: [
|
||||
{ '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,
|
||||
// 默认显示栏目
|
||||
cityDefaultNameTime: '最近13个月',
|
||||
// 筛选数据
|
||||
selectpatternTime: [
|
||||
{
|
||||
field: 'userProvinceId',
|
||||
placeholder: '最近13个月'
|
||||
}
|
||||
],
|
||||
listImg: [
|
||||
{
|
||||
url: require('../../../static/chartsCut/list.png'),
|
||||
selectStatic: true
|
||||
},
|
||||
{
|
||||
url: require('../../../static/chartsCut/hengzhuangtu.png'),
|
||||
selectStatic: false
|
||||
},
|
||||
{
|
||||
url: require('../../../static/chartsCut/shuzhuangtu.png'),
|
||||
selectStatic: false
|
||||
},
|
||||
{
|
||||
url: require('../../../static/chartsCut/bingtu.png'),
|
||||
selectStatic: false
|
||||
},
|
||||
{
|
||||
url: require('../../../static/chartsCut/zhexiantu.png'),
|
||||
selectStatic: false
|
||||
}
|
||||
],
|
||||
// 按时间查询
|
||||
timeUsrr: '',
|
||||
// 时间筛选输入框是否显示
|
||||
showInputStu: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击切换图表
|
||||
cutChartsTap (ind) {
|
||||
// console.log(ind)
|
||||
this.$emit('cutStatic', ind)
|
||||
},
|
||||
// 被选中时触发
|
||||
choiceCallerArea (resu) {
|
||||
console.log(resu)
|
||||
console.log(this.cityDefaultName)
|
||||
},
|
||||
// 被选中时触发
|
||||
choiceCallerTime (resu) {
|
||||
console.log(resu)
|
||||
console.log(this.cityDefaultName)
|
||||
this.showInputStu = !this.showInputStu
|
||||
},
|
||||
changesInputStu () {
|
||||
console.log(12569)
|
||||
this.showInputStu = !this.showInputStu
|
||||
},
|
||||
// 点击非下拉框内容时改变下拉状态（下拉怡然显示）
|
||||
showKuangCat () {
|
||||
console.log(1250)
|
||||
this.isHideProp = false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.cityDataTime = this.citNewTime
|
||||
this.cityDataArea = this.cityDataAreas
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chartsCut {
|
||||
padding: 0.75rem 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
& > .chart_left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// border: 0.0625rem solid red;
|
||||
& > img {
|
||||
height: 1.625rem;
|
||||
width: 1.625rem;
|
||||
}
|
||||
& > img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .chart_right {
|
||||
width: 37.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
// border: 0.0625rem solid red;
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
// line-height: 22px;
|
||||
letter-spacing: 0.125rem;
|
||||
color: #333333;
|
||||
& > .chart_right_area {
|
||||
margin-right: 4.525rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
& > .chart_right_time {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .chart_right_cont {
|
||||
position: relative;
|
||||
& > .bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 12.285rem;
|
||||
height: 2.25rem;
|
||||
border: 0.0625rem solid #cccccc;
|
||||
background-color: #fff;
|
||||
border-radius: 0.375rem;
|
||||
position: absolute;
|
||||
top: 430%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
& > input {
|
||||
width: 6.285rem;
|
||||
}
|
||||
& > span {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background-color: #67bfdc;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.25rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
447
src/components/cityPicker/CityPicker.vue
Normal file
447
src/components/cityPicker/CityPicker.vue
Normal file
@@ -0,0 +1,447 @@
|
||||
<template>
|
||||
<div class="city-picker">
|
||||
<div
|
||||
v-for="(item, index) in level"
|
||||
:key="index"
|
||||
:class="['city-picker-item', { hide: inlay[index].isHide }]"
|
||||
@keydown.stop="onKeyDown(index, $event)"
|
||||
@keyup.enter.stop="onEnter(index)"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="selectpattern[index].placeholder"
|
||||
:value="inlay[index].values[0]"
|
||||
readonly
|
||||
unselectable="on"
|
||||
:disabled="inlay[index].isDisabled"
|
||||
@click.stop="toggleList(index)"
|
||||
/>
|
||||
<input type="hidden" :name="[selectpattern[index].field]" :value="storageVal(index)" />
|
||||
<ul class="city-picker-list">
|
||||
<li
|
||||
v-for="(city, cindex) in inlay[index].filterDatas"
|
||||
:key="cindex"
|
||||
:data-index="cindex"
|
||||
:data-id="city.id"
|
||||
:class="['caller', {active: city.isActive}]"
|
||||
@click.stop="choice(city, index)"
|
||||
>{{ shortName ? city.shortName : city.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cityData from '../../assets/cityData'
|
||||
|
||||
export default {
|
||||
name: 'cityPicker',
|
||||
data () {
|
||||
return {
|
||||
inlay: [
|
||||
{
|
||||
isHide: true,
|
||||
isDisabled: false,
|
||||
filterDatas: [],
|
||||
values: []
|
||||
}, {
|
||||
isHide: true,
|
||||
isDisabled: true,
|
||||
filterDatas: [],
|
||||
values: []
|
||||
}, {
|
||||
isHide: true,
|
||||
isDisabled: true,
|
||||
filterDatas: [],
|
||||
values: []
|
||||
}
|
||||
],
|
||||
removalCityArray: [],
|
||||
itemIndex: 0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
cityData: {
|
||||
type: Array,
|
||||
default () {
|
||||
return cityData
|
||||
}
|
||||
},
|
||||
selectpattern: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [
|
||||
{
|
||||
field: 'userProvinceId',
|
||||
placeholder: '请选择省份'
|
||||
}, {
|
||||
field: 'userCityId',
|
||||
placeholder: '请选择城市'
|
||||
}, {
|
||||
field: 'userDistrictId',
|
||||
placeholder: '请选择区县'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
defaultCity: {
|
||||
type: String
|
||||
},
|
||||
shortName: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
storage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
level: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
isHideProp: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
cityData: {
|
||||
handler: function (newVal, oldVal) {
|
||||
console.log(newVal, '5555555555')
|
||||
this.initDatakf()
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
newCityData () {
|
||||
console.log(this.cityData, 'this.cityData')
|
||||
/* eslint-disable */
|
||||
this.inlay[0].filterDatas = []
|
||||
return JSON.parse(JSON.stringify(this.cityData))
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initDatakf()
|
||||
},
|
||||
methods: {
|
||||
toggleList(index) {
|
||||
// 设置列表显示/隐藏
|
||||
this.$set(this.inlay[index], 'isHide', !this.inlay[index].isHide)
|
||||
// 下拉框显示/隐藏触发的回调
|
||||
this.$emit('visible-change', this.inlay[index].isHide)
|
||||
},
|
||||
get(url, data = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$http.get(url, data)
|
||||
.then(res => {
|
||||
resolve(res.data)
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
filterData(id, index) {
|
||||
// 如果当前索引大于级数，就不往下执行
|
||||
if (index > this.level - 1) { return false }
|
||||
// 遍历出对应级的城市数据
|
||||
for (let list of this.newCityData) {
|
||||
if (list.parentId === id) {
|
||||
// 设置选中的判断属性
|
||||
list['isActive'] = false
|
||||
// 存储每个级的城市数据
|
||||
this.inlay[index].filterDatas.push(list)
|
||||
}
|
||||
}
|
||||
},
|
||||
setCity(city) {
|
||||
/* eslint-disable */
|
||||
// 分隔字符串成数组
|
||||
const citys = city || this.defaultCity
|
||||
const filterCityArray = citys.split(/\,\s|\,/g)
|
||||
|
||||
// 找到对应的城市数据
|
||||
for (let list of filterCityArray) {
|
||||
for (let clist of this.newCityData) {
|
||||
// 根据传进来的是Name还是Id
|
||||
const isNumber = isNaN(list) ? clist.name.indexOf(list) > -1 : list === clist.id
|
||||
if (isNumber) {
|
||||
this.removalCityArray.push(clist)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 去重数据
|
||||
this.removalCityArray = [...new Set(this.removalCityArray)]
|
||||
// 设置默认城市
|
||||
this.removalCityArray.map((key, index) => {
|
||||
this.choice(key, index)
|
||||
})
|
||||
},
|
||||
clearOriginal(index) {
|
||||
// 清空历史数据
|
||||
for (let i = index; i < this.level; i++) {
|
||||
const inlay = this.inlay[i]
|
||||
// 清空城市数据
|
||||
inlay.filterDatas = []
|
||||
// 清空选择的值
|
||||
inlay.values = []
|
||||
// 添加禁止状态
|
||||
inlay.isDisabled = true
|
||||
}
|
||||
},
|
||||
modifyNature(data, name, keys) {
|
||||
// 修改状态
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.$set(data[i], name, keys)
|
||||
}
|
||||
},
|
||||
storageVal(index) {
|
||||
// 存储的是城市ID还是城市名称
|
||||
return this.storage ? this.inlay[index].values[1] : this.inlay[index].values[0]
|
||||
},
|
||||
choice(city, index) {
|
||||
const inlay = this.inlay[index]
|
||||
// 显示的城市名称是全称还是简写
|
||||
const name = this.shortName ? city.shortName : city.name
|
||||
// 下一级的索引
|
||||
const nextIndex = index + 1
|
||||
|
||||
// 还原选择的状态为没有选择
|
||||
this.modifyNature(inlay.filterDatas, 'isActive', false)
|
||||
// 清空下一级上次选择的数据
|
||||
this.clearOriginal(nextIndex)
|
||||
// 加载下一级城市的数据
|
||||
this.filterData(city.id, nextIndex)
|
||||
// 解锁下一级可点击状态
|
||||
nextIndex < this.level ? this.$set(this.inlay[nextIndex], 'isDisabled', false) : ''
|
||||
// 添加选中状态
|
||||
this.$set(city, 'isActive', true)
|
||||
// 存储选择的名称和ID
|
||||
this.$set(inlay, 'values', [name, city.id])
|
||||
// 选择的回调函数
|
||||
this.$emit('choice-caller', [name, city.id, city])
|
||||
// 隐藏选择级的列表
|
||||
this.modifyNature(this.inlay, 'isHide', true)
|
||||
},
|
||||
onKeyDown(index, e) {
|
||||
let $items = this.$el.getElementsByClassName('city-picker-item')[index]
|
||||
let $caller = $items.getElementsByClassName('caller')
|
||||
let $callerActive = $items.getElementsByClassName('caller active')
|
||||
let inlay = this.inlay[index]
|
||||
let keyCode = e.keyCode
|
||||
let activeIndex = -1
|
||||
let direction
|
||||
|
||||
// 按下键盘up/down
|
||||
if (keyCode === 38 || keyCode === 40) {
|
||||
// 上下方向
|
||||
direction = keyCode === 38 ? -1 : 1
|
||||
// 已经选中的索引
|
||||
activeIndex = $callerActive[0] ? Number($callerActive[0].getAttribute('data-index')) : activeIndex
|
||||
// 根据方向，然后计算得出索引
|
||||
this.countIndex(activeIndex, direction, $caller.length)
|
||||
// 清除选中状态
|
||||
this.modifyNature(inlay.filterDatas, 'isActive', false)
|
||||
// 添加索引选中状态
|
||||
this.$set(inlay.filterDatas[this.itemIndex], 'isActive', true)
|
||||
this.scroll($items, $caller, this.itemIndex)
|
||||
return false
|
||||
}
|
||||
e.preventDefault()
|
||||
},
|
||||
onEnter(index) {
|
||||
// 按下回车选中
|
||||
this.choice(this.inlay[index].filterDatas[this.itemIndex], index)
|
||||
return false
|
||||
},
|
||||
countIndex(index, direction, leng) {
|
||||
// 判断选中的索引值
|
||||
if (this.itemIndex < 0) {
|
||||
this.itemIndex = direction > 0 ? -1 : 0
|
||||
} else {
|
||||
this.itemIndex = index
|
||||
}
|
||||
// 索引与反向相加
|
||||
this.itemIndex = this.itemIndex + direction
|
||||
// 循环添加索引
|
||||
this.itemIndex = this.itemIndex === leng ? 0 : this.itemIndex < 0 ? leng - 1 : this.itemIndex
|
||||
},
|
||||
scroll($items, $caller, itemIndex) {
|
||||
const $listBox = $items.getElementsByClassName('city-picker-list')
|
||||
const h = $caller[0].offsetHeight
|
||||
const y = h * itemIndex
|
||||
|
||||
$listBox[0].scrollTop = y
|
||||
},
|
||||
// 初始化数据
|
||||
initDatakf() {
|
||||
const that = this
|
||||
|
||||
// 取到省份的数据
|
||||
that.filterData('100000', 0)
|
||||
// 有默认城市设置默认，没有默认城市且开启ip定位就进行ip定位获取城市位置
|
||||
if (that.defaultCity) {
|
||||
that.setCity()
|
||||
}
|
||||
// 根据父是否开启禁止，开启就执行
|
||||
if (that.disabled) {
|
||||
that.modifyNature(that.inlay, 'isDisabled', true)
|
||||
}
|
||||
// 点击document判断是否要隐藏全部列表
|
||||
document.addEventListener('click', function (e) {
|
||||
/* eslint-disable */
|
||||
// console.log(that.isHideProp, '12569')
|
||||
if (e.target.className !== 'city-picker' && false) {
|
||||
that.modifyNature(that.inlay, 'isHide', true)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.city-picker {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.city-picker-item {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 150px;
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
border-right: 6px solid transparent;
|
||||
border-left: 6px solid transparent;
|
||||
border-bottom: 6px solid #ccc;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 5px;
|
||||
-webkit-transition-duration: 400ms;
|
||||
-moz-transition-duration: 400ms;
|
||||
-o-transition-duration: 400ms;
|
||||
transition-duration: 400ms;
|
||||
}
|
||||
&.hide {
|
||||
.city-picker-list {
|
||||
-webkit-transform: translateY(-2%);
|
||||
-moz-transform: translateY(-2%);
|
||||
-ms-transform: translateY(-2%);
|
||||
-o-transform: translateY(-2%);
|
||||
transform: translateY(-2%);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
&:after {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
input[type="text"] {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
text-indent: 5px;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
&:disabled {
|
||||
background-color: #eef1f6;
|
||||
cursor: not-allowed;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.city-picker-list {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 2px #f3f3f3;
|
||||
max-height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-transition-duration: 400ms;
|
||||
-moz-transition-duration: 400ms;
|
||||
-o-transition-duration: 400ms;
|
||||
transition-duration: 400ms;
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
top: 120%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
.caller {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
padding: 8px;
|
||||
-webkit-transition-duration: 400ms;
|
||||
-moz-transition-duration: 400ms;
|
||||
-o-transition-duration: 400ms;
|
||||
transition-duration: 400ms;
|
||||
overflow: hidden;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
&.active {
|
||||
position: relative;
|
||||
text-indent: 10px;
|
||||
&:after {
|
||||
content: "";
|
||||
background: #67bfdc;
|
||||
border-radius: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 5px;
|
||||
bottom: 10px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
219
src/components/echarts/echarts.vue
Normal file
219
src/components/echarts/echarts.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div class="echarts">
|
||||
<div ref="HLWidth">
|
||||
<template v-for="(item,index) in radioData">
|
||||
{{item.text}}
|
||||
<input
|
||||
type="radio"
|
||||
:key="index"
|
||||
name="select"
|
||||
:checked="item.checked"
|
||||
@click="checkedSelect(index)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div ref="myEcharts"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
var echarts = require('echarts/lib/echarts')
|
||||
// 引入柱状图
|
||||
require('echarts/lib/chart/bar')
|
||||
// 引入提示框和标题组件
|
||||
require('echarts/lib/component/tooltip')
|
||||
require('echarts/lib/component/title')
|
||||
require('echarts/theme/infographic')
|
||||
require('echarts/theme/macarons')
|
||||
export default {
|
||||
name: 'echarts',
|
||||
props: {
|
||||
echartsDatarts: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
echartsDatartsPie: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// radio
|
||||
radioData: [
|
||||
{
|
||||
text: '行',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
text: '列',
|
||||
checked: false
|
||||
}
|
||||
],
|
||||
myEchartsObj: null,
|
||||
// 图表数据
|
||||
option: {
|
||||
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]
|
||||
}
|
||||
]
|
||||
},
|
||||
// 行列数下标
|
||||
indexRowCols: 0,
|
||||
// 饼图数据
|
||||
pieOption: {
|
||||
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%', '60%'],
|
||||
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: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
echartsDatarts: {
|
||||
handler (newVal, oldVal) {
|
||||
console.log(newVal, '11111')
|
||||
this.option = JSON.parse(JSON.stringify(newVal))
|
||||
this.drawEcharts()
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 绘制图表===========
|
||||
drawEcharts () {
|
||||
// console.log(this.$refs.myEcharts)
|
||||
this.myEchartsObj = echarts.init(this.$refs.myEcharts, 'macarons')
|
||||
// 绘制图表
|
||||
this.myEchartsObj.setOption(this.option, true)
|
||||
this.myEchartsObj.resize()
|
||||
},
|
||||
// 行列转换
|
||||
checkedSelect (ind) {
|
||||
console.log(ind)
|
||||
this.indexRowCols = ind
|
||||
this.radioData.forEach((item, index) => {
|
||||
ind === index ? (item.checked = true) : (item.checked = false)
|
||||
})
|
||||
this.$emit('rowColInd', ind)// 0行，1列
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.drawEcharts()
|
||||
})
|
||||
// 监听dome宽度变换
|
||||
this.$detector().listenTo(this.$refs.HLWidth, (element) => {
|
||||
var width = element.offsetWidth
|
||||
if (this.option.grid !== undefined) {
|
||||
this.$nextTick(() => {
|
||||
console.log(this.option.grid)
|
||||
this.option.grid.width = width - 20
|
||||
this.drawEcharts()
|
||||
})
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.drawEcharts()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 32rem;
|
||||
border: 1px solid red;
|
||||
& > div:nth-child(2) {
|
||||
max-width: 100%;
|
||||
min-height: 30rem;
|
||||
border: 1px solid red;
|
||||
}
|
||||
& > div:nth-child(1) {
|
||||
width: 100%;
|
||||
min-height: 2rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
& > input {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -77,36 +77,113 @@ export default {
|
||||
},
|
||||
skipCont () {
|
||||
|
||||
},
|
||||
// 获取底部导航数据
|
||||
getNavBottomInfor () {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'footer/footer/bottom-nav',
|
||||
params: {
|
||||
}
|
||||
}).then(res => {
|
||||
// console.log(res, '底部导航')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
let arrts = []
|
||||
res.data.data.list.forEach((item, index) => {
|
||||
let objuu = {
|
||||
title: item.name,
|
||||
titleUrl: item.desc,
|
||||
cont: item.children.map((list, key) => {
|
||||
return {
|
||||
text: list.name,
|
||||
textUrl: list.desc
|
||||
}
|
||||
})
|
||||
}
|
||||
arrts.push(objuu)
|
||||
})
|
||||
this.model_list = arrts
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getNavBottomInfor()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.footerInfor {
|
||||
width: 100%;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-justify-content: flex-start;
|
||||
-moz-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
|
||||
& > .footer_header {
|
||||
width: 100%;
|
||||
background-color: #336379;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
|
||||
& > .footer_model {
|
||||
padding-top: 3.875rem;
|
||||
width: 84.25rem;
|
||||
height: 15.75rem;
|
||||
// border: 1px solid red;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: space-evenly;
|
||||
-moz-box-pack: space-evenly;
|
||||
-ms-flex-pack: space-evenly;
|
||||
justify-content: space-evenly;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
|
||||
& > div {
|
||||
height: 15.75rem;
|
||||
max-width: 20rem;
|
||||
|
||||
& > .titleS {
|
||||
max-width: 20rem;
|
||||
margin-bottom: 2.375rem;
|
||||
@@ -116,14 +193,17 @@ export default {
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1; /* 省略号在第几行 */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
/* 省略号在第几行 */
|
||||
}
|
||||
& > .titleS:hover{
|
||||
|
||||
& > .titleS:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > div:nth-child(n + 2) {
|
||||
max-width: 20rem;
|
||||
font-size: 1rem;
|
||||
@@ -133,40 +213,73 @@ export default {
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1; /* 省略号在第几行 */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
/* 省略号在第几行 */
|
||||
}
|
||||
& > div:nth-child(n + 2):hover{
|
||||
|
||||
& > div:nth-child(n + 2):hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .footer_bottom {
|
||||
width: 100%;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-color: #19303b;
|
||||
|
||||
& > .bottom_model {
|
||||
width: 84.25rem;
|
||||
height: 6.375rem;
|
||||
// border: 1px solid red;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: space-evenly;
|
||||
-moz-box-pack: space-evenly;
|
||||
-ms-flex-pack: space-evenly;
|
||||
justify-content: space-evenly;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
|
||||
& > img {
|
||||
width: 3.75rem;
|
||||
height: 3.875rem;
|
||||
}
|
||||
|
||||
& > img:last-child {
|
||||
width: 7rem;
|
||||
height: 4.6875rem;
|
||||
}
|
||||
|
||||
& > div {
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
|
||||
287
src/components/mapData/MapData.vue
Normal file
287
src/components/mapData/MapData.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="mapData">
|
||||
<div class="mapDataLeft">
|
||||
<!-- 左侧导航 -->
|
||||
<el-row class="tac" style="overflow: auto;height:44.875rem;" v-if="defaultSelectLies">
|
||||
<el-col :span="24">
|
||||
<el-menu
|
||||
:default-openeds="defaultSelectLies"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@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 class="mapDataRight">
|
||||
<div ref="mapRefs"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入数据计算js用于机选渲染的数据
|
||||
import ComputedData from '../../assets/js/computeddata'
|
||||
import china from 'echarts/map/json/china.json'
|
||||
var echarts = require('echarts/lib/echarts')
|
||||
require('echarts/lib/chart/map')
|
||||
echarts.registerMap('china', china)
|
||||
require('echarts/theme/shine')
|
||||
export default {
|
||||
name: 'mapData',
|
||||
data () {
|
||||
return {
|
||||
// 左侧当前默认
|
||||
defaultSelectLies: null,
|
||||
// 右侧默认显示数据
|
||||
defaultDataRight: null,
|
||||
leftCateData: null,
|
||||
option: {
|
||||
// title: {
|
||||
// text: 'iphone销量',
|
||||
// subtext: '纯属虚构',
|
||||
// x: 'center'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data: ['iphone3']
|
||||
},
|
||||
dataRange: {
|
||||
min: 0,
|
||||
max: 2500,
|
||||
x: 'left',
|
||||
y: 'bottom',
|
||||
text: ['高', '低'], // 文本，默认为数值文本
|
||||
calculable: true
|
||||
},
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// orient: 'vertical',
|
||||
// x: 'right',
|
||||
// y: 'center',
|
||||
// feature: {
|
||||
// mark: { show: true },
|
||||
// dataView: { show: true, readOnly: false },
|
||||
// restore: { show: true },
|
||||
// saveAsImage: { show: true }
|
||||
// }
|
||||
// },
|
||||
// roamController: {
|
||||
// show: true,
|
||||
// x: 'right',
|
||||
// mapTypeControl: {
|
||||
// 'china': true
|
||||
// }
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: 'iphone3',
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: { label: { show: true } },
|
||||
emphasis: { label: { show: true } }
|
||||
},
|
||||
data: [
|
||||
{ name: '北京', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '天津', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '上海', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '重庆', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '河北', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '河南', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '云南', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '辽宁', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '黑龙江', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '湖南', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '安徽', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '山东', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '新疆', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '江苏', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '浙江', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '江西', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '湖北', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '广西', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '甘肃', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '山西', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '内蒙古', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '陕西', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '吉林', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '福建', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '贵州', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '广东', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '青海', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '西藏', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '四川', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '宁夏', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '海南', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '台湾', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '香港', value: Math.round(Math.random() * 1000) },
|
||||
{ name: '澳门', value: Math.round(Math.random() * 1000) }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
myEchartsObj: null// 图表渲染对象
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取左侧菜单数据
|
||||
getCateData () {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'data/data/list',
|
||||
params: {
|
||||
type: this.$route.query.type
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res, '左侧菜单')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
this.leftCateData = res.data.data.list
|
||||
this.defaultSelectLie()
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
// 默认选中的列
|
||||
defaultSelectLie () {
|
||||
let stateStatic = []
|
||||
this.leftCateData.forEach((item1, index1) => {
|
||||
if (index1 === 0) {
|
||||
stateStatic.push('' + index1)
|
||||
if (item1.children) {
|
||||
item1.children.forEach((item2, index2) => {
|
||||
if (index2 === 0) {
|
||||
stateStatic.push('' + index1 + '-' + index2)
|
||||
if (item2.children) {
|
||||
item2.children.forEach((item3, index3) => {
|
||||
if (index3 === 0) {
|
||||
stateStatic.push('' + index1 + '-' + index2 + '-' + index3)
|
||||
if (item3.children) {
|
||||
item3.children.forEach((item4, index4) => {
|
||||
if (index4 === 0) {
|
||||
stateStatic.push('' + index1 + '-' + index2 + '-' + index3 + '-' + index4)
|
||||
if (item4.children) {
|
||||
item4.children.forEach((item5, index5) => {
|
||||
if (index5 === 0) {
|
||||
stateStatic.push('' + index1 + '-' + index2 + '-' + index3 + '-' + index4 + '-' + index5)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
this.defaultSelectLies = stateStatic
|
||||
// console.log(this.defaultSelectLies, 'stateStatic')
|
||||
let dataDome = []
|
||||
console.log(stateStatic, '数据')
|
||||
console.log(this.leftCateData[0].children[0], '数据0')
|
||||
JSON.parse(JSON.stringify(stateStatic)).forEach((item, index) => {
|
||||
console.log(index)
|
||||
index === 0 ? (dataDome = this.leftCateData[index]) : (dataDome = dataDome.children[0])
|
||||
})
|
||||
this.defaultDataRight = dataDome
|
||||
console.log(this.defaultDataRight, '1250')
|
||||
},
|
||||
handleOpen (key, keyPath) {
|
||||
console.log(key, keyPath)
|
||||
},
|
||||
handleClose (key, keyPath) {
|
||||
console.log(key, keyPath)
|
||||
},
|
||||
selectActive (key, keyPath) {
|
||||
console.log(key, keyPath)
|
||||
this.showColoect(key)
|
||||
},
|
||||
// 渲染数据地图
|
||||
showMapData () {
|
||||
this.myEchartsObj = echarts.init(this.$refs.mapRefs, 'shine')
|
||||
// 绘制图表
|
||||
this.myEchartsObj.setOption(this.option, true)
|
||||
this.myEchartsObj.resize()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 获取菜单信息
|
||||
this.getCateData()
|
||||
// 渲染图表
|
||||
this.showMapData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mapData {
|
||||
margin-top: 0.75rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
& > .mapDataLeft {
|
||||
width: 26rem;
|
||||
// margin-right: 2rem;
|
||||
overflow: auto;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
|
||||
}
|
||||
& > .mapDataRight {
|
||||
width: 57rem;
|
||||
overflow: auto;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
|
||||
border: 1px solid red;
|
||||
&>div{
|
||||
width:100%;
|
||||
min-height: 44.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -6,8 +6,21 @@
|
||||
v-for="(item,index) in navCont"
|
||||
:key="index"
|
||||
@click="navClick(index,item.url)"
|
||||
@mouseenter="navMouseClick(index,item.url,true)"
|
||||
@mouseleave="navMouseClick(index,item.url,false)"
|
||||
:class="{fontSty:index==1&&colorD}"
|
||||
>{{item.text}}</div>
|
||||
>
|
||||
<div style="position:relative;">
|
||||
{{item.text}}
|
||||
<!-- 数据二级导航 -->
|
||||
<div class="dataTwo" v-if="twonav&&index===1">
|
||||
<div @click="jumpData('monthly')">月度数据</div>
|
||||
<div @click="jumpData('quarter')">季度数据</div>
|
||||
<div @click="jumpData('year')">年度数据</div>
|
||||
<div @click="jumpData('area')">地区数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dsearch">
|
||||
<!-- <img :src="imageUrl.search" alt srcset /> -->
|
||||
<!-- 未登录 -->
|
||||
@@ -16,19 +29,17 @@
|
||||
<div
|
||||
:class="{loginAfter:true,loginAfters:fontsF}"
|
||||
v-if="userLogin"
|
||||
@click="userLoginC()"
|
||||
>{{userName}}</div>
|
||||
</div>
|
||||
<!-- 数据二级导航 -->
|
||||
<div class="dataTwo" v-if="twonav">
|
||||
<div>月度数据</div>
|
||||
<div>季度数据</div>
|
||||
<div>年度数据</div>
|
||||
</div>
|
||||
<!-- 个人信息二级导航 -->
|
||||
<div class="dataTwos" v-if="personalInfo">
|
||||
<div>个人中心</div>
|
||||
<div>退出</div>
|
||||
@mouseenter="userLoginC()"
|
||||
@mouseleave="userLoginC()"
|
||||
>
|
||||
<img :src="userPic" alt srcset />
|
||||
{{userName}}
|
||||
<!-- 个人信息二级导航 -->
|
||||
<div class="dataTwos" v-if="personalInfo">
|
||||
<div @click="perspnalCenter">个人中心</div>
|
||||
<div @click="quit">退出</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 登陆窗口 -->
|
||||
@@ -53,7 +64,7 @@
|
||||
</div>
|
||||
<div @click="closeLoginWind(true)">确认</div>
|
||||
<div>
|
||||
<span>没有账号？去注册</span>
|
||||
<span @click="regirest()">没有账号？去注册</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,11 +89,12 @@ export default {
|
||||
{ text: '公司介绍', url: '/companyIntroduction' },
|
||||
{ text: '联系我们', url: '/relation' },
|
||||
{ text: '个人中心', url: '/personalCenter' },
|
||||
{ text: '帮助', url: 123 }
|
||||
{ text: '帮助', url: '/help' }
|
||||
],
|
||||
twonav: false,
|
||||
colorD: false,
|
||||
userName: '十画.TeFuir',
|
||||
userPic: '',
|
||||
// 用户名和登陆的显示隐藏
|
||||
userLogin: false,
|
||||
personalInfo: false,
|
||||
@@ -101,19 +113,31 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
navClick (indexs, url) {
|
||||
if (indexs === 1) {
|
||||
this.twonav = !this.twonav
|
||||
this.colorD = !this.colorD
|
||||
this.fontsF = false
|
||||
this.personalInfo = false
|
||||
} else {
|
||||
if (indexs !== 1) {
|
||||
this.twonav = false
|
||||
this.colorD = false
|
||||
this.fontsF = false
|
||||
this.personalInfo = false
|
||||
if (this.$route.path === url) {
|
||||
this.$router.go(0)
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: url
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
navMouseClick (indexs, url, statics) {
|
||||
if (indexs === 1 && statics) {
|
||||
this.twonav = true
|
||||
this.colorD = true
|
||||
this.fontsF = false
|
||||
this.personalInfo = false
|
||||
} else if (indexs === 1 && !statics) {
|
||||
this.twonav = false
|
||||
this.colorD = false
|
||||
this.fontsF = false
|
||||
this.personalInfo = false
|
||||
this.$router.push({
|
||||
path: url
|
||||
})
|
||||
}
|
||||
},
|
||||
userLoginC () {
|
||||
@@ -140,7 +164,31 @@ export default {
|
||||
alert('验证码输入不正确请重新输入！')
|
||||
} else {
|
||||
// 调接口判断密码是否输入正确,改变登录状态
|
||||
this.showWinStatic = !this.showWinStatic
|
||||
this.$axios({
|
||||
method: 'POST',
|
||||
url: 'member/index/login',
|
||||
data: {
|
||||
username: this.username,
|
||||
password_hash: this.userpwd
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
// 请求接口完成注册 请求成功
|
||||
alert(res.data.message)
|
||||
if (res.data.code === 200) {
|
||||
this.showWinStatic = !this.showWinStatic
|
||||
// 用户信息存本地
|
||||
localStorage.setItem('username', res.data.data.username)
|
||||
localStorage.setItem('pic', res.data.data.pic)
|
||||
localStorage.setItem('userPwd', this.userpwd)
|
||||
localStorage.setItem('token', 'Bearer ' + res.data.data.token)
|
||||
// 登录状态
|
||||
localStorage.setItem('userLogin', true)
|
||||
this.$router.go(0)
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.showWinStatic = !this.showWinStatic
|
||||
@@ -156,7 +204,71 @@ export default {
|
||||
this.imgIdentify = content.join('')
|
||||
console.log(this.imgIdentify)
|
||||
})
|
||||
},
|
||||
regirest () {
|
||||
this.showWinStatic = !this.showWinStatic
|
||||
this.$router.push({ path: '/register' })
|
||||
},
|
||||
// 跳到数据页面
|
||||
jumpData (staData) {
|
||||
if (this.$route.path !== '/datasweb') {
|
||||
this.$router.push(
|
||||
{
|
||||
path: '/datasweb',
|
||||
query: {
|
||||
type: staData
|
||||
}
|
||||
}
|
||||
)
|
||||
} else {
|
||||
this.twonav = false
|
||||
this.$router.push({
|
||||
path: '/'
|
||||
})
|
||||
this.$router.push(
|
||||
{
|
||||
path: '/datasweb',
|
||||
query: {
|
||||
type: staData
|
||||
}
|
||||
}
|
||||
)
|
||||
this.$router.go(0)
|
||||
}
|
||||
},
|
||||
// 退出
|
||||
quit () {
|
||||
// 调接口判断密码是否输入正确,改变登录状态
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'member/index/logout',
|
||||
params: {
|
||||
'access-token': localStorage.getItem('token')
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
alert(res.data.message)
|
||||
// 请求接口完成注册 请求成功
|
||||
if (res.data.code === 200) {
|
||||
localStorage.clear()
|
||||
this.$router.go(0)
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
perspnalCenter () {
|
||||
if (this.$route.path !== '/personalCenter') {
|
||||
this.$router.push({ path: '/personalCenter' })
|
||||
} else {
|
||||
this.$router.go(0)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.userLogin = localStorage.getItem('userLogin')
|
||||
this.userName = localStorage.getItem('username')
|
||||
this.userPic = localStorage.getItem('pic')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -170,25 +282,65 @@ export default {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.28);
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
& > .loginSty_wcont {
|
||||
width: 37.5rem;
|
||||
height: 32.6875rem;
|
||||
background-color: #ffffff;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
& > .wcont_header {
|
||||
width: 32.8125rem;
|
||||
height: 3.875rem;
|
||||
border-bottom: 0.0625rem solid #dbdbdb;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: space-between;
|
||||
-moz-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-align-items: center;
|
||||
// po
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
& > div {
|
||||
margin-left: 1rem;
|
||||
@@ -210,17 +362,43 @@ export default {
|
||||
& > .wcont_content {
|
||||
width: 30.8125rem;
|
||||
height: 26.5rem;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
-webkit-justify-content: space-around;
|
||||
-moz-box-pack: space-around;
|
||||
-ms-flex-pack: space-around;
|
||||
justify-content: space-around;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
& > div:nth-last-child(n + 2) {
|
||||
width: 100%;
|
||||
height: 3.25rem;
|
||||
border: 0.0625rem solid #dbdbdb;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: flex-start;
|
||||
-moz-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
& > input {
|
||||
width: 21.625rem;
|
||||
@@ -290,9 +468,22 @@ export default {
|
||||
height: 3.1875rem;
|
||||
background-color: #52b6e3;
|
||||
border-radius: 0.3125rem;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
@@ -307,9 +498,22 @@ export default {
|
||||
width: 100%;
|
||||
height: 3.1875rem;
|
||||
border-radius: 0.3125rem;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-justify-content: flex-start;
|
||||
-moz-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-items: flex-end;
|
||||
-moz-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
@@ -326,23 +530,49 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
width: 100%;
|
||||
height: 5.5rem;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-color:#fff;
|
||||
background-color: #fff;
|
||||
& > .navCont {
|
||||
position: relative;
|
||||
width: 84.25rem;
|
||||
height: 5.5rem;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
-webkit-justify-content: space-between;
|
||||
-moz-box-pack: space-between;
|
||||
-ms-flex-pack: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
border: 1px solid black;
|
||||
// border: 1px solid black;
|
||||
& > .fontSty {
|
||||
color: #52b6e3 !important;
|
||||
}
|
||||
@@ -350,19 +580,36 @@ export default {
|
||||
cursor: pointer;
|
||||
color: #52b6e3;
|
||||
}
|
||||
& > .dataTwo {
|
||||
& > div:nth-child(2) {
|
||||
position: relative;
|
||||
}
|
||||
.dataTwo {
|
||||
width: 8rem;
|
||||
height: 10rem;
|
||||
height: 14rem;
|
||||
position: absolute;
|
||||
top: 3.425rem;
|
||||
left: 18.825rem;
|
||||
top: 1.875rem;
|
||||
left: -2.5625rem;
|
||||
z-index: 10;
|
||||
background-image: url("../../../static/nav/xl.png");
|
||||
background-repeat: no-repeat;
|
||||
-o-background-size: 100% 100%;
|
||||
background-size: 100% 100%;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
& > div {
|
||||
margin-top: 0.985rem;
|
||||
@@ -377,32 +624,6 @@ export default {
|
||||
color: #52b6e3;
|
||||
}
|
||||
}
|
||||
& > .dataTwos {
|
||||
width: 8rem;
|
||||
height: 6.125rem;
|
||||
position: absolute;
|
||||
top: 3.425rem;
|
||||
right: 3.825rem;
|
||||
background-image: url("../../../static/nav/xl.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > div {
|
||||
margin-top: 0.375rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
color: #52b6e3;
|
||||
}
|
||||
}
|
||||
& > img {
|
||||
width: 9.375rem;
|
||||
height: 3.375rem;
|
||||
@@ -420,9 +641,21 @@ export default {
|
||||
& > .dsearch {
|
||||
margin-left: 8.625rem;
|
||||
width: 13.25rem;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
& > img {
|
||||
width: 1.75rem;
|
||||
@@ -438,17 +671,82 @@ export default {
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > .loginAfter {
|
||||
position: relative;
|
||||
font-size: 1.375rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > img {
|
||||
margin-right: 0.75rem;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
& > .dataTwos {
|
||||
width: 8rem;
|
||||
height: 6.125rem;
|
||||
position: absolute;
|
||||
top: 2.875rem;
|
||||
// right: 3.825rem;
|
||||
z-index: 10;
|
||||
background-image: url("../../../static/nav/xl.png");
|
||||
background-repeat: no-repeat;
|
||||
-o-background-size: 100% 100%;
|
||||
background-size: 100% 100%;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
& > div {
|
||||
margin-top: 0.375rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
color: #52b6e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .loginAfter:hover {
|
||||
color: #52b6e3;
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<div class="kuang">
|
||||
<input type="text" v-model="searchContext" placeholder="全站搜索" />
|
||||
<img :src="imgUrl.search" alt />
|
||||
</div>
|
||||
<div class="tjHold">
|
||||
统计热词
|
||||
<div>
|
||||
<div v-for="(item,index) in hotFont" :key="index">{{item}}</div>
|
||||
<div class="searchAll">
|
||||
<div class="search">
|
||||
<div class="kuang">
|
||||
<input type="text" v-model="searchContext" placeholder="全站搜索" @keyup.enter="blurUpset" />
|
||||
<img :src="imgUrl.search" alt />
|
||||
</div>
|
||||
<div class="tjHold">
|
||||
统计热词
|
||||
<div>
|
||||
<div v-for="(item,index) in hotFont" :key="index" :title="item" @click="blurUpset(item)">{{comHotCi(item)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -20,79 +22,211 @@ export default {
|
||||
imgUrl: {
|
||||
search: require('../../../static/index/search.png')
|
||||
},
|
||||
searchContext: '',
|
||||
searchContext: this.$route.path === '/searchList' ? (this.$route.query.keyVal) : '',
|
||||
hotFont: ['GDP', 'CPI', '总人口', '社会消费品零售总额', '粮食产量', 'PMI']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
blurUpset (textCont) {
|
||||
console.log(textCont, '3523')
|
||||
if (this.$route.path === '/searchList') {
|
||||
this.$router.push({
|
||||
path: '/'
|
||||
})
|
||||
this.$router.push({
|
||||
path: './searchList',
|
||||
query: {
|
||||
keyVal: !textCont.target ? textCont : this.searchContext
|
||||
}
|
||||
})
|
||||
this.$router.go(0)
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: './searchList',
|
||||
query: {
|
||||
keyVal: !textCont.target ? textCont : this.searchContext
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取统计热词
|
||||
getHotWords () {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'search/search/hot-words',
|
||||
params: {}
|
||||
}).then(res => {
|
||||
// console.log(res, '统计热词')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
this.hotFont = res.data.data.list.map((item, index) => {
|
||||
return item.word
|
||||
})
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
comHotCi () {
|
||||
return (str) => {
|
||||
let Strs = ''
|
||||
if (str.length <= 5) {
|
||||
Strs = str
|
||||
} else {
|
||||
Strs = str.substr(0, 5)
|
||||
}
|
||||
return Strs
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getHotWords()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.search {
|
||||
margin: 1.25rem 0;
|
||||
width: 84.25rem;
|
||||
.searchAll {
|
||||
width: 100%;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
& > .kuang {
|
||||
width: 43.25rem;
|
||||
height: 3.5rem;
|
||||
background-color: #f8f8f8 !important;
|
||||
// border:1px solid red;
|
||||
& > .search {
|
||||
margin: 1.25rem 0;
|
||||
width: 84.25rem;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
border: 0.125rem solid #414141;
|
||||
border-radius: 0.35rem;
|
||||
& > img {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
& > .kuang {
|
||||
width: 43.25rem;
|
||||
height: 3.5rem;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
border: 0.125rem solid #414141;
|
||||
border-radius: 0.35rem;
|
||||
& > img {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
& > img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > input {
|
||||
width: 36rem;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
& > input:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
& > img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > input {
|
||||
width: 36rem;
|
||||
border: none;
|
||||
& > .tjHold {
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: space-between;
|
||||
-moz-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
& > input:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
& > .tjHold {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
& > div {
|
||||
margin-left: 2.25rem;
|
||||
width: 25.25rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #999999;
|
||||
& > div {
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
color: #52b6e3;
|
||||
margin-left: 2.25rem;
|
||||
width: 25.25rem;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: flex-start;
|
||||
-moz-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #999999;
|
||||
& > div {
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
color: #52b6e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
48
src/main.js
48
src/main.js
@@ -14,11 +14,42 @@ import VueAwesomeSwiper from 'vue-awesome-swiper'
|
||||
|
||||
// require styles
|
||||
import 'swiper/dist/css/swiper.css'
|
||||
|
||||
// 全局指定配置
|
||||
// 自定义指令实现back-top;
|
||||
Vue.directive('scroll-show', {
|
||||
inserted (el, binding) {
|
||||
let scope = binding.arg || '200'
|
||||
window.addEventListener('scroll', function (e) {
|
||||
if (this.scrollY > Number(scope)) {
|
||||
binding.value.value = true
|
||||
} else {
|
||||
binding.value.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
Vue.directive('back-top', {
|
||||
inserted (el, binding) {
|
||||
let e = binding.arg || 'click'
|
||||
el.addEventListener(e, function () {
|
||||
let scrollToptimer = setInterval(function () {
|
||||
let top = document.documentElement.scrollTop + document.body.scrollTop
|
||||
let speed = top / 4
|
||||
top -= speed
|
||||
document.documentElement.scrollTop = document.body.scrollTop = top
|
||||
if (top === 0) {
|
||||
clearInterval(scrollToptimer)
|
||||
}
|
||||
}, 30)
|
||||
})
|
||||
}
|
||||
})
|
||||
// axios请求配置
|
||||
var root = process.env.VUE_APP_BASE_API
|
||||
// console.log(root)
|
||||
|
||||
// 请求拦截器
|
||||
// 请求拦截器(前)
|
||||
axios.interceptors.request.use(config => {
|
||||
// --请求之前重新拼装url--
|
||||
config.url = root + config.url
|
||||
@@ -30,11 +61,26 @@ axios.interceptors.request.use(config => {
|
||||
// config.headers = {
|
||||
// 'Authorization': 'hjiujkolololjhgg12569jhjhF'
|
||||
// }
|
||||
config.headers = {
|
||||
Authorization: localStorage.getItem('token')
|
||||
}
|
||||
return config
|
||||
})
|
||||
// 返回拦截器(后)
|
||||
axios.interceptors.response.use(data => {
|
||||
// console.log(localStorage.getItem('token'))
|
||||
if (localStorage.getItem('token') !== null && data.data.code === 401) {
|
||||
alert('您没有该账号的登陆权限，请重新登录后再次操作！')
|
||||
localStorage.clear()
|
||||
window.location.reload()
|
||||
}
|
||||
return data
|
||||
})
|
||||
// 将图形验证码写入
|
||||
Vue.prototype.$identify = identify.default
|
||||
Vue.prototype.$axios = axios
|
||||
// 引入设置dom元素高度的插件
|
||||
Vue.prototype.$detector = require('element-resize-detector')
|
||||
|
||||
Vue.use(VueAwesomeSwiper)
|
||||
Vue.use(ElementUI)
|
||||
|
||||
@@ -11,6 +11,22 @@ import CmpanyIntroduction from '@/views/companyIntroduction/CompanyIntroduction.
|
||||
import Relation from '@/views/relation/Relation.vue'
|
||||
// 个人中心
|
||||
import PersonalCenter from '@/views/personalCenter/PersonalCenter.vue'
|
||||
// 帮助
|
||||
import Help from '@/views/help/Help.vue'
|
||||
// 注册
|
||||
import Register from '@/views/register/Register.vue'
|
||||
// 用户协议
|
||||
import UserAgreement from '@/views/userAgreement/UserAgreement.vue'
|
||||
// 数据列表
|
||||
import DataList from '@/views/dataList/DataList.vue'
|
||||
// 数据列表详情
|
||||
import ListDetails from '@/views/listDetails/ListDetails.vue'
|
||||
// 搜索列表
|
||||
import SearchList from '@/views/searchList/SearchList.vue'
|
||||
// 数据
|
||||
import Datasweb from '@/views/datasweb/Datasweb.vue'
|
||||
// 引入测试
|
||||
import cs from '@/views/cs.vue'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
@@ -46,6 +62,46 @@ export default new Router({
|
||||
path: '/personalCenter',
|
||||
name: 'personalCenter',
|
||||
component: PersonalCenter
|
||||
},
|
||||
{
|
||||
path: '/help',
|
||||
name: 'help',
|
||||
component: Help
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'register',
|
||||
component: Register
|
||||
},
|
||||
{
|
||||
path: '/userAgreement',
|
||||
name: 'userAgreement',
|
||||
component: UserAgreement
|
||||
},
|
||||
{
|
||||
path: '/dataList',
|
||||
name: 'dataList',
|
||||
component: DataList
|
||||
},
|
||||
{
|
||||
path: '/listDetails',
|
||||
name: 'listDetails',
|
||||
component: ListDetails
|
||||
},
|
||||
{
|
||||
path: '/searchList',
|
||||
name: 'searchList',
|
||||
component: SearchList
|
||||
},
|
||||
{
|
||||
path: '/datasweb',
|
||||
name: 'datasweb',
|
||||
component: Datasweb
|
||||
},
|
||||
{
|
||||
path: '/cs',
|
||||
name: 'cs',
|
||||
component: cs
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@@ -38,9 +38,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="waterY">
|
||||
<div>CORPORATE</div>
|
||||
<div>CULTURE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="finashLeft"></div>
|
||||
<div class="finashLeft">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚信息 -->
|
||||
<FooterInfors></FooterInfors>
|
||||
@@ -102,7 +108,9 @@ export default {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
& > .cont {
|
||||
position: relative;
|
||||
width: 84.25rem;
|
||||
// border: 1px solid red;
|
||||
background-color: #fff;
|
||||
@@ -229,12 +237,43 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .waterY {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 41.375rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 3.2rem;
|
||||
& > div {
|
||||
font-size: 10rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 13.25rem;
|
||||
letter-spacing: 1rem;
|
||||
color: #333333;
|
||||
opacity: 0.15;
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.finashLeft {
|
||||
margin-bottom: 1.875rem;
|
||||
width: 42.875rem;
|
||||
padding-bottom: 1.875rem;
|
||||
width: 100%;
|
||||
height: 1.5rem;
|
||||
background-color: #52b6e3;
|
||||
background-color: #fff;
|
||||
& > div {
|
||||
width: 42.875rem;
|
||||
height: 1.5rem;
|
||||
background-color: #52b6e3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
36
src/views/cs.vue
Normal file
36
src/views/cs.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<input type="text" v-model="iphones" />
|
||||
<button @click="sendInfor">发送</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
iphones: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
sendInfor () {
|
||||
this.$axios({
|
||||
method: 'POST',
|
||||
url: 'Main/Verification',
|
||||
data: {
|
||||
Verification: this.iphones
|
||||
},
|
||||
then: (res) => {
|
||||
console.log(res)
|
||||
},
|
||||
catch: (e) => {
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
465
src/views/dataList/DataList.vue
Normal file
465
src/views/dataList/DataList.vue
Normal file
@@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 首页导航 -->
|
||||
<Navs></Navs>
|
||||
<!-- content -->
|
||||
<section class="content">
|
||||
<!-- swiper -->
|
||||
<div class="content_cont">
|
||||
<!-- 全局搜索 -->
|
||||
<search></search>
|
||||
<div class="header">
|
||||
<div class="left">资讯列表</div>
|
||||
<div class="right">
|
||||
<img :src="imgurl.pos" alt />
|
||||
<span>当前位置：</span>
|
||||
<span @click="$router.push('/')">首页</span>
|
||||
>
|
||||
<span @click="$router.push('/dataList')">资讯列表</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主内容 -->
|
||||
<div class="mainCont">
|
||||
<div class="mainCont_left">
|
||||
<!-- 资讯列表-->
|
||||
<div v-for="(item,index) in dataLists" :key="index">
|
||||
<div>
|
||||
<div>{{item.title}}</div>
|
||||
<div>{{item.content}}</div>
|
||||
<div @click="watchDetails(item.id)">查看详情</div>
|
||||
</div>
|
||||
<img :src="item.url" alt />
|
||||
</div>
|
||||
<!-- 分页 :hide-on-single-page="value"显示隐藏分页-->
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="pageConfiguration.countSize"
|
||||
class="pagination"
|
||||
:page-size="pageConfiguration.oneSize"
|
||||
:hide-on-single-page="true"
|
||||
@prev-click="prevClick"
|
||||
@next-click="nextClick"
|
||||
@current-change="currentChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<div class="mainCont_right">
|
||||
<div class="right2">
|
||||
<div class="title">24小时热文</div>
|
||||
<div class="content">
|
||||
<div v-for="(item,index) in twentyFourtimeData" :key="index">
|
||||
<img :src="item.url" alt />
|
||||
<div>
|
||||
<div class="top">{{item.title}}</div>
|
||||
<div class="bottom">{{item.content}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 页脚信息 -->
|
||||
<FooterInfors></FooterInfors>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导航
|
||||
import Nav from '@/components/nav/Nav.vue'
|
||||
// 页脚信息
|
||||
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
||||
// 全局搜索
|
||||
import search from '@/components/search/search.vue'
|
||||
export default {
|
||||
name: 'index',
|
||||
components: {
|
||||
Navs: Nav,
|
||||
FooterInfors: FooterInfor,
|
||||
search: search
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
imgurl: {
|
||||
pos: require('../../../static/company/posweizhi.png'),
|
||||
list1: require('../../../static/dataList/list1.png')
|
||||
},
|
||||
// 咨询列表数据
|
||||
dataLists: [
|
||||
{
|
||||
title: '五大行入局区块链，区块链革命正在到来',
|
||||
content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
|
||||
url: require('../../../static/dataList/list1.png')
|
||||
},
|
||||
{
|
||||
title: '五大行入局区块链，区块链革命正在到来',
|
||||
content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
|
||||
url: require('../../../static/dataList/list1.png')
|
||||
},
|
||||
{
|
||||
title: '五大行入局区块链，区块链革命正在到来',
|
||||
content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
|
||||
url: require('../../../static/dataList/list1.png')
|
||||
},
|
||||
{
|
||||
title: '五大行入局区块链，区块链革命正在到来',
|
||||
content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
|
||||
url: require('../../../static/dataList/list1.png')
|
||||
},
|
||||
{
|
||||
title: '五大行入局区块链，区块链革命正在到来',
|
||||
content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
|
||||
url: require('../../../static/dataList/list1.png')
|
||||
}
|
||||
],
|
||||
// 分页配置
|
||||
pageConfiguration: {
|
||||
// 每页显示条数
|
||||
oneSize: 5,
|
||||
// 数据总条数
|
||||
countSize: 36,
|
||||
// 总页数
|
||||
countPage: 1,
|
||||
// 当前页
|
||||
newPage: 1
|
||||
},
|
||||
// 24小时热闻数据
|
||||
twentyFourtimeData: [
|
||||
{
|
||||
url: require('../../../static/index/timeLZ.png'),
|
||||
title: '这是标题',
|
||||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||||
},
|
||||
{
|
||||
url: require('../../../static/index/timeLZ.png'),
|
||||
title: '这是标题',
|
||||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||||
},
|
||||
{
|
||||
url: require('../../../static/index/timeLZ.png'),
|
||||
title: '这是标题',
|
||||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||||
},
|
||||
{
|
||||
url: require('../../../static/index/timeLZ.png'),
|
||||
title: '这是标题',
|
||||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||||
},
|
||||
{
|
||||
url: require('../../../static/index/timeLZ.png'),
|
||||
title: '这是标题',
|
||||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (tab, event) {
|
||||
console.log(tab, event)
|
||||
},
|
||||
// 查看详情
|
||||
watchDetails (ids) {
|
||||
this.$router.push({
|
||||
path: '/listDetails',
|
||||
query: {
|
||||
id: ids
|
||||
}
|
||||
})
|
||||
},
|
||||
// 24小时热闻
|
||||
hotArticle () {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'index/index/hot-article',
|
||||
params: {
|
||||
}
|
||||
}).then(res => {
|
||||
// console.log(res, '24小时热闻')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
let arrts = []
|
||||
res.data.data.list.forEach((item, index) => {
|
||||
let objuu = {
|
||||
url: item.thumb,
|
||||
title: item.title,
|
||||
content: item.desc,
|
||||
id: item.id
|
||||
}
|
||||
arrts.push(objuu)
|
||||
})
|
||||
this.twentyFourtimeData = arrts
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
// 数据咨询、资讯列表
|
||||
article (page) {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'index/index/article',
|
||||
params: {
|
||||
page: page,
|
||||
limit: 5
|
||||
}
|
||||
}).then(res => {
|
||||
// console.log(res, '数据咨询、资讯列表')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
let arrts = []
|
||||
res.data.data.list.forEach((item, index) => {
|
||||
let objuu = {
|
||||
title: item.title,
|
||||
content: item.desc,
|
||||
time: item.update_time,
|
||||
url: item.thumb,
|
||||
id: item.id
|
||||
}
|
||||
arrts.push(objuu)
|
||||
})
|
||||
this.dataLists = arrts
|
||||
this.pageConfiguration.countSize = parseInt(res.data.data.total)
|
||||
this.pageConfiguration.countPage = parseInt(res.data.data.total) / 5
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
// 点击上一页
|
||||
prevClick () {
|
||||
this.pageConfiguration.newPage--
|
||||
this.article(this.pageConfiguration.newPage)
|
||||
},
|
||||
// 点击下一页
|
||||
nextClick () {
|
||||
this.pageConfiguration.newPage++
|
||||
this.article(this.pageConfiguration.newPage)
|
||||
},
|
||||
currentChange (ev) {
|
||||
this.pageConfiguration.newPage = ev
|
||||
this.article(ev)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算字符串
|
||||
computedStr () {
|
||||
return (str) => {
|
||||
let Strs = ''
|
||||
str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
|
||||
return Strs
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 资讯列表
|
||||
this.article(1)
|
||||
// 24小时热闻
|
||||
this.hotArticle()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .content_cont {
|
||||
width: 84.25rem;
|
||||
& > .header {
|
||||
width: 84.25rem;
|
||||
height: 4.25rem;
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
& > .left {
|
||||
// margin-left: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0.125rem;
|
||||
color: #000000;
|
||||
}
|
||||
& > .right {
|
||||
// margin-right: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #8fa3ae;
|
||||
& > img {
|
||||
width: 1rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.45rem;
|
||||
}
|
||||
& > span:nth-child(n + 3):hover {
|
||||
cursor: pointer;
|
||||
color: #52b6e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
// border: 1px solid red;
|
||||
& > .swipersty {
|
||||
width: 100%;
|
||||
height: 33.25rem;
|
||||
}
|
||||
& > .mainCont {
|
||||
// margin-top: 3.125rem;
|
||||
margin-bottom: 3.125rem;
|
||||
width: 100%;
|
||||
// border: 0.0625rem solid red;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
& > .mainCont_left {
|
||||
// border: 0.0625rem solid red;
|
||||
width: 55.625rem;
|
||||
& > div:nth-last-child(n + 2) {
|
||||
margin-bottom: 1.25rem;
|
||||
width: 100%;
|
||||
height: 23.75rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||||
background-color: #fff;
|
||||
& > div {
|
||||
width: 33.75rem;
|
||||
height: 20rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
& > div:nth-child(1) {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
// line-height: 30px;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 2rem;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5; /* 省略号在第几行 */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
& > div:nth-child(3) {
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0rem;
|
||||
color: #52b6e3;
|
||||
border-bottom: 0.0625rem solid #52b6e3;
|
||||
}
|
||||
& > div:nth-child(3):hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > img {
|
||||
width: 16rem;
|
||||
height: 15rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
}
|
||||
& > div:last-child {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
& > .mainCont_right {
|
||||
width: 27.375rem;
|
||||
& > .right2 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||||
& > .title {
|
||||
width: 24.875rem;
|
||||
height: 3.75rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0.3125rem;
|
||||
color: #000000;
|
||||
border-bottom: 0.0625rem solid #dbdbdb;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
& > .content {
|
||||
width: 24.875rem;
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 7.625rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
& > img {
|
||||
width: 7.25rem;
|
||||
height: 5.125rem;
|
||||
}
|
||||
& > div {
|
||||
width: 16rem;
|
||||
height: 5.125rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
& > .top {
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
// line-height: 23px;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > .bottom {
|
||||
width: 16rem;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.5rem;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* 省略号在第几行 */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1029
src/views/datasweb/Datasweb.vue
Normal file
1029
src/views/datasweb/Datasweb.vue
Normal file
File diff suppressed because it is too large
Load Diff
235
src/views/help/Help.vue
Normal file
235
src/views/help/Help.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<div class="help">
|
||||
<!-- 首页导航 -->
|
||||
<Navs></Navs>
|
||||
<div class="help_cont">
|
||||
<!-- 全局搜索 -->
|
||||
<search></search>
|
||||
<div class="cont_content">
|
||||
<div class="header">
|
||||
<div class="left">帮助</div>
|
||||
<div class="right">
|
||||
<img :src="imgurl.pos" alt />
|
||||
<span>当前位置：</span>
|
||||
<span @click="$router.push('/')">首页</span>
|
||||
>
|
||||
<span @click="$router.push('/help')">帮助</span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="container">
|
||||
<div class="left" ref="leftHeight">
|
||||
<!-- 测导航 -->
|
||||
<el-row class="tac">
|
||||
<el-col :span="24">
|
||||
<el-menu
|
||||
default-active="1-1-1"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
@select="selectActive"
|
||||
>
|
||||
<el-submenu index="1">
|
||||
<template slot="title">数据查询</template>
|
||||
<el-submenu index="1-1-1">
|
||||
<template slot="title">简单查询</template>
|
||||
<el-menu-item index="1-1-1">数据查询</el-menu-item>
|
||||
<el-menu-item index="1-1-2">指标查询</el-menu-item>
|
||||
<el-menu-item index="1-1-3">快捷按钮</el-menu-item>
|
||||
<el-submenu index="1-1-4">
|
||||
<template slot="title">功能操作</template>
|
||||
<el-menu-item index="1-1-4-1">我的收藏</el-menu-item>
|
||||
<el-menu-item index="1-1-4-2">添加收藏</el-menu-item>
|
||||
<el-menu-item index="1-1-4-3">新增指标</el-menu-item>
|
||||
<el-menu-item index="1-1-4-4">筛选指标</el-menu-item>
|
||||
<el-menu-item index="1-1-4-5">统计</el-menu-item>
|
||||
<el-menu-item index="1-1-4-6">恢复</el-menu-item>
|
||||
<el-menu-item index="1-1-4-7">去除空行空列</el-menu-item>
|
||||
<el-menu-item index="1-1-4-8">编辑</el-menu-item>
|
||||
<el-menu-item index="1-1-4-9">维度转换</el-menu-item>
|
||||
<el-menu-item index="1-1-4-10">行列转置</el-menu-item>
|
||||
<el-menu-item index="1-1-4-11">保存默认</el-menu-item>
|
||||
<el-menu-item index="1-1-4-12">恢复默认</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-submenu index="1-2">
|
||||
<template slot="title">高级查询</template>
|
||||
<el-menu-item index="1-2-1">指标选择</el-menu-item>
|
||||
<el-menu-item index="1-2-2">地区选择</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="1-3">
|
||||
<template slot="title">数据地图</template>
|
||||
</el-submenu>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">经济图表</template>
|
||||
</el-submenu>
|
||||
<el-submenu index="1-5">
|
||||
<template slot="title">搜索</template>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="right" :style="{'height':leftHeights+'rem'}" ref="rightHeight">
|
||||
<div v-html="htmlStr" class="htmlStrs"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 页脚信息 -->
|
||||
<FooterInfors></FooterInfors>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 导航
|
||||
import Nav from '@/components/nav/Nav.vue'
|
||||
// 页脚信息
|
||||
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
||||
// 全局搜索
|
||||
import search from '@/components/search/search.vue'
|
||||
export default {
|
||||
name: 'help',
|
||||
components: {
|
||||
Navs: Nav,
|
||||
FooterInfors: FooterInfor,
|
||||
search: search
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
imgurl: {
|
||||
pos: require('../../../static/company/posweizhi.png')
|
||||
},
|
||||
// left的高度
|
||||
leftHeights: null,
|
||||
// 需要渲染的html字符串
|
||||
htmlStr: '',
|
||||
allHtml: [
|
||||
{
|
||||
name: '数据查询',
|
||||
code: '1-1-1',
|
||||
htmls: `
|
||||
国家统计数据库全新改版, 提供了以下服务：<br />
|
||||
- 详实的月度、季度、年度数据以及普查、地区、部门、国际数据<br />
|
||||
- 提供多种文件输出、制表、绘图、指标解释、表格转置、可视化图表、数据地理信息系统等多种功能<br />
|
||||
其中具有特色的服务为：<br />
|
||||
- 数据挖掘随心所欲<br />
|
||||
- 海量数据一键下载<br />
|
||||
- 精品资源一键分享<br /><br /><br /><br />
|
||||
所做的一切，只为让数据生活更简单。下面，就让我们一起来阅读国家统计局数据库入门指南，让这篇用户手册来指引你如何使用数据库。跟着导航一起操作，即可进入轻松的查数之旅。`
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOpen (key, keyPath) {
|
||||
console.log(key, keyPath)
|
||||
},
|
||||
handleClose (key, keyPath) {
|
||||
console.log(key, keyPath)
|
||||
},
|
||||
selectActive (key, keyPath) {
|
||||
console.log(key, keyPath)
|
||||
this.showColoect(key)
|
||||
},
|
||||
// 渲染我的收藏
|
||||
showColoect (key) {
|
||||
let datasd = JSON.parse(JSON.stringify(this.allHtml))
|
||||
datasd.forEach((item, index) => {
|
||||
if (item.code === key) {
|
||||
this.htmlStr = item.htmls
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.showColoect('1-1-1')
|
||||
this.$detector().listenTo(this.$refs.leftHeight, (element) => {
|
||||
var width = element.offsetWidth
|
||||
var height = element.offsetHeight
|
||||
this.$nextTick(() => {
|
||||
console.log('Size: ' + width + 'x' + height)
|
||||
// 使echarts尺寸重置
|
||||
this.leftHeights = height / (160 / ((1920 - 17) / document.body.clientWidth) / 10)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.help_cont {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .cont_content {
|
||||
margin-bottom: 1.875rem;
|
||||
width: 84.25rem;
|
||||
// border: 1px solid red;
|
||||
& > .header {
|
||||
width: 84.25rem;
|
||||
height: 4.25rem;
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
& > .left {
|
||||
// margin-left: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0.125rem;
|
||||
color: #000000;
|
||||
}
|
||||
& > .right {
|
||||
// margin-right: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #8fa3ae;
|
||||
& > img {
|
||||
width: 1rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.45rem;
|
||||
}
|
||||
& > span:nth-child(n + 3):hover {
|
||||
cursor: pointer;
|
||||
color: #52b6e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > .left {
|
||||
width: 25.5rem;
|
||||
min-height: 43.5rem;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||||
}
|
||||
& > .right {
|
||||
// height: 100%;
|
||||
width: 57.625rem;
|
||||
min-height: 43.5rem;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
& > .htmlStrs {
|
||||
margin-top:1.75rem;
|
||||
width: 55rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,24 +5,28 @@
|
||||
<!-- content -->
|
||||
<section class="content">
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" class="swipersty">
|
||||
<swiper-slide v-for="(item,index) in bannerLuBo" :key="index">
|
||||
<img
|
||||
@click="loctionHref(item.url)"
|
||||
:src="item.img"
|
||||
alt
|
||||
style="width: 100%;height: 33.25rem;cursor:pointer;"
|
||||
/>
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
<div
|
||||
class="swiper-button-prev"
|
||||
slot="button-prev"
|
||||
:style="{'background-image':'url('+lunboUp+')'}"
|
||||
></div>
|
||||
<div
|
||||
class="swiper-button-next"
|
||||
slot="button-next"
|
||||
:style="{'background-image':'url('+lunboNext+')'}"
|
||||
></div>
|
||||
</swiper>
|
||||
<div class="content_cont">
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" class="swipersty">
|
||||
<swiper-slide v-for="(item,index) in bannerLuBo" :key="index">
|
||||
<img :src="item" alt style="width: 84.25rem;height: 33.25rem;" />
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
<div
|
||||
class="swiper-button-prev"
|
||||
slot="button-prev"
|
||||
:style="{'background-image':'url('+lunboUp+')'}"
|
||||
></div>
|
||||
<div
|
||||
class="swiper-button-next"
|
||||
slot="button-next"
|
||||
:style="{'background-image':'url('+lunboNext+')'}"
|
||||
></div>
|
||||
</swiper>
|
||||
<!-- 全局搜索 -->
|
||||
<search></search>
|
||||
<!-- 主内容 -->
|
||||
@@ -40,7 +44,10 @@
|
||||
class="Listpane"
|
||||
>
|
||||
<div class="ListpaneLeft">
|
||||
<div v-for="(listLeft,keyLeft) in item.textArrLeft" :key="keyLeft">{{listLeft}}</div>
|
||||
<div
|
||||
v-for="(listLeft,keyLeft) in item.textArrLeft"
|
||||
:key="keyLeft"
|
||||
>{{listLeft.name}}</div>
|
||||
</div>
|
||||
<div class="center"></div>
|
||||
<div class="ListpaneRight">
|
||||
@@ -48,7 +55,7 @@
|
||||
v-for="(listRight,keyRight) in item.textArrRight"
|
||||
:key="keyRight"
|
||||
class="ListpaneRight"
|
||||
>{{listRight}}</div>
|
||||
>{{listRight.name}}</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -91,13 +98,13 @@
|
||||
<div class="center">{{item.cont}}</div>
|
||||
<div class="bottom">
|
||||
<span>{{item.time}}</span>
|
||||
<span>查看详情</span>
|
||||
<span @click="$router.push({path:'/listDetails',query:{id:item.id}})">查看详情</span>
|
||||
</div>
|
||||
</div>
|
||||
<img :src="item.url" alt />
|
||||
</div>
|
||||
<div class="moreD">
|
||||
<div>查看更多-></div>
|
||||
<div @click="$router.push('/dataList')">查看更多-></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -108,6 +115,7 @@
|
||||
<div v-for="(item,index) in dataUpdata" :key="index">
|
||||
<div class="up">
|
||||
{{computedStr(item.title)}}
|
||||
<!-- <div style="border:1px solid red;width:12rem;height: 2.125rem;"></div> -->
|
||||
<div class="next">({{item.updataTime}})</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -167,13 +175,14 @@ export default {
|
||||
}
|
||||
},
|
||||
bannerLuBo: [
|
||||
require('../../../static/index/banner1.png'),
|
||||
require('../../../static/index/banner1.png'),
|
||||
require('../../../static/index/banner1.png'),
|
||||
require('../../../static/index/banner1.png'),
|
||||
require('../../../static/index/banner1.png'),
|
||||
require('../../../static/index/banner1.png'),
|
||||
require('../../../static/index/banner1.png')
|
||||
{
|
||||
img: require('../../../static/index/banner1.png'),
|
||||
url: 'http://www.baidu.com'
|
||||
},
|
||||
{
|
||||
img: require('../../../static/index/banner1.png'),
|
||||
url: 'http://www.baidu.com'
|
||||
}
|
||||
],
|
||||
lunboUp: require('../../../static/index/leftS.png'),
|
||||
lunboNext: require('../../../static/index/rightS.png'),
|
||||
@@ -356,9 +365,178 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loctionHref (url) {
|
||||
console.log(url)
|
||||
window.location.href = url
|
||||
},
|
||||
handleClick (tab, event) {
|
||||
console.log(tab, event)
|
||||
},
|
||||
// 获取banner
|
||||
getBanner () {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'index/index/banner',
|
||||
parmas: {
|
||||
|
||||
}
|
||||
}).then(res => {
|
||||
// console.log(res, '获取banner')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
this.bannerLuBo = res.data.data.list
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
// 快速查询
|
||||
getClassify (type) {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'index/index/classify',
|
||||
params: {
|
||||
type: type,
|
||||
limit: 8
|
||||
}
|
||||
}).then(res => {
|
||||
// console.log(res, '快速查询')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
let brrtLeft = []
|
||||
let brrtRight = []
|
||||
res.data.data.list.forEach((item, index) => {
|
||||
if (index < 4) {
|
||||
brrtLeft.push(item)
|
||||
} else {
|
||||
brrtRight.push(item)
|
||||
}
|
||||
})
|
||||
if (type === 'A') {
|
||||
this.dataSearchDatas[0].textArrLeft = brrtLeft
|
||||
this.dataSearchDatas[0].textArrRight = brrtRight
|
||||
} else if (type === 'B') {
|
||||
this.dataSearchDatas[1].textArrLeft = brrtLeft
|
||||
this.dataSearchDatas[1].textArrRight = brrtRight
|
||||
} else if (type === 'C') {
|
||||
this.dataSearchDatas[2].textArrLeft = brrtLeft
|
||||
this.dataSearchDatas[2].textArrRight = brrtRight
|
||||
}
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
// 可视化图表
|
||||
viewChart () {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'index/index/view-chart',
|
||||
params: {}
|
||||
}).then(res => {
|
||||
// console.log(res, '可视化图表')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
let arrts = []
|
||||
res.data.data.list.forEach((item, index) => {
|
||||
let srtAs = {
|
||||
url: item.img,
|
||||
label: item.title,
|
||||
compone: item.content
|
||||
}
|
||||
arrts.push(srtAs)
|
||||
})
|
||||
this.dataSwiperS = arrts
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
// 数据咨询、资讯列表
|
||||
article (page) {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'index/index/article',
|
||||
params: {
|
||||
page: page,
|
||||
limit: 4
|
||||
}
|
||||
}).then(res => {
|
||||
// console.log(res, '数据咨询、资讯列表')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
let arrts = []
|
||||
res.data.data.list.forEach((item, index) => {
|
||||
let objuu = {
|
||||
title: item.title,
|
||||
cont: item.desc,
|
||||
time: item.update_time,
|
||||
url: item.thumb,
|
||||
id: item.id
|
||||
}
|
||||
arrts.push(objuu)
|
||||
})
|
||||
this.dataZxun = arrts
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
// 数据更新
|
||||
dataUpdating () {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'index/index/data-updating',
|
||||
params: {
|
||||
}
|
||||
}).then(res => {
|
||||
// console.log(res, '数据更新')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
let arrts = []
|
||||
res.data.data.list.forEach((item, index) => {
|
||||
let objuu = {
|
||||
title: item.name,
|
||||
updataTime: item.time,
|
||||
table_name: item.table_name,
|
||||
type: item.type
|
||||
}
|
||||
arrts.push(objuu)
|
||||
})
|
||||
this.dataUpdata = arrts
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
// 24小时热闻
|
||||
hotArticle () {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'index/index/hot-article',
|
||||
params: {
|
||||
}
|
||||
}).then(res => {
|
||||
// console.log(res, '24小时热闻')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
let arrts = []
|
||||
res.data.data.list.forEach((item, index) => {
|
||||
let objuu = {
|
||||
url: item.thumb,
|
||||
title: item.title,
|
||||
content: item.desc,
|
||||
id: item.id
|
||||
}
|
||||
arrts.push(objuu)
|
||||
})
|
||||
this.twentyFourtimeData = arrts
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
// 计算字符串
|
||||
@@ -369,6 +547,22 @@ export default {
|
||||
return Strs
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 获取banner
|
||||
this.getBanner()
|
||||
// 获取快速查询// A月度 B季度 C年度
|
||||
this.getClassify('A')
|
||||
this.getClassify('B')
|
||||
this.getClassify('C')
|
||||
// 可视化图表
|
||||
this.viewChart()
|
||||
// 数据咨询、资讯列表
|
||||
this.article(1)
|
||||
// 数据更新
|
||||
this.dataUpdating()
|
||||
// 24小时热闻
|
||||
this.hotArticle()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -380,16 +574,16 @@ export default {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .swipersty {
|
||||
width: 100%;
|
||||
height: 33.25rem;
|
||||
}
|
||||
& > .content_cont {
|
||||
width: 84.25rem;
|
||||
// border: 1px solid red;
|
||||
& > .swipersty {
|
||||
width: 100%;
|
||||
height: 33.25rem;
|
||||
}
|
||||
& > .mainCont {
|
||||
margin-top: 3.125rem;
|
||||
margin-bottom:3.125rem;
|
||||
margin-bottom: 3.125rem;
|
||||
width: 100%;
|
||||
// border: 0.0625rem solid red;
|
||||
display: flex;
|
||||
@@ -431,6 +625,7 @@ export default {
|
||||
|
||||
& > .ListpaneLeft {
|
||||
width: 24.75rem;
|
||||
height: 17rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
@@ -469,6 +664,7 @@ export default {
|
||||
}
|
||||
& > .ListpaneRight {
|
||||
width: 24.75rem;
|
||||
height: 17rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
@@ -678,7 +874,7 @@ export default {
|
||||
letter-spacing: 0.125rem;
|
||||
color: #9ea5a7;
|
||||
}
|
||||
& > div:hover{
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
color: #52b6e3;
|
||||
}
|
||||
@@ -714,10 +910,11 @@ export default {
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 5.25rem;
|
||||
// border:1px solid red;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-items: space-around;
|
||||
& > .up {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -727,8 +924,9 @@ export default {
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.125rem;
|
||||
line-height: 2.125rem;
|
||||
line-height: 2.625rem;
|
||||
color: #333333;
|
||||
padding-bottom: 1.75rem;
|
||||
// border: 1px solid red;
|
||||
& > .next {
|
||||
width: 12.625rem;
|
||||
|
||||
415
src/views/listDetails/ListDetails.vue
Normal file
415
src/views/listDetails/ListDetails.vue
Normal file
@@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 首页导航 -->
|
||||
<Navs></Navs>
|
||||
<!-- content -->
|
||||
<section class="content">
|
||||
<!-- swiper -->
|
||||
<div class="content_cont">
|
||||
<!-- 全局搜索 -->
|
||||
<search></search>
|
||||
<div class="header">
|
||||
<div class="left">资讯详情</div>
|
||||
<div class="right">
|
||||
<img :src="imgurl.pos" alt />
|
||||
<span>当前位置：</span>
|
||||
<span @click="$router.push('/')">首页</span>
|
||||
>
|
||||
<span @click="$router.push('/listDetails')">资讯详情</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主内容 -->
|
||||
<div class="mainCont">
|
||||
<div class="mainCont_left">
|
||||
<!-- 资讯列表详情-->
|
||||
<div v-if="articleDetails">
|
||||
<div class="title">{{articleDetails.title}}</div>
|
||||
<div>来源：{{articleDetails.source}} | 发布时间：{{articleDetails.create_time}}</div>
|
||||
<span v-html="articleDetails.content"></span>
|
||||
<br />
|
||||
<div class="uploadFJ" v-if="articleDetails.fujian">
|
||||
附件下载：
|
||||
<a :href="articleDetails.fujian" :download="ComputedFujian(articleDetails.fujian)">{{ComputedFujian(articleDetails.fujian)}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mainCont_right">
|
||||
<div class="right2">
|
||||
<div class="title">24小时热文</div>
|
||||
<div class="content">
|
||||
<div v-for="(item,index) in twentyFourtimeData" :key="index">
|
||||
<img :src="item.url" alt />
|
||||
<div>
|
||||
<div class="top">{{item.title}}</div>
|
||||
<div class="bottom">{{item.content}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 页脚信息 -->
|
||||
<FooterInfors></FooterInfors>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导航
|
||||
import Nav from '@/components/nav/Nav.vue'
|
||||
// 页脚信息
|
||||
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
||||
// 全局搜索
|
||||
import search from '@/components/search/search.vue'
|
||||
export default {
|
||||
name: 'index',
|
||||
components: {
|
||||
Navs: Nav,
|
||||
FooterInfors: FooterInfor,
|
||||
search: search
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
imgurl: {
|
||||
pos: require('../../../static/company/posweizhi.png'),
|
||||
list1: require('../../../static/dataList/list1.png')
|
||||
},
|
||||
// 咨询列表数据
|
||||
dataLists: [
|
||||
{
|
||||
title: '五大行入局区块链，区块链革命正在到来',
|
||||
content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
|
||||
url: require('../../../static/dataList/list1.png')
|
||||
},
|
||||
{
|
||||
title: '五大行入局区块链，区块链革命正在到来',
|
||||
content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
|
||||
url: require('../../../static/dataList/list1.png')
|
||||
},
|
||||
{
|
||||
title: '五大行入局区块链，区块链革命正在到来',
|
||||
content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
|
||||
url: require('../../../static/dataList/list1.png')
|
||||
},
|
||||
{
|
||||
title: '五大行入局区块链，区块链革命正在到来',
|
||||
content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
|
||||
url: require('../../../static/dataList/list1.png')
|
||||
},
|
||||
{
|
||||
title: '五大行入局区块链，区块链革命正在到来',
|
||||
content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
|
||||
url: require('../../../static/dataList/list1.png')
|
||||
}
|
||||
],
|
||||
// 分页配置
|
||||
pageConfiguration: {
|
||||
// 每页显示条数
|
||||
oneSize: 5,
|
||||
// 数据总条数
|
||||
countSize: 36,
|
||||
// 总页数
|
||||
countPage: 1
|
||||
},
|
||||
// 24小时热闻数据
|
||||
twentyFourtimeData: [
|
||||
{
|
||||
url: require('../../../static/index/timeLZ.png'),
|
||||
title: '这是标题',
|
||||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||||
},
|
||||
{
|
||||
url: require('../../../static/index/timeLZ.png'),
|
||||
title: '这是标题',
|
||||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||||
},
|
||||
{
|
||||
url: require('../../../static/index/timeLZ.png'),
|
||||
title: '这是标题',
|
||||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||||
},
|
||||
{
|
||||
url: require('../../../static/index/timeLZ.png'),
|
||||
title: '这是标题',
|
||||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||||
},
|
||||
{
|
||||
url: require('../../../static/index/timeLZ.png'),
|
||||
title: '这是标题',
|
||||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||||
}
|
||||
],
|
||||
// 资讯数据
|
||||
articleDetails: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (tab, event) {
|
||||
console.log(tab, event)
|
||||
},
|
||||
// 查看详情
|
||||
watchDetails () {
|
||||
this.$router.push({
|
||||
path: '/listDetails'
|
||||
})
|
||||
},
|
||||
// 24小时热闻
|
||||
hotArticle () {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'index/index/hot-article',
|
||||
params: {
|
||||
}
|
||||
}).then(res => {
|
||||
// console.log(res, '24小时热闻')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
let arrts = []
|
||||
res.data.data.list.forEach((item, index) => {
|
||||
let objuu = {
|
||||
url: item.thumb,
|
||||
title: item.title,
|
||||
content: item.desc,
|
||||
id: item.id
|
||||
}
|
||||
arrts.push(objuu)
|
||||
})
|
||||
this.twentyFourtimeData = arrts
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
// 咨询详情
|
||||
articleDetail () {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'article/article/article-detail',
|
||||
params: {
|
||||
id: this.$route.query.id
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res, '资讯详情')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
this.articleDetails = res.data.data[0]
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算字符串
|
||||
computedStr () {
|
||||
return (str) => {
|
||||
let Strs = ''
|
||||
str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
|
||||
return Strs
|
||||
}
|
||||
},
|
||||
// 计算附件
|
||||
ComputedFujian () {
|
||||
return (url) => {
|
||||
let splitStrBefore = url.split('/')
|
||||
return splitStrBefore[splitStrBefore.length - 1]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 咨询详情
|
||||
this.articleDetail()
|
||||
// 24小时热闻
|
||||
this.hotArticle()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .content_cont {
|
||||
width: 84.25rem;
|
||||
& > .header {
|
||||
width: 84.25rem;
|
||||
height: 4.25rem;
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
& > .left {
|
||||
// margin-left: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0.125rem;
|
||||
color: #000000;
|
||||
}
|
||||
& > .right {
|
||||
// margin-right: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #8fa3ae;
|
||||
& > img {
|
||||
width: 1rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.45rem;
|
||||
}
|
||||
& > span:nth-child(n + 3):hover {
|
||||
cursor: pointer;
|
||||
color: #52b6e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
// border: 1px solid red;
|
||||
& > .swipersty {
|
||||
width: 100%;
|
||||
height: 33.25rem;
|
||||
}
|
||||
& > .mainCont {
|
||||
// margin-top: 3.125rem;
|
||||
margin-bottom: 3.125rem;
|
||||
width: 100%;
|
||||
// border: 0.0625rem solid red;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
& > .mainCont_left {
|
||||
// border: 0.0625rem solid red;
|
||||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||||
background-color: #fff;
|
||||
width: 55.625rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
& > div {
|
||||
margin: 3.75rem;
|
||||
width: 51.75rem;
|
||||
// height: 23.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 2rem;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
& > .title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > .uploadFJ {
|
||||
width: 96%;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > a {
|
||||
color: #52b6e3;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .mainCont_right {
|
||||
width: 27.375rem;
|
||||
& > .right2 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||||
& > .title {
|
||||
width: 24.875rem;
|
||||
height: 3.75rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0.3125rem;
|
||||
color: #000000;
|
||||
border-bottom: 0.0625rem solid #dbdbdb;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
& > .content {
|
||||
width: 24.875rem;
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 7.625rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
& > img {
|
||||
width: 7.25rem;
|
||||
height: 5.125rem;
|
||||
}
|
||||
& > div {
|
||||
width: 16rem;
|
||||
height: 5.125rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
& > .top {
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
// line-height: 23px;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > .bottom {
|
||||
width: 16rem;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.5rem;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* 省略号在第几行 */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -23,7 +23,13 @@
|
||||
<div :class="{active:staticSelect==='我的收藏'}" @click="clickStic('我的收藏')">我的收藏</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right_title">{{staticSelect}}</div>
|
||||
<div class="right_title">
|
||||
<div class="left">{{staticSelect}}</div>
|
||||
<div class="right" v-if="staticSelect==='我的收藏'&&collect">
|
||||
<input type="text" placeholder="请输入搜索内容" v-model="searchCollect" />
|
||||
<div>搜索</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 基本设置 -->
|
||||
<div class="right_cont_basic" v-if="staticSelect==='基本设置'">
|
||||
<div v-for="(item,index) in cont_basic" :key="index">
|
||||
@@ -39,11 +45,54 @@
|
||||
</div>
|
||||
<div class="contys">
|
||||
<div>{{showPass?password:'********'}}</div>
|
||||
<img :src="showPass?imgurl.openyj:imgurl.closeyj" alt @click="staticUp" />
|
||||
<img :src="showPass?imgurl.closeyj:imgurl.openyj" alt @click="staticUp" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 我的收藏 -->
|
||||
<div class="right_cont_collect" v-if="staticSelect==='我的收藏'"></div>
|
||||
<div class="right_cont_collect" v-if="staticSelect==='我的收藏'">
|
||||
<div class="collect_yes" v-if="collect">
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div>名称</div>
|
||||
<div>所属库</div>
|
||||
<div>创建时间</div>
|
||||
<div>操作</div>
|
||||
</div>
|
||||
<div class="cont">
|
||||
<div v-for="(item,index) in collect" :key="index">
|
||||
<div :title="item.name">
|
||||
<span v-if="!item.staticInput">{{item.name}}</span>
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="item.name"
|
||||
v-model="collectName"
|
||||
v-if="item.staticInput"
|
||||
v-focus="true"
|
||||
@blur="blurUpset"
|
||||
@keyup.enter="blurUpset"
|
||||
/>
|
||||
</div>
|
||||
<div :title="item.database">{{item.database}}</div>
|
||||
<div>{{item.birthTime}}</div>
|
||||
<div class="handle">
|
||||
<div @click="editName(index)">编辑</div>/
|
||||
<div @click="deleteData">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分页 :hide-on-single-page="value"显示隐藏分页-->
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="pageConfiguration.countSize"
|
||||
class="pagination"
|
||||
:page-size="pageConfiguration.oneSize"
|
||||
:hide-on-single-page="true"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<div class="collect_no" v-if="!collect">暂无收藏记录</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -122,18 +171,67 @@ export default {
|
||||
}
|
||||
],
|
||||
// 密码
|
||||
password: '1234567890',
|
||||
password: localStorage.getItem('userPwd'),
|
||||
// 密码显示状态
|
||||
showPass: false,
|
||||
// 设置密码窗口状态
|
||||
showWinStatic: false,
|
||||
userpwd: '',
|
||||
userpwdQR: ''
|
||||
userpwdQR: '',
|
||||
// 收藏搜索
|
||||
searchCollect: '',
|
||||
// 收藏列表数据
|
||||
collect: [
|
||||
{
|
||||
name: '发的货接口的话接口io福达合金你接口撒环能科技河南地方撒即可',
|
||||
database: '月度数据发的货接口的话接口io福达合金你接口撒环能科技河南地方撒即可',
|
||||
birthTime: '2019-09-18',
|
||||
staticInput: false
|
||||
},
|
||||
{
|
||||
name: '1',
|
||||
database: '月度数据',
|
||||
birthTime: '2019-09-18',
|
||||
staticInput: false
|
||||
},
|
||||
{
|
||||
name: '1',
|
||||
database: '月度数据',
|
||||
birthTime: '2019-09-18',
|
||||
staticInput: false
|
||||
},
|
||||
{
|
||||
name: '1',
|
||||
database: '月度数据',
|
||||
birthTime: '2019-09-18',
|
||||
staticInput: false
|
||||
},
|
||||
{
|
||||
name: '1',
|
||||
database: '月度数据',
|
||||
birthTime: '2019-09-18',
|
||||
staticInput: false
|
||||
}
|
||||
],
|
||||
// 我的收藏名称
|
||||
collectName: '',
|
||||
// 分页配置
|
||||
pageConfiguration: {
|
||||
// 每页显示条数
|
||||
oneSize: 5,
|
||||
// 数据总条数
|
||||
countSize: 36,
|
||||
// 总页数
|
||||
countPage: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickStic (sta) {
|
||||
this.staticSelect = sta
|
||||
if (this.staticSelect === '我的收藏') {
|
||||
this.getCollectData()
|
||||
}
|
||||
},
|
||||
staticUp () {
|
||||
this.showPass = !this.showPass
|
||||
@@ -150,7 +248,23 @@ export default {
|
||||
alert('密码与确认密码不一致！')
|
||||
} else {
|
||||
// 调接口判断密码是否输入正确,改变登录状态
|
||||
this.showWinStatic = !this.showWinStatic
|
||||
this.$axios({
|
||||
method: 'POST',
|
||||
url: 'member/index/change-pwd',
|
||||
data: {
|
||||
'password_hash': this.userpwd,
|
||||
password: this.userpwdQR
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
// 请求接口完成 请求成功
|
||||
alert(res.data.message)
|
||||
if (res.data.code === 200) {
|
||||
this.showWinStatic = !this.showWinStatic
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.showWinStatic = !this.showWinStatic
|
||||
@@ -159,6 +273,61 @@ export default {
|
||||
// 修改
|
||||
updata () {
|
||||
this.showWinStatic = !this.showWinStatic
|
||||
},
|
||||
// 编辑名称
|
||||
editName (indexs) {
|
||||
this.collect.forEach((item, index) => {
|
||||
index === indexs ? (item.staticInput = true) : (item.staticInput = false)
|
||||
})
|
||||
},
|
||||
// 文本框失去焦点或者回车enter
|
||||
blurUpset () {
|
||||
console.log('文本框失去焦点')
|
||||
// 调用接口修改数据
|
||||
this.collect.forEach((item, index) => {
|
||||
item.staticInput = false
|
||||
})
|
||||
},
|
||||
// 删除收藏数据
|
||||
deleteData () {
|
||||
// 调用接口删除数据
|
||||
},
|
||||
// 获取收藏数据
|
||||
getCollectData () {
|
||||
// 调接口获取数据
|
||||
console.log(this.pageConfiguration.countPage)
|
||||
},
|
||||
// 获取个人中心数据
|
||||
getPersonalCenter () {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'member/index/basic-setup',
|
||||
params: {}
|
||||
}).then(res => {
|
||||
console.log(res, 12569)
|
||||
// 请求接口完成 请求成功
|
||||
// alert(res.data.message)
|
||||
if (res.data.code === 200) {
|
||||
this.cont_basic[0].values = res.data.data.username
|
||||
this.cont_basic[1].values = res.data.data.email
|
||||
this.cont_basic[2].values = res.data.data.company_dept
|
||||
this.cont_basic[3].values = res.data.data.company_name
|
||||
this.cont_basic[4].values = res.data.data.company_addr
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 自定义指令v-*
|
||||
directives: {
|
||||
focus: {
|
||||
inserted: function (el, { value }) {
|
||||
// console.log(el, { value })
|
||||
if (value) {
|
||||
el.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -170,6 +339,9 @@ export default {
|
||||
return Strs
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getPersonalCenter()
|
||||
}
|
||||
|
||||
}
|
||||
@@ -315,7 +487,7 @@ export default {
|
||||
& > .cont_content {
|
||||
margin-bottom: 1.875rem;
|
||||
width: 84.25rem;
|
||||
border: 0.0625rem solid red;
|
||||
// border: 0.0625rem solid red;
|
||||
& > .header {
|
||||
width: 84.25rem;
|
||||
height: 4.25rem;
|
||||
@@ -366,7 +538,7 @@ export default {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
border: 1px solid red;
|
||||
// border: 1px solid red;
|
||||
border-right: 0.125rem solid #dbdbdb;
|
||||
& > div {
|
||||
width: 14.875rem;
|
||||
@@ -391,16 +563,56 @@ export default {
|
||||
}
|
||||
}
|
||||
& > .right {
|
||||
margin-left: 7.5rem;
|
||||
width: 100%;
|
||||
// margin-left: 7.5rem;
|
||||
height: 30.625rem;
|
||||
& > .right_title {
|
||||
margin-left: 7.5rem;
|
||||
width: 53.875rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 2.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
& > .right {
|
||||
width: 16rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > input {
|
||||
width: 10.75rem;
|
||||
height: 2.25rem;
|
||||
border-radius: 0.3125rem;
|
||||
border: solid 0.125rem #dbdbdb;
|
||||
}
|
||||
& > div {
|
||||
width: 3.625rem;
|
||||
height: 2.25rem;
|
||||
background-color: #52b6e3;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
// line-height: 39px;
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .right_cont_basic {
|
||||
margin-left: 7.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
@@ -424,7 +636,7 @@ export default {
|
||||
color: #333333;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
border: 1px solid red;
|
||||
// border: 1px solid red;
|
||||
width: 38.75rem;
|
||||
height: 4.375rem;
|
||||
display: flex;
|
||||
@@ -441,6 +653,7 @@ export default {
|
||||
}
|
||||
}
|
||||
& > .right_cont_fafety {
|
||||
margin-left: 7.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
@@ -494,6 +707,127 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .right_cont_collect {
|
||||
margin-top: 1.625rem;
|
||||
margin-left: calc((100% - 61.75rem) / 2);
|
||||
width: 61.75rem;
|
||||
// border: 1px solid red;
|
||||
& > .collect_yes {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .content {
|
||||
width: 100%;
|
||||
& > .header {
|
||||
width: 100%;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 1.375rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
border-bottom: 0.0625rem solid #bdbdbd;
|
||||
& > div:nth-child(1) {
|
||||
width: 18rem;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
& > div:nth-child(n + 2) {
|
||||
width: 12rem;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
& > .cont {
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 1.375rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > div:nth-child(1) {
|
||||
width: 18rem;
|
||||
// border: 1px solid red;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1; /* 省略号在第几行 */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1; /* 省略号在第几行 */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
& > div:nth-child(n + 2) {
|
||||
width: 12rem;
|
||||
}
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > .handle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > div {
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
color: #52b6e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > div:nth-last-child(n + 2) {
|
||||
border-bottom: 0.0625rem solid #bdbdbd;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .pagination {
|
||||
margin-top: 2.285rem;
|
||||
}
|
||||
}
|
||||
& > .collect_no {
|
||||
width: 100%;
|
||||
height: 24rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #bdbdbd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
227
src/views/register/Register.vue
Normal file
227
src/views/register/Register.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="register">
|
||||
<!-- 首页导航 -->
|
||||
<Navs></Navs>
|
||||
<section class="register_cont">
|
||||
<!-- 全局搜索 -->
|
||||
<search></search>
|
||||
<div class="register_main">
|
||||
<div class="title">个人用户注册</div>
|
||||
<div>
|
||||
<div>用户名称</div>
|
||||
<input type="text" placeholder="请输入您的真实姓名" v-model="registerData.username" />
|
||||
</div>
|
||||
<div>
|
||||
<div>电话号码</div>
|
||||
<input type="text" placeholder="请输入手机号或座机号" v-model="registerData.userIphone" />
|
||||
</div>
|
||||
<div>
|
||||
<div>邮箱地址</div>
|
||||
<input type="text" placeholder="请输入邮箱" v-model="registerData.userMail" />
|
||||
</div>
|
||||
<div>
|
||||
<div>设置密码</div>
|
||||
<input type="text" placeholder="请输入密码" v-model="registerData.password" />
|
||||
</div>
|
||||
<div>
|
||||
<div>确认密码</div>
|
||||
<input type="text" placeholder="请重新输入密码" v-model="registerData.passwordQR" />
|
||||
</div>
|
||||
<div>
|
||||
<div>机构名称</div>
|
||||
<input type="text" placeholder="请输入机构名称" v-model="registerData.organizationName" />
|
||||
</div>
|
||||
<div>
|
||||
<div>机构地址</div>
|
||||
<textarea placeholder="请输入机构地址" v-model="registerData.organizationSite"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<div>所属部门</div>
|
||||
<input type="text" placeholder="请输入所属部门" v-model="registerData.department" />
|
||||
</div>
|
||||
<div class="affirm" @click="registerD">立即注册</div>
|
||||
<div class="affirmtext">
|
||||
点击“立即注册”，即表示您同意并愿意遵守
|
||||
<span @click="$router.push({path:'/userAgreement'})">用户协议</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 页脚信息 -->
|
||||
<FooterInfors></FooterInfors>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 导航
|
||||
import Nav from '@/components/nav/Nav.vue'
|
||||
// 页脚信息
|
||||
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
||||
// 全局搜索
|
||||
import search from '@/components/search/search.vue'
|
||||
export default {
|
||||
name: 'register',
|
||||
components: {
|
||||
Navs: Nav,
|
||||
FooterInfors: FooterInfor,
|
||||
search: search
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
registerData: {
|
||||
username: '',
|
||||
userIphone: '',
|
||||
userMail: '',
|
||||
password: '',
|
||||
passwordQR: '',
|
||||
organizationName: '',
|
||||
organizationSite: '',
|
||||
department: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 立即注册
|
||||
registerD () {
|
||||
if (this.registerData.username === '') {
|
||||
alert('用户名称不能为空！')
|
||||
} else if (this.registerData.userIphone === '') {
|
||||
alert('电话号码不能为空！')
|
||||
} else if (this.registerData.userMail === '') {
|
||||
alert('邮箱地址不能为空！')
|
||||
} else if (this.registerData.password === '') {
|
||||
alert('设置密码不能为空！')
|
||||
} else if (this.registerData.passwordQR === '') {
|
||||
alert('确认密码不能为空！')
|
||||
} else if (this.registerData.organizationName === '') {
|
||||
alert('机构名称不能为空！')
|
||||
} else if (this.registerData.organizationSite === '') {
|
||||
alert('机构地址不能为空！')
|
||||
} else if (this.registerData.department === '') {
|
||||
alert('所属部门不能为空！')
|
||||
} else if (!(/^1[3456789]\d{9}$/.test(this.registerData.userIphone))) { // 验证手机号
|
||||
alert('您输入的手机号码有误！')
|
||||
} else if (!(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(this.registerData.userMail))) { // 验证邮箱
|
||||
alert('您输入的邮箱地址有误！')
|
||||
} else if (this.registerData.password !== this.registerData.passwordQR) {
|
||||
alert('您输入的设置密码与确认密码不一致！')
|
||||
} else {
|
||||
this.$axios({
|
||||
method: 'POST',
|
||||
url: 'member/index/register',
|
||||
data: {
|
||||
username: this.registerData.username,
|
||||
phone: this.registerData.userIphone,
|
||||
email: this.registerData.userMail,
|
||||
password_hash: this.registerData.password,
|
||||
password: this.registerData.passwordQR,
|
||||
company_name: this.registerData.organizationName,
|
||||
company_addr: this.registerData.organizationSite,
|
||||
company_dept: this.registerData.department
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
// 请求接口完成注册 请求成功
|
||||
alert(res.data.message)
|
||||
if (res.data.code === 200) {
|
||||
this.$router.push({ path: '/' })
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.register_cont {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .register_main {
|
||||
margin-bottom: 1.5rem;
|
||||
width: 84.25rem;
|
||||
background-color: #fff;
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > .title {
|
||||
margin-top: 1.375rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #000000;
|
||||
}
|
||||
& > div:nth-child(n + 2) {
|
||||
height: 5.625rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > div {
|
||||
margin-right: 2.75rem;
|
||||
font-size: 1.375rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > input {
|
||||
width: 23.375rem;
|
||||
height: 2.875rem;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #999999;
|
||||
}
|
||||
& > textarea {
|
||||
width: 23.375rem;
|
||||
height: 5.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
& > .affirm {
|
||||
margin-top: 1.5rem;
|
||||
width: 31.875rem;
|
||||
height: 2.875rem !important;
|
||||
background-color: #34b1f1;
|
||||
border-radius: 3.5rem;
|
||||
// border: 1px solid red;
|
||||
font-size: 1.375rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center !important;
|
||||
align-items: center;
|
||||
}
|
||||
& > .affirm:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > .affirmtext {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #000000;
|
||||
& > span {
|
||||
color: #005ba5;
|
||||
}
|
||||
& > span:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="relation">
|
||||
<div class="relation" ref="gdSum">
|
||||
<!-- 首页导航 -->
|
||||
<Navs></Navs>
|
||||
<div class="relation_cont">
|
||||
@@ -22,7 +22,7 @@
|
||||
</div>
|
||||
<input type="text" placeholder="标题*" v-model="leave.title" />
|
||||
<textarea v-model="leave.cont" placeholder="留言内容*"></textarea>
|
||||
<div class="sub">提交</div>
|
||||
<div class="sub" @click="upoloadMessage">提交</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="contactWay">联系方式</div>
|
||||
@@ -51,6 +51,11 @@
|
||||
|
||||
<!-- 页脚信息 -->
|
||||
<FooterInfors></FooterInfors>
|
||||
<!-- 置顶 -->
|
||||
<!-- <div class="relationZD" @click="relationZDs">
|
||||
<img :src="imgurl.zhiding" alt />
|
||||
</div>-->
|
||||
<backTop v-back-top v-scroll-show="isBackShow" :isShow="isBackShow"></backTop>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -58,16 +63,20 @@
|
||||
import Nav from '@/components/nav/Nav.vue'
|
||||
// 页脚信息
|
||||
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
||||
// 置顶
|
||||
import backTop from '@/components/backTop/BackTop.vue'
|
||||
export default {
|
||||
name: 'relation',
|
||||
components: {
|
||||
Navs: Nav,
|
||||
FooterInfors: FooterInfor
|
||||
FooterInfors: FooterInfor,
|
||||
backTop: backTop
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
imgurl: {
|
||||
pos: require('../../../static/company/posweizhi.png')
|
||||
pos: require('../../../static/company/posweizhi.png'),
|
||||
zhiding: require('../../../static/relation/zhiding.png')
|
||||
},
|
||||
leave: {
|
||||
name: '',
|
||||
@@ -95,13 +104,119 @@ export default {
|
||||
iphone: '000-12345678',
|
||||
site: '北京市西城区月坛南街57号'
|
||||
}
|
||||
]
|
||||
],
|
||||
// 置顶
|
||||
isBackShow: { value: 200 }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
relationZDs (e) {
|
||||
setTimeout(() => {
|
||||
window.scrollTo(0, 0)
|
||||
}, 2000)
|
||||
},
|
||||
// 联系方式
|
||||
getContact () {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'aboutus/about-us/contact',
|
||||
params: {}
|
||||
}).then(res => {
|
||||
// console.log(res, '可联系方式')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
let arrts = []
|
||||
res.data.data.list.forEach((item, index) => {
|
||||
let srtAs = {
|
||||
region: item.area,
|
||||
name: item.name,
|
||||
iphone: item.tel,
|
||||
site: item.address
|
||||
}
|
||||
arrts.push(srtAs)
|
||||
})
|
||||
this.relationData = arrts
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
// 留言板
|
||||
upoloadMessage () {
|
||||
if (this.leave.name === '') {
|
||||
alert('姓名不能为空！')
|
||||
} else if (this.leave.mail === '') {
|
||||
alert('邮箱不能为空！')
|
||||
} else if (this.leave.iphone === '') {
|
||||
alert('电话号码不能为空！')
|
||||
} else if (this.leave.title === '') {
|
||||
alert('标题不能为空！')
|
||||
} else if (this.leave.cont === '') {
|
||||
alert('留言内容不能为空！')
|
||||
} else if (!(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(this.leave.mail))) {
|
||||
alert('您输入的邮箱地址不正确，请重新填写！')
|
||||
} else if (!(/^1[3456789]\d{9}$/.test(this.leave.iphone))) {
|
||||
alert('您输入的电话号码不正确，请重新填写！')
|
||||
} else {
|
||||
this.$axios({
|
||||
method: 'POST',
|
||||
url: 'aboutus/about-us/message',
|
||||
data: {
|
||||
name: this.leave.name,
|
||||
email: this.leave.mail,
|
||||
tel: this.leave.iphone,
|
||||
title: this.leave.title,
|
||||
message: this.leave.cont
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res, '留言板')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
alert(res.data.message)
|
||||
this.leave.name = ''
|
||||
this.leave.mail = ''
|
||||
this.leave.iphone = ''
|
||||
this.leave.title = ''
|
||||
this.leave.cont = ''
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getContact()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
textarea {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
// 置顶
|
||||
.relationZD {
|
||||
position: fixed;
|
||||
right: 7.5rem;
|
||||
bottom: 7.5rem;
|
||||
width: 3.375rem;
|
||||
height: 3.375rem;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rem 0.125rem 0.125rem 0rem rgba(237, 237, 237, 0.4);
|
||||
border-radius: 0.3125rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > img {
|
||||
width: 1.375rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
}
|
||||
.relation_cont {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -240,7 +355,7 @@ export default {
|
||||
color: #000000;
|
||||
}
|
||||
& > .contactWay_cont {
|
||||
margin-bottom:2.375rem;
|
||||
margin-bottom: 2.375rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
448
src/views/searchList/SearchList.vue
Normal file
448
src/views/searchList/SearchList.vue
Normal file
@@ -0,0 +1,448 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 首页导航 -->
|
||||
<Navs></Navs>
|
||||
<!-- content -->
|
||||
<section class="content">
|
||||
<!-- 全局搜索 -->
|
||||
<search></search>
|
||||
<div class="content_cont">
|
||||
<!-- 主内容 -->
|
||||
<div class="mainCont">
|
||||
<div class="mainCont_content">
|
||||
<div class="header">
|
||||
<div class="left">相关搜索约为 {{pageConfiguration.countSize}} 条</div>
|
||||
<div class="right">
|
||||
<span>筛选栏目：</span>
|
||||
<cityPicker
|
||||
:level="jishu"
|
||||
:selectpattern="selectpattern"
|
||||
:city-data="cityData"
|
||||
:default-city="cityDefaultName"
|
||||
@choice-caller="choiceCaller"
|
||||
></cityPicker>
|
||||
<span @click="getSearchData(pageConfiguration.nowPage)">刷新</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_bia" v-if="pageConfiguration.countSize!==0">
|
||||
<div class="title">
|
||||
<div>ID</div>
|
||||
<div>name</div>
|
||||
<div>分类名称</div>
|
||||
<div>所属栏目</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div v-for="(item,index) in searchData" :key="index">
|
||||
<div>{{item.id}}</div>
|
||||
<div>{{item.name}}</div>
|
||||
<div>{{item.className}}</div>
|
||||
<div>{{item.lmss}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分页 :hide-on-single-page="value"显示隐藏分页-->
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="pageConfiguration.countSize"
|
||||
class="pagination"
|
||||
:page-size="pageConfiguration.oneSize"
|
||||
:hide-on-single-page="true"
|
||||
@prev-click="prevClick"
|
||||
@next-click="nextClick"
|
||||
@current-change="currentChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<div v-if="pageConfiguration.countSize===0" style="height:20rem;width:100%;display:flex;align-items:center;justify-content:center;font-size:1.56rem;">哎呦，没有搜到结果呦！再试一遍吧！</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 页脚信息 -->
|
||||
<FooterInfors></FooterInfors>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导航
|
||||
import Nav from '@/components/nav/Nav.vue'
|
||||
// 页脚信息
|
||||
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
||||
// 全局搜索
|
||||
import search from '@/components/search/search.vue'
|
||||
// 引入下拉组件
|
||||
import cityPicker from '@/components/cityPicker/CityPicker.vue'
|
||||
export default {
|
||||
name: 'index',
|
||||
components: {
|
||||
Navs: Nav,
|
||||
FooterInfors: FooterInfor,
|
||||
search: search,
|
||||
cityPicker: cityPicker
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
imgurl: {
|
||||
list1: require('../../../static/dataList/list1.png')
|
||||
},
|
||||
// 栏目数据 结构不可变
|
||||
cityData: [
|
||||
{ 'id': '110000', 'name': '年度数据', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '季度数据', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '月度数据', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '-全部-', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
|
||||
],
|
||||
// 栏目级数
|
||||
jishu: 1,
|
||||
// 默认显示栏目
|
||||
cityDefaultName: '-全部-',
|
||||
// 筛选数据
|
||||
selectpattern: [
|
||||
{
|
||||
field: 'userProvinceId',
|
||||
placeholder: '-全部-'
|
||||
}
|
||||
],
|
||||
// 搜索到的数据
|
||||
searchData: [
|
||||
{ id: 1, name: '张三', className: 'table1', lmss: '年度数据' },
|
||||
{ id: 2, name: '张三', className: 'table1', lmss: '年度数据' },
|
||||
{ id: 3, name: '张三', className: 'table1', lmss: '年度数据' },
|
||||
{ id: 4, name: '张三', className: 'table1', lmss: '年度数据' },
|
||||
{ id: 5, name: '张三', className: 'table1', lmss: '年度数据' },
|
||||
{ id: 6, name: '张三', className: 'table1', lmss: '年度数据' },
|
||||
{ id: 7, name: '张三', className: 'table1', lmss: '年度数据' },
|
||||
{ id: 8, name: '张三', className: 'table1', lmss: '年度数据' }
|
||||
],
|
||||
// 分页
|
||||
// 分页配置
|
||||
pageConfiguration: {
|
||||
// 每页显示条数
|
||||
oneSize: 2,
|
||||
// 数据总条数
|
||||
countSize: null,
|
||||
// 总页数
|
||||
countPage: 1,
|
||||
// 当前页数
|
||||
nowPage: 1
|
||||
},
|
||||
// 筛选栏目type
|
||||
selectLMType: '',
|
||||
// 筛选栏目id
|
||||
selectLMId: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 自动运行
|
||||
dfyu () {
|
||||
const products = [
|
||||
{
|
||||
id: 'p1',
|
||||
items: [
|
||||
{
|
||||
id: '03',
|
||||
name: [
|
||||
{
|
||||
id: '02',
|
||||
name: 'samsung'
|
||||
},
|
||||
{
|
||||
id: '04',
|
||||
name: 'samsung'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'p2',
|
||||
itemss: [
|
||||
{
|
||||
id: '06',
|
||||
name: [
|
||||
{
|
||||
id: '03',
|
||||
name: 'samsung'
|
||||
},
|
||||
{
|
||||
id: '05',
|
||||
name: 'samsung'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
var tsy = products.find(product => product.items.some(item => item.name.some(list => list.id === '04')))
|
||||
console.log(tsy)
|
||||
// console.log(Object.keys(gh))
|
||||
// Object.keys(gh).forEach((item, index) => {
|
||||
// console.log(item)
|
||||
// })
|
||||
},
|
||||
// 被选中时触发
|
||||
choiceCaller (resu) {
|
||||
console.log(resu, '触发')
|
||||
console.log(resu[1], 'resu[1]')
|
||||
/* eslint-disable */
|
||||
resu[0] === '-全部-' ? (this.selectLMType = '', this.selectLMId = '') : (this.selectLMType = resu[2].type, this.selectLMId = resu[2].id)
|
||||
console.log(this.selectLMType, this.selectLMId)
|
||||
},
|
||||
// 获取搜索到的数据、
|
||||
getSearchData(page) {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'search/search/list',
|
||||
params: {
|
||||
key: this.$route.query.keyVal,
|
||||
limit: 2,
|
||||
page: page,
|
||||
type: this.selectLMType,
|
||||
id: this.selectLMId
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res, '全局搜索数据')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
let arrts = []
|
||||
res.data.data.list.forEach((item, index) => {
|
||||
// console.log(item)
|
||||
let srtAs = { id: item.id, name: item.name, className: item.cname, lmss: item.classify }
|
||||
arrts.push(srtAs)
|
||||
})
|
||||
this.searchData = arrts
|
||||
this.pageConfiguration.countSize = parseInt(res.data.data.total)
|
||||
console.log(this.pageConfiguration)
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
// 获取筛选栏目
|
||||
getScreening() {
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'search/search/screening',
|
||||
params: {
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res, '筛选栏目')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
let arrts = []
|
||||
res.data.data.list.forEach((item, index) => {
|
||||
// console.log(item)
|
||||
let srtAs = { 'id': item.id, 'name': item.name + (item.type === 2 ? ' (地区)' : ' (非地区)'), 'parentId': '100000', 'shortName': '北京', 'cityCode': '', type: item.type }
|
||||
arrts.push(srtAs)
|
||||
})
|
||||
arrts.push({ 'id': '-全部-', 'name': '-全部-', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' })
|
||||
this.cityData = arrts
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
})
|
||||
},
|
||||
// 点击上一页
|
||||
prevClick() {
|
||||
this.pageConfiguration.nowPage--
|
||||
this.getSearchData(this.pageConfiguration.nowPage)
|
||||
},
|
||||
// 点击下一页
|
||||
nextClick() {
|
||||
this.pageConfiguration.nowPage++
|
||||
this.getSearchData(this.pageConfiguration.nowPage)
|
||||
},
|
||||
currentChange(ev) {
|
||||
this.pageConfiguration.nowPage = ev
|
||||
this.getSearchData(this.pageConfiguration.nowPage)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算字符串
|
||||
computedStr() {
|
||||
return (str) => {
|
||||
let Strs = ''
|
||||
str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
|
||||
return Strs
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.dfyu()
|
||||
// 获取搜索的数据
|
||||
this.getSearchData(1)
|
||||
// 筛选栏目数据
|
||||
this.getScreening()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
|
||||
& > .content_cont {
|
||||
width: 84.25rem;
|
||||
// border: 1px solid red;
|
||||
& > .swipersty {
|
||||
width: 100%;
|
||||
height: 33.25rem;
|
||||
}
|
||||
& > .mainCont {
|
||||
// margin-top: 3.125rem;
|
||||
// margin-bottom: 3.125rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
background-color: #fff;
|
||||
& > .mainCont_content {
|
||||
// border: 0.0625rem solid red;
|
||||
// box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||||
background-color: #fff;
|
||||
width: 84.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .header {
|
||||
width: 84.25rem;
|
||||
height: 4.25rem;
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
& > .left {
|
||||
// margin-left: 1.5rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
// line-height: 41p;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > .right {
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #8fa3ae;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// border: 0.0625rem solid red;
|
||||
& > span:nth-child(1) {
|
||||
margin: 0 1.5rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: -0.0625rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > span:nth-child(3) {
|
||||
margin: 0 1.5rem;
|
||||
width: 4.375rem;
|
||||
height: 2.5rem;
|
||||
background-color: #52b6e3;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
// line-height: 41px;
|
||||
letter-spacing: -0.0625rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
& > span:nth-child(3):hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .list_bia {
|
||||
// margin-top:.75rem;
|
||||
padding-bottom: 2.5rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .title {
|
||||
width: 100%;
|
||||
height: 4.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: #e4eaec;
|
||||
& > div {
|
||||
width: 21.05125rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.375rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
// line-height: 41px;
|
||||
letter-spacing: -0.0625rem;
|
||||
color: #2d2d2d;
|
||||
}
|
||||
}
|
||||
& > .content {
|
||||
margin-bottom: 2.5rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 4.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > div {
|
||||
width: 25%;
|
||||
height: 4.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: -0.0625rem;
|
||||
color: #666666;
|
||||
border-bottom: 1px solid #e9eeef;
|
||||
border-right: 1px solid #e9eeef;
|
||||
border-left: 1px solid #e9eeef;
|
||||
}
|
||||
& > div:nth-child(n + 2) {
|
||||
border-left: 1px solid #e9eeef;
|
||||
}
|
||||
}
|
||||
& > div:nth-child(2n + 2) {
|
||||
background-color: #f1f7f9;
|
||||
}
|
||||
& > div:nth-child(2n + 1) {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
172
src/views/userAgreement/UserAgreement.vue
Normal file
172
src/views/userAgreement/UserAgreement.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="userAgreement">
|
||||
<!-- 首页导航 -->
|
||||
<Navs></Navs>
|
||||
<section class="userAgreement_cont">
|
||||
<!-- 全局搜索 -->
|
||||
<search></search>
|
||||
<div class="userAgreement_main">
|
||||
<div class="header">
|
||||
<div class="left">用户协议</div>
|
||||
<div class="right">
|
||||
<img :src="imgurl.pos" alt />
|
||||
<span>当前位置：</span>
|
||||
<span @click="$router.push('/')">首页</span>
|
||||
>
|
||||
<span @click="$router.push('/userAgreement')">用户协议</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contents">
|
||||
<div>
|
||||
<div class="title">用户使用协议</div> 本协议是用户与河北知时数据科技有限公司关于使用知时数据平台网络服务所订立的协议，即在用户与河北知时数据科技有限公司之间产生法律效力，成为对双方均具有约束力的法律文件。如用户按照注册页面的提示填写信息、阅读并点击同意本协议，完成全部注册流程，即成为知时数据平台用户，将视同用户已详细阅读并完全理解和同意接受本协议下的所有条款和条件。
|
||||
<br />
|
||||
<div class="smallTile">版权声明</div>1、本数据平台呈现的任何内容，无论数据、图表、商标、设计、文字和任何其他信息，未经特殊说明，其版权均属河北知时数据科技有限公司所有。
|
||||
<br />2、转载或引用本数据平台内容必须是以新闻性或资料性公共免费信息为使用目的的合理、善意引用，转载或引用本数据平台版权所有之内容须注明"来源：知时数据平台"字样。
|
||||
<br />3、转载或引用本数据平台内容不得进行如下活动：
|
||||
<br /> （1）对本数据平台内容原意进行曲解、修改；
|
||||
<br /> （2）损害本网或他人利益；
|
||||
<br /> （3）任何违法行为；
|
||||
<br /> （4）任何可能破坏公共秩序的行为。
|
||||
<br />4、若第三方网站想以任何形式建立链接至本数据平台，必须先取得河北知时数据科技有限公司同意，河北知时数据科技有限公司有权决定是否核准建立此链接。凡从第三方网站建立任何链接至本数据平台，河北知时数据科技有限公司不负责该链接的建立与设置。依此建立的链接，并不构成河北知时数据科技有限公司与该第三方网站有任何形式的合作，亦不构成河北知时数据科技有限公司对该第三方网站的认同。
|
||||
<br />5、对于违反国家有关法律法规，不尊重本数据平台声明的行为，河北知时数据科技有限公司保留采取法律措施，追究其责任的权力。
|
||||
<br />
|
||||
<div class="smallTile">服务变更、中断或终止</div>1、知时数据平台可能会对服务内容进行变更、也可能会中断、终止服务。
|
||||
<br />2、鉴于网络服务的特殊性（包括但不限于服务器的稳定性问题、恶意的网络攻击等行为或知时数据平台无法控制的情形），用户同意知时数据平台有权随时中断或终止部分或全部的服务。
|
||||
<br />3、知时数据平台需要定期或不定期对提供服务的平台或相关设备进行维护、升级或其他目的暂停部分或全部服务，如因此类情况而造成服务在合理时间内的中断，知时数据平台无需为此承担任何责任。
|
||||
<br />4、用户提供个人资料不真实或用户违反法律、政策或违反本使用协议，知时数据平台有权随时中断或终止向用户提供本协议项下的服务而无需对用户或任何第三方承担责任。
|
||||
<br />5、用户同意知时数据平台基于其自行之考虑，包含但不限于缺乏使用，或知时数据平台认为用户已经违反本使用协议，终止用户的账号或本服务的使用（或服务的任何部分），并将用户在本服务内任何内容加以移除并删除。用户同意依本使用协议任何规定提供的服务，无需进行事先通知即可中断或终止。用户承认并同意，知时数据平台可立即关闭或注销用户的账号及删除用户账号中所有相关信息及文件，及/或禁止继续使用前述文件或本服务。此外，用户同意若本服务之使用被中断或终止或用户的账号及相关信息和文件被关闭或注销，知时数据平台对用户或任何第三人均不承担任何责任。
|
||||
<br />6、用户对网络服务的使用承担风险。本服务系统对此不作任何类型的担保，不论是明确的或隐含的。本服务系统不担保服务不会中断，对服务的及时性，安全性，出错发生都不作担保。
|
||||
<br />7、用户理解并同意，知时数据平台会尽力保障用户使用数据的存储安全，但不能就此完全保证，包括但不限于以下情形：
|
||||
<br /> （1）知时数据平台有权根据实际情况自行决定用户在知时数据平台上使用数据的最长存储期限和最大存储空间等，用户可自行根据自己的需要备份用户在知时数据平台的使用数据。
|
||||
<br /> （2）由于网络信号不稳定、网络带宽小等原因导致登录、注册、资料同步、内容查看不稳定、收费服务在合理时间内中断的，其风险由用户自行承担。
|
||||
<br /> （3）如果用户删除了知时数据平台账户，我们有权从服务器中永久删除用户的账户数据，且没有义务向用户返还数据。
|
||||
<br />
|
||||
<div class="smallTile">免责声明</div>1、用户在使用本数据平台出现下述相关情况时，河北知时数据科技有限公司对此不承担责任：
|
||||
<br /> （1）任何由数据引起的直接、间接、附带的或因此而导致之衍生性损，包括利润、收入或投资损失；
|
||||
<br /> （2）任何用户信息或个性化设定之时效、删除、传递错误、未予储存或其它任何问题；
|
||||
<br /> （3）任何不可预见性因素导致的损失；
|
||||
<br /> （4）非河北知时数据科技有限公司或提供本服务的第三方所能合理控制的事件，包括互联网传输中断、延迟或数据错误，电讯、网络和电脑病毒，以及通讯设施故障引发的数据失真或不及时等。
|
||||
<br />2、本数据平台引用、摘录或转载来自第三方的内容时，并不表明这些内容代表河北知时数据科技有限公司的观点，其目的只是供访问者交流与参考。
|
||||
<div class="smallTile">隐私保密说明</div>1、河北知时数据科技有限公司可能会根据需要收集用户的相关申请试用信息，以便了解用户的需求，为用户提供更优质的产品和服务。
|
||||
<br />2、河北知时数据科技有限公司尊重并保护所有用户的个人隐私权，用户申请试用的用户名、电子邮件地址等个人资料，非经用户亲自许可或根据相关法律、法规的强制性规定，本数据平台不会泄露给第三方。
|
||||
<div class="smallTile">附则</div>1、本协议未涉及的问题请参见国家有关法律法规，当本协议与国家法律法规冲突时，以国家法律法规为准。
|
||||
<br />2、对本协议的解释、修改及更新权均属于河北知时数据科技有限公司所有。
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 页脚信息 -->
|
||||
<FooterInfors></FooterInfors>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 导航
|
||||
import Nav from '@/components/nav/Nav.vue'
|
||||
// 页脚信息
|
||||
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
||||
// 全局搜索
|
||||
import search from '@/components/search/search.vue'
|
||||
export default {
|
||||
name: 'register',
|
||||
components: {
|
||||
Navs: Nav,
|
||||
FooterInfors: FooterInfor,
|
||||
search: search
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
imgurl: {
|
||||
pos: require('../../../static/company/posweizhi.png')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.userAgreement_cont {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .userAgreement_main {
|
||||
margin-bottom: 1.5rem;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > .header {
|
||||
width: 84.25rem;
|
||||
height: 4.25rem;
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
& > .left {
|
||||
// margin-left: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0.125rem;
|
||||
color: #000000;
|
||||
}
|
||||
& > .right {
|
||||
// margin-right: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #8fa3ae;
|
||||
& > img {
|
||||
width: 1rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.45rem;
|
||||
}
|
||||
& > span:nth-child(n + 3):hover {
|
||||
cursor: pointer;
|
||||
color: #52b6e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .contents {
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
// line-height: 32px;
|
||||
// letter-spacing: 0.01rem;
|
||||
color: #333333;
|
||||
& > div {
|
||||
width: 84.25rem;
|
||||
& > .title {
|
||||
height: 7.25rem;
|
||||
font-size: 1.875rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > .smallTile {
|
||||
margin: 0.5625rem 0;
|
||||
font-size: 1.375rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
// line-height: 32px;
|
||||
letter-spacing: 0rem;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
static/chartsCut/bingtu.png
Normal file
BIN
static/chartsCut/bingtu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
BIN
static/chartsCut/hengzhuangtu.png
Normal file
BIN
static/chartsCut/hengzhuangtu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 720 B |
BIN
static/chartsCut/list.png
Normal file
BIN
static/chartsCut/list.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 592 B |
BIN
static/chartsCut/shuzhuangtu.png
Normal file
BIN
static/chartsCut/shuzhuangtu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 537 B |
BIN
static/chartsCut/zhexiantu.png
Normal file
BIN
static/chartsCut/zhexiantu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/chatCont/zhibiaojieshi.png
Normal file
BIN
static/chatCont/zhibiaojieshi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/data/bbgl.png
Normal file
BIN
static/data/bbgl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 604 B |
BIN
static/data/dcexcel.png
Normal file
BIN
static/data/dcexcel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
BIN
static/data/gjcx.png
Normal file
BIN
static/data/gjcx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 804 B |
BIN
static/data/jdcx.png
Normal file
BIN
static/data/jdcx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 815 B |
BIN
static/data/sjdt.png
Normal file
BIN
static/data/sjdt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/data/sjgl.png
Normal file
BIN
static/data/sjgl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 424 B |
BIN
static/data/tjsc.png
Normal file
BIN
static/data/tjsc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 B |
BIN
static/data/tz145.png
Normal file
BIN
static/data/tz145.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 525 B |
BIN
static/dataList/list1.png
Normal file
BIN
static/dataList/list1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
static/relation/zhiding.png
Normal file
BIN
static/relation/zhiding.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 602 B |
@@ -47,19 +47,28 @@ module.exports = {
|
||||
// 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置
|
||||
devServer: {
|
||||
open: false, // 运行项目是否自动开启浏览器
|
||||
host: 'localhost', // 真机测试 0.0.0.0
|
||||
host: '0.0.0.0', // 真机测试 0.0.0.0
|
||||
port: '8080',
|
||||
https: false,
|
||||
hotOnly: false, // 是否开启热更新
|
||||
proxy: {
|
||||
// 配置跨域
|
||||
'/api/': {
|
||||
target: 'http://wechatticket.ecooth.com/api',
|
||||
target: 'http://lawpro.earnest.pro/api/',
|
||||
ws: false, // 允许重写
|
||||
changeOrigin: true, // 允许跨域
|
||||
pathRewrite: {
|
||||
'^/api': ''
|
||||
}
|
||||
},
|
||||
// 配置跨域
|
||||
'/v1/': {
|
||||
target: 'http://data.it-blog.wang/api/v1/',
|
||||
ws: false, // 允许重写
|
||||
changeOrigin: true, // 允许跨域
|
||||
pathRewrite: {
|
||||
'^/v1': ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user