fix:代码找回

zkqy-ui/src/views/bussiness/processMange.vue

@@ -33,7 +33,7 @@
     <!-- </el-card> -->
     <div class="main-area">
       <div class="show-header">
-        <h3 class="header">管道列表</h3>
+        <h3 class="header">流程列表</h3>
         <div class="search-list">
           <div class="search-tab">
             <el-radio-group v-model="taskType" v-show="false">

zkqy-ui/src/views/index.vue

@@ -49,14 +49,56 @@
       </el-col>
     </el-row> -->
     <div class="info-content">
-      <div class="header" @click="toPersonalCenter">
-        <img :src="avatar" class="user-avatar" />
-      </div>
-      <div class="name">{{ nickName }}</div>
-      <div class="tenant-name">{{ tenantName }}</div>
-      <div class="date">{{ date }}</div>
+      <!-- <div class="header" @click="toPersonalCenter"> -->
+      <!-- <img :src="avatar" class="user-avatar" /> -->
+      <!-- </div> -->
+      <!-- <div class="name">{{ nickName }}</div> -->
+      <!-- <div class="tenant-name">{{ tenantName }}</div> -->
+      <!-- <div class="date">{{ date }}</div> -->
       <!-- <div class="title">欢迎登录Mec OS 工业应用操作系统</div> -->
-      <div class="title mt20">欢迎登录{{ title }}</div>
+      <!-- <div class="title">欢迎登录Mec OS 化纤行业生产管理系统</div> -->
+      <div class="echarts1">
+        <div class="pieChart" ref="pieChart"></div>
+        <div
+          :class="'describe' + (parseInt(index) + 1)"
+          v-for="(item, index) in processList"
+          :key="index"
+        >
+          <P class="text">{{ item.name }}</P>
+          <P class="num">{{ item.value }}</P>
+        </div>
+      </div>
+      <div class="echarts2">
+        <div class="lineChart" ref="lineChart"></div>
+      </div>
+      <div class="echarts3">
+        <p class="title">操作日志</p>
+        <div class="text">
+          <span class="peo">操作人</span>
+          <span class="add">ip</span>
+        </div>
+        <div class="swiper-container">
+          <div class="swiper-scrollbar"></div>
+          <div class="swiper-wrapper">
+            <div
+              class="swiper-slide"
+              v-for="(item, index) in swiperList"
+              :key="index"
+            >
+              <div>
+                <span class="name">{{ item.operName }}</span>
+                <span class="ip">{{ item.operIp }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="echarts4">
+        <div class="gaugeChart" ref="gaugeChart"></div>
+      </div>
+      <div class="echarts5">
+        <div class="barChart" ref="barChart"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -65,11 +107,53 @@
 import { formatDate } from "@/utils";
 import { getToken } from "@/utils/auth";
 import { mapGetters, mapState } from "vuex";
+import "swiper/css/swiper.css";
+import Swiper from "swiper";
+import {
+  getTask,
+  getPipeline,
+  getOperation,
+  getMaterial,
+  getLogin,
+} from "@/api/homePage/index";
 
 export default {
   name: "Index",
   data() {
     return {
+      chartObj: {
+        myChart1: null,
+        myChart2: null,
+        myChart3: null,
+        myChart4: null,
+      },
+      processList: [],
+      swiperList: [
+        /* {
+          name: "111",
+          ip: "192.168.1.1"
+        },
+        {
+          name: "222",
+          ip: "192.168.1.2"
+        },
+        {
+          name: "333",
+          ip: "192.168.1.3"
+        },
+        {
+          name: "444",
+          ip: "192.168.1.4"
+        },
+        {
+          name: "555",
+          ip: "192.168.1.5"
+        },
+        {
+          name: "666",
+          ip: "192.168.1.6"
+        }, */
+      ],
       // 用户导入参数
       upload: {
         // 是否显示弹出层（用户导入）
@@ -89,6 +173,15 @@ export default {
       version: "3.8.5",
     };
   },
+  mounted() {
+    // 初始化 echarts
+    this.initChart1();
+    this.initChart2();
+    this.initChart3();
+    this.initChart4();
+
+    this.initData();
+  },
   methods: {
     initData() {
       //任务统计
@@ -187,19 +280,14 @@ export default {
       //用户登录统计
       getLogin().then((response) => {
         if (response.code == 200) {
-          // data.put("name",dates1);
-          // data.put("value",dates2);
           let modelData = response.data;
           //  console.log(modelData);
           this.chartObj.myChart4?.setOption({
             series: [
               {
-                data: modelData.value,
+                data: [modelData],
               },
             ],
-            xAxis: {
-              data: modelData.name,
-            },
           });
         } else {
           console.log(response);
@@ -270,7 +358,7 @@ export default {
       let option = {
         color: ["#FF88E0", "#9FE080"],
         title: {
-          text: "生产任务统计",
+          text: "生产统计",
           textStyle: {
             fontSize: 16,
             fontWeight: "normal",
@@ -538,9 +626,6 @@ export default {
       return formatDate(new Date());
     },
   },
-  created() {
-    this.title = window.sessionStorage.getItem("title") || "生产协同管理系统";
-  },
 };
 </script>
 
@@ -548,16 +633,153 @@ export default {
 .home {
   position: relative;
   width: 100%;
-  height: 500px;
+  /* height: 500px; */
+  background-color: #eff2f7;
   .info-content {
-    position: absolute;
-    left: 50%;
-    top: 30%;
-    transform: translateX(-50%);
+    width: 100%;
+    height: 100%;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    .header {
+    flex-direction: row;
+    flex-wrap: wrap;
+    .echarts1 {
+      position: relative;
+      width: 20%;
+      height: 280px;
+      margin: auto;
+      padding: 20px 15px;
+      box-shadow: 10px 10px 5px #e0e0e0;
+      background-color: #fff;
+      border-radius: 10px;
+      .pieChart {
+        width: 100%;
+        height: 100%;
+      }
+      .describe1 {
+        .text {
+          position: absolute;
+          left: 50px;
+          top: 90px;
+        }
+        .num {
+          position: absolute;
+          font-size: 20px;
+          color: black;
+          left: 63px;
+          top: 55px;
+        }
+      }
+      .describe2 {
+        .text {
+          position: absolute;
+          left: 157px;
+          top: 90px;
+        }
+        .num {
+          position: absolute;
+          font-size: 20px;
+          color: black;
+          left: 170px;
+          top: 55px;
+        }
+      }
+    }
+    .echarts2 {
+      width: 76%;
+      height: 280px;
+      margin: auto;
+      padding: 20px 15px;
+      box-shadow: 10px 10px 5px #e0e0e0;
+      background-color: #fff;
+      border-radius: 10px;
+      margin-right: 30px;
+      .lineChart {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .echarts3 {
+      width: 23%;
+      height: 200px;
+      margin: auto;
+      padding: 20px 15px;
+      box-shadow: 10px 10px 5px #e0e0e0;
+      background-color: #fff;
+      border-radius: 10px;
+      margin-top: 20px;
+      p {
+        margin: 0;
+      }
+      .title {
+        font-size: 16px;
+        color: "#696969";
+      }
+      .text {
+        display: flex;
+        flex-direction: row;
+        margin-top: 10px;
+        .peo {
+          font-size: 14px;
+          color: black;
+          font-weight: bold;
+          margin-left: 20px;
+          margin-right: 120px;
+        }
+        .add {
+          font-size: 14px;
+          color: black;
+          font-weight: bold;
+        }
+      }
+      .swiper-container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        width: 90%;
+        height: 80px;
+        /* overflow: auto; */
+        margin-top: 10px;
+        .name {
+          text-align: center;
+          font-size: 16px;
+          margin-left: 2px;
+          margin-right: 59px;
+        }
+        .ip {
+          text-align: center;
+          font-size: 16px;
+        }
+      }
+    }
+    .echarts4 {
+      width: 20%;
+      height: 200px;
+      margin: auto;
+      padding: 20px 15px;
+      box-shadow: 10px 10px 5px #e0e0e0;
+      background-color: #fff;
+      border-radius: 10px;
+      margin-top: 20px;
+      .gaugeChart {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .echarts5 {
+      width: 53%;
+      height: 200px;
+      margin: auto;
+      padding: 20px 15px;
+      box-shadow: 10px 10px 5px #e0e0e0;
+      background-color: #fff;
+      border-radius: 10px;
+      margin-top: 20px;
+      margin-right: 30px;
+      .barChart {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    /* .header {
       white-space: nowrap;
       margin-bottom: 5px;
       cursor: pointer;
@@ -565,7 +787,7 @@ export default {
         width: 160px;
         border-radius: 50%;
       }
-    }
+    } */
     .name {
       font-size: 30px;
       margin-bottom: 5px;
@@ -577,8 +799,7 @@ export default {
       margin-bottom: 10px;
     }
     .title {
-      // font-size: 16px;
-      font-size: 20px;
+      font-size: 16px;
     }
   }
 }