From 5e97aea3407257d8072a4bc0821d0a1d4ba93980 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com> Date: Sat, 22 Jan 2022 10:18:56 +0800 Subject: [PATCH] add --- src/views/bigScreen/management/index.vue | 8 +- src/views/bigScreen/management/left1.vue | 114 ++++- src/views/bigScreen/management/right2.vue | 415 ++++++++++++------ src/views/bigScreen/securityManage/center.vue | 6 +- vue.config.js | 4 +- 5 files changed, 401 insertions(+), 146 deletions(-) diff --git a/src/views/bigScreen/management/index.vue b/src/views/bigScreen/management/index.vue index 0173b73..7f563eb 100644 --- a/src/views/bigScreen/management/index.vue +++ b/src/views/bigScreen/management/index.vue @@ -3,19 +3,19 @@
-
+
- +
- +
diff --git a/src/views/bigScreen/management/left1.vue b/src/views/bigScreen/management/left1.vue index 9dcc905..9281940 100644 --- a/src/views/bigScreen/management/left1.vue +++ b/src/views/bigScreen/management/left1.vue @@ -13,6 +13,8 @@ >
+ { if (200 == res.code) { - if (res.data.length % 2 == 0) { - this.total = res.data.length; - this.dataList = res.data; + this.total = res.data.length; + this.dataList = res.data; + if (res.data.length && res.data.length % 2 == 0) { + this.isOdd = true; } else { - this.total = res.data.length - 1; - res.data.splice(this.total); - this.dataList = res.data; - this.setData(this.dataList.slice(0, 2)); + this.isOdd = false; + this.setData(res.data.slice(0, 2)); } // if (res.data.length > 2) { // list = res.data.splice(0, 2); @@ -220,7 +222,11 @@ export default { const data = this.dataList.slice(val * 2 - 2, val * 2); this.setData(data); }, + + // this.chart = echarts.init(this.$refs.chartOdd, "macarons"); + setData(list) { + if (list.length < 2) return this.setOddEchars(list); this.chart = echarts.init(this.$refs.chart, "macarons"); let arr1 = [ ...list[0].value.map((e) => parseInt(e.startNumber)), @@ -393,6 +399,100 @@ export default { ], }); }, + setOddEchars(list) { + console.log(list); + let arr1 = [ + ...list[0].value.map((e) => parseInt(e.startNumber)), + ...list[0].value.map((e) => parseInt(e.endNumber)), + ...list[0].value.map((e) => parseInt(e.yearTarget)), + ]; + let max0 = Math.max.apply(null, arr1); + this.chart.dispose(); + this.chart.setOption({ + title: { + text: list[0].key, + left: "19%", + bottom: 5, + textStyle: { + color: "#fff", + fontStyle: "normal", + fontWeight: "600", + fontFamily: "sans-serif", + fontSize: 18, + }, + }, + tooltip: { + trigger: "axis", + }, + legend: { + left: "center", + data: ["初期", "当年目标", "末期"], + textStyle: { + color: "#fff", + }, + }, + color: ["#5AD8A6", "#F6D97E", "#5B8FF9"], + radar: [ + { + indicator: [ + ...list[0].value.map((e, index) => { + if (index == 0) { + // return { name: e.indexName, axisLabel: { show: true }, color: '#fff' }; + return { + name: e.indexName, + max: max0, + axisLabel: { show: true }, + color: "#fff", + }; + } + return { + name: e.indexName, + // max: Math.max(...list[0].value.map(e => e.startNumber),...list[0].value.map(e => e.indexName),...list[0].value.map(e => e.endNumber) ) + }; + }), + // { name: '登陆频次', max: 6500, axisLabel: { show: true }, color: '#fff' }, + ], + center: ["25.5%", "50%"], + radius: 50, + name: { + // (圆外的标签)雷达图每个指示器名称的配置项。 + textStyle: { + color: "#fff", + }, + }, + // 最大值 + axisLabel: { + color: "#fff", + }, + }, + ], + series: [ + { + type: "radar", + data: [ + { + value: list[0].value.map((e) => e.startNumber), + name: "初期", + label: { + normal: { + // show: true, + color: "#fff", + }, + }, + }, + { + value: list[0].value.map((e) => e.yearTarget), + name: "当年目标", + }, + { + value: list[0].value.map((e) => e.endNumber), + name: "末期", + }, + ], + }, + ], + }); + }, initLine() { this.request({ url: "/hx/operating/getHxSynthesizeIndexPic", diff --git a/src/views/bigScreen/management/right2.vue b/src/views/bigScreen/management/right2.vue index e582f6c..36c1185 100644 --- a/src/views/bigScreen/management/right2.vue +++ b/src/views/bigScreen/management/right2.vue @@ -319,44 +319,220 @@ export default { // console.log(list.filter(e => e.category == '其他').map(e => e.realQuantity)) this.initChart3(categoryTotal); - let newArray = []; - for (let i = 0; i < list.length; i++) { - const item = list[i]; - newArray.push([]); - for (let j = 0; j < item.length; j++) { - const item2 = item[j]; - if (item2.realQuantity) { - item2["completionRate"] = ( - item2.realQuantity / item2.planQuantity - ).toFixed(4); - newArray[i].push(item2); - } - } - } - console.log(newArray); + var app = {}; + var posList = [ + "left", + "right", + "top", + "bottom", + "inside", + "insideTop", + "insideLeft", + "insideRight", + "insideBottom", + "insideTopLeft", + "insideTopRight", + "insideBottomLeft", + "insideBottomRight", + ]; + + app.configParameters = { + rotate: { + min: -90, + max: 90, + }, + align: { + options: { + left: "left", + center: "center", + right: "right", + }, + }, + verticalAlign: { + options: { + top: "top", + middle: "middle", + bottom: "bottom", + }, + }, + position: { + options: echarts.util.reduce( + posList, + function (map, pos) { + map[pos] = pos; + return map; + }, + {} + ), + }, + distance: { + min: 0, + max: 100, + }, + }; + + app.config = { + rotate: 90, + align: "left", + verticalAlign: "middle", + position: "insideBottom", + distance: 15, + onChange: function () { + var labelOption = { + normal: { + rotate: app.config.rotate, + align: app.config.align, + verticalAlign: app.config.verticalAlign, + position: app.config.position, + distance: app.config.distance, + }, + }; + myChart.setOption({ + series: [ + { + label: labelOption, + }, + { + label: labelOption, + }, + { + label: labelOption, + }, + { + label: labelOption, + }, + ], + }); + }, + }; + + var labelOption = { + show: true, + position: app.config.position, + distance: app.config.distance, + align: app.config.align, + verticalAlign: app.config.verticalAlign, + rotate: app.config.rotate, + formatter: "{c} {name|{a}}", + fontSize: 16, + rich: { + name: { + textBorderColor: "#fff", + }, + }, + }; this.chart2 = echarts.init(this.$refs.chart2); this.chart2.setOption({ + color: colorList, + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + // 进行数据处理 + formatter: function (params) { + var html = ""; + if (params.length != 0) { + // 可以自己打印一下console.info(params[0]); + var getName = params[0].name; + html += getName + "
"; + for (var i = 0; i < params.length; i++) { + // 如果为0 为空的数据我们不要了(你们可以直接判断 > 0) + if ( + params[i].value != null && + params[i].value != 0 && + params[i].value != "" + ) { + html += params[i].marker; + html += + params[i].seriesName + ": " + params[i].value + "
"; + } + } + } + return html; + }, + }, legend: { - // data: ['利润', '利润预测', '利润目标完成率'], - // left: 0, + textStyle: { + color: "#fff", + }, + data: ["Forest", "Steppe", "Desert"], + }, + toolbox: { + show: true, + orient: "vertical", + left: "right", + top: "center", + feature: { + mark: { show: true }, + dataView: { show: true, readOnly: false }, + magicType: { + show: true, + type: ["line", "bar", "stack", "tiled"], + }, + restore: { show: true }, + saveAsImage: { show: true }, + }, + }, + dataZoom: { + type: "slider", + start: 0, + end: 50, textStyle: { color: "#fff", }, }, - grid: { - left: "3%", - right: "6%", - bottom: "3%", - containLabel: true, - }, xAxis: [ { type: "category", - data: monthList, - axisPointer: { - type: "shadow", + axisTick: { show: false }, + position: "bottom", + data: ["2012", "", "", "", ""], + axisLine: { + lineStyle: { + color: "rgb(255, 255, 255)", + }, }, + }, + { + type: "category", + axisTick: { show: false }, + position: "bottom", + data: ["", "2013", "", "", ""], + axisLine: { + lineStyle: { + color: "rgb(255, 255, 255)", + }, + }, + }, + { + type: "category", + axisTick: { show: false }, + position: "bottom", + data: ["", "", "2014", "", ""], + axisLine: { + lineStyle: { + color: "rgb(255, 255, 255)", + }, + }, + }, + { + type: "category", + axisTick: { show: false }, + position: "bottom", + data: ["", "", "", "2015", ""], + axisLine: { + lineStyle: { + color: "rgb(255, 255, 255)", + }, + }, + }, + { + type: "category", + axisTick: { show: false }, + position: "bottom", + data: ["", "", "", "", "2016"], axisLine: { lineStyle: { color: "rgb(255, 255, 255)", @@ -366,39 +542,19 @@ export default { ], yAxis: [ { - type: "value", - name: "", - min: 0, - // max: 250, - // interval: 50, - axisLabel: { - formatter: "{value}", - }, - splitLine: { - show: false, //不显示网格线 - }, - splitArea: { - show: false, //不显示网格区域 - }, - axisLine: { - lineStyle: { - color: "rgb(255, 255, 255)", - }, - }, - }, - { - type: "value", min: 0, max: 100, - // interval: 5, - axisLabel: { - formatter: "{value} %", - }, + interval: 20, splitLine: { - show: false, //不显示网格线 + show: true, + // 改变轴线颜色 + lineStyle: { + // 使用深浅的间隔色 + color: ["rgba(255, 255, 255,.5)"], + }, }, - splitArea: { - show: false, //不显示网格区域 + axisLabel: { + formatter: "{value}", }, axisLine: { lineStyle: { @@ -407,96 +563,95 @@ export default { }, }, ], - grid: { - containLabel: true, - width: "99%", - left: 0, - top: 50, - bottom: 50, - }, - dataZoom: { - type: "slider", - start: 0, - end: this.dataZoomEnd(monthList.length, 4), - }, series: [ { - name: "稀土", + name: "Forest", type: "bar", - data: list.map( - (e) => e.filter((e) => e.category == "稀土")[0].realQuantity - ), - itemStyle: { - color: "#E3F5C2", - }, + barGap: 0, + label: labelOption, + xAxisIndex: 0, + data: [320], }, { - name: "隔热", + name: "Steppe", type: "bar", - data: list.map( - (e) => e.filter((e) => e.category == "隔热")[0].realQuantity - ), - itemStyle: { - color: "#45D1CC", - }, + label: labelOption, + xAxisIndex: 0, + data: [220], }, { - name: "其他", + name: "Desert", type: "bar", - data: list.map( - (e) => e.filter((e) => e.category == "其他")[0].realQuantity - ), - itemStyle: { - color: "#61C1FB", - }, + label: labelOption, + xAxisIndex: 0, + data: [332], }, { - name: "稀土完成率", - type: "line", - yAxisIndex: 1, - smooth: false, - data: [ - 12.0, 12.2, 13.3, 14.5, 16.3, 10.2, 20.3, 23.4, 23.0, 16.5, - 12.0, 6.2, - ], - itemStyle: { - normal: { - color: "#E3F5C2", - }, - }, - symbol: "none", + name: "Forest", + type: "bar", + barGap: 0, + label: labelOption, + xAxisIndex: 1, + data: ["", 320], }, { - name: "隔热完成率", - type: "line", - yAxisIndex: 1, - smooth: false, - data: [ - 14.0, 14.2, 16.3, 18.5, 12.3, 20.2, 40.3, 43.4, 43.0, 26.5, - 22.0, 12.2, - ], - itemStyle: { - normal: { - color: "#45D1CC", - }, - }, - symbol: "none", + name: "Steppe", + type: "bar", + label: labelOption, + xAxisIndex: 1, + data: ["", 220], }, { - name: "其他完成率", - type: "line", - yAxisIndex: 1, - smooth: false, - data: [ - 22.0, 22.2, 32.3, 42.5, 26.3, 50.2, 30.3, 43.4, 43.0, 56.5, - 42.0, 56.2, - ], - itemStyle: { - normal: { - color: "#61C1FB", - }, - }, - symbol: "none", + name: "Desert", + type: "bar", + label: labelOption, + xAxisIndex: 1, + data: ["", 232], + }, + { + name: "Forest", + type: "bar", + barGap: 0, + label: labelOption, + xAxisIndex: 2, + data: ["", "", 320], + }, + { + name: "Steppe", + type: "bar", + label: labelOption, + xAxisIndex: 2, + data: ["", "", 420], + }, + { + name: "Desert", + type: "bar", + label: labelOption, + xAxisIndex: 2, + data: ["", "", 232], + }, + { + name: "Forest", + type: "bar", + barGap: 0, + label: labelOption, + xAxisIndex: 3, + data: ["", "", "", 320], + }, + { + name: "Forest", + type: "bar", + barGap: 0, + label: labelOption, + xAxisIndex: 4, + data: ["", "", "", "", 620], + }, + { + name: "Steppe", + type: "bar", + label: labelOption, + xAxisIndex: 4, + data: ["", "", "", "", 290], }, ], }); diff --git a/src/views/bigScreen/securityManage/center.vue b/src/views/bigScreen/securityManage/center.vue index 5738d3b..7255618 100644 --- a/src/views/bigScreen/securityManage/center.vue +++ b/src/views/bigScreen/securityManage/center.vue @@ -21,7 +21,7 @@ >
- 一级：{{ v.pointName }} + Ⅰ级：{{ v.pointName }}
@@ -34,7 +34,7 @@ >
- 二级：{{ v.pointName }} + Ⅱ级：{{ v.pointName }}
@@ -47,7 +47,7 @@ >
- 三级：{{ v.pointName }} + Ⅲ级：{{ v.pointName }}
diff --git a/vue.config.js b/vue.config.js index 6ec0d53..b4b08b5 100644 --- a/vue.config.js +++ b/vue.config.js @@ -34,8 +34,8 @@ module.exports = { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { // target: `http://localhost:1818`, - target: `http://120.26.107.74:1818`, - // target: `http://192.168.0.115:1818`, + // target: `http://120.26.107.74:1818`, + target: `http://192.168.0.115:1818`, // target: `http://124.70.138.50:1818`, changeOrigin: true, pathRewrite: {