From 400aedb4b6281dac3ac1663a1b91da218d983d02 Mon Sep 17 00:00:00 2001
From: zhanghan11 <zhanghan11@inspur.com>
Date: Tue, 30 Jul 2024 14:37:10 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E5=90=8D=E7=A7=B0=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ehms-ui/src/views/index.vue | 555 +++++++++++++++++-------------------
 1 file changed, 266 insertions(+), 289 deletions(-)

diff --git a/ehms-ui/src/views/index.vue b/ehms-ui/src/views/index.vue
index e46a35f..89aa0cc 100644
--- a/ehms-ui/src/views/index.vue
+++ b/ehms-ui/src/views/index.vue
@@ -1,121 +1,93 @@
 <template>
   <div class="app-container home">
-    <el-row
-      :gutter="10"
-      class="firstrow"
-    >
+    <el-row :gutter="10" class="firstrow">
       <!-- 设备概览-->
-      <el-col
-        :span="16"
-        class="eqinfo"
-      >
-        <el-col
-          :span="8"
-          class="total"
-        >
-          <img src="" />
-          <span class="title">总设备（台）</span>
-          <br />
-          <span class="vlaue">{{eqNumTotal}}</span>
-        </el-col>
-        <el-col
-          :span="8"
-          class="run"
-        >
-          <span class="title">运行中设备（台）</span>
-          <br />
-          <span class="vlaue">{{eqNumRunning}}</span>
-        </el-col>
-        <el-col
-          :span="8"
-          class="notrun"
-        >
-          <span class="title">停运设备（台）</span>
-          <br />
-          <span class="vlaue">{{eqNumOff}}</span>
-        </el-col>
+      <el-col :span="16" class="eqinfo">
+            <el-col :span="8" class="total">
+              <img src=""/>
+              <span class="title">总设备（台）</span>
+              <br/>
+              <span class="vlaue">{{eqNumTotal}}</span>
+            </el-col>
+            <el-col :span="8" class="run">
+              <span class="title">运行中设备（台）</span>
+              <br/>
+              <span class="vlaue">{{eqNumRunning}}</span>
+            </el-col>
+            <el-col :span="8" class="notrun">
+              <span class="title">停运设备（台）</span>
+              <br/>
+              <span class="vlaue">{{eqNumOff}}</span>
+            </el-col>
       </el-col>
       <!-- 欢迎-->
-      <el-col
-        :span="8"
-        class="welcome"
-      >
-        <el-col
-          :span="24"
-          class="title"
-        >
+      <el-col :span="8" class="welcome">
+        <el-col :span="24" class="title">
           <span class="title1">欢迎登录</span>
-          <br />
-          <span class="vlaue">设备预测性维护系统</span>
+          <br/>
+          <span class="vlaue">设备健康管理系统</span>
         </el-col>
       </el-col>
     </el-row>
-    <el-row
-      :gutter="20"
-      class="secendrow"
-    >
-      <el-col
-        :span="24"
-        class="chart1"
-      >
-        <el-card class="chart1">
-          <div
-            class="echarts-body"
-            ref="patrolChart"
-          >
-          </div>
-        </el-card>
+    <el-row :gutter="20" class="secendrow">
+      <el-col :span="16" class="chart1">
+        <div class="echarts-body" ref="averageRunningTimeEcharts">
+          {{ initAverageRunningTimeEcharts() }}
+        </div>
+      </el-col>
+      <el-col :span="8" class="mytask">
+        <div class="mytasktitle">
+          <span style="font-weight: bold;font-size: 18px">我的待办</span>
+          <span style="float: right;cursor: pointer;" @click="goMyTask">更多</span>
+        </div>
+        <el-table :data="taskList" :border="false" class="taskTable">
+          <el-table-column label="流程名称" align="center" prop="processName" :show-overflow-tooltip="true" />
+          <el-table-column label="任务名称" align="center" prop="taskName" :show-overflow-tooltip="true" />
+          <el-table-column label="发起人" align="center" prop="starter" :show-overflow-tooltip="true" />
+          <el-table-column label="任务时间" align="center" prop="createTime" width="180" :show-overflow-tooltip="true" />
+        </el-table>
       </el-col>
     </el-row>
-    <el-row
-      :gutter="20"
-      class="thirdrow"
-    >
-      <el-col
-        :span="8"
-        class="chart2"
-      >
-        <el-card class="chart2">
-          <div
-            class="echarts-body"
-            ref="classChart"
-          >
-          </div>
-        </el-card>
+    <el-row :gutter="20" class="thirdrow">
+      <el-col :span="16" class="chart2">
+        <div class="echarts-body" ref="shutdownRateEcharts">
+          {{ initShutdownRateEcharts() }}
+        </div>
       </el-col>
-      <el-col
-        :span="8"
-        class="chart2"
-      >
-        <el-card class="chart2">
-          <div
-            class="echarts-body"
-            ref="locationChart"
-          >
-          </div>
-        </el-card>
-      </el-col>
-      <el-col
-        :span="8"
-        class="chart2"
-      >
-        <el-card class="chart2">
-          <div
-            class="echarts-body"
-            ref="fileChart"
-          >
-          </div>
-        </el-card>
+      <el-col :span="8" class="notice">
+        <div class="noticetitle">
+          <span style="font-weight: bold;font-size: 18px">公告信息</span>
+        </div>
+        <el-table :data="noticeList" :show-header="false">
+          <el-table-column
+            label="公告标题"
+            align="center"
+            prop="noticeTitle"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime" width="100">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
       </el-col>
     </el-row>
   </div>
 </template>
 <script>
-import * as echarts from "echarts";
-import { queryEqNum, loadChartsData } from "@/api/index";
+import * as echarts from 'echarts';
+import { listMytask } from "@/api/flowable/mytask";
+import { listNotice } from "@/api/system/notice";
+import { queryEqNum , loadChartsData} from "@/api/index";
 export default {
   name: "Index",
-  dicts: ["sys_notice_type"],
+  dicts: ['sys_notice_type'],
   data() {
     return {
       //设备总数
@@ -124,273 +96,284 @@ export default {
       eqNumRunning: 0,
       //停运设备数
       eqNumOff: 0,
+      //待办任务列表数据
+      taskList: [],
+      taskTotal: 0,
+      taskQueryParams:{
+        pageNum: 1,
+        pageSize: 6
+      },
+      noticeList: [],
+      noticeTotal: 0,
+      noticeQueryParams:{
+        pageNum: 1,
+        pageSize: 7
+      },
+      //日平均能运行时长
+      averageRunningTimeEchart:{},
+      shutdownRateEchart:{}
     };
   },
   created() {
+    this.getTaskList();
     this.getEqInfo();
+    this.getNoticeList();
     this.getChartsData();
   },
   methods: {
-    getEqInfo() {
-      queryEqNum().then((response) => {
+    getTaskList(){
+      listMytask(this.taskQueryParams).then(response => {
+        this.taskList = response.rows;
+        this.taskTotal = response.total;
+      });
+    },
+    getNoticeList(){
+      listNotice(this.noticeQueryParams).then(response => {
+        this.noticeList = response.rows;
+        this.noticeTotal = response.total;
+      });
+    },
+    getEqInfo(){
+      queryEqNum().then(response => {
         this.eqNumTotal = response.data.total;
         this.eqNumRunning = response.data.run;
         this.eqNumOff = response.data.notRun;
       });
     },
-    getChartsData() {
-      loadChartsData().then((response) => {
-        this.initPatrolChart(
-          response.data.monthList,
-          response.data.dailyList,
-          response.data.meterReadingList,
-          response.data.professionalList
-        );
-        this.initClassChart(response.data.classList);
-        this.initLocationChart(response.data.locationList);
-        this.initFileChart(response.data.fileList);
+    goMyTask(){
+      this.$router.push({
+        path: '/flowable/flowmanage/mytask/index',
       });
     },
-    initPatrolChart(monthList, dailyList, meterReadingList, professionalList) {
-      monthList = monthList.map((month) => month + "月");
-      let chart = echarts.init(this.$refs.patrolChart);
-      let option = {
-        title: {
-          text: "近三月点巡检记录统计",
-          left: "center",
-        },
-        legend: {
-          orient: "vertical",
-          left: "left",
-          data: ["日常巡检", "抄表巡检", "专业巡检"],
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow",
+    initAverageRunningTimeEcharts(){
+      let p = new Promise((resolve) => {
+        resolve()
+      })
+      p.then(() => {
+        this.averageRunningTimeEchart = echarts.init(this.$refs.averageRunningTimeEcharts)
+        let option = {
+          title:{
+            text:"设备日平均运行时长"
           },
-        },
-        xAxis: [
-          {
-            type: "category",
-            axisTick: { show: false },
-            data: monthList,
+          xAxis: {
+            type: 'category',
+            axisTick:{show:false},
+            axisLabel:{interval: 0}
+            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
           },
-        ],
-        yAxis: [
-          {
-            type: "value",
+          //设置边距
+          grid:{
+            top: '18%',
+            left: '1%',
+            right: '1%',
+            bottom: '10%',
+            containLabel: true
           },
-        ],
-        series: [
-          {
-            name: "日常巡检",
-            type: "bar",
-            data: dailyList,
-          },
-          {
-            name: "抄表巡检",
-            type: "bar",
-            data: meterReadingList,
-          },
-          {
-            name: "专业巡检",
-            type: "bar",
-            data: professionalList,
-          },
-        ],
-      };
-      chart.setOption(option);
-    },
-    initClassChart(data) {
-      let chart = echarts.init(this.$refs.classChart);
-      let option = {
-        title: {
-          text: "设备分类统计",
-          left: "center",
-        },
-        label: { formatter: " {b}：{d}%" },
-        tooltip: {
-          trigger: "item",
-        },
-        legend: {
-          orient: "vertical",
-          left: "left",
-        },
-        series: [
-          {
-            name: "设备分类",
-            type: "pie",
-            radius: "50%",
-            data: data,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
+          yAxis: {
+            name: '（min）',
+            type: 'value',
+            show: true,
+            axisLine:{show:false},//不显示竖线
+            splitLine:{
+              lineStyle: {
+                type:'dashed'//虚线
               },
-            },
+              show:true
+            }
           },
-        ],
-      };
-      chart.setOption(option);
-    },
-    initLocationChart(data) {
-      let chart = echarts.init(this.$refs.locationChart);
-      let option = {
-        title: {
-          text: "设备分布统计",
-          left: "center",
-        },
-        label: { formatter: " {b}：{d}%" },
-        tooltip: {
-          trigger: "item",
-        },
-        legend: {
-          orient: "vertical",
-          left: "left",
-        },
-        series: [
-          {
-            name: "设备分布",
-            type: "pie",
-            radius: "50%",
-            data: data,
-            emphasis: {
+          series: [
+            {
+              // data: [120, 200, 150, 80, 70, 110, 130],
+              type: 'bar',
               itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
-            },
-          },
-        ],
-      };
-      chart.setOption(option);
+                color: '#3E7BFA'
+              }
+            }
+          ]
+        }
+        this.averageRunningTimeEchart.setOption(option);
+      })
     },
-    initFileChart(data) {
-      let chart = echarts.init(this.$refs.fileChart);
-      let option = {
-        title: {
-          text: "档案分类统计",
-          left: "center",
-        },
-        label: { formatter: " {b}：{d}%" },
-        tooltip: {
-          trigger: "item",
-        },
-        legend: {
-          orient: "vertical",
-          left: "left",
-        },
-        series: [
-          {
-            name: "档案分类",
-            type: "pie",
-            radius: "50%",
-            data: data,
-            emphasis: {
+    initShutdownRateEcharts(){
+      let p = new Promise((resolve) => {
+        resolve()
+      })
+      p.then(() => {
+        this.shutdownRateEchart = echarts.init(this.$refs.shutdownRateEcharts);
+        let option = {
+          title:{
+            text:"设备停机率"
+          },
+          xAxis: {
+            type: 'category',
+            axisTick:{show:false},
+            axisLabel:{interval: 0}
+            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          },
+          //设置边距
+          grid:{
+            top: '18%',
+            left: '1%',
+            right: '1%',
+            bottom: '10%',
+            containLabel: true
+          },
+          yAxis: {
+            name: '（%）',
+            type: 'value',
+            show: true,
+            axisLine:{show:false},//不显示竖线
+            splitLine:{
+              lineStyle: {
+                type:'dashed'//虚线
+              },
+              show:true
+            }
+          },
+          series: [
+            {
+              // data: [82, 93, 90, 93, 29, 33, 13],
+              type: 'line',
+              smooth: true,
               itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
+                color: '#3E7BFA'
               },
-            },
-          },
-        ],
-      };
-      chart.setOption(option);
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(62,123,250,0.3)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(255,255,255,0.3)'
+                  }
+                ])
+              },
+            }
+          ]
+        }
+        this.shutdownRateEchart.setOption(option);
+      })
     },
-  },
+    getChartsData(){
+      loadChartsData().then(response => {
+        //设备日运行时长
+        let option1 = {
+          xAxis: {
+             data: response.data.dateList
+          },
+          series: [
+            {
+              data: response.data.runTimeList
+            }
+          ]
+        }
+        this.averageRunningTimeEchart.setOption(option1);
+
+        let option2 = {
+          xAxis: {
+            data: response.data.dateList
+          },
+          series: [
+            {
+              data: response.data.shutdownRateList
+            }
+          ]
+        }
+        this.shutdownRateEchart.setOption(option2);
+      });
+    }
+  }
 };
 </script>
 
 <style scoped lang="scss">
 .home {
-  .firstrow {
+  .firstrow{
     height: 172px;
-    .eqinfo {
+    .eqinfo{
       height: 100%;
-      .total {
+      .total{
         height: 100%;
         background: url(../assets/images/index/total.png) center no-repeat;
         background-size: 95% 100%;
-        .title {
+        .title{
           font-size: 20px;
           font-weight: bold;
           left: 50px;
           top: 50px;
           position: relative;
         }
-        .vlaue {
+        .vlaue{
           font-size: 32px;
           font-weight: bold;
-          color: #3e7bfa;
+          color: #3E7BFA;
           left: 70px;
           top: 60px;
           position: relative;
         }
       }
-      .run {
+      .run{
         height: 100%;
         background: url(../assets/images/index/run.png) center no-repeat;
         background-size: 95% 100%;
-        .title {
+        .title{
           font-size: 20px;
           font-weight: bold;
           left: 40px;
           top: 50px;
           position: relative;
         }
-        .vlaue {
+        .vlaue{
           font-size: 32px;
           font-weight: bold;
-          color: #06c270;
+          color: #06C270;
           left: 80px;
           top: 60px;
           position: relative;
         }
       }
-      .notrun {
+      .notrun{
         height: 100%;
         background: url(../assets/images/index/notRun.png) center no-repeat;
         background-size: 95% 100%;
-        .title {
+        .title{
           font-size: 20px;
           font-weight: bold;
           left: 40px;
           top: 50px;
           position: relative;
         }
-        .vlaue {
+        .vlaue{
           font-size: 32px;
           font-weight: bold;
-          color: #ff8800;
+          color: #FF8800;
           left: 70px;
           top: 60px;
           position: relative;
         }
       }
     }
-    .welcome {
+    .welcome{
       height: 100%;
-      .title {
+      .title{
         height: 100%;
         background: url(../assets/images/index/welcome.png) center no-repeat;
-        background-size: 100% 130%;
-        .title1 {
+        background-size:  100% 130%;
+        .title1{
           font-size: 20px;
           font-weight: bold;
-          color: #ffffff;
+          color: #FFFFFF;
           left: 40px;
           top: 50px;
           position: relative;
           float: left;
         }
-        .vlaue {
+        .vlaue{
           font-size: 20px;
           font-weight: bold;
-          color: #ffffff;
+          color: #FFFFFF;
           left: -40px;
           top: 60px;
           position: relative;
@@ -399,41 +382,35 @@ export default {
       }
     }
   }
-  .secendrow {
+  .secendrow{
     height: 383px;
     margin-top: 20px;
-    .chart1 {
+    .chart1{
       height: 100%;
-      .echarts-body {
+      .echarts-body{
         height: 100%;
         width: 100%;
       }
     }
-    .mytask {
-      .mytasktitle {
+    .mytask{
+      .mytasktitle{
         height: 35px;
         padding-left: 5px;
         padding-right: 5px;
       }
     }
   }
-  .thirdrow {
+  .thirdrow{
     height: 383px;
-    margin-top: 20px;
-    .chart2 {
+    .chart2{
       height: 100%;
-      .echarts-body {
+      .echarts-body{
         height: 100%;
         width: 100%;
       }
     }
+
   }
 }
 </style>
 
-<style>
-.el-card__body {
-  height: 100%;
-  width: 100%;
-}
-</style>
\ No newline at end of file