系列完结篇，直奔主题

电子车间能源监控看板展示视频

1、渐变色环形进度条

在进度条下方直接加svg实现，中间的字体则先隐藏环形进度条默认的文字:show-text="false"，再用绝对定位来写进去

                  
{{ loadRate }}%
负荷率

2、折线图表与按钮控制展示项与flex布局

折线图和flex布局这个在系列第二期讲过，就不多赘述。

主要来讲解用按钮来控制折线图显示哪一项的折线，原理是给按钮组赋值一个数组，激活的按钮就给数组push它的name，然后绘制图表时，使用includes来判断某一项是否展示，若展示，则给图表的series用push添加该项的配置内容。

HTML：

能耗
产量
单耗
日
月
年

CSS：

            .line_monitor {.content {height: 427px;position: relative;.dimension_box {width: 350px;.btn {width: 50px;}}.group_chart {height: 100%;}}}.active {box-shadow: inset 0px 0px 8px 0px #3191cf;border-radius: 2px;}

JS：

    Setsigledimension(type, groud) {if (groud == "groud") {if (this.groudDimension.includes(type)) {let arr = [];this.groudDimension.forEach((item) => {if (item != type) {arr.push(item);}});this.groudDimension = arr;this.setOptionLine();} else {this.groudDimension.push(type);}this.getGrouddata();} else if (groud == "dimension") {this.unitDimension = type;this.getGrouddata();}},getGrouddata() {if (!this.rankData.length) return;let params = {dimension: this.unitDimension,energyType: 1,isOrgData: this.level == 1 ? true : false,condition: this.groudDimension,meterGroupId: this.meterGroupId || null,};params.date = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");params.endDate = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");let self = this;axios.cancel("ogetMeterStationResp");if (this.unitDimension == "month") {let paramList = [params,{...params,date: moment(new Date()).add(-1, "month").format("YYYY-MM-DD HH:mm:ss"),endDate: moment(new Date()).add(-1, "month").format("YYYY-MM-DD HH:mm:ss"),},];let leng =moment(new Date()).add(-1, "month").endOf("month").format("DD") - 1 >=29? 29: 28;let toleng = moment(new Date()).format("DD") - 0;Promise.all(paramList.map((i) => {return axios.ogetMeterStationResp(i);})).then((reslist) => {if (reslist[0].data) {let arr = [];reslist[0].data.body.forEach((item, index) => {let item1 = reslist[1].data.body[index];let obj = {...item,gwYDate: [...item1.gwYDate.slice(-(leng - toleng + 1)),...item.gwYDate.slice(0, toleng),],outputDate: item1.outputDate && item.outputDate ? [...item1.outputDate.slice(-(leng - toleng + 1)),...item.outputDate.slice(0, toleng),] : null,singleDate: item1.singleDate && item.singleDate ? [...item1.singleDate.slice(-(leng - toleng + 1)),...item.singleDate.slice(0, toleng),] : null,xdate: [...item1.xdate.slice(-(leng - toleng + 1)),...item.xdate.slice(0, toleng),],};arr.push(obj);});self.respData = [...arr];self.setOptionLine();}});} else {axios.ogetMeterStationResp({ ...params, isInjection: 0 }).then((res) => {if (res.data && res.data.body && res.data.body.length) {self.respData = res.data.body;self.setOptionLine();} else {this.singleChart_groud ? this.singleChart_groud.clear() : "";}});}},setOptionLine() {let self = this;if (!self.groudDimension.length) {self.lineOption = {};return;}let series = [];if (self.groudDimension.includes("usageAmount")) {let gwYDate = self.respData[self.importantIndex].gwYDate ? self.respData[self.importantIndex].gwYDate.map(x => x.toFixed(2)) : [];series.push({ydata: gwYDate,name: "能耗",type: 'line',color: 'rgb(173, 255, 47)',});}if (self.groudDimension.includes("single")) {let singleDate = self.respData[self.importantIndex].singleDate ? self.respData[self.importantIndex].singleDate.map(x => x.toFixed(2)) : [];series.push({ydata: singleDate,name: "单耗",type: 'line',color: 'rgb(244, 164, 96)',});}if (self.groudDimension.includes("output")) {let outputDate = self.respData[self.importantIndex].outputDate ? self.respData[self.importantIndex].outputDate.map(x => x.toFixed(2)) : [];series.push({ydata: outputDate,name: "产量",type: 'line',color: 'rgb(2, 126, 247)',});}let option = {grid: {top: '20%',right: '5%',bottom: '10%',left: '10%',},xAxis: self.respData[self.importantIndex].xdate,series: series,legend: {textStyle: {color: '#C0D7FE'},left: 'right',padding: [20, 20, 0, 0]},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',label: {backgroundColor: '#6a7985'}},},};self.singleMeterName = self.respData[self.importantIndex].meterGroupName == '全厂' ? '整体' : self.respData[self.importantIndex].meterGroupName;self.lineOption = option//   self.setSingleLine(data, "singleChart_groud");},

3、表格设计与单击双击事件

左边一列的排名在columns里使用render加工：

        {title: "排名",type: "render",prop: "title",minWidth: 80,render: (h, params) => {return h("div",{style: {display: 'flex',justifyContent: 'center',alignItems: 'center',},},[h('div', {style: {color: params.index < 3 ? "#42EA86" : '#5CE2FF',whiteSpace: "nowrap",background: params.index < 3 ? '#0B2518' : '#011D47',width: '32px',height: '26px',borderTop: params.index < 3 ? '1px solid #2A904C' : '1px solid #0058A4',borderBottom: params.index < 3 ? '1px solid #2A904C' : '1px solid #0058A4',},},params.index + 1),]);},},

单击事件@rowClick是显示该工厂的数据图表，双击事件@rowDblclick是进入该工厂的下一层子级工厂，需要结合完整代码一并理解，就直接放下面吧

完整代码：

全体样式index.less

.kanban_home_electric {height: 1080px;width: 1920px;.kanban__body {width: 100%;height: 100%;display: flex;justify-content: space-between;padding: 105px 24px 0;.dimension_box {position: absolute;height: 40px;width: 160px;top: 8px;left: 16px;display: flex;justify-content: space-around;align-items: center;z-index: 1000;.btn {width: 40px;height: 28px;line-height: 28px;text-align: center;color: #81e0ff;cursor: pointer;}.active {box-shadow: inset 0px 0px 8px 0px #3191cf;border-radius: 2px;}}.body_left {width: 614px;height: 100%;.whole_monitor {.content {height: 204px;padding: 16px;.card_bg {width: 582px;height: 170px;background-repeat: no-repeat;background-size: 100% 100%;background-image: url(../../assets/homeElectric/card_bg.png);position: relative;.ball_bg {width: 181px;height: 186px;background-repeat: no-repeat;background-size: 100% 100%;background-image: url(../../assets/homeElectric/ball_bg.png);position: absolute;top: 9px;left: 212px;.progress {position: absolute;top: 26px;left: 26px;.el-progress-circle__track {stroke: #042d5c !important;}svg>path:nth-child(2) {stroke: url(#blue);}}.value_box {position: absolute;width: 85%;top: 54px;text-align: center;font-size: 14px;.value {span {font-size: 22px;}}}}.content_left {position: absolute;top: 15px;left: 18px;height: 143px;display: flex;flex-direction: column;justify-content: space-between;}.content_right {position: absolute;top: 15px;left: 397px;height: 143px;display: flex;flex-direction: column;justify-content: space-between;}.content_box {display: flex;align-items: center;height: 44px;img {height: 44px;width: 44px;}.name {width: 85px;margin-left: 10px;text-align: left;color: rgba(255, 255, 255, 0.8);}.value {width: 50px;text-align: left;font-weight: bold;}}}}}.whole_trend {.content {height: 262px;position: relative;.group_chart {height: 100%;}}}.whole_alarm {.content {height: 330px;}}}.body_center {width: 614px;height: 100%;.line_monitor {.content {height: 427px;position: relative;.dimension_box {width: 350px;.btn {width: 50px;}}.group_chart {height: 100%;}}}.line_waste {.content {height: 427px;position: relative;padding-top: 60px;//   overflow: hidden;overflow-y: scroll;display: flex;flex-wrap: wrap;align-content: flex-start;.waste_box {width: 182px;height: 106px;margin: 0 0 16px 15px;background-repeat: no-repeat;background-size: 100% 100%;background-image: url(../../assets/homeElectric/waste_bg.png);.name {margin: 22px 0 16px 0;font-size: 16px;text-align: center;}.value {color: #0cc8e6;font-size: 22px;text-align: center;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;span {font-size: 16px;}}}}}}.body_right {width: 614px;height: 100%;.whole_rank {.content {height: 427px;position: relative;.reset {position: absolute;width: 40px;height: 28px;top: -36px;right: 38px;line-height: 28px;text-align: center;color: #81e0ff;border-radius: 3px;cursor: pointer;z-index: 11;border: 1px solid #3191cf;background-color: rgba(22, 45, 85, 0.1);&:hover {color: #0094ff;border: 1px solid #0094ff;}}}}.main_monitor {.content {height: 427px;}}}}
}

group_plate组件：

group_chart组件

group_table组件

为了减少单文件代码行数而单独封装的columns.js文件

let arrow_up = require('../../../assets/businessMonitoring/arrow_up.png');
let arrow_down = require('../../../assets/businessMonitoring/arrow_down.png');const columns = {alarmColumns: [{title: "节点名称",type: "render",prop: "title",minWidth: 150,render: (h, params) => {return h("div",{style: {color: "#fff",whiteSpace: "nowrap",},},params.row.meterName);},},{title: "报警类型",type: "render",prop: "title",minWidth: 100,render: (h, params) => {return h("div",{style: {color: "#fff",whiteSpace: "nowrap",},},params.row.alarmTypeName);},},{title: "日期",type: "render",prop: "title",minWidth: 130,render: (h, params) => {return h("div",{style: {color: "#fff",whiteSpace: "nowrap",},},params.row.startTime.slice(0, 10));},},{title: "责任人",type: "render",prop: "title",minWidth: 80,render: (h, params) => {return h("div",{style: {color: "#fff",whiteSpace: "nowrap",},},params.row.userMipName);},},{title: "状态",type: "render",prop: "title",minWidth: 80,render: (h, params) => {return h("div",{style: {color: params.row.handleStatus ? '#35B45E' : '#E76746',whiteSpace: "nowrap",},},params.row.handleStatus ? '已处理' : '未处理');},},],mainColumns: [{title: "排名",type: "render",prop: "title",minWidth: 80,render: (h, params) => {return h("div",{style: {display: 'flex',justifyContent: 'center',alignItems: 'center',},},[h('div', {style: {color: params.index < 3 ? "#42EA86" : '#5CE2FF',whiteSpace: "nowrap",background: params.index < 3 ? '#0B2518' : '#011D47',width: '32px',height: '26px',borderTop: params.index < 3 ? '1px solid #2A904C' : '1px solid #0058A4',borderBottom: params.index < 3 ? '1px solid #2A904C' : '1px solid #0058A4',},},params.index + 1),]);},},{title: "设备名称",type: "render",prop: "title",minWidth: 150,render: (h, params) => {return h("div",{style: {color: "#fff",whiteSpace: "nowrap",},},params.row.meterGroupName);},},{title: "开工用能",type: "render",prop: "title",minWidth: 100,render: (h, params) => {return h("div",{style: {color: "#fff",whiteSpace: "nowrap",},},params.row.usageAmount);},},{title: "闲时用能",type: "render",prop: "title",minWidth: 100,render: (h, params) => {return h("div",{style: {color: "#fff",whiteSpace: "nowrap",},},params.row.wasteUsage);},},{title: "闲时用能占比",type: "render",prop: "title",minWidth: 100,render: (h, params) => {return h("div",{style: {color: params.row.usageRate < 0 ? '#35B45E' : '#E76746',whiteSpace: "nowrap",},},params.row.usageRate + '%');},},],rankColumns: [{title: "排名",type: "render",prop: "title",minWidth: 80,render: (h, params) => {return h("div",{style: {display: 'flex',justifyContent: 'center',alignItems: 'center',},},[h('div', {style: {color: params.index < 3 ? "#42EA86" : '#5CE2FF',whiteSpace: "nowrap",background: params.index < 3 ? '#0B2518' : '#011D47',width: '32px',height: '26px',borderTop: params.index < 3 ? '1px solid #2A904C' : '1px solid #0058A4',borderBottom: params.index < 3 ? '1px solid #2A904C' : '1px solid #0058A4',},},params.index + 1),]);},},{title: "产线名称",type: "render",prop: "title",minWidth: 150,render: (h, params) => {return h("div",{style: {color: "#fff",whiteSpace: "nowrap",},},params.row.deviceName);},},{title: "电量(万kW·h)",type: "render",prop: "title",minWidth: 100,render: (h, params) => {return h("div",{style: {color: "#fff",whiteSpace: "nowrap",},},(params.row.electricity * 10000).toFixed(0) / 10000);},},{title: "日环比",type: "render",prop: "title",minWidth: 100,render: (h, params) => {if (params.row.momData) {return h("div", {style: {display: 'flex',justifyContent: 'center',alignItems: 'center',}},[h('img', {domProps: {align: 'center',src: params.row.momData > 0? arrow_up: arrow_down,},style: {width: '14px',height: '14px',margin: '0 4px',}}), h('span', {style: {color:params.row.momData > 0? "#E76746": "#35B45E",},},params.row.momData + "%"),]);} else {return h("div", {style: {color: "#fff",}},'0%');}},},{title: "日同比",type: "render",prop: "title",minWidth: 100,render: (h, params) => {if (params.row.yoyData) {return h("div", {style: {display: 'flex',justifyContent: 'center',alignItems: 'center',}},[h('img', {domProps: {align: 'center',src: params.row.yoyData > 0? arrow_up: arrow_down,},style: {width: '14px',height: '14px',margin: '0 4px',}}), h('span', {style: {color:params.row.yoyData > 0? "#E76746": "#35B45E",},},params.row.yoyData + "%"),]);} else {return h("div", {style: {color: "#fff",}},'0%');}},},],
}
export default columns;

那么总算是赶在离职前的最后一天把项目看板开发经验系列肝完了，希望其中的思路能帮助到接触看板开发的你~

之后随缘更新番外篇吧，感谢支持，THX