From 05cec033e963a7c99c836bace5a0d7e195749474 Mon Sep 17 00:00:00 2001 From: GongDragon <1260404021@qq.com> Date: Wed, 26 Mar 2025 16:48:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E6=A8=A1=E5=9D=97=E5=BC=80?= =?UTF-8?q?=E5=8F=91=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.sandbox | 14 + .env.test | 15 + package.json | 5 +- src/agriculture/index.vue | 1959 +++++++++++++++++++++++++------------ vue.config.js | 2 + 5 files changed, 1359 insertions(+), 636 deletions(-) create mode 100644 .env.sandbox create mode 100644 .env.test diff --git a/.env.sandbox b/.env.sandbox new file mode 100644 index 0000000..ed943f5 --- /dev/null +++ b/.env.sandbox @@ -0,0 +1,14 @@ +# 页面标题 +# VUE_APP_TITLE = 智慧党建系统 + +# 开发环境配置 +ENV = 'sandbox' + +# 智慧党建系统/开发环境 +VUE_APP_BASE_API = 'http://1.119.152.230:4024/' + +# 前端路径地址 +# VUE_APP_ROUTER_URL = 'http://1.119.152.230:4023' + +# 路由懒加载 +# VUE_CLI_BABEL_TRANSPILE_MODULES = true diff --git a/.env.test b/.env.test new file mode 100644 index 0000000..d681fb5 --- /dev/null +++ b/.env.test @@ -0,0 +1,15 @@ +# 页面标题 +# VUE_APP_TITLE = 智慧党建 + +# 测试环境配置 +ENV = 'test' + +# 管理系统/测试环境 +VUE_APP_BASE_API = 'http://192.168.3.18:56000/' + +# 应用访问路径 例如使用前缀 /admin/ +# VUE_APP_CONTEXT_PATH = '/' + + +# 前端路径地址 +# VUE_APP_ROUTER_URL = 'http://192.168.3.18:55112' diff --git a/package.json b/package.json index 0c4b04b..25a9c30 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,9 @@ "version": "0.1.0", "private": true, "scripts": { - "serve": "vue-cli-service serve", - "build": "vue-cli-service build", + "dev": "vue-cli-service serve", + "build:test": "vue-cli-service build --mode test", + "build:sandbox": "vue-cli-service build --mode sandbox", "lint": "vue-cli-service lint" }, "dependencies": { diff --git a/src/agriculture/index.vue b/src/agriculture/index.vue index 5b61632..e595a5c 100644 --- a/src/agriculture/index.vue +++ b/src/agriculture/index.vue @@ -45,14 +45,15 @@

{{ left1Title }}

-
- +
+

{{ item[1] }}
-
- {{ item[0] }} +
+ {{ item[0] + }}
@@ -60,14 +61,15 @@

{{ left2Title }}

-
- +
+

{{ item[1] }}
-
- {{ item[0] }} +
+ {{ item[0] + }}
@@ -75,14 +77,15 @@

{{ left3Title }}

-
- +
+

{{ item[1] }}
-
- {{ item[0] }} +
+ {{ item[0] + }}
@@ -101,23 +104,26 @@
+
-

项目统计

+

{{ left5Title }}
+
-

科研项目类型占比

+

{{ left6Title }}
+
-

{{left7Title}}

+

{{ left7Title }}
@@ -130,88 +136,66 @@
- 板块2 + 中屏总览
- -
- - -
- -
- -
-
+ -

图谱统计

-
- -

606041

- - -

1694475

+

{{ middle1Title }}

+
+ +

{{ item[1] }}
-
- 节点总数 - 边总数 +
+ {{ item[0] }}
- + + +

{{ middle4Title }}

+
+ +
+ +
+ + + +
+
+ + +

{{ middle3Title }}

+
+ +

{{ item[1] }}

+ +
+
+ {{ item[0] }} +
+ + -

区域分析

- +

{{ middle5Title }}

+
+
- +
-
- -
- -
- -
- -
- +
+ +

{{ middle6Title }}

+
+
@@ -222,50 +206,96 @@
- ？？？ + 论文
-
+ +
- +

{{ right1Title }}

+
+ +

{{ item[1] }}

+ +
+
+ {{ item[0] + }} +
+ +
+ +
+ +

{{ right2Title }}

+
+ +

{{ item[1] }}

+ +
+
+ {{ item[0] + }} +
+ +
+ +
+ +

{{ right3Title }}

+
+ +

{{ item[1] }}

+ +
+
+ {{ item[0] + }} +
+
- - + +

{{ right4Title }}

+
-
-
+
+ +
- +

{{ right5Title }}

+
+ +
+ +
+ +

{{ right6Title }}

+
+ +
+ +
+ +

{{ right7Title }}

+
+ +
@@ -283,7 +313,7 @@ import CapsuleChart from './components/CapsuleChart.vue'; import LineChart from './components/LineChart.vue' import http from "@/utils/request"; import * as echarts from "echarts"; -import { color } from 'd3'; +import { color, symbol } from 'd3'; import systemRiskComponent from './components/systemRiskComponent';// 系统风险折线大图 import dimensionComponent from "./components/dimensionComponent"; import marketRiskComponent from "./components/riskIndexComponent"; @@ -308,395 +338,1041 @@ export default { }, data() { return { - left1Data:[], - left1Title:[], - left2Data:[], - left2Title:[], - left3Data:[], - left3Title:[], - left4Data:[], - left4Title:[], - left5Data:[], - left5Title:[], - left5Config:{ - header: ['项目名称 ', '经费统计'], - data: [ - ], - evenRowBGC:'#0A2732', - oddRowBGC:'0A2732', - headerBGC:'rgba(61,89,171,0.5)', - align: ['right'], + left1Data: [], + left1Title: [], + left2Data: [], + left2Title: [], + left3Data: [], + left3Title: [], + left4Data: [], + left4Title: [], + left5Data: [], + left5Title: '', + left5Config: { + }, + left6Title: '', + left7Title: '', + middle1Data: [], + middle1Title: '', + middle3Data: [], + middle3Title: '', + middle4Title: '', + middle5Title: '', + middle6Title: '', + right1Data: [], + right1Title: [], + right2Data: [], + right2Title: [], + right3Data: [], + right3Title: [], + right4Title: '', + right5Title: '', + right6Title: '', + right7Title: '', + right7Config: { }, - left7Title:'', - compName: 'systemRiskComponent', - datazoom: [], scale: 0, width: 5760, height: 1080, - // 表格设置 - config11: { - header: ['主体代码 ', '行业', '   预警时刻', '  风险水平', '风险类型 '], - data: [ - { - 主体代码: '688001.SH', - 行业: '计算机', - 预警时刻: '2023/6/29 16:00', - 风险水平: '严重', - 风险类型: '流动风险', - }, - { - 主体代码: '688002.SH', - 行业: '计算机', - 当前预警时刻: '2023/6/29 16:00', - 预警类型: '严重', - 风险类型: '市场风险', - }, - { - 主体代码: '688002.SH', - 行业: '计算机', - 当前预警时刻: '2023/6/29 16:00', - 预警类型: '严重', - 风险类型: '市场风险', - }, - { - 主体代码: '688002.SH', - 行业: '计算机', - 当前预警时刻: '2023/6/29 16:00', - 预警类型: '严重', - 风险类型: '市场风险', - }, - { - 主体代码: '688002.SH', - 行业: '计算机', - 当前预警时刻: '2023/6/29 16:00', - 预警类型: '严重', - 风险类型: '市场风险', - }, - ], - evenRowBGC: '#0A2732', - oddRowBGC: '0A2732', - headerBGC: 'rgba(61,89,171,0.5)', - align: ['right'], - }, - config22: - { - data: [ - ['教育', 7], - ['金融业', 1], - ['房地产业', 2], - ['制造业', 3], - ['房地产业', 4], - ['批发和零售业', 5], - - ], - evenRowBGC: '#0A2732', - oddRowBGC: '0A2732', - }, - items: [ - { - name: '股权质押', - value: 683 - }, - { - name: '转让股价', - value: 234 - }, - { - name: '股份增持', - value: 240 - }, - { - name: '债券发行', - value: 523 - }, - { - name: '高管变动', - value: 345 - }, - { - name: '产品发布', - value: 320 - }, - { - name: '破产', - value: 280 - }, - { - name: '业绩下滑', - value: 271 - }, - ], - date: [], - rate: [], - macro: [], - montary: [], - income: [], - investment: [], - loan: [], - lever: [], - other: [], - whole: [], - title: ['利率', '货币', '整体杠杆', '宏观指标', '收入和融资', '银行理财', '其他'] } }, created() { - this.getLeft1Data() - this.getLeft2Data() - this.getLeft3Data() - this.getLeft4Data() + }, mounted() { // 大屏自适应部分 // this.setScale(); // window.removeEventListener("resize", this.debounce(this.setScale)) // window.addEventListener("resize", this.debounce(this.setScale)); + this.getLeft1Data() + this.getLeft2Data() + this.getLeft3Data() + this.getLeft4Data() this.getLeft5Data() this.getLeft6Data() this.getLeft7Data() - + this.getMiddle1Data() + this.getMiddle3Data() + this.getMiddle4Data() + // this.getMiddle5Data() + this.getMiddle6Data() + // this.getRight1Data() + // this.getRight2Data() + // this.getRight3Data() + // this.getRight4Data() + // this.getRight5Data() + // this.getRight6Data() + // this.getRight7Data() + }, methods: { // 左侧第一行3块饼图数据 getLeft1Data() { // process.env.VUE_APP_BASE_API http.get('/jsonApi/v1/left_1.json') - .then((res) => { - // console.log('res',res); - // 标题和数据 - // 格式形如 [[key1,value1],[key2,value2]...] - this.left1Data = Object.entries(res.data.data) - this.left1Title = res.data.title - }) + .then((res) => { + // console.log('res',res); + // 标题和数据 + // 格式形如 [[key1,value1],[key2,value2]...] + this.left1Data = Object.entries(res.data.data) + this.left1Title = res.data.title + }) }, getLeft2Data() { - // process.env.VUE_APP_BASE_API http.get('/jsonApi/v1/left_2.json') - .then((res) => { - // 标题和数据 - // 格式形如 [[key1,value1],[key2,value2]...] - this.left2Data = Object.entries(res.data.data) - this.left2Title = res.data.title - }) + .then((res) => { + // 标题和数据 + // 格式形如 [[key1,value1],[key2,value2]...] + this.left2Data = Object.entries(res.data.data) + this.left2Title = res.data.title + }) }, getLeft3Data() { - // process.env.VUE_APP_BASE_API http.get('/jsonApi/v1/left_3.json') - .then((res) => { - // 标题和数据 - // 格式形如 [[key1,value1],[key2,value2]...] - this.left3Data = Object.entries(res.data.data) - this.left3Title = res.data.title - }) + .then((res) => { + // 标题和数据 + // 格式形如 [[key1,value1],[key2,value2]...] + this.left3Data = Object.entries(res.data.data) + this.left3Title = res.data.title + }) }, getLeft4Data() { - // process.env.VUE_APP_BASE_API http.get('/jsonApi/v1/left_4.json') - .then((res) => { - // console.log(res.data); - this.left4Title = res.data.title - // 处理数据 得到日期数组，纵向/总数/横向数组 - const keyArr = Object.keys(res.data.data[0]) - const date = res.data.data.map(item => item[keyArr[0]]) - const item1 = res.data.data.map(item => item[keyArr[1]]) - const item2 = res.data.data.map(item => item[keyArr[2]]) - const item3 = res.data.data.map(item => item[keyArr[3]]) - // console.log(keyArr,date,item1,item2,item3); - const seriesData = [] - seriesData.push({data:item1,name:keyArr[1],type:'line'}) - seriesData.push({data:item2,name:keyArr[2],type:'line'}) - seriesData.push({data:item3,name:keyArr[3],type:'line'}) + .then((res) => { + // console.log(res.data); + this.left4Title = res.data.title + // 处理数据 得到日期数组，纵向/总数/横向数组 + const keyArr = Object.keys(res.data.data[0]) + const date = res.data.data.map(item => item[keyArr[0]]) + const item1 = res.data.data.map(item => item[keyArr[1]]) + const item2 = res.data.data.map(item => item[keyArr[2]]) + const item3 = res.data.data.map(item => item[keyArr[3]]) + // console.log(keyArr,date,item1,item2,item3); + const seriesData = [] + seriesData.push({ data: item1, name: keyArr[1], type: 'line' }) + seriesData.push({ data: item2, name: keyArr[2], type: 'line' }) + seriesData.push({ data: item3, name: keyArr[3], type: 'line' }) - let echart = echarts.init(this.$refs.left4Container) - const option = { - // title:{ - // text:this.left4Title, - // textStyle:{ - // color:'#fff' - // }, - // left:'center' - // }, - color: ['#ea5455','#f07b3f','#ffd460'], - tooltip: { - trigger: 'axis' - }, - legend: { - top:30, - textStyle:{ - color:'#fff' + let echart = echarts.init(this.$refs.left4Container) + const option = { + // title:{ + // text:this.left4Title, + // textStyle:{ + // color:'#fff' + // }, + // left:'center' + // }, + color: ['#ea5455', '#f07b3f', '#ffd460'], + tooltip: { + trigger: 'axis' }, - }, - xAxis: { - type: 'category', - data: date, - axisLabel: {//x轴文字的配置 + legend: { + top: 30, + textStyle: { + color: '#fff' + }, + }, + xAxis: { + type: 'category', + data: date, + axisLabel: {//x轴文字的配置 show: true, textStyle: { - color: "#fff", - } - }, - }, - yAxis: { - type: 'value', - axisLabel: {//x轴文字的配置 - show: true, - textStyle: { - color: "#fff", - } - }, - }, - grid:{ - containLabel:true - }, - series: seriesData - }; - echart.setOption(option) - }) - }, - getLeft5Data() { - // process.env.VUE_APP_BASE_API - http.get('/jsonApi/v1/left_5.json') - .then((res) => { - console.log(res.data); - this.left5Title = res.data.title - this.left5Data = res.data.data.map(item => {return {名称:item.项目名称.substring(0,30),统计:item.经费统计.substring(0,30),}}) - - const left5Config = { - header: ['项目名称', '经费统计'], - data: this.left5Data, - evenRowBGC:'#0A2732', - oddRowBGC:'0A2732', - headerBGC:'rgba(61,89,171,0.5)', - // waitTime:2000000 - } - this.left5Config = left5Config - }) - }, - getLeft6Data(){ - http.get('/jsonApi/v1/left_6.json') - .then((res) => { - console.log(res.data.data.length); - const data = res.data.data.map(item => { return {'name':item.项目类型名称, 'value':item.数量}}) - let option = { - // title: { - // text: '科研项目类型占比', - // left: 'center', - // textStyle:{ - // color:'#fff' - // } - // }, - tooltip: { - trigger: 'item', - }, - legend: { - type: 'scroll', - orient: 'vertical', - right: 10, - top: 20, - bottom: 20, - formatter: function (name) { - return name.length > 8 ? name.substring(0,8)+'...': name; - }, - textStyle:{ - color:'#fff' - }, - pageTextStyle:{ - color:'#fff' - } - }, - series: [ - { - name: '姓名', - type: 'pie', - radius: '55%', - center: ['40%', '50%'], - // minAngle:30, - minShowLabelAngle:15, - data: data, - label:{ - formatter: function (params) { - console.log(params); - return params.data.name.length > 10 ? params.data.name.substring(0,10)+'...': params.data.name; + color: "#fff", } }, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' + }, + yAxis: { + type: 'value', + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + } + }, + }, + grid: { + containLabel: true + }, + series: seriesData + }; + echart.setOption(option) + }) + }, + getLeft5Data() { + http.get('/jsonApi/v1/left_5.json') + .then((res) => { + // console.log(res.data); + this.left5Title = res.data.title + this.left5Data = res.data.data.map(item => { return { 名称: item.项目名称.substring(0, 30), 统计: item.经费统计.substring(0, 30), } }) + const left5Config = { + header: ['项目名称', '经费统计'], + data: this.left5Data, + evenRowBGC: '#0A2732', + oddRowBGC: '0A2732', + headerBGC: 'rgba(61,89,171,0.5)', + waitTime: 2000 + } + this.left5Config = left5Config + }) + }, + getLeft6Data() { + http.get('/jsonApi/v1/left_6.json') + .then((res) => { + this.left6Title = res.data.title + // 数据格式转换 + const data = res.data.data.map(item => { return { 'name': item.项目类型名称, 'value': item.数量 } }) + console.log('data',data); + + // 按值大小排序 + const sortData = data.slice().sort((a, b) => b.value - a.value) + // 只取前6项作为legend显示 + const sliceData = sortData.slice(0,6) + let option = { + // title: { + // text: '科研项目类型占比', + // left: 'center', + // textStyle:{ + // color:'#fff' + // } + // }, + tooltip: { + trigger: 'item', + }, + legend: { + type: 'scroll', + orient: 'vertical', + right: 10, + top: 20, + bottom: 20, + formatter: function (name) { + return name.length > 8 ? name.substring(0, 8) + '...' : name; + }, + textStyle: { + color: '#fff' + }, + pageTextStyle: { + color: '#fff' + }, + data:sliceData + }, + series: [ + { + name: '姓名', + type: 'pie', + radius: '55%', + center: ['40%', '50%'], + // minAngle:30, + minShowLabelAngle: 15, + data: data, + label: { + formatter: function (params) { + // console.log(params); + return params.data.name.length > 10 ? params.data.name.substring(0, 10) + '...' : params.data.name; + } + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } } } - } - ] - }; - let echart = echarts.init(this.$refs.left6Container) - echart.setOption(option) - }) + ] + }; + let echart = echarts.init(this.$refs.left6Container) + echart.setOption(option) + }) }, - getLeft7Data(){ + getLeft7Data() { http.get('/jsonApi/v1/left_7.json') - .then((res) => { - console.log(res.data.data); - this.left7Title = res.data.title - const rawData = res.data.data - const keyArr = Object.keys(rawData[0]) - const yearArr = rawData.map(item => item.year) - const item1 = rawData.map(item => item[keyArr[1]]) - const item2 = rawData.map(item => item[keyArr[2]]) - const item3 = rawData.map(item => item[keyArr[3]]) - const item4 = rawData.map(item => item[keyArr[4]]) - const items = [item1,item2,item3,item4] - const seriesData = [] - for (let index = 0; index < keyArr.length-1; index++) { - seriesData.push({ - name:keyArr[index+1], - type:'bar', - data:items[index] + .then((res) => { + // console.log(res.data.data); + this.left7Title = res.data.title + const rawData = res.data.data + const keyArr = Object.keys(rawData[0]) + const yearArr = rawData.map(item => item.year) + const item1 = rawData.map(item => item[keyArr[1]]) + const item2 = rawData.map(item => item[keyArr[2]]) + const item3 = rawData.map(item => item[keyArr[3]]) + const item4 = rawData.map(item => item[keyArr[4]]) + const items = [item1, item2, item3, item4] + const seriesData = [] + for (let index = 0; index < keyArr.length - 1; index++) { + seriesData.push({ + name: keyArr[index + 1], + type: 'bar', + data: items[index] + }) + } + let option = { + color: ["#92140C","#ff773d","#f19143","#ffb238"], + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + textStyle: { + color: '#fff' + } + }, + // grid: { + // left: '3%', + // right: '4%', + // bottom: '3%', + // containLabel: true + // }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + axisLabel: { + color: '#fff' + } + }, + yAxis: { + type: 'category', + data: yearArr, + axisLabel: { + color: '#fff' + } + }, + series: seriesData + }; + let echart = echarts.init(this.$refs.left7Container) + echart.setOption(option) + }) + }, + getMiddle1Data() { + http.get('/jsonApi/v1/middle_1.json') + .then((res) => { + // console.log('res', res); + // 标题和数据 + // 格式形如 [[key1,value1],[key2,value2]...] + this.middle1Data = Object.entries(res.data.data) + this.middle1Title = res.data.title + }) + }, + getMiddle3Data() { + http.get('/jsonApi/v1/middle_3.json') + .then((res) => { + // 标题和数据 + // 格式形如 [[key1,value1],[key2,value2]...] + this.middle3Data = Object.entries(res.data.data) + this.middle3Title = res.data.title + }) + }, + getMiddle4Data() { + http.get('/jsonApi/v1/middle_4.json') + .then((res) => { + // console.log('res', res); + this.middle4Title = res.data.title + const years = res.data.data.map(item => item.year) + let keyArr = [] + const seriesData = res.data.data.map(item => { + // 得到每一serie的values数组 + const valueArr = Object.values(item) + const name = valueArr.shift() + keyArr = Object.keys(item) + return { + name: name, + value: valueArr, + } }) + const echarts3 = echarts.init(this.$refs.middle4) + const option = { + tooltip: {}, + legend: { + data: years, + x: "center", + y: 'bottom', + textStyle: { + color: "#fff" + } + }, + color: ['red', 'yellow', 'blue'], + radar: { + name: { + textStyle: { + //设置颜色 + color: '#fff' + } + }, + indicator: [// 依次是：专利,"纵向项目","横向项目","获奖","软著","人文社科" + { name: keyArr[1], max: 300, color: '#fff' }, + { name: keyArr[2], max: 300, color: '#fff' }, + { name: keyArr[3], max: 700, color: '#fff' }, + { name: keyArr[4], max: 100, color: '#fff' }, + { name: keyArr[5], max: 200, color: '#fff' }, + { name: keyArr[6], max: 100, color: '#fff' } + ], + center: ['50%', '50%'], + radius: "58%" + }, + series: [{ + name: '', + type: 'radar', + itemStyle: { + normal: { + splitLine: { + lineStyle: { + } + }, + label: { + show: false, + textStyle: { + }, + formatter: function (params) { + return params.value; + } + }, + } + }, + data: seriesData + }] + }; + echarts3.setOption(option) + }) + }, + getMiddle5Data() { + const that = this + http.get('/jsonApi/v1/middle_5.json') + .then((res) => { + // console.log(res); + this.middle5Title = res.data.title + const rawData = res.data.data + const chinaDatass = rawData.map(item => { + return [{ + name:item.受让方所属省份, + value:item.到账金额 + }] + }) + // console.log('chinaDatass',chinaDatass); + // 基于准备好的dom，初始化echarts实例 + var myChart = echarts.init(this.$refs.flightMap); + // 经纬度 + var chinaGeoCoordMap = { + '黑龙江省': [127.9688, 45.368], + '内蒙古自治区': [110.3467, 41.4899], + "吉林省": [125.8154, 44.2584], + '北京市': [116.4551, 40.2539], + "辽宁省": [123.1238, 42.1216], + "河北省": [114.4995, 38.1006], + "天津市": [117.4219, 39.4189], + "山西省": [112.3352, 37.9413], + "陕西省": [109.1162, 34.2004], + "甘肃省": [103.5901, 36.3043], + "宁夏回族自治区": [106.3586, 38.1775], + "青海省": [101.4038, 36.8207], + "新疆维吾尔自治区": [87.9236, 43.5883], + "西藏自治区": [91.11, 29.97], + "四川省": [103.9526, 30.7617], + "重庆市": [108.384366, 30.439702], + "山东省": [117.1582, 36.8701], + "河南省": [113.4668, 34.6234], + "江苏省": [118.8062, 31.9208], + "安徽省": [117.29, 32.0581], + "湖北省": [114.3896, 30.6628], + "浙江省": [119.5313, 29.8773], + "福建省": [119.4543, 25.9222], + "江西省": [116.0046, 28.6633], + "湖南省": [113.0823, 28.2568], + "贵州省": [106.6992, 26.7682], + "云南省": [102.9199, 25.4663], + "广东省": [113.12244, 23.009505], + "广西省": [108.479, 23.1152], + "海南省": [110.3893, 19.8516], + '上海市': [121.4648, 31.2891] + }; + // 实际动态数据 + // var chinaDatas = [ + // [{ + // name: '黑龙江省', + // value: 2 + // }], [{ + // name: '北京市', + // value: 1 + // }], [{ + // name: '内蒙古自治区', + // value: 0 + // }], [{ + // name: '吉林省', + // value: 0 + // }], [{ + // name: '辽宁省', + // value: 0 + // }], [{ + // name: '河北省', + // value: 0 + // }], [{ + // name: '天津市', + // value: 0 + // }], [{ + // name: '山西', + // value: 0 + // }], [{ + // name: '陕西', + // value: 0 + // }], [{ + // name: '甘肃省', + // value: 0 + // }], [{ + // name: '宁夏回族自治区', + // value: 0 + // }], [{ + // name: '青海', + // value: 0 + // }], [{ + // name: '新疆', + // value: 0 + // }], [{ + // name: '西藏', + // value: 0 + // }], [{ + // name: '四川省', + // value: 0 + // }], [{ + // name: '重庆市', + // value: 0 + // }], [{ + // name: '山东省', + // value: 0 + // }], [{ + // name: '河南省', + // value: 0 + // }], [{ + // name: '江苏省', + // value: 0 + // }], [{ + // name: '安徽省', + // value: 0 + // }], [{ + // name: '湖北省', + // value: 0 + // }], [{ + // name: '浙江省', + // value: 0 + // }], [{ + // name: '福建省', + // value: 0 + // }], [{ + // name: '江西省', + // value: 0 + // }], [{ + // name: '湖南省', + // value: 0 + // }], [{ + // name: '贵州', + // value: 0 + // }], [{ + // name: '广西', + // value: 0 + // }], [{ + // name: '海南省', + // value: 0 + // }], [{ + // name: '上海市', + // value: 1 + // }] + // ]; + //[ [ {name:黑龙江省,value:0} ],... ] 到时候value是经费 + //变成 + //[ [ {coord:黑龙江省,value:[经纬度]},{coord:[北京经纬度]} ],... ] + var convertData = function (data) { + var res = []; + for (var i = 0; i < data.length; i++) { + var dataItem = data[i]; + var fromCoord = chinaGeoCoordMap[dataItem[0].name]; + var toCoord = [116.4551, 40.2539]; + if (fromCoord && toCoord) { + res.push([{ + coord: toCoord, + },{ + coord: fromCoord, + value: dataItem[0].value + }]); + } } - let option = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' + return res; + }; + var series = []; + // series配置 + [['北京市', chinaDatass]].forEach(function (item, i) { + // console.log('item',item) + series.push({ + type: 'lines', + zlevel: 2, + effect: { + show: true, + period: 4, //箭头指向速度，值越小速度越快 + trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重 + symbol: 'arrow', //箭头图标 + symbolSize: 5, //图标大小 + }, + lineStyle: { + normal: { + width: 1, //尾迹线条宽度 + opacity: 1, //尾迹线条透明度 + color: '#DDD38C',// 飞线颜色 + curveness: .3 //尾迹线条曲直度 } }, - legend: { - textStyle:{ - color:'#fff' + tooltip:{ + formatter: '' + }, + data: convertData(item[1]) + }, + { + type: 'effectScatter', + coordinateSystem: 'geo', + zlevel: 2, + rippleEffect: { //涟漪特效 + period: 5, //动画时间，值越小速度越快 + brushType: 'stroke', //波纹绘制方式 stroke, fill + scale: 4 //波纹圆环最大限制，值越大波纹越大 + }, + label: { + normal: { + show: true, + position: 'right', //显示位置 + offset: [5, 0], //偏移设置 + formatter: function (params) {//圆环显示文字 + const baiwei = that.getThousandAndHundredsDigit(params.data.value[2]) + return baiwei>0? params.data.name : ''; + }, + fontSize: 13 + }, + emphasis: { + show: true + } + }, + symbol: 'circle', + symbolSize: function (val) { + // 得到百位数 + const baiwei = that.getThousandAndHundredsDigit(val[2]) + return 3 + baiwei * 1; //圆环大小 + }, + itemStyle: { + normal: { + show: true, + color: '#59D3DE'//圆环颜色 + } + }, + data: item[1].map(function (dataItem) { + return { + name: dataItem[0].name, + value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]) + }; + }), + }, + //被攻击点 + // { + // type: 'scatter', + // coordinateSystem: 'geo', + // zlevel: 2, + // rippleEffect: { + // period: 4, + // brushType: 'stroke', + // scale: 4 + // }, + // label: { + // normal: { + // show: true, + // position: 'right', + // //offset:[5, 0], + // color: 'red', + // formatter: '{b}', + // textStyle: { + // color: "red" + // } + // }, + // emphasis: { + // show: true, + // color: "#f60" + // } + // }, + // symbol: 'pin', + // symbolSize: 50, + // data: [{ + // name: item[0], + // value: chinaGeoCoordMap[item[0]].concat([10]), + // }], + // } + ); + }); + let option = { + tooltip: { + trigger: 'item', + // backgroundColor: 'rgba(166, 200, 76, 0.82)', + borderColor: '#FFFFCC', + showDelay: 0, + hideDelay: 0, + enterable: true, + transitionDuration: 0, + extraCssText: 'z-index:100', + formatter: function (params, ticket, callback) { + //根据业务自己拓展要显示的内容 + var res = ""; + var name = params.name; + var value = params.value[params.seriesIndex + 1]; + res = "" + name + "
数据：" + value; + return res; + } + }, + // backgroundColor: "#013954", + // visualMap: { //图例值控制 + // min: 0, + // max: 1, + // calculable: true, + // show: true, + // color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'], + // textStyle: { + // color: '#fff' + // } + // }, + geo: { + map: 'china', + zoom: 1.2, + label: { + emphasis: { + show: false } }, - // grid: { - // left: '3%', - // right: '4%', - // bottom: '3%', - // containLabel: true - // }, - xAxis: { - type: 'value', - boundaryGap: [0, 0.01], - axisLabel:{ - color:'#fff' + roam: true, //是否允许缩放 + itemStyle: { + normal: { + color: 'rgba(51, 69, 89, .5)', //地图背景色 + borderColor: '#516a89', //省市边界线00fcff 516a89 + borderWidth: 1 + }, + emphasis: { + color: 'rgba(37, 43, 61, .5)' //悬浮背景 } - }, - yAxis: { - type: 'category', - data: yearArr, - axisLabel:{ - color:'#fff' - } - }, - series: seriesData - }; - let echart = echarts.init(this.$refs.left7Container) - echart.setOption(option) - }) + } + }, + series: series + }; + myChart.setOption(option) + }) + + }, + getMiddle6Data() { + http.get('/jsonApi/v1/middle_6.json') + .then((res) => { + // console.log(res.data); + this.middle6Title = res.data.title + // 处理数据 得到日期数组，纵向/总数/横向数组 + const keyArr = Object.keys(res.data.data[0]) + const date = res.data.data.map(item => item[keyArr[0]]) + const item1 = res.data.data.map(item => item[keyArr[1]]) + const item2 = res.data.data.map(item => item[keyArr[2]]) + const item3 = res.data.data.map(item => item[keyArr[3]]) + // console.log(keyArr,date,item1,item2,item3); + const seriesData = [] + seriesData.push({ data: item1, name: keyArr[1], type: 'line',connectNulls:true,smooth:true }) + seriesData.push({ data: item2, name: keyArr[2], type: 'line' }) + seriesData.push({ data: item3, name: keyArr[3], type: 'line' }) + + let echart = echarts.init(this.$refs.middle6Container) + const option = { + // title:{ + // text:this.middle6Title, + // textStyle:{ + // color:'#fff' + // }, + // left:'center' + // }, + color: ['#ea5455', '#f07b3f', '#ffd460'], + tooltip: { + trigger: 'axis' + }, + legend: { + top: 30, + textStyle: { + color: '#fff' + }, + }, + xAxis: { + type: 'category', + data: date, + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + } + }, + // boundaryGap:false + }, + yAxis: { + type: 'value', + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + } + }, + }, + grid: { + left: '5%', + right: '5%', + bottom: '8%', + containLabel: true + }, + series: seriesData + }; + echart.setOption(option) + }) + }, + getRight1Data() { + // process.env.VUE_APP_BASE_API + http.get('/jsonApi/v1/right_1.json') + .then((res) => { + // console.log('res',res); + // 标题和数据 + // 格式形如 [[key1,value1],[key2,value2]...] + this.right1Data = Object.entries(res.data.data) + this.right1Title = res.data.title + }) + }, + getRight2Data() { + // process.env.VUE_APP_BASE_API + http.get('/jsonApi/v1/right_2.json') + .then((res) => { + // console.log('res',res); + // 标题和数据 + // 格式形如 [[key1,value1],[key2,value2]...] + this.right2Data = Object.entries(res.data.data) + this.right2Title = res.data.title + }) + }, + getRight3Data() { + // process.env.VUE_APP_BASE_API + http.get('/jsonApi/v1/right_3.json') + .then((res) => { + // console.log('res',res); + // 标题和数据 + // 格式形如 [[key1,value1],[key2,value2]...] + this.right3Data = Object.entries(res.data.data) + this.right3Title = res.data.title + }) + }, + getRight4Data() { + http.get('/jsonApi/v1/right_4.json') + .then((res) => { + this.right4Title = res.data.title + // 处理数据 得到日期数组，纵向/总数/横向数组 + const keyArr = Object.keys(res.data.data[0]) + const date = res.data.data.map(item => item[keyArr[0]]) + const item1 = res.data.data.map(item => item[keyArr[1]]) + const item2 = res.data.data.map(item => item[keyArr[2]]) + const item3 = res.data.data.map(item => item[keyArr[3]]) + // console.log(keyArr,date,item1,item2,item3); + const seriesData = [] + seriesData.push({ data: item1, name: keyArr[1], type: 'line',connectNulls:true,smooth:true }) + seriesData.push({ data: item2, name: keyArr[2], type: 'line' }) + seriesData.push({ data: item3, name: keyArr[3], type: 'line' }) + + let echart = echarts.init(this.$refs.right4Container) + const option = { + // title:{ + // text:this.right4Title, + // textStyle:{ + // color:'#fff' + // }, + // left:'center' + // }, + color: ['#ea5455', '#f07b3f', '#ffd460'], + tooltip: { + trigger: 'axis' + }, + legend: { + top: 30, + textStyle: { + color: '#fff' + }, + }, + xAxis: { + type: 'category', + data: date, + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + } + }, + // boundaryGap:false + }, + yAxis: { + type: 'value', + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + } + }, + }, + grid: { + left: '5%', + right: '5%', + bottom: '8%', + containLabel: true + }, + series: seriesData + }; + echart.setOption(option) + }) + }, + getRight5Data() { + http.get('/jsonApi/v1/right_5.json') + .then((res) => { + console.log('getRight5Data 数据有问题',res.data); + this.right5Title = res.data.title + const rawData = res.data.data + // console.log(rawData); + return + const keyArr = Object.keys(rawData[0]) + const yearArr = rawData.map(item => item.year) + const item1 = rawData.map(item => item[keyArr[1]]) + const item2 = rawData.map(item => item[keyArr[2]]) + const item3 = rawData.map(item => item[keyArr[3]]) + const item4 = rawData.map(item => item[keyArr[4]]) + const items = [item1, item2, item3, item4] + const seriesData = [] + for (let index = 0; index < keyArr.length - 1; index++) { + seriesData.push({ + name: keyArr[index + 1], + type: 'bar', + data: items[index] + }) + } + let option = { + color: ["#92140C","#ff773d","#f19143","#ffb238"], + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + textStyle: { + color: '#fff' + } + }, + // grid: { + // left: '3%', + // right: '4%', + // bottom: '3%', + // containLabel: true + // }, + xAxis: { + type: 'category', + data: yearArr, + axisLabel: { + color: '#fff' + } + }, + yAxis: { + type: 'value', + boundaryGap: [0, 0.01], + axisLabel: { + color: '#fff' + } + }, + series: seriesData + }; + let echart = echarts.init(this.$refs.right5Container) + echart.setOption(option) + }) + }, + getRight6Data() { + http.get('/jsonApi/v1/right_6.json') + .then((res) => { + // console.log('getRight6Data',res.data); + const entries = Object.entries(res.data.data) + const data1 = entries.map(item => { return { 'name': item[0], 'value': item[1] } }) + console.log('data1',data1); + this.right6Title = res.data.title + let option = { + // title: { + // text: '科研项目类型占比', + // left: 'center', + // textStyle:{ + // color:'#fff' + // } + // }, + tooltip: { + trigger: 'item', + }, + legend: { + type: 'scroll', + orient: 'vertical', + right: 30, + top: 20, + bottom: 20, + formatter: function (name) { + return name.length > 8 ? name.substring(0, 8) + '...' : name; + }, + textStyle: { + color: '#fff' + }, + pageTextStyle: { + color: '#fff' + } + }, + series: [ + { + // name: '姓名', + type: 'pie', + radius: '55%', + center: ['50%', '50%'], + // minAngle:30, + minShowLabelAngle: 15, + data: data1, + label: { + formatter: function (params) { + // console.log(params); + return params.data.name.length > 10 ? params.data.name.substring(0, 10) + '...' : params.data.name; + } + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }; + let echart = echarts.init(this.$refs.right6Container) + echart.setOption(option) + }) + }, + getRight7Data() { + http.get('/jsonApi/v1/right_7.json') + .then((res) => { + console.log('getRight7Data',res.data); + this.right7Title = res.data.title + this.right7Data = res.data.data.map(item => { return { 名称: item.刊物名称.substring(0, 30), 统计: item.发表数量, } }) + const right7Config = { + header: ['刊物名称', '发表数量'], + data: this.right7Data, + evenRowBGC: '#0A2732', + oddRowBGC: '0A2732', + headerBGC: 'rgba(61,89,171,0.5)', + waitTime: 2000 + } + this.right7Config = right7Config + }) }, getScale() { // 固定好16：9的宽高比，计算出最合适的缩放比 const { width, height } = this; const wh = window.innerHeight / height; const ww = window.innerWidth / width; - console.log('缩放比',ww < wh ? ww : wh); + console.log('缩放比', ww < wh ? ww : wh); return ww < wh ? ww : wh; }, setScale() { @@ -721,210 +1397,223 @@ export default { }, delays); }; }, - oldEchartsInit(){ - // 宏观分析 6个折线图 - // hongguanfenxi json - this.date = hongguanfenxi.date - this.rate = hongguanfenxi.rate - this.macro = hongguanfenxi.macro - this.montary = hongguanfenxi.montary - this.income = hongguanfenxi.income - this.investment = hongguanfenxi.investment - this.loan = hongguanfenxi.loan - this.lever = hongguanfenxi.lever - this.other = hongguanfenxi.other - this.whole.push(this.rate) - this.whole.push(this.montary) - this.whole.push(this.lever) - // this.whole.push(this.loan) - this.whole.push(this.macro) - this.whole.push(this.income) - this.whole.push(this.investment) - this.whole.push(this.other) + getThousandAndHundredsDigit(number) { + - for (let i = 0; i < 6; i++) { - // let chartContainer = 'chartContainer' + i - let echart = echarts.init(this.$refs.chartContainer[i]) - const option1 = { - title: { - text: this.title[i], - textStyle: { - color: '#fff' + // 如果数字小于100，返回0 + if (number < 100) { + return 0; + } + + // 获取千位和百位 + const thousandAndHundreds = Math.floor((number % 10000) / 100); + + return thousandAndHundreds; +}, + oldEchartsInit() { + // 宏观分析 6个折线图 + // hongguanfenxi json + this.date = hongguanfenxi.date + this.rate = hongguanfenxi.rate + this.macro = hongguanfenxi.macro + this.montary = hongguanfenxi.montary + this.income = hongguanfenxi.income + this.investment = hongguanfenxi.investment + this.loan = hongguanfenxi.loan + this.lever = hongguanfenxi.lever + this.other = hongguanfenxi.other + this.whole.push(this.rate) + this.whole.push(this.montary) + this.whole.push(this.lever) + // this.whole.push(this.loan) + this.whole.push(this.macro) + this.whole.push(this.income) + this.whole.push(this.investment) + this.whole.push(this.other) + + for (let i = 0; i < 6; i++) { + // let chartContainer = 'chartContainer' + i + let echart = echarts.init(this.$refs.chartContainer[i]) + const option1 = { + title: { + text: this.title[i], + textStyle: { + color: '#fff' + }, + left: 'center' }, - left: 'center' + tooltip: { + trigger: 'axis' + }, + legend: { + top: 30, + textStyle: { + color: '#fff' + }, + }, + xAxis: { + type: 'category', + data: this.date, + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + } + }, + }, + yAxis: { + type: 'value', + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + } + }, + }, + grid: { + containLabel: true + }, + series: this.whole[i] + }; + echart.setOption(option1) + } + + // 轮播图 + // lunbo json + const nearestWeekday = this.getNearestWeekday() + // console.log('nearestWeekday',nearestWeekday); + + const formatData = lunbo.data.map(item => { + item.监测时间 = nearestWeekday + item.监测时间.substring(10) + return [item.监测时间, item.名称, item.异常关联类型] + }) + const config22 = { + header: ['监测时间', '名称', '异常关联类型'], + data: formatData, + // headerBGC:'black', + evenRowBGC: '#0A2732', + oddRowBGC: '0A2732', + } + // console.log('formatData',formatData); + this.config22 = config22 + + // 健康指数 雷达图 + let radarData = [ + { + value: [82.44588614888224, 25, 54.00000000000001, 58.56999999999999, 20, 65, 5], + name: '纳尔实业' }, - tooltip: { - trigger: 'axis' + { + value: [50.033, 45, 58.8, 62.73, 10, 65, 50], + name: '平安保险' }, + { + value: [43.064, 50, 53.6, 64.23, 10, 75, 50], + name: '招商银行' + }] + // console.log('radarData', radarData); + const echarts3 = echarts.init(this.$refs.echarts_3) + const option = { + tooltip: {}, legend: { - top: 30, + data: ['纳尔实业', '平安保险', '招商银行'], + x: "center", + y: 'bottom', textStyle: { - color: '#fff' + color: "#fff" + } + }, + color: ['red', 'yellow', 'blue'], + radar: { + name: { + textStyle: { + //设置颜色 + color: '#fff' + } }, + indicator: [ + { name: '投资关系', max: 100, color: '#fff' }, + { name: '操盘模式', max: 100, color: '#fff' }, + { name: '财务状态', max: 100, color: '#fff' }, + { name: '运行状态', max: 100, color: '#fff' }, + { name: '规模扩张', max: 100, color: '#fff' }, + { name: '声誉风险', max: 100, color: '#fff' }, + { name: '外部环境', max: 100, color: '#fff' } + ], + center: ['50%', '50%'], + radius: "58%" + }, + series: [{ + name: '', + type: 'radar', + itemStyle: { + normal: { + splitLine: { + lineStyle: { + } + }, + label: { + show: false, + textStyle: { + }, + formatter: function (params) { + return params.value; + } + }, + } + }, + data: radarData + }] + }; + echarts3.setOption(option) + + // 行业预警排行 + const echarts2 = echarts.init(this.$refs.echarts_2) + // hangyeyujing json + let xData = [], yData = [] + let tmp = hangyeyujing + for (let key in tmp) { + if (key.length < 16) { + xData.push(tmp[key]) + yData.push(key) + } + } + const option_2 = { + grid: { + left: '34%',//离左边远一点 + right: '4%', + bottom: '15%', + top: '5%',//如果不填，会默认一个特别大的值，导致图的上面留白特别大 }, xAxis: { - type: 'category', - data: this.date, - axisLabel: {//x轴文字的配置 - show: true, - textStyle: { - color: "#fff", + type: 'value', + axisLine: { + lineStyle: { + color: '#fff' } }, }, yAxis: { - type: 'value', - axisLabel: {//x轴文字的配置 - show: true, - textStyle: { - color: "#fff", + type: 'category', + data: yData, + axisLine: { + lineStyle: { + color: '#fff' } }, }, - grid: { - containLabel: true - }, - series: this.whole[i] - }; - echart.setOption(option1) - } - - // 轮播图 - // lunbo json - const nearestWeekday = this.getNearestWeekday() - // console.log('nearestWeekday',nearestWeekday); - - const formatData = lunbo.data.map(item => { - item.监测时间 = nearestWeekday + item.监测时间.substring(10) - return [item.监测时间, item.名称, item.异常关联类型] - }) - const config22 = { - header: ['监测时间', '名称', '异常关联类型'], - data: formatData, - // headerBGC:'black', - evenRowBGC: '#0A2732', - oddRowBGC: '0A2732', - } - // console.log('formatData',formatData); - this.config22 = config22 - - // 健康指数 雷达图 - let radarData = [ - { - value: [82.44588614888224, 25, 54.00000000000001, 58.56999999999999, 20, 65, 5], - name: '纳尔实业' - }, - { - value: [50.033, 45, 58.8, 62.73, 10, 65, 50], - name: '平安保险' - }, - { - value: [43.064, 50, 53.6, 64.23, 10, 75, 50], - name: '招商银行' - }] - // console.log('radarData', radarData); - const echarts3 = echarts.init(this.$refs.echarts_3) - const option = { - tooltip: {}, - legend: { - data: ['纳尔实业', '平安保险', '招商银行'], - x: "center", - y: 'bottom', - textStyle: { - color: "#fff" - } - }, - color: ['red', 'yellow', 'blue'], - radar: { - name: { - textStyle: { - //设置颜色 - color: '#fff' - } - }, - indicator: [ - { name: '投资关系', max: 100, color: '#fff' }, - { name: '操盘模式', max: 100, color: '#fff' }, - { name: '财务状态', max: 100, color: '#fff' }, - { name: '运行状态', max: 100, color: '#fff' }, - { name: '规模扩张', max: 100, color: '#fff' }, - { name: '声誉风险', max: 100, color: '#fff' }, - { name: '外部环境', max: 100, color: '#fff' } - ], - center: ['50%', '50%'], - radius: "58%" - }, - series: [{ - name: '', - type: 'radar', - itemStyle: { - normal: { - splitLine: { - lineStyle: { - } - }, - label: { - show: false, - textStyle: { - }, - formatter: function (params) { - return params.value; - } - }, - } - }, - data: radarData - }] - }; - echarts3.setOption(option) - - // 行业预警排行 - const echarts2 = echarts.init(this.$refs.echarts_2) - // hangyeyujing json - let xData = [], yData = [] - let tmp = hangyeyujing - for (let key in tmp) { - if (key.length < 16) { - xData.push(tmp[key]) - yData.push(key) + series: [ + { + // color:'#6d7d87', + type: 'bar', + data: xData + }, + ] } - } - const option_2 = { - grid: { - left: '34%',//离左边远一点 - right: '4%', - bottom: '15%', - top: '5%',//如果不填，会默认一个特别大的值，导致图的上面留白特别大 - }, - xAxis: { - type: 'value', - axisLine: { - lineStyle: { - color: '#fff' - } - }, - }, - yAxis: { - type: 'category', - data: yData, - axisLine: { - lineStyle: { - color: '#fff' - } - }, - }, - series: [ - { - // color:'#6d7d87', - type: 'bar', - data: xData - }, - ] - } - echarts2.setOption(option_2) - this.$refs.dimension.getData() - // 第三屏中间 - this.$refs.marketRisk.getData() + echarts2.setOption(option_2) + this.$refs.dimension.getData() + // 第三屏中间 + this.$refs.marketRisk.getData() }, }, } @@ -1026,6 +1715,7 @@ ul li { .box-header { // background-color: #18478F; + font-size: 30px; text-align: center; height: 40px; // line-height: 40px; @@ -1109,10 +1799,11 @@ ul li { } \ No newline at end of file diff --git a/vue.config.js b/vue.config.js index 7e5e066..b149d9e 100644 --- a/vue.config.js +++ b/vue.config.js @@ -4,6 +4,8 @@ module.exports = defineConfig({ lintOnSave:false, //关闭eslint校验 publicPath: '/', devServer: { + host: '0.0.0.0', + port: 8000, proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: {