厂区大屏数据接口对接

zfipc-server/zfipc-admin/src/main/java/com/inspur/web/controller/bigscreen/FactoryDashboardController.java

@@ -59,4 +59,9 @@ public class FactoryDashboardController {
     public AjaxResult listLatestAlarmRecord(@PathVariable Long deptId) {
         return AjaxResult.success(factoryDashboardService.selectLatestIpcAlarmRecordByFactoryId(deptId));
     }
+
+    @GetMapping("/factoryDeptTree")
+    public AjaxResult factoryDeptTree() {
+        return AjaxResult.success(factoryDashboardService.selectCompanyDeptTreeList(null));
+    }
 }

zfipc-server/zfipc-system/src/main/java/com/inspur/bigscreen/service/IFactoryDashboardService.java

@@ -1,6 +1,7 @@
 package com.inspur.bigscreen.service;
 
 import com.inspur.bigscreen.dto.FactoryDashboardDTO;
+import com.inspur.common.core.domain.TreeSelect;
 import com.inspur.industrial.domain.IpcAlarmRecord;
 
 import java.util.List;
@@ -26,7 +27,7 @@ public interface IFactoryDashboardService {
     /**
      * 根据厂区部门id查询各个产线传感器数量
      */
-    public List<FactoryDashboardDTO> countSensorNumByProductionLine(Long deptId);
+    public FactoryDashboardDTO countSensorNumByProductionLine(Long deptId);
 
     /**
      * 根据厂区部门id查询各个产线报警数量
@@ -52,4 +53,9 @@ public interface IFactoryDashboardService {
      * 根据厂区id查询最新的报警信息
      */
     public List<IpcAlarmRecord> selectLatestIpcAlarmRecordByFactoryId(Long deptId);
+
+    /**
+     * 获取厂区部门列表
+     */
+    public List<TreeSelect> selectCompanyDeptTreeList(Long deptId);
 }

zfipc-server/zfipc-system/src/main/java/com/inspur/bigscreen/service/impl/FactoryDashboardServiceImpl.java

@@ -4,10 +4,13 @@ import com.inspur.bigscreen.constant.EquipInfoStatus;
 import com.inspur.bigscreen.dto.FactoryDashboardDTO;
 import com.inspur.bigscreen.mapper.FactoryDashboardMapper;
 import com.inspur.bigscreen.service.IFactoryDashboardService;
+import com.inspur.common.core.domain.TreeSelect;
 import com.inspur.common.core.domain.entity.SysDept;
 import com.inspur.industrial.domain.IpcAlarmRecord;
 import com.inspur.industrial.service.IIpcAlarmRecordService;
 import com.inspur.system.mapper.SysDeptMapper;
+import com.inspur.system.service.ISysDeptService;
+import com.inspur.system.service.ISysUserService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
@@ -32,6 +35,8 @@ public class FactoryDashboardServiceImpl implements IFactoryDashboardService {
     @Autowired
     private IIpcAlarmRecordService ipcAlarmRecordService;
 
+    @Autowired
+    private ISysDeptService sysDeptService;
 
     /**
      * @param deptId 厂区的部门id
@@ -40,14 +45,14 @@ public class FactoryDashboardServiceImpl implements IFactoryDashboardService {
     @Override
     public List<FactoryDashboardDTO> countEquipNumByProductionLine(Long deptId){
 
-        List<FactoryDashboardDTO> resultList = new ArrayList<>();
+//        List<FactoryDashboardDTO> resultList = new ArrayList<>();
-        List<FactoryDashboardDTO> factoryDashboardDTOList = factoryDashboardMapper.countEquipNumByProductionLine(deptId);
+//        List<FactoryDashboardDTO> factoryDashboardDTOList = factoryDashboardMapper.countEquipNumByProductionLine(deptId);
-        for (FactoryDashboardDTO factoryDashboardDTO : factoryDashboardDTOList) {
+//        for (FactoryDashboardDTO factoryDashboardDTO : factoryDashboardDTOList) {
-            SysDept deptInfo = sysDeptMapper.selectDeptById(factoryDashboardDTO.getDeptId());
+//            SysDept deptInfo = sysDeptMapper.selectDeptById(factoryDashboardDTO.getDeptId());
-            factoryDashboardDTO.setDeptName(deptInfo.getDeptName());
+//            factoryDashboardDTO.setDeptName(deptInfo.getDeptName());
-            resultList.add(factoryDashboardDTO);
+//            resultList.add(factoryDashboardDTO);
-        }
+//        }
-        return resultList;
+        return factoryDashboardMapper.countEquipNumByProductionLine(deptId);
     }
 
 
@@ -61,9 +66,9 @@ public class FactoryDashboardServiceImpl implements IFactoryDashboardService {
         List<FactoryDashboardDTO> matenanceDataList = factoryDashboardMapper.countEquipNumByStatusandProductionLine(deptId,EquipInfoStatus.MAINTENANCE);
         List<FactoryDashboardDTO> stopDataList = factoryDashboardMapper.countEquipNumByStatusandProductionLine(deptId,EquipInfoStatus.STOP);
         List<FactoryDashboardDTO> resultList = new ArrayList<>();
-        resultList.addAll(runningDataList);
+        resultList.add(convertFactoryDashboardData(runningDataList));
-        resultList.addAll(matenanceDataList);
+        resultList.add(convertFactoryDashboardData(matenanceDataList));
-        resultList.addAll(stopDataList);
+        resultList.add(convertFactoryDashboardData(stopDataList));
         return resultList;
     }
 
@@ -72,8 +77,8 @@ public class FactoryDashboardServiceImpl implements IFactoryDashboardService {
      * 根据厂区部门id查询各个产线传感器数量
      */
     @Override
-    public List<FactoryDashboardDTO> countSensorNumByProductionLine(Long deptId){
+    public FactoryDashboardDTO countSensorNumByProductionLine(Long deptId){
-        return factoryDashboardMapper.countSensorNumByProductionLine(deptId);
+        return convertFactoryDashboardData(factoryDashboardMapper.countSensorNumByProductionLine(deptId));
     }
 
     /**
@@ -144,11 +149,33 @@ public class FactoryDashboardServiceImpl implements IFactoryDashboardService {
         return ipcAlarmRecordService.selectLatestIpcAlarmRecordByFactoryId(deptId);
     }
 
+    /**
+     * 获取厂区部门列表
+     */
+    @Override
+    public List<TreeSelect> selectCompanyDeptTreeList(Long deptId){
+        List<SysDept> depts = sysDeptService.selectDeptList(new SysDept());
+        List<SysDept> factoryDepts = depts.stream().filter(dept -> dept.getAncestors().split(",").length < 4).collect(Collectors.toList());
+        return sysDeptService.buildDeptTreeSelect(factoryDepts);
+    }
+
+    private FactoryDashboardDTO convertFactoryDashboardData(List<FactoryDashboardDTO> list){
+        FactoryDashboardDTO data = new FactoryDashboardDTO();
+        if(list.get(0) != null) {
+            data.setStatus(list.get(0).getStatus());
+        }
+        data.setX(list.stream().map(FactoryDashboardDTO::getDeptName).collect(Collectors.toList()));
+        data.setY(list.stream().map(FactoryDashboardDTO::getData).collect(Collectors.toList()));
+        return data;
+    }
+
     private FactoryDashboardDTO getResultData(SysDept sysDept, List<FactoryDashboardDTO> factoryDashboardDTOList){
         FactoryDashboardDTO data = new FactoryDashboardDTO();
         data.setDeptName(sysDept.getDeptName());
         List<String> timeList = factoryDashboardDTOList.stream().map(FactoryDashboardDTO::getTime).collect(Collectors.toList());
         List<Object> dataList = factoryDashboardDTOList.stream().map(FactoryDashboardDTO::getData).collect(Collectors.toList());
+        Collections.reverse(timeList);
+        Collections.reverse(dataList);
         data.setX(timeList);
         data.setY(dataList);
         return data;

zfipc-server/zfipc-system/src/main/resources/mapper/bigscreen/FactoryDashboardMapper.xml

@@ -30,11 +30,16 @@
 
     <!--查询公司下各个产线设备数量-->
     <select id="countEquipNumByProductionLine" parameterType="Long" resultMap="factoryData">
-        select dept_id,count(1) as data from ipc_equip_info
+            select a.dept_id,a.dept_name,ifnull(b.data,0) as data from
-        where dept_id in
+            (select dept_id,dept_name from sys_dept where parent_id = #{deptId} and del_flag = '0' ) a
-              (select dept_id from sys_dept where parent_id = #{deptId})
+                left join
-            and status != 3
+            (select dept_id,count(1) as data from ipc_equip_info
-        GROUP BY dept_id;
+            where status != 3
+            group by dept_id
+            ) b
+            on a.dept_id = b.dept_id
+
+            order by b.data desc
     </select>
 
     <!--根据厂区部门id查询各个产线不同状态设备数-->
@@ -55,7 +60,7 @@
         WHERE
             a.status = #{status}
         GROUP BY
-            a.dept_id) ei -- 子查询来计数满足条件的记录
+            a.dept_id) ei
         ON
             d.dept_id = ei.dept_id;
     </select>

zfipc-ui/src/api/bigscreen/factory.js

@@ -64,3 +64,11 @@ export function getLatestAlarmRecord(deptId) {
     method: "get",
   });
 }
+
+//获取厂区部门树
+export function getFactoryDeptTree() {
+  return request({
+    url: "/bigscreen/factory/factoryDeptTree",
+    method: "get",
+  });
+}

zfipc-ui/src/views/bigscreen/factory/index.vue

@@ -13,15 +13,19 @@
               ></div>
               <div class="run-status-des-container">
                 <div
-                  v-for="(item, index) in eqpLineNum"
+                  v-for="(item, index) in echartList"
                   :key="index"
                   class="run-status-des"
                 >
-                  <div style="font-size:16px">
+                  <div style="font-size:16px;display: flex;">
+                    <div
+                      class="line-name"
+                      :style="{ backgroundColor:lineBackgroundColor(index)}"
+                    ></div>
                     <!-- <span class="label-icon"></span> -->
-                    {{ item.name }}
+                    <span style="margin-left:10px;font-family: BIAOTI;">{{ item.name }}</span>
                   </div>
-                  <div>{{ item.value }} 台</div>
+                  <div style="margin-left:10%;font-size:18px;font-weight:bolder">{{ item.value }} 台</div>
                 </div>
               </div>
             </div>
@@ -47,6 +51,12 @@
         </div>
         <div class="factory-column">
           <div class="main-bg">
+            <el-cascader
+              v-model="value"
+              :options="options"
+              style="border:1px;width:20%"
+              @change="handleFactoryChange"
+            ></el-cascader>
           </div>
           <div class="middle-wrap">
             <div class="equ-item">
@@ -63,36 +73,33 @@
               <div class="item-content alarm-lists">
                 <el-table
                   :data="alarmList"
+                  v-loading="loading"
+                  :row-style="{height:'50px'}"
                   style="width: 100%; height: 100%; overflow-y: hidden"
                 >
                   <el-table-column
-                    prop="equipName"
+                    prop="equipInfo.equipName"
                     label="设备名称"
                     align="left"
                   >
                   </el-table-column>
                   <el-table-column
-                    prop="equipStatus"
+                    prop="status"
                     label="状态"
-                    width="60"
                   >
                     <template slot-scope="scope">
                       <dict-tag
                         :options="dict.type.equip_status"
-                        :value="scope.row.equipStatus"
+                        :value="scope.row.status"
                       />
                     </template>
                   </el-table-column>
                   <el-table-column
-                    prop="level"
+                    prop="alarmValue"
-                    label="严重等级"
+                    label="报警值"
-                    width="80"
                   >
                     <template slot-scope="scope">
-                      <dict-tag
+                      <span style="color:red;">{{ scope.row.alarmValue }}</span>
-                        :options="dict.type.severity_level"
-                        :value="scope.row.level"
-                      />
                     </template>
                   </el-table-column>
                   <el-table-column
@@ -104,7 +111,7 @@
             </div>
           </div>
         </div>
-        <div class="factory-column">
+        <div class="factory-column right-column">
           <div class="equ-item">
             <div class="item-title">各产线设备运行情况</div>
             <div class="item-content">
@@ -115,7 +122,7 @@
             </div>
           </div>
           <div class="equ-item">
-            <div class="item-title">半年内各产线维系情况</div>
+            <div class="item-title">半年内各产线维修情况</div>
             <div class="item-content">
               <div
                 ref="chart5"
@@ -140,19 +147,62 @@
 <script>
 import * as echarts from "echarts";
 import _ from "lodash";
+import {
+  getEquipNumByProductionLine,
+  getEquipNumByStatusAndProductionLine,
+  getSensorNumByProductionLine,
+  getWeeklyAlarmNumByProductionLine,
+  getWeeklyEquipRunningNum,
+  getHYMaintenanceRecordNumByProductionLine,
+  getHYUpkeepRecordNumByProductionLine,
+  getLatestAlarmRecord,
+  getFactoryDeptTree,
+} from "@/api/bigscreen/factory";
 export default {
+  dicts: ["equip_status", "severity_level"],
   data() {
     return {
-      echartList: [
+      value: [100, 101, 103],
+      selectedDeptId: 103,
+      options: [
         {
-          name: "产线1",
+          value: "shejiyuanze",
-          value: "10",
+          label: "设计原则",
+          children: [
+            {
+              value: "yizhi",
+              label: "一致",
             },
             {
-          name: "产线2",
+              value: "fankui",
-          value: "12",
+              label: "反馈",
+            },
+            {
+              value: "xiaolv",
+              label: "效率",
+            },
+            {
+              value: "kekong",
+              label: "可控",
             },
           ],
+        },
+        {
+          value: "daohang",
+          label: "导航",
+          children: [
+            {
+              value: "cexiangdaohang",
+              label: "侧向导航",
+            },
+            {
+              value: "dingbudaohang",
+              label: "顶部导航",
+            },
+          ],
+        },
+      ],
+      echartList: [],
       totalEquNum: 10,
       eqpLineNum: [
         {
@@ -175,38 +225,138 @@ export default {
       height: "100%",
       lines: ["产线1", "产线2", "产线3", "其他"],
       alarmList: [],
+      lineColor: ["#004BFF", "#1FBBFF", "#00A8D6", "#7340FE"],
+      loading: false,
     };
   },
   computed: {},
   mounted() {
-    this.initChart();
+    this.getFactoryDept();
-    this.initChart1();
+    this.getCompanyEquRunData();
-    this.initChart2();
+    this.getEquNumByListAndStatus();
-    this.initChart3();
+    this.getSensorNum();
-    this.initChart4();
+    this.getWeeklyAlarmNum();
-    this.initChart5();
+    this.getAlarmRecordList();
-    this.initChart6();
+    this.getWeekRunEquNum();
+    this.getMaintenanceNum();
+    this.getUpkeepNum();
   },
   methods: {
-    initChart() {
+    handleFactoryChange() {
+      this.selectedDeptId = _.last(this.value);
+      this.getCompanyEquRunData();
+      this.getEquNumByListAndStatus();
+      this.getSensorNum();
+    },
+    getCompanyEquRunData() {
+      getEquipNumByProductionLine(this.selectedDeptId).then((res) => {
+        var total = 0;
+        var otherNum = 0;
+        var list = res.data;
+        this.echartsList = [];
+        if (list.length == 0 || list == null) {
+          return;
+        } else {
+          for (let i = 0; i < list.length; i++) {
+            if (i > 2) {
+              otherNum += list[i].data;
+            } else {
+              this.echartList.push({
+                name: list[i].deptName,
+                value: list[i].data,
+              });
+            }
+            total = total + list[i].data;
+          }
+          if (otherNum > 0) {
+            this.echartList.push({
+              name: "其他",
+              value: otherNum,
+            });
+          }
+        }
+        this.initChart(total);
+      });
+    },
+    getEquNumByListAndStatus() {
+      let chart1 = echarts.init(this.$refs.chart1);
+      chart1.showLoading();
+      getEquipNumByStatusAndProductionLine(this.selectedDeptId).then((res) => {
+        this.initChart1(res.data);
+      });
+    },
+    getSensorNum() {
+      let chart2 = echarts.init(this.$refs.chart2);
+      chart2.showLoading();
+      getSensorNumByProductionLine(this.selectedDeptId).then((res) => {
+        this.initChart2(res.data);
+      });
+    },
+    getWeeklyAlarmNum() {
+      let chart3 = echarts.init(this.$refs.chart3);
+      chart3.showLoading();
+      getWeeklyAlarmNumByProductionLine(this.selectedDeptId).then((res) => {
+        this.initChart3(res.data);
+      });
+    },
+    getAlarmRecordList() {
+      this.loading = true;
+      getLatestAlarmRecord(this.selectedDeptId).then((res) => {
+        this.alarmList = res.data;
+        this.loading = false;
+      });
+    },
+    getWeekRunEquNum() {
+      let chart4 = echarts.init(this.$refs.chart4);
+      chart4.showLoading();
+      getWeeklyEquipRunningNum(this.selectedDeptId).then((res) => {
+        this.initChart4(res.data);
+      });
+    },
+    getMaintenanceNum() {
+      let chart5 = echarts.init(this.$refs.chart5);
+      chart5.showLoading();
+      getHYMaintenanceRecordNumByProductionLine(this.selectedDeptId).then(
+        (res) => {
+          this.initChart5(res.data);
+        }
+      );
+    },
+    getUpkeepNum() {
+      let chart6 = echarts.init(this.$refs.chart6);
+      chart6.showLoading();
+      getHYUpkeepRecordNumByProductionLine(this.selectedDeptId).then((res) => {
+        this.initChart6(res.data);
+      });
+    },
+    lineBackgroundColor(index) {
+      return this.lineColor[index];
+    },
+    getFactoryDept() {
+      getFactoryDeptTree().then((res) => {
+        this.options = res.data;
+      });
+    },
+    initChart(data) {
       const machart = echarts.init(document.getElementById("echarts1"));
       //init初始化接口，返回ECharts实例，其中dom为图表所在节点
       var option = {
         // title 标题
         title: {
           show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
-          text: this.totalEquNum + "台", //主标题文本，'\n'指定换行
+          text: data + "台", //主标题文本，'\n'指定换行
           subtext: "总数", //副标题文本，'\n'指定换行
           left: "center",
-          top: "32%",
+          top: "38%",
           textStyle: {
-            fontSize: 24,
+            fontFamily: "BIAOTI",
+            fontSize: 30,
             color: "#fff",
             align: "center",
           },
           subtextStyle: {
             fontFamily: "微软雅黑",
-            fontSize: 14,
+            fontSize: 18,
             color: "#2BCAFF",
           },
         },
@@ -215,15 +365,7 @@ export default {
           trigger: "item",
         },
         // 颜色
-        color: [
+        color: this.lineColor,
-          "#004BFF",
-          "#1FBBFF",
-          "#00A8D6",
-          "#7340FE",
-          "#F49D00",
-          "#EED742 ",
-          "#E8494D",
-        ],
         // 系列列表,每个系列通过 type 决定自己的图表类型
         series: [
           {
@@ -253,7 +395,7 @@ export default {
       };
     },
 
-    initChart1() {
+    initChart1(data) {
       let p = new Promise((resolve) => {
         resolve();
       });
@@ -262,7 +404,7 @@ export default {
         let option = {
           xAxis: {
             type: "category",
-            data: this.lines,
+            data: data[0].x,
             axisLine: {
               lineStyle: {
                 type: "solid",
@@ -288,10 +430,9 @@ export default {
               fontSize: "9",
             },
             axisLine: {
-              show: false, // 必须显示!!!!!!否则name无效
+              show: false,
               lineStyle: {
                 color: "rgba(255,255,255,0.5)",
-                type: "solid",
               },
             },
             splitLine: {
@@ -314,28 +455,18 @@ export default {
               type: "shadow",
             },
           },
-          legend: {
-            data: ["产线设备数"],
-            show: true,
-            x: "right",
-            textStyle: {
-              color: "rgba(255,255,255,0.8)",
-              fontSize: "9",
-            },
-          },
           series: [
             {
               name: "运行",
-              data: [0, 1, 2, 3],
+              data: data[0].y,
               type: "bar",
               barGap: 0,
-              showBackground: true,
               itemStyle: {
                 normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                    { offset: 0, color: "#87E50D" },
+                    { offset: 0, color: "#083162" },
-                    { offset: 0.5, color: "#AAE65C" },
+                    { offset: 0.5, color: "#136AA6" },
-                    { offset: 1, color: "#90F908" },
+                    { offset: 1, color: "#083162" },
                   ]),
                   label: {
                     show: true, //开启显示
@@ -348,19 +479,18 @@ export default {
                   },
                 },
               },
-              barWidth: "30%",
+              barWidth: "20%",
             },
             {
               name: "保养维修",
-              data: [2, 3, 1, 3],
+              data: data[1].y,
               type: "bar",
-              showBackground: true,
               itemStyle: {
                 normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                    { offset: 0, color: "#83bff6" },
+                    { offset: 0, color: "#472434" },
-                    { offset: 0.5, color: "#188df0" },
+                    { offset: 0.5, color: "#84323F" },
-                    { offset: 1, color: "#188df0" },
+                    { offset: 1, color: "#472434" },
                   ]),
                   label: {
                     show: true, //开启显示
@@ -373,19 +503,18 @@ export default {
                   },
                 },
               },
-              barWidth: "30%",
+              barWidth: "20%",
             },
             {
               name: "停止",
-              data: [7, 1, 5, 6],
+              data: data[2].y,
               type: "bar",
-              showBackground: true,
               itemStyle: {
                 normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                    { offset: 0, color: "#ED9C81" },
+                    { offset: 0, color: "#08603F" },
-                    { offset: 0.5, color: "#EC5623" },
+                    { offset: 0.5, color: "#1AB97A" },
-                    { offset: 1, color: "#FD9E7E" },
+                    { offset: 1, color: "#08603F" },
                   ]),
                   label: {
                     show: true, //开启显示
@@ -398,11 +527,12 @@ export default {
                   },
                 },
               },
-              barWidth: "30%",
+              barWidth: "20%",
             },
           ],
         };
         this.chart1.setOption(option);
+        this.chart1.hideLoading();
       });
     },
     initChart2(data) {
@@ -414,7 +544,7 @@ export default {
         let option = {
           xAxis: {
             type: "category",
-            data: this.lines,
+            data: data.x,
             axisLine: {
               lineStyle: {
                 type: "solid",
@@ -477,8 +607,8 @@ export default {
           },
           series: [
             {
-              name: "各产线传感器数量",
+              name: "传感器数量",
-              data: [1, 2, 4, 5],
+              data: data.y,
               type: "pictorialBar",
               barCategoryGap: "-250%",
               symbol:
@@ -487,9 +617,9 @@ export default {
               itemStyle: {
                 normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: "#F81616" },
+                    { offset: 0, color: "#2B25CE" },
-                    { offset: 0.5, color: "#EF9D9D" },
+                    { offset: 0.5, color: "#8E8AF4" },
-                    { offset: 1, color: "#CF0F0F" },
+                    { offset: 1, color: "#5F59F3" },
                   ]),
                   label: {
                     show: true, //开启显示
@@ -507,6 +637,7 @@ export default {
           ],
         };
         this.chart2.setOption(option);
+        this.chart2.hideLoading();
       });
     },
     initChart3(data) {
@@ -518,7 +649,7 @@ export default {
         let option = {
           xAxis: {
             type: "category",
-            data: ["7-11", "7-12", "7-13"],
+            data: data[0].x,
             axisLine: {
               lineStyle: {
                 color: "#fff",
@@ -542,7 +673,7 @@ export default {
             type: "value",
             name: "单位：台",
             nameLocation: "end",
-            interval: 1,
+            interval: 3,
             nameTextStyle: {
               color: "#fff",
               fontSize: "9",
@@ -561,32 +692,19 @@ export default {
             y2: 25,
           },
 
-          series: [
+          series: [],
-            {
-              data: [1, 2, 3],
-              type: "line",
-              smooth: true,
-              symbol: "circle", //折线点设置为实心点
-              symbolSize: 2, //折线点的大小
-              itemStyle: {
-                normal: {
-                  color: "#fff", //折线点的颜色
-                },
-              },
-              lineStyle: {
-                normal: {
-                  width: 2, //波形图波浪的边框
-                  borderWidth: 2,
-                  color: "#0E9CFF",
-                },
-              },
-              areaStyle: {
-                color: "#80AEDD",
-              },
-            },
-          ],
         };
+        if (data.length > 0) {
+          data.forEach((element) => {
+            option.series.push({
+              name: element.deptName,
+              data: element.y,
+              type: "line",
+            });
+          });
+        }
         this.chart3.setOption(option);
+        this.chart3.hideLoading();
       });
     },
     initChart4(data) {
@@ -598,7 +716,7 @@ export default {
         let option = {
           xAxis: {
             type: "category",
-            data: ["7-11", "7-12", "7-13"],
+            data: data[0].x,
             axisLine: {
               lineStyle: {
                 color: "#fff",
@@ -641,32 +759,19 @@ export default {
             y2: 25,
           },
 
-          series: [
+          series: [],
-            {
-              data: [1, 2, 3],
-              type: "line",
-              smooth: true,
-              symbol: "circle", //折线点设置为实心点
-              symbolSize: 2, //折线点的大小
-              itemStyle: {
-                normal: {
-                  color: "#fff", //折线点的颜色
-                },
-              },
-              lineStyle: {
-                normal: {
-                  width: 2, //波形图波浪的边框
-                  borderWidth: 2,
-                  color: "#0E9CFF",
-                },
-              },
-              areaStyle: {
-                color: "#80AEDD",
-              },
-            },
-          ],
         };
+        if (data.length > 0) {
+          data.forEach((element) => {
+            option.series.push({
+              name: element.deptName,
+              data: element.y,
+              type: "line",
+            });
+          });
+        }
         this.chart4.setOption(option);
+        this.chart4.hideLoading();
       });
     },
     initChart5(data) {
@@ -678,7 +783,7 @@ export default {
         let option = {
           xAxis: {
             type: "category",
-            data: ["7-11", "7-12", "7-13"],
+            data: data[0].x,
             axisLine: {
               lineStyle: {
                 color: "#fff",
@@ -721,32 +826,19 @@ export default {
             y2: 25,
           },
 
-          series: [
+          series: [],
-            {
-              data: [1, 2, 3],
-              type: "line",
-              smooth: true,
-              symbol: "circle", //折线点设置为实心点
-              symbolSize: 2, //折线点的大小
-              itemStyle: {
-                normal: {
-                  color: "#fff", //折线点的颜色
-                },
-              },
-              lineStyle: {
-                normal: {
-                  width: 2, //波形图波浪的边框
-                  borderWidth: 2,
-                  color: "#0E9CFF",
-                },
-              },
-              areaStyle: {
-                color: "#80AEDD",
-              },
-            },
-          ],
         };
+        if (data.length > 0) {
+          data.forEach((element) => {
+            option.series.push({
+              name: element.deptName,
+              data: element.y,
+              type: "line",
+            });
+          });
+        }
         this.chart5.setOption(option);
+        this.chart5.hideLoading();
       });
     },
     initChart6(data) {
@@ -758,7 +850,7 @@ export default {
         let option = {
           xAxis: {
             type: "category",
-            data: ["7-11", "7-12", "7-13"],
+            data: data[0].x,
             axisLine: {
               lineStyle: {
                 color: "#fff",
@@ -801,32 +893,19 @@ export default {
             y2: 25,
           },
 
-          series: [
+          series: [],
-            {
-              data: [1, 2, 3],
-              type: "line",
-              smooth: true,
-              symbol: "circle", //折线点设置为实心点
-              symbolSize: 2, //折线点的大小
-              itemStyle: {
-                normal: {
-                  color: "#fff", //折线点的颜色
-                },
-              },
-              lineStyle: {
-                normal: {
-                  width: 2, //波形图波浪的边框
-                  borderWidth: 2,
-                  color: "#0E9CFF",
-                },
-              },
-              areaStyle: {
-                color: "#80AEDD",
-              },
-            },
-          ],
         };
+        if (data.length > 0) {
+          data.forEach((element) => {
+            option.series.push({
+              name: element.deptName,
+              data: element.y,
+              type: "line",
+            });
+          });
+        }
         this.chart6.setOption(option);
+        this.chart6.hideLoading();
       });
     },
     //预留
@@ -1355,6 +1434,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@font-face {
+  font-family: "BIAOTI";
+  src: url(../../../assets/biaoti.ttf);
+}
 .factory-line-wrap {
   display: grid;
   grid-template-columns: 24% 50% 24%;
@@ -1373,6 +1456,10 @@ export default {
       grid-template-rows: 28% 40% 30%;
       grid-gap: 1%;
     }
+    &.right-column {
+      grid-template-rows: 28% 40% 30%;
+      grid-gap: 1%;
+    }
     &:nth-child(2) {
       grid-template-rows: 69% 30%;
       > div {
@@ -1435,7 +1522,7 @@ export default {
           .run-status-des-container {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            grid-template-rows: 1fr 1fr;
+            // grid-template-rows: 1fr 1fr;
             align-items: center;
             .run-status-des {
               display: grid;
@@ -1551,4 +1638,7 @@ export default {
     center top;
   background-size: cover;
 }
+.line-name {
+  width: 2%;
+}
 </style>

zfipc-ui/src/views/eqmanagement/eqcategory/index.vue

@@ -446,16 +446,7 @@ import { getToken } from "@/utils/auth";
 import { Loading } from "element-ui";
 import ElImageViewer from "element-ui/packages/image/src/image-viewer";
 import { deptTreeSelect } from "@/api/system/user";
-import {
+
-  getEquipNumByProductionLine,
-  getEquipNumByStatusAndProductionLine,
-  getSensorNumByProductionLine,
-  getWeeklyAlarmNumByProductionLine,
-  getWeeklyEquipRunningNum,
-  getHYMaintenanceRecordNumByProductionLine,
-  getHYUpkeepRecordNumByProductionLine,
-  getLatestAlarmRecord,
-} from "@/api/bigscreen/factory";
 import {
   getEquipNumByCompany,
   getEquipNumByDiffCompany,