fanzhen 1118
This commit is contained in:
fanzhen123
@@ -3,7 +3,7 @@
|
|||||||
ENV = 'development'
|
ENV = 'development'
|
||||||
|
|
||||||
# base api
|
# base api
|
||||||
VUE_APP_BASE_API = '/api/'
|
VUE_APP_BASE_API = '/v1/'
|
||||||
|
|
||||||
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
||||||
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
|
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
|
||||||
|
|||||||
@@ -2,4 +2,4 @@
|
|||||||
ENV = 'production'
|
ENV = 'production'
|
||||||
|
|
||||||
# base api
|
# 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=",
|
"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
|
||||||
"dev": true
|
"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": {
|
"bcrypt-pbkdf": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npm.taobao.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz",
|
"resolved": "https://registry.npm.taobao.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz",
|
||||||
@@ -3559,6 +3564,11 @@
|
|||||||
"integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
|
"integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
|
||||||
"dev": true
|
"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": {
|
"component-emitter": {
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/component-emitter/download/component-emitter-1.3.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/component-emitter/download/component-emitter-1.3.0.tgz",
|
||||||
@@ -4392,6 +4402,11 @@
|
|||||||
"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
|
"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
|
||||||
"dev": true
|
"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": {
|
"decode-uri-component": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/decode-uri-component/download/decode-uri-component-0.2.0.tgz",
|
"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"
|
"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": {
|
"editorconfig": {
|
||||||
"version": "0.15.3",
|
"version": "0.15.3",
|
||||||
"resolved": "https://registry.npm.taobao.org/editorconfig/download/editorconfig-0.15.3.tgz",
|
"resolved": "https://registry.npm.taobao.org/editorconfig/download/editorconfig-0.15.3.tgz",
|
||||||
@@ -4914,6 +4937,14 @@
|
|||||||
"integrity": "sha1-lIctaCMhnygS8uNaLOKn0Dweqj8=",
|
"integrity": "sha1-lIctaCMhnygS8uNaLOKn0Dweqj8=",
|
||||||
"dev": true
|
"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": {
|
"element-ui": {
|
||||||
"version": "2.12.0",
|
"version": "2.12.0",
|
||||||
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.12.0.tgz",
|
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.12.0.tgz",
|
||||||
@@ -5048,6 +5079,11 @@
|
|||||||
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
|
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
|
||||||
"dev": true
|
"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": {
|
"escape-string-regexp": {
|
||||||
"version": "1.0.5",
|
"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",
|
"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=",
|
"integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
|
||||||
"dev": true
|
"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": {
|
"fragment-cache": {
|
||||||
"version": "0.2.1",
|
"version": "0.2.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/fragment-cache/download/fragment-cache-0.2.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/fragment-cache/download/fragment-cache-0.2.1.tgz",
|
||||||
@@ -8430,6 +8471,11 @@
|
|||||||
"handlebars": "^4.0.3"
|
"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": {
|
"javascript-stringify": {
|
||||||
"version": "1.6.0",
|
"version": "1.6.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/javascript-stringify/download/javascript-stringify-1.6.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/javascript-stringify/download/javascript-stringify-1.6.0.tgz",
|
||||||
@@ -10011,6 +10057,21 @@
|
|||||||
"integrity": "sha1-XdaUPJOFSCZwFtTjTwV1gwgMUUw=",
|
"integrity": "sha1-XdaUPJOFSCZwFtTjTwV1gwgMUUw=",
|
||||||
"dev": true
|
"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": {
|
"md5.js": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
"resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
|
"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": {
|
"select-hose": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
|
||||||
@@ -13601,6 +13667,14 @@
|
|||||||
"extend-shallow": "^3.0.0"
|
"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": {
|
"sprintf-js": {
|
||||||
"version": "1.0.3",
|
"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",
|
"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=",
|
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
|
||||||
"dev": true
|
"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": {
|
"tmp": {
|
||||||
"version": "0.0.33",
|
"version": "0.0.33",
|
||||||
"resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",
|
"resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",
|
||||||
@@ -14480,6 +14559,11 @@
|
|||||||
"mime-types": "~2.1.24"
|
"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": {
|
"typedarray": {
|
||||||
"version": "0.0.6",
|
"version": "0.0.6",
|
||||||
"resolved": "https://registry.npm.taobao.org/typedarray/download/typedarray-0.0.6.tgz",
|
"resolved": "https://registry.npm.taobao.org/typedarray/download/typedarray-0.0.6.tgz",
|
||||||
@@ -14810,6 +14894,11 @@
|
|||||||
"swiper": "^4.0.7"
|
"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": {
|
"vue-eslint-parser": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",
|
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",
|
||||||
@@ -15622,6 +15711,11 @@
|
|||||||
"dev": true
|
"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": {
|
"dependencies": {
|
||||||
"axios": "^0.19.0",
|
"axios": "^0.19.0",
|
||||||
"core-js": "^2.6.5",
|
"core-js": "^2.6.5",
|
||||||
|
"echarts": "^4.4.0",
|
||||||
|
"element-resize-detector": "^1.1.15",
|
||||||
"element-ui": "^2.12.0",
|
"element-ui": "^2.12.0",
|
||||||
|
"mathjs": "^6.2.3",
|
||||||
|
"splitpanes": "^2.0.0",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
"vue-awesome-swiper": "^3.1.3",
|
"vue-awesome-swiper": "^3.1.3",
|
||||||
|
"vue-drag-resize": "^1.3.2",
|
||||||
"vue-router": "^3.0.3",
|
"vue-router": "^3.0.3",
|
||||||
"vuex": "^3.0.1"
|
"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 () {
|
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>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.footerInfor {
|
.footerInfor {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
-moz-box-orient: vertical;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
-webkit-justify-content: flex-start;
|
||||||
|
-moz-box-pack: start;
|
||||||
|
-ms-flex-pack: start;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
& > .footer_header {
|
& > .footer_header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #336379;
|
background-color: #336379;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-moz-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
& > .footer_model {
|
& > .footer_model {
|
||||||
padding-top: 3.875rem;
|
padding-top: 3.875rem;
|
||||||
width: 84.25rem;
|
width: 84.25rem;
|
||||||
height: 15.75rem;
|
height: 15.75rem;
|
||||||
// border: 1px solid red;
|
// border: 1px solid red;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
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;
|
justify-content: space-evenly;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
height: 15.75rem;
|
height: 15.75rem;
|
||||||
max-width: 20rem;
|
max-width: 20rem;
|
||||||
|
|
||||||
& > .titleS {
|
& > .titleS {
|
||||||
max-width: 20rem;
|
max-width: 20rem;
|
||||||
margin-bottom: 2.375rem;
|
margin-bottom: 2.375rem;
|
||||||
@@ -116,14 +193,17 @@ export default {
|
|||||||
letter-spacing: 0rem;
|
letter-spacing: 0rem;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
-o-text-overflow: ellipsis;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 1; /* 省略号在第几行 */
|
-webkit-line-clamp: 1;
|
||||||
-webkit-box-orient: vertical;
|
/* 省略号在第几行 */
|
||||||
}
|
}
|
||||||
& > .titleS:hover{
|
|
||||||
|
& > .titleS:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > div:nth-child(n + 2) {
|
& > div:nth-child(n + 2) {
|
||||||
max-width: 20rem;
|
max-width: 20rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
@@ -133,40 +213,73 @@ export default {
|
|||||||
letter-spacing: 0rem;
|
letter-spacing: 0rem;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
-o-text-overflow: ellipsis;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 1; /* 省略号在第几行 */
|
-webkit-line-clamp: 1;
|
||||||
-webkit-box-orient: vertical;
|
/* 省略号在第几行 */
|
||||||
}
|
}
|
||||||
& > div:nth-child(n + 2):hover{
|
|
||||||
|
& > div:nth-child(n + 2):hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > .footer_bottom {
|
& > .footer_bottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-moz-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #19303b;
|
background-color: #19303b;
|
||||||
|
|
||||||
& > .bottom_model {
|
& > .bottom_model {
|
||||||
width: 84.25rem;
|
width: 84.25rem;
|
||||||
height: 6.375rem;
|
height: 6.375rem;
|
||||||
// border: 1px solid red;
|
// border: 1px solid red;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
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;
|
justify-content: space-evenly;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
& > img {
|
& > img {
|
||||||
width: 3.75rem;
|
width: 3.75rem;
|
||||||
height: 3.875rem;
|
height: 3.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > img:last-child {
|
& > img:last-child {
|
||||||
width: 7rem;
|
width: 7rem;
|
||||||
height: 4.6875rem;
|
height: 4.6875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
font-weight: normal;
|
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"
|
v-for="(item,index) in navCont"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="navClick(index,item.url)"
|
@click="navClick(index,item.url)"
|
||||||
|
@mouseenter="navMouseClick(index,item.url,true)"
|
||||||
|
@mouseleave="navMouseClick(index,item.url,false)"
|
||||||
:class="{fontSty:index==1&&colorD}"
|
: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">
|
<div class="dsearch">
|
||||||
<!-- <img :src="imageUrl.search" alt srcset /> -->
|
<!-- <img :src="imageUrl.search" alt srcset /> -->
|
||||||
<!-- 未登录 -->
|
<!-- 未登录 -->
|
||||||
@@ -16,19 +29,17 @@
|
|||||||
<div
|
<div
|
||||||
:class="{loginAfter:true,loginAfters:fontsF}"
|
:class="{loginAfter:true,loginAfters:fontsF}"
|
||||||
v-if="userLogin"
|
v-if="userLogin"
|
||||||
@click="userLoginC()"
|
@mouseenter="userLoginC()"
|
||||||
>{{userName}}</div>
|
@mouseleave="userLoginC()"
|
||||||
</div>
|
>
|
||||||
<!-- 数据二级导航 -->
|
<img :src="userPic" alt srcset />
|
||||||
<div class="dataTwo" v-if="twonav">
|
{{userName}}
|
||||||
<div>月度数据</div>
|
|
||||||
<div>季度数据</div>
|
|
||||||
<div>年度数据</div>
|
|
||||||
</div>
|
|
||||||
<!-- 个人信息二级导航 -->
|
<!-- 个人信息二级导航 -->
|
||||||
<div class="dataTwos" v-if="personalInfo">
|
<div class="dataTwos" v-if="personalInfo">
|
||||||
<div>个人中心</div>
|
<div @click="perspnalCenter">个人中心</div>
|
||||||
<div>退出</div>
|
<div @click="quit">退出</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 登陆窗口 -->
|
<!-- 登陆窗口 -->
|
||||||
@@ -53,7 +64,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div @click="closeLoginWind(true)">确认</div>
|
<div @click="closeLoginWind(true)">确认</div>
|
||||||
<div>
|
<div>
|
||||||
<span>没有账号？去注册</span>
|
<span @click="regirest()">没有账号？去注册</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -78,11 +89,12 @@ export default {
|
|||||||
{ text: '公司介绍', url: '/companyIntroduction' },
|
{ text: '公司介绍', url: '/companyIntroduction' },
|
||||||
{ text: '联系我们', url: '/relation' },
|
{ text: '联系我们', url: '/relation' },
|
||||||
{ text: '个人中心', url: '/personalCenter' },
|
{ text: '个人中心', url: '/personalCenter' },
|
||||||
{ text: '帮助', url: 123 }
|
{ text: '帮助', url: '/help' }
|
||||||
],
|
],
|
||||||
twonav: false,
|
twonav: false,
|
||||||
colorD: false,
|
colorD: false,
|
||||||
userName: '十画.TeFuir',
|
userName: '十画.TeFuir',
|
||||||
|
userPic: '',
|
||||||
// 用户名和登陆的显示隐藏
|
// 用户名和登陆的显示隐藏
|
||||||
userLogin: false,
|
userLogin: false,
|
||||||
personalInfo: false,
|
personalInfo: false,
|
||||||
@@ -101,20 +113,32 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
navClick (indexs, url) {
|
navClick (indexs, url) {
|
||||||
if (indexs === 1) {
|
if (indexs !== 1) {
|
||||||
this.twonav = !this.twonav
|
|
||||||
this.colorD = !this.colorD
|
|
||||||
this.fontsF = false
|
|
||||||
this.personalInfo = false
|
|
||||||
} else {
|
|
||||||
this.twonav = false
|
this.twonav = false
|
||||||
this.colorD = false
|
this.colorD = false
|
||||||
this.fontsF = false
|
this.fontsF = false
|
||||||
this.personalInfo = false
|
this.personalInfo = false
|
||||||
|
if (this.$route.path === url) {
|
||||||
|
this.$router.go(0)
|
||||||
|
} else {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: url
|
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
|
||||||
|
}
|
||||||
},
|
},
|
||||||
userLoginC () {
|
userLoginC () {
|
||||||
this.personalInfo = !this.personalInfo
|
this.personalInfo = !this.personalInfo
|
||||||
@@ -140,7 +164,31 @@ export default {
|
|||||||
alert('验证码输入不正确请重新输入！')
|
alert('验证码输入不正确请重新输入！')
|
||||||
} else {
|
} else {
|
||||||
// 调接口判断密码是否输入正确,改变登录状态
|
// 调接口判断密码是否输入正确,改变登录状态
|
||||||
|
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
|
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 {
|
} else {
|
||||||
this.showWinStatic = !this.showWinStatic
|
this.showWinStatic = !this.showWinStatic
|
||||||
@@ -156,8 +204,72 @@ export default {
|
|||||||
this.imgIdentify = content.join('')
|
this.imgIdentify = content.join('')
|
||||||
console.log(this.imgIdentify)
|
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>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -170,25 +282,65 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: rgba(0, 0, 0, 0.28);
|
background-color: rgba(0, 0, 0, 0.28);
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-moz-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
& > .loginSty_wcont {
|
& > .loginSty_wcont {
|
||||||
width: 37.5rem;
|
width: 37.5rem;
|
||||||
height: 32.6875rem;
|
height: 32.6875rem;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
-moz-box-orient: vertical;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-moz-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
& > .wcont_header {
|
& > .wcont_header {
|
||||||
width: 32.8125rem;
|
width: 32.8125rem;
|
||||||
height: 3.875rem;
|
height: 3.875rem;
|
||||||
border-bottom: 0.0625rem solid #dbdbdb;
|
border-bottom: 0.0625rem solid #dbdbdb;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
-webkit-justify-content: space-between;
|
||||||
|
-moz-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
// po
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
& > div {
|
& > div {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
@@ -210,17 +362,43 @@ export default {
|
|||||||
& > .wcont_content {
|
& > .wcont_content {
|
||||||
width: 30.8125rem;
|
width: 30.8125rem;
|
||||||
height: 26.5rem;
|
height: 26.5rem;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
-moz-box-orient: vertical;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
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;
|
align-items: center;
|
||||||
& > div:nth-last-child(n + 2) {
|
& > div:nth-last-child(n + 2) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3.25rem;
|
height: 3.25rem;
|
||||||
border: 0.0625rem solid #dbdbdb;
|
border: 0.0625rem solid #dbdbdb;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
-webkit-justify-content: flex-start;
|
||||||
|
-moz-box-pack: start;
|
||||||
|
-ms-flex-pack: start;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
& > input {
|
& > input {
|
||||||
width: 21.625rem;
|
width: 21.625rem;
|
||||||
@@ -290,9 +468,22 @@ export default {
|
|||||||
height: 3.1875rem;
|
height: 3.1875rem;
|
||||||
background-color: #52b6e3;
|
background-color: #52b6e3;
|
||||||
border-radius: 0.3125rem;
|
border-radius: 0.3125rem;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
-moz-box-orient: vertical;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-moz-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@@ -307,9 +498,22 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3.1875rem;
|
height: 3.1875rem;
|
||||||
border-radius: 0.3125rem;
|
border-radius: 0.3125rem;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
-moz-box-orient: vertical;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
-webkit-justify-content: flex-start;
|
||||||
|
-moz-box-pack: start;
|
||||||
|
-ms-flex-pack: start;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
-webkit-align-items: flex-end;
|
||||||
|
-moz-box-align: end;
|
||||||
|
-ms-flex-align: end;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@@ -326,23 +530,49 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 5.5rem;
|
height: 5.5rem;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-moz-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color:#fff;
|
background-color: #fff;
|
||||||
& > .navCont {
|
& > .navCont {
|
||||||
position: relative;
|
|
||||||
width: 84.25rem;
|
width: 84.25rem;
|
||||||
height: 5.5rem;
|
height: 5.5rem;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
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;
|
align-items: center;
|
||||||
border: 1px solid black;
|
// border: 1px solid black;
|
||||||
& > .fontSty {
|
& > .fontSty {
|
||||||
color: #52b6e3 !important;
|
color: #52b6e3 !important;
|
||||||
}
|
}
|
||||||
@@ -350,19 +580,36 @@ export default {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #52b6e3;
|
color: #52b6e3;
|
||||||
}
|
}
|
||||||
& > .dataTwo {
|
& > div:nth-child(2) {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.dataTwo {
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
height: 10rem;
|
height: 14rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 3.425rem;
|
top: 1.875rem;
|
||||||
left: 18.825rem;
|
left: -2.5625rem;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background-image: url("../../../static/nav/xl.png");
|
background-image: url("../../../static/nav/xl.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
-o-background-size: 100% 100%;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
-moz-box-orient: vertical;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-moz-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
& > div {
|
& > div {
|
||||||
margin-top: 0.985rem;
|
margin-top: 0.985rem;
|
||||||
@@ -377,32 +624,6 @@ export default {
|
|||||||
color: #52b6e3;
|
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 {
|
& > img {
|
||||||
width: 9.375rem;
|
width: 9.375rem;
|
||||||
height: 3.375rem;
|
height: 3.375rem;
|
||||||
@@ -420,9 +641,21 @@ export default {
|
|||||||
& > .dsearch {
|
& > .dsearch {
|
||||||
margin-left: 8.625rem;
|
margin-left: 8.625rem;
|
||||||
width: 13.25rem;
|
width: 13.25rem;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
-webkit-justify-content: space-around;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
& > img {
|
& > img {
|
||||||
width: 1.75rem;
|
width: 1.75rem;
|
||||||
@@ -438,17 +671,82 @@ export default {
|
|||||||
font-stretch: normal;
|
font-stretch: normal;
|
||||||
letter-spacing: 0rem;
|
letter-spacing: 0rem;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-moz-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
& > .loginAfter {
|
& > .loginAfter {
|
||||||
|
position: relative;
|
||||||
font-size: 1.375rem;
|
font-size: 1.375rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-stretch: normal;
|
font-stretch: normal;
|
||||||
letter-spacing: 0rem;
|
letter-spacing: 0rem;
|
||||||
color: #666666;
|
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 {
|
& > .loginAfter:hover {
|
||||||
color: #52b6e3;
|
color: #52b6e3;
|
||||||
|
|||||||
@@ -1,13 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="searchAll">
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<div class="kuang">
|
<div class="kuang">
|
||||||
<input type="text" v-model="searchContext" placeholder="全站搜索" />
|
<input type="text" v-model="searchContext" placeholder="全站搜索" @keyup.enter="blurUpset" />
|
||||||
<img :src="imgUrl.search" alt />
|
<img :src="imgUrl.search" alt />
|
||||||
</div>
|
</div>
|
||||||
<div class="tjHold">
|
<div class="tjHold">
|
||||||
统计热词
|
统计热词
|
||||||
<div>
|
<div>
|
||||||
<div v-for="(item,index) in hotFont" :key="index">{{item}}</div>
|
<div v-for="(item,index) in hotFont" :key="index" :title="item" @click="blurUpset(item)">{{comHotCi(item)}}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -20,26 +22,129 @@ export default {
|
|||||||
imgUrl: {
|
imgUrl: {
|
||||||
search: require('../../../static/index/search.png')
|
search: require('../../../static/index/search.png')
|
||||||
},
|
},
|
||||||
searchContext: '',
|
searchContext: this.$route.path === '/searchList' ? (this.$route.query.keyVal) : '',
|
||||||
hotFont: ['GDP', 'CPI', '总人口', '社会消费品零售总额', '粮食产量', 'PMI']
|
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>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.search {
|
.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;
|
||||||
|
-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: #f8f8f8 !important;
|
||||||
|
// border:1px solid red;
|
||||||
|
& > .search {
|
||||||
margin: 1.25rem 0;
|
margin: 1.25rem 0;
|
||||||
width: 84.25rem;
|
width: 84.25rem;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
-webkit-justify-content: space-around;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
& > .kuang {
|
& > .kuang {
|
||||||
width: 43.25rem;
|
width: 43.25rem;
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
-webkit-justify-content: space-around;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: 0.125rem solid #414141;
|
border: 0.125rem solid #414141;
|
||||||
border-radius: 0.35rem;
|
border-radius: 0.35rem;
|
||||||
@@ -65,9 +170,22 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > .tjHold {
|
& > .tjHold {
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
-webkit-justify-content: space-between;
|
||||||
|
-moz-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@@ -77,10 +195,25 @@ export default {
|
|||||||
& > div {
|
& > div {
|
||||||
margin-left: 2.25rem;
|
margin-left: 2.25rem;
|
||||||
width: 25.25rem;
|
width: 25.25rem;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
-webkit-justify-content: flex-start;
|
||||||
|
-moz-box-pack: start;
|
||||||
|
-ms-flex-pack: start;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
-webkit-flex-wrap: wrap;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@@ -96,5 +229,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
48
src/main.js
48
src/main.js
@@ -14,11 +14,42 @@ import VueAwesomeSwiper from 'vue-awesome-swiper'
|
|||||||
|
|
||||||
// require styles
|
// require styles
|
||||||
import 'swiper/dist/css/swiper.css'
|
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请求配置
|
// axios请求配置
|
||||||
var root = process.env.VUE_APP_BASE_API
|
var root = process.env.VUE_APP_BASE_API
|
||||||
// console.log(root)
|
// console.log(root)
|
||||||
|
|
||||||
// 请求拦截器
|
// 请求拦截器(前)
|
||||||
axios.interceptors.request.use(config => {
|
axios.interceptors.request.use(config => {
|
||||||
// --请求之前重新拼装url--
|
// --请求之前重新拼装url--
|
||||||
config.url = root + config.url
|
config.url = root + config.url
|
||||||
@@ -30,11 +61,26 @@ axios.interceptors.request.use(config => {
|
|||||||
// config.headers = {
|
// config.headers = {
|
||||||
// 'Authorization': 'hjiujkolololjhgg12569jhjhF'
|
// 'Authorization': 'hjiujkolololjhgg12569jhjhF'
|
||||||
// }
|
// }
|
||||||
|
config.headers = {
|
||||||
|
Authorization: localStorage.getItem('token')
|
||||||
|
}
|
||||||
return config
|
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.$identify = identify.default
|
||||||
Vue.prototype.$axios = axios
|
Vue.prototype.$axios = axios
|
||||||
|
// 引入设置dom元素高度的插件
|
||||||
|
Vue.prototype.$detector = require('element-resize-detector')
|
||||||
|
|
||||||
Vue.use(VueAwesomeSwiper)
|
Vue.use(VueAwesomeSwiper)
|
||||||
Vue.use(ElementUI)
|
Vue.use(ElementUI)
|
||||||
|
|||||||
@@ -11,6 +11,22 @@ import CmpanyIntroduction from '@/views/companyIntroduction/CompanyIntroduction.
|
|||||||
import Relation from '@/views/relation/Relation.vue'
|
import Relation from '@/views/relation/Relation.vue'
|
||||||
// 个人中心
|
// 个人中心
|
||||||
import PersonalCenter from '@/views/personalCenter/PersonalCenter.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)
|
Vue.use(Router)
|
||||||
|
|
||||||
@@ -46,6 +62,46 @@ export default new Router({
|
|||||||
path: '/personalCenter',
|
path: '/personalCenter',
|
||||||
name: 'personalCenter',
|
name: 'personalCenter',
|
||||||
component: 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>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="waterY">
|
||||||
|
<div>CORPORATE</div>
|
||||||
|
<div>CULTURE</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="finashLeft"></div>
|
</div>
|
||||||
|
<div class="finashLeft">
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 页脚信息 -->
|
<!-- 页脚信息 -->
|
||||||
<FooterInfors></FooterInfors>
|
<FooterInfors></FooterInfors>
|
||||||
@@ -102,7 +108,9 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
& > .cont {
|
& > .cont {
|
||||||
|
position: relative;
|
||||||
width: 84.25rem;
|
width: 84.25rem;
|
||||||
// border: 1px solid red;
|
// border: 1px solid red;
|
||||||
background-color: #fff;
|
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 {
|
.finashLeft {
|
||||||
margin-bottom: 1.875rem;
|
padding-bottom: 1.875rem;
|
||||||
|
width: 100%;
|
||||||
|
height: 1.5rem;
|
||||||
|
background-color: #fff;
|
||||||
|
& > div {
|
||||||
width: 42.875rem;
|
width: 42.875rem;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
background-color: #52b6e3;
|
background-color: #52b6e3;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
||||||
@@ -4,12 +4,15 @@
|
|||||||
<Navs></Navs>
|
<Navs></Navs>
|
||||||
<!-- content -->
|
<!-- content -->
|
||||||
<section class="content">
|
<section class="content">
|
||||||
<!-- swiper -->
|
|
||||||
<div class="content_cont">
|
|
||||||
<!-- swiper -->
|
<!-- swiper -->
|
||||||
<swiper :options="swiperOption" class="swipersty">
|
<swiper :options="swiperOption" class="swipersty">
|
||||||
<swiper-slide v-for="(item,index) in bannerLuBo" :key="index">
|
<swiper-slide v-for="(item,index) in bannerLuBo" :key="index">
|
||||||
<img :src="item" alt style="width: 84.25rem;height: 33.25rem;" />
|
<img
|
||||||
|
@click="loctionHref(item.url)"
|
||||||
|
:src="item.img"
|
||||||
|
alt
|
||||||
|
style="width: 100%;height: 33.25rem;cursor:pointer;"
|
||||||
|
/>
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
<div class="swiper-pagination" slot="pagination"></div>
|
<div class="swiper-pagination" slot="pagination"></div>
|
||||||
<div
|
<div
|
||||||
@@ -23,6 +26,7 @@
|
|||||||
:style="{'background-image':'url('+lunboNext+')'}"
|
:style="{'background-image':'url('+lunboNext+')'}"
|
||||||
></div>
|
></div>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
<div class="content_cont">
|
||||||
<!-- 全局搜索 -->
|
<!-- 全局搜索 -->
|
||||||
<search></search>
|
<search></search>
|
||||||
<!-- 主内容 -->
|
<!-- 主内容 -->
|
||||||
@@ -40,7 +44,10 @@
|
|||||||
class="Listpane"
|
class="Listpane"
|
||||||
>
|
>
|
||||||
<div class="ListpaneLeft">
|
<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>
|
||||||
<div class="center"></div>
|
<div class="center"></div>
|
||||||
<div class="ListpaneRight">
|
<div class="ListpaneRight">
|
||||||
@@ -48,7 +55,7 @@
|
|||||||
v-for="(listRight,keyRight) in item.textArrRight"
|
v-for="(listRight,keyRight) in item.textArrRight"
|
||||||
:key="keyRight"
|
:key="keyRight"
|
||||||
class="ListpaneRight"
|
class="ListpaneRight"
|
||||||
>{{listRight}}</div>
|
>{{listRight.name}}</div>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
@@ -91,13 +98,13 @@
|
|||||||
<div class="center">{{item.cont}}</div>
|
<div class="center">{{item.cont}}</div>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<span>{{item.time}}</span>
|
<span>{{item.time}}</span>
|
||||||
<span>查看详情</span>
|
<span @click="$router.push({path:'/listDetails',query:{id:item.id}})">查看详情</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img :src="item.url" alt />
|
<img :src="item.url" alt />
|
||||||
</div>
|
</div>
|
||||||
<div class="moreD">
|
<div class="moreD">
|
||||||
<div>查看更多-></div>
|
<div @click="$router.push('/dataList')">查看更多-></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -108,6 +115,7 @@
|
|||||||
<div v-for="(item,index) in dataUpdata" :key="index">
|
<div v-for="(item,index) in dataUpdata" :key="index">
|
||||||
<div class="up">
|
<div class="up">
|
||||||
{{computedStr(item.title)}}
|
{{computedStr(item.title)}}
|
||||||
|
<!-- <div style="border:1px solid red;width:12rem;height: 2.125rem;"></div> -->
|
||||||
<div class="next">({{item.updataTime}})</div>
|
<div class="next">({{item.updataTime}})</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -167,13 +175,14 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
bannerLuBo: [
|
bannerLuBo: [
|
||||||
require('../../../static/index/banner1.png'),
|
{
|
||||||
require('../../../static/index/banner1.png'),
|
img: require('../../../static/index/banner1.png'),
|
||||||
require('../../../static/index/banner1.png'),
|
url: 'http://www.baidu.com'
|
||||||
require('../../../static/index/banner1.png'),
|
},
|
||||||
require('../../../static/index/banner1.png'),
|
{
|
||||||
require('../../../static/index/banner1.png'),
|
img: require('../../../static/index/banner1.png'),
|
||||||
require('../../../static/index/banner1.png')
|
url: 'http://www.baidu.com'
|
||||||
|
}
|
||||||
],
|
],
|
||||||
lunboUp: require('../../../static/index/leftS.png'),
|
lunboUp: require('../../../static/index/leftS.png'),
|
||||||
lunboNext: require('../../../static/index/rightS.png'),
|
lunboNext: require('../../../static/index/rightS.png'),
|
||||||
@@ -356,9 +365,178 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
loctionHref (url) {
|
||||||
|
console.log(url)
|
||||||
|
window.location.href = url
|
||||||
|
},
|
||||||
handleClick (tab, event) {
|
handleClick (tab, event) {
|
||||||
console.log(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: {
|
computed: {
|
||||||
// 计算字符串
|
// 计算字符串
|
||||||
@@ -369,6 +547,22 @@ export default {
|
|||||||
return Strs
|
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>
|
</script>
|
||||||
@@ -380,16 +574,16 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
& > .content_cont {
|
|
||||||
width: 84.25rem;
|
|
||||||
// border: 1px solid red;
|
|
||||||
& > .swipersty {
|
& > .swipersty {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 33.25rem;
|
height: 33.25rem;
|
||||||
}
|
}
|
||||||
|
& > .content_cont {
|
||||||
|
width: 84.25rem;
|
||||||
|
// border: 1px solid red;
|
||||||
& > .mainCont {
|
& > .mainCont {
|
||||||
margin-top: 3.125rem;
|
margin-top: 3.125rem;
|
||||||
margin-bottom:3.125rem;
|
margin-bottom: 3.125rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// border: 0.0625rem solid red;
|
// border: 0.0625rem solid red;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -431,6 +625,7 @@ export default {
|
|||||||
|
|
||||||
& > .ListpaneLeft {
|
& > .ListpaneLeft {
|
||||||
width: 24.75rem;
|
width: 24.75rem;
|
||||||
|
height: 17rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@@ -469,6 +664,7 @@ export default {
|
|||||||
}
|
}
|
||||||
& > .ListpaneRight {
|
& > .ListpaneRight {
|
||||||
width: 24.75rem;
|
width: 24.75rem;
|
||||||
|
height: 17rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@@ -678,7 +874,7 @@ export default {
|
|||||||
letter-spacing: 0.125rem;
|
letter-spacing: 0.125rem;
|
||||||
color: #9ea5a7;
|
color: #9ea5a7;
|
||||||
}
|
}
|
||||||
& > div:hover{
|
& > div:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #52b6e3;
|
color: #52b6e3;
|
||||||
}
|
}
|
||||||
@@ -714,10 +910,11 @@ export default {
|
|||||||
& > div {
|
& > div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 5.25rem;
|
height: 5.25rem;
|
||||||
|
// border:1px solid red;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: space-around;
|
||||||
& > .up {
|
& > .up {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -727,8 +924,9 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
line-height: 2.125rem;
|
line-height: 2.625rem;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
|
padding-bottom: 1.75rem;
|
||||||
// border: 1px solid red;
|
// border: 1px solid red;
|
||||||
& > .next {
|
& > .next {
|
||||||
width: 12.625rem;
|
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 :class="{active:staticSelect==='我的收藏'}" @click="clickStic('我的收藏')">我的收藏</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<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 class="right_cont_basic" v-if="staticSelect==='基本设置'">
|
||||||
<div v-for="(item,index) in cont_basic" :key="index">
|
<div v-for="(item,index) in cont_basic" :key="index">
|
||||||
@@ -39,11 +45,54 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="contys">
|
<div class="contys">
|
||||||
<div>{{showPass?password:'********'}}</div>
|
<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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -122,18 +171,67 @@ export default {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
// 密码
|
// 密码
|
||||||
password: '1234567890',
|
password: localStorage.getItem('userPwd'),
|
||||||
// 密码显示状态
|
// 密码显示状态
|
||||||
showPass: false,
|
showPass: false,
|
||||||
// 设置密码窗口状态
|
// 设置密码窗口状态
|
||||||
showWinStatic: false,
|
showWinStatic: false,
|
||||||
userpwd: '',
|
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: {
|
methods: {
|
||||||
clickStic (sta) {
|
clickStic (sta) {
|
||||||
this.staticSelect = sta
|
this.staticSelect = sta
|
||||||
|
if (this.staticSelect === '我的收藏') {
|
||||||
|
this.getCollectData()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
staticUp () {
|
staticUp () {
|
||||||
this.showPass = !this.showPass
|
this.showPass = !this.showPass
|
||||||
@@ -150,8 +248,24 @@ export default {
|
|||||||
alert('密码与确认密码不一致！')
|
alert('密码与确认密码不一致！')
|
||||||
} else {
|
} else {
|
||||||
// 调接口判断密码是否输入正确,改变登录状态
|
// 调接口判断密码是否输入正确,改变登录状态
|
||||||
|
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
|
this.showWinStatic = !this.showWinStatic
|
||||||
}
|
}
|
||||||
|
}).catch((fail) => {
|
||||||
|
console.log(fail)
|
||||||
|
})
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.showWinStatic = !this.showWinStatic
|
this.showWinStatic = !this.showWinStatic
|
||||||
}
|
}
|
||||||
@@ -159,6 +273,61 @@ export default {
|
|||||||
// 修改
|
// 修改
|
||||||
updata () {
|
updata () {
|
||||||
this.showWinStatic = !this.showWinStatic
|
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: {
|
computed: {
|
||||||
@@ -170,6 +339,9 @@ export default {
|
|||||||
return Strs
|
return Strs
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.getPersonalCenter()
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -315,7 +487,7 @@ export default {
|
|||||||
& > .cont_content {
|
& > .cont_content {
|
||||||
margin-bottom: 1.875rem;
|
margin-bottom: 1.875rem;
|
||||||
width: 84.25rem;
|
width: 84.25rem;
|
||||||
border: 0.0625rem solid red;
|
// border: 0.0625rem solid red;
|
||||||
& > .header {
|
& > .header {
|
||||||
width: 84.25rem;
|
width: 84.25rem;
|
||||||
height: 4.25rem;
|
height: 4.25rem;
|
||||||
@@ -366,7 +538,7 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
border: 1px solid red;
|
// border: 1px solid red;
|
||||||
border-right: 0.125rem solid #dbdbdb;
|
border-right: 0.125rem solid #dbdbdb;
|
||||||
& > div {
|
& > div {
|
||||||
width: 14.875rem;
|
width: 14.875rem;
|
||||||
@@ -391,16 +563,56 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > .right {
|
& > .right {
|
||||||
margin-left: 7.5rem;
|
width: 100%;
|
||||||
|
// margin-left: 7.5rem;
|
||||||
height: 30.625rem;
|
height: 30.625rem;
|
||||||
& > .right_title {
|
& > .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-size: 2.125rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-stretch: normal;
|
font-stretch: normal;
|
||||||
letter-spacing: 0rem;
|
letter-spacing: 0rem;
|
||||||
color: #333333;
|
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 {
|
& > .right_cont_basic {
|
||||||
|
margin-left: 7.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@@ -424,7 +636,7 @@ export default {
|
|||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
& > div:nth-child(2) {
|
& > div:nth-child(2) {
|
||||||
border: 1px solid red;
|
// border: 1px solid red;
|
||||||
width: 38.75rem;
|
width: 38.75rem;
|
||||||
height: 4.375rem;
|
height: 4.375rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -441,6 +653,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > .right_cont_fafety {
|
& > .right_cont_fafety {
|
||||||
|
margin-left: 7.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
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>
|
<template>
|
||||||
<div class="relation">
|
<div class="relation" ref="gdSum">
|
||||||
<!-- 首页导航 -->
|
<!-- 首页导航 -->
|
||||||
<Navs></Navs>
|
<Navs></Navs>
|
||||||
<div class="relation_cont">
|
<div class="relation_cont">
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<input type="text" placeholder="标题*" v-model="leave.title" />
|
<input type="text" placeholder="标题*" v-model="leave.title" />
|
||||||
<textarea v-model="leave.cont" placeholder="留言内容*"></textarea>
|
<textarea v-model="leave.cont" placeholder="留言内容*"></textarea>
|
||||||
<div class="sub">提交</div>
|
<div class="sub" @click="upoloadMessage">提交</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<div class="contactWay">联系方式</div>
|
<div class="contactWay">联系方式</div>
|
||||||
@@ -51,6 +51,11 @@
|
|||||||
|
|
||||||
<!-- 页脚信息 -->
|
<!-- 页脚信息 -->
|
||||||
<FooterInfors></FooterInfors>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -58,16 +63,20 @@
|
|||||||
import Nav from '@/components/nav/Nav.vue'
|
import Nav from '@/components/nav/Nav.vue'
|
||||||
// 页脚信息
|
// 页脚信息
|
||||||
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
||||||
|
// 置顶
|
||||||
|
import backTop from '@/components/backTop/BackTop.vue'
|
||||||
export default {
|
export default {
|
||||||
name: 'relation',
|
name: 'relation',
|
||||||
components: {
|
components: {
|
||||||
Navs: Nav,
|
Navs: Nav,
|
||||||
FooterInfors: FooterInfor
|
FooterInfors: FooterInfor,
|
||||||
|
backTop: backTop
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
imgurl: {
|
imgurl: {
|
||||||
pos: require('../../../static/company/posweizhi.png')
|
pos: require('../../../static/company/posweizhi.png'),
|
||||||
|
zhiding: require('../../../static/relation/zhiding.png')
|
||||||
},
|
},
|
||||||
leave: {
|
leave: {
|
||||||
name: '',
|
name: '',
|
||||||
@@ -95,13 +104,119 @@ export default {
|
|||||||
iphone: '000-12345678',
|
iphone: '000-12345678',
|
||||||
site: '北京市西城区月坛南街57号'
|
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>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<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 {
|
.relation_cont {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -240,7 +355,7 @@ export default {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
& > .contactWay_cont {
|
& > .contactWay_cont {
|
||||||
margin-bottom:2.375rem;
|
margin-bottom: 2.375rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
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 选项来配置
|
// 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置
|
||||||
devServer: {
|
devServer: {
|
||||||
open: false, // 运行项目是否自动开启浏览器
|
open: false, // 运行项目是否自动开启浏览器
|
||||||
host: 'localhost', // 真机测试 0.0.0.0
|
host: '0.0.0.0', // 真机测试 0.0.0.0
|
||||||
port: '8080',
|
port: '8080',
|
||||||
https: false,
|
https: false,
|
||||||
hotOnly: false, // 是否开启热更新
|
hotOnly: false, // 是否开启热更新
|
||||||
proxy: {
|
proxy: {
|
||||||
// 配置跨域
|
// 配置跨域
|
||||||
'/api/': {
|
'/api/': {
|
||||||
target: 'http://wechatticket.ecooth.com/api',
|
target: 'http://lawpro.earnest.pro/api/',
|
||||||
ws: false, // 允许重写
|
ws: false, // 允许重写
|
||||||
changeOrigin: true, // 允许跨域
|
changeOrigin: true, // 允许跨域
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
'^/api': ''
|
'^/api': ''
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
// 配置跨域
|
||||||
|
'/v1/': {
|
||||||
|
target: 'http://data.it-blog.wang/api/v1/',
|
||||||
|
ws: false, // 允许重写
|
||||||
|
changeOrigin: true, // 允许跨域
|
||||||
|
pathRewrite: {
|
||||||
|
'^/v1': ''
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user