From 7dde068ed02a25c91b042c126fe5acf738202698 Mon Sep 17 00:00:00 2001 From: guangyin Date: Wed, 17 May 2023 16:54:11 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E8=BF=90=E8=90=A5=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=90=AD=E5=BB=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/style/pageCommon.component.scss | 15 + src/components/manage/left/chartData.js | 288 ++++++++++++++++++ .../manage/left/manageLeft.component.html | 48 +++ .../manage/left/manageLeft.component.ts | 70 +++++ src/components/manage/right/chartData.js | 252 +++++++++++++++ .../manage/right/manageRight.component.html | 43 +++ .../manage/right/manageRight.component.ts | 95 ++++++ src/views/overview.component.html | 5 + src/views/overview.component.ts | 4 + 9 files changed, 820 insertions(+) create mode 100644 src/components/manage/left/chartData.js create mode 100644 src/components/manage/left/manageLeft.component.html create mode 100644 src/components/manage/left/manageLeft.component.ts create mode 100644 src/components/manage/right/chartData.js create mode 100644 src/components/manage/right/manageRight.component.html create mode 100644 src/components/manage/right/manageRight.component.ts diff --git a/src/assets/style/pageCommon.component.scss b/src/assets/style/pageCommon.component.scss index 54a3d4b..8502b14 100644 --- a/src/assets/style/pageCommon.component.scss +++ b/src/assets/style/pageCommon.component.scss @@ -833,7 +833,13 @@ .font-size-14 { font-size: 14px; } +.font-size-20 { + font-size: 20px; +} +.font-weight-normal{ + font-weight: normal; +} .risk-pie-chart { width: 48%; height: 146px; @@ -3124,3 +3130,12 @@ svg.loading-icon { margin-right: 0; } } +.manage-part{ + .eq-number{ + color: rgba(255, 255, 255, 0.6); + } + .white{ + color: #FFFFFF; + } +} + diff --git a/src/components/manage/left/chartData.js b/src/components/manage/left/chartData.js new file mode 100644 index 0000000..9f2e8bd --- /dev/null +++ b/src/components/manage/left/chartData.js @@ -0,0 +1,288 @@ + +/** + * 左侧柱状图 + * @param data + * @param xAxisData + * @param legend + * @param $echarts + * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}} + */ +export const barChartData = function (data, xAxisData, legend,$echarts) { + const chartData = data.map((item,i)=>{ + let color = []; + if (i === 0){ + color = ['#BD7EFF','#947FEA'] + }else{ + color = ['#67D6FF','#7DAEFF'] + } + return { + 'data': item, + 'type': 'bar', + 'smooth': true, + "name": legend[i], + 'barWidth': 4, + 'barGap':'130%', + 'itemStyle': { + 'borderRadius': [2, 2, 0, 0], + 'color': function (params) { + return new $echarts.graphic.LinearGradient( + 0, 0, 0, 1, + [{ + offset: 0, + color: color[0] + }, + { + offset: 1, + color: color[1] + } + ] + ) + }, + } + } + }) + return { + title: { + text:'用水统计', + textStyle:{ + color:'#ffffff', + fontWeight:'normal', + } + }, + color: ['#947FEA','#7DAEFF'], + xAxis: { + type: 'category', + splitLine: { + show: true, + lineStyle: { + color: 'rgba(153,153,153,0.4)', + type: 'solid' + }, + }, + axisLabel: { + //x轴文字的配置 + show: true, + interval: 0,//使x轴文字显示全 + rotate:30, + fontSize:10 + }, + axisLine: { + lineStyle: { + color: '#999999', + } + }, + + data: xAxisData + }, + yAxis: { + name:'单位：吨', + type: 'value', + splitLine: { + show: true, + lineStyle: { + color: 'rgba(153,153,153,0.4)', + type: 'solid' + }, + }, + axisLine: { + lineStyle: { + color: '#999999', + } + }, + }, + series: chartData, + tooltip: { + show: false, + alwaysShowContent: false, + trigger: 'item' + }, + grid: { + x: 30, + y: 70, + x2: 22, + y2: 20, + }, + legend: { + data: legend, + top: 10, + padding: [2, 2], + icon:'circle', + align:'left', + right:0, + itemGap:10, + width: "100%", + itemWidth:10, + // 设置文本样式 + textStyle: { + // 未单独设置样式的图例（即非上下标） + lineHeight: 8, + verticalAlign: "middle", + fontSize: 10, + color: "#fff", + // 单独设置样式的图例（即上下标） + rich: { + // 数字下标 + sub: { + verticalAlign: "bottom", + fontSize: 8 + }, + // 数字上标 + sup: { + verticalAlign: "top", + fontSize: 8 + }, + // 文字下标 + wxb: { + verticalAlign: "bottom", + fontSize: 7, + }, + // 文字上标 + wsb: { + verticalAlign: "top", + fontSize: 7, + } + } + } + } + + } +} + + +export const lineChartData = function () { + let xLabel = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; + let dataValue = ['50', '150', '60', '110', '60', '200', '150']; + let dataValue1 = ['10', '60', '25', '45', '60', '76', '60']; + return { + dataZoom : { + type:"inside", + // orient:"vertical", + startValue:0, + endValue:10 + }, + legend: { + show: false, + top: '10%', + icon: "rect", + itemWidth: 10, // 图例标记的图形宽度。 + // itemGap: 20, // 图例每项之间的间隔。 + itemHeight: 10, // 图例标记的图形高度。 + textStyle: { + color: '#fff', + fontSize: 14, + padding: [0, 8, 0, 8] + } + }, + grid: { + top: '15%', + left: '10%', + right: '5%', + bottom: '20%', + }, + xAxis: { + boundaryGap: false, + name:'日', + type: 'category', + splitLine: { + show: true, + lineStyle: { + color: 'rgba(153,153,153,0.4)', + type: 'solid' + }, + }, + axisLabel: { + //x轴文字的配置 + show: true, + // interval: 0,//使x轴文字显示全 + }, + axisLine: { + lineStyle: { + color: '#999999', + } + }, + data: xLabel + }, + yAxis: { + type: 'value', + name:'单位：吨', + nameLocation:'end', + splitLine: { + show: true, + lineStyle: { + color: 'rgba(153,153,153,0.4)', + type: 'solid' + }, + }, + axisLine: { + lineStyle: { + color: '#999999', + } + }, + }, + series: [ + { + name: '示例示例', + type: 'line', + symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆 + smooth: true, + color:'#FADFA4', + lineStyle: { + color:'#FADFA4', + normal: { + width: 2, + }, + }, + symbolSize: 4, //设定实心点的大小 + data: dataValue, + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: 'rgba(250,223,164,0.2)' + }, { + offset: 1, color: 'rgba(250,223,164,0.2)' + }], + global: false + } + }, + }, + }, + { + name: '示例示例', + type: 'line', + symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆 + smooth: true, + color:'#947FEA', + lineStyle: { + normal: { + width: 2, + }, + }, + symbolSize: 4, //设定实心点的大小 + data: dataValue1, + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: 'rgba(148,127,234,0.2)' + }, { + offset: 1, color: 'rgba(148,127,234,0.2)' + }], + global: false + } + }, + }, + } + ] + } +} diff --git a/src/components/manage/left/manageLeft.component.html b/src/components/manage/left/manageLeft.component.html new file mode 100644 index 0000000..fba897e --- /dev/null +++ b/src/components/manage/left/manageLeft.component.html @@ -0,0 +1,48 @@ +
+ +
+
+

设备在线管理

+
+ 消防站 + + 200 + /300 +
+
+ + 供排水设备 + +
+
+ 年累计用水（m³） +
+ 1200 +
+
+
+ 专用蓄水池（m³） +
+ 2000 +
+
+
+ +
+
+ + 污水处理设备 + +
+
+ 年累计处理污水（m³） +
+ 1200 +
+
+
+ +
+
diff --git a/src/components/manage/left/manageLeft.component.ts b/src/components/manage/left/manageLeft.component.ts new file mode 100644 index 0000000..7c002dc --- /dev/null +++ b/src/components/manage/left/manageLeft.component.ts @@ -0,0 +1,70 @@ +import {Component, Emit, Vue} from 'vue-property-decorator'; +import template from "./manageLeft.component.html" +import TitleComponent from "@/components/title.component.vue" +import {lineChartData,barChartData} from "./chartData"; +import * as echarts from 'echarts'; +import("@/assets/style/pageCommon.component.scss") + + +Component.registerHooks([ + 'beforeRouteLeave', +]); +@Component({ + template, + components: { + TitleComponent, + }, +}) +export default class ManageLeftComponent extends Vue { + //标题左侧图标 + imgSrc = require("@/assets/icons/png/env/env-title-icon.png"); + //柱状图数据 + barChartData:any = {} + //柱状图图例 + bar:any = {} + //折线图数据 + lineChartData:any = {} + //折线图图例 + line:any = {} + //折线图x轴坐标 + xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] + //图例 + legend = ["水 (吨)", + "标准煤 (吨)"] + getEcharts(e,type){ + this[type] = e + if (type === 'bar'){ + this.barChartData= barChartData([[90, 55, 80, 85, 25, 60, 60], [160, 80, 130, 133, 40, 95, 95]], this.xAxisData, this.legend, echarts) + }else{ + this.lineChartData = lineChartData() + } + + } + //点击告警信息 + @Emit() + getItem(item) { + // console.log('item', item) + } + + count = 1 + + + mounted() { + + } + + destroyed() { + + } + + changeMore() { + console.log(1) + } + + changeClose() { + console.log(1) + } + + +} + diff --git a/src/components/manage/right/chartData.js b/src/components/manage/right/chartData.js new file mode 100644 index 0000000..e213983 --- /dev/null +++ b/src/components/manage/right/chartData.js @@ -0,0 +1,252 @@ + +export const lineChartData = function () { + return { + color:['#FADFA4','#947FEA'], + xAxis: { + type: 'category', + splitLine: { + show: true, + lineStyle: { + color: '#999999', + type: 'solid' + }, + }, + axisLabel: { + //x轴文字的配置 + show: true, + interval: 0,//使x轴文字显示全 + }, + axisLine: { + lineStyle: { + color: '#999999', + } + }, + + data: ['1月','2月','3月','4月','5月'] + }, + legend: { + top: 'top', + itemGap: 30, + itemWidth: 8, + itemHeight: 8, + textStyle: { + // 未单独设置样式的图例（即非上下标） + lineHeight: 12, + verticalAlign: "middle", + fontSize: 10, + color: "#fff" + }, + data:[ + { + name:'应急事件', + icon:'roundRect' + },{ + name:'应急演练', + icon:'roundRect' + } + ] + }, + yAxis: { + type: 'value', + splitLine: { + show: true, + lineStyle: { + color: '#999999', + type: 'solid' + }, + }, + axisLine: { + lineStyle: { + color: '#999999', + } + }, + }, + series: [ + { + name:'应急事件', + data: [60,80,140,70,100], + type: 'line', + symbolSize: 4, + symbol: 'circle', + lineStyle: { + width: 2 + }, + smooth: true, + label: { + show: false, + position: 'top', + color: '#ffffff', + borderWidth: 0 + }, + },{ + name:'应急演练', + data: [50,70,130,60,90], + type: 'line', + symbolSize: 4, + symbol: 'circle', + lineStyle: { + width: 2 + }, + smooth: true, + label: { + show: false, + position: 'top', + color: '#ffffff', + borderWidth: 0 + }, + } + ], + + tooltip: { + trigger: 'item', + backgroundColor:"rgba(0,0,0,0.6)", + borderWidth:0, + textStyle:{ + color:"rgba(255,255,255,0.8)", + }, + }, + grid: { + x: 30, + y: 30, + x2: 12, + y2: 20, + } + } +} +export const lineChartData1 = function () { + let xLabel = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; + let dataValue = ['50', '150', '60', '110', '60', '200', '150']; + let dataValue1 = ['10', '60', '25', '45', '60', '76', '60']; + return { + dataZoom : { + type:"inside", + // orient:"vertical", + startValue:0, + endValue:10 + }, + legend: { + show: false, + top: '10%', + icon: "rect", + itemWidth: 10, // 图例标记的图形宽度。 + // itemGap: 20, // 图例每项之间的间隔。 + itemHeight: 10, // 图例标记的图形高度。 + textStyle: { + color: '#fff', + fontSize: 14, + padding: [0, 8, 0, 8] + } + }, + grid: { + top: '15%', + left: '10%', + right: '5%', + bottom: '20%', + }, + xAxis: { + boundaryGap: false, + name:'日', + type: 'category', + splitLine: { + show: true, + lineStyle: { + color: 'rgba(153,153,153,0.4)', + type: 'solid' + }, + }, + axisLabel: { + //x轴文字的配置 + show: true, + // interval: 0,//使x轴文字显示全 + }, + axisLine: { + lineStyle: { + color: '#999999', + } + }, + data: xLabel + }, + yAxis: { + type: 'value', + name:'单位：吨', + nameLocation:'end', + splitLine: { + show: true, + lineStyle: { + color: 'rgba(153,153,153,0.4)', + type: 'solid' + }, + }, + axisLine: { + lineStyle: { + color: '#999999', + } + }, + }, + series: [ + { + name: '示例示例', + type: 'line', + symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆 + smooth: true, + color:'#FADFA4', + lineStyle: { + color:'#FADFA4', + normal: { + width: 2, + }, + }, + symbolSize: 4, //设定实心点的大小 + data: dataValue, + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: 'rgba(250,223,164,0.2)' + }, { + offset: 1, color: 'rgba(250,223,164,0.2)' + }], + global: false + } + }, + }, + }, + { + name: '示例示例', + type: 'line', + symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆 + smooth: true, + color:'#947FEA', + lineStyle: { + normal: { + width: 2, + }, + }, + symbolSize: 4, //设定实心点的大小 + data: dataValue1, + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: 'rgba(148,127,234,0.2)' + }, { + offset: 1, color: 'rgba(148,127,234,0.2)' + }], + global: false + } + }, + }, + } + ] + } +} diff --git a/src/components/manage/right/manageRight.component.html b/src/components/manage/right/manageRight.component.html new file mode 100644 index 0000000..3690413 --- /dev/null +++ b/src/components/manage/right/manageRight.component.html @@ -0,0 +1,43 @@ +
+
+ + 能耗统计 + + +
+
+ + 设备在线统计 + +
+
+ + 安防设备 +
+ 100/300 +
+
+
+ + 训练设备 +
+ 100/300 +
+
+
+ + 配套设备 +
+ 100/300 +
+
+
+ + 物资盘点 + + +
+ +
diff --git a/src/components/manage/right/manageRight.component.ts b/src/components/manage/right/manageRight.component.ts new file mode 100644 index 0000000..0061ac0 --- /dev/null +++ b/src/components/manage/right/manageRight.component.ts @@ -0,0 +1,95 @@ +import {Component, Emit, Vue} from 'vue-property-decorator'; +import template from "./manageRight.component.html" +import {lineChartData,lineChartData1} from "./chartData"; +import TitleComponent from "@/components/title.component.vue" +import * as echarts from 'echarts'; + +import("@/assets/style/pageCommon.component.scss") + + +Component.registerHooks([ + 'beforeRouteLeave', +]); +@Component({ + template, + components: { + TitleComponent, + }, +}) +export default class ManageRightComponent extends Vue { + //标题图片 + imgSrc = require("@/assets/icons/png/env/env-title-icon.png"); + //定时器 + timer: any = null; + //折线图数据 + option: any = {} + //折线图实例 + lineChart: any = {} + //折线图2数据 + lineData1: any = {} + //折线图实例 + lineChart1: any = {} + + showPop = false + + popTitle = '开启演练' + + + + //获取图表实例 + getEcharts(e, type) { + this[type] = e + if (type === 'lineChart'){ + this.initLineData() + }else{ + this.lineData1 = lineChartData1() + } + + } + + //图表自适应 + resize() { + setTimeout(() => { + this.lineChart.resize(); + }, 300) + } + + timerForLineData: any = null; + + //自动切换line图表数据 + autoChangeLineData() { + this.timerForLineData = setInterval(() => { + this.lineChart.clear() + this.lineChart.setOption(this.option) + }, 5000) + } + + //获取范围内随机数 + getRandomInt(min: number, max: number) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值 + } + + mounted() { + this.autoChangeLineData() + window.addEventListener("resize", this.resize); + } + + //初始化line图表 + initLineData() { + this.option = lineChartData() + } + + beforeDestroy() { + clearInterval(this.timer) + clearInterval(this.timerForLineData) + } + + destroyed() { + window.removeEventListener("resize", this.resize) + } + + +} + diff --git a/src/views/overview.component.html b/src/views/overview.component.html index 5359cd4..985a4d4 100644 --- a/src/views/overview.component.html +++ b/src/views/overview.component.html @@ -8,6 +8,9 @@ + + +
@@ -17,6 +20,8 @@ class="animate__animated animate__fadeInRight"> + +
diff --git a/src/views/overview.component.ts b/src/views/overview.component.ts index 0e22bd1..74eb65a 100644 --- a/src/views/overview.component.ts +++ b/src/views/overview.component.ts @@ -8,6 +8,8 @@ import HomeLeftComponent from "@/components/home/left/homeLeft.component"; import HomeRightComponent from "@/components/home/right/homeRight.component"; import ViewLeftComponent from "@/components/view/left/viewLeft.component"; import ViewRightComponent from "@/components/view/right/viewRight.component"; +import ManageLeftComponent from "@/components/manage/left/manageLeft.component"; +import ManageRightComponent from "@/components/manage/right/manageRight.component"; @@ -17,6 +19,8 @@ import ViewRightComponent from "@/components/view/right/viewRight.component"; HomeRightComponent, ViewLeftComponent, ViewRightComponent, + ManageLeftComponent, + ManageRightComponent } }) export default class OverViewComponent extends BaseComponent {