开启首页数据统计

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,12 +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 {
-      title: "",
+      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: {
         // 是否显示弹出层（用户导入）
@@ -90,7 +173,403 @@ export default {
       version: "3.8.5",
     };
   },
+  mounted() {
+    // 初始化 echarts
+    this.initChart1();
+    this.initChart2();
+    this.initChart3();
+    this.initChart4();
+
+    this.initData();
+  },
   methods: {
+    initData() {
+      //任务统计
+      getTask().then((response) => {
+        if (response.code == 200) {
+          this.processList = response.data;
+          //   console.log(this.processList);
+          this.chartObj.myChart1.setOption({
+            series: [
+              {
+                data: response.data,
+              },
+            ],
+          });
+        } else {
+          console.log(response);
+          this.$message.error("获取数据失败");
+        }
+      });
+
+      //管道统计
+      getPipeline().then((response) => {
+        if (response.code == 200) {
+          //  console.log(response.data);
+          //  console.log(response.data[0].date);
+          let xAxisData = response.data[0].date;
+          xAxisData = xAxisData.map(function (dateStr) {
+            var date = new Date(dateStr);
+            return date.getMonth() + 1 + "月" + date.getDate() + "日";
+          });
+          let loginList = response.data.map((item) => item.name);
+          this.chartObj.myChart2.setOption({
+            legend: {
+              data: loginList,
+            },
+            xAxis: {
+              data: xAxisData,
+            },
+            series: response.data,
+          });
+        } else {
+          console.log(response);
+          this.$message.error("获取数据失败");
+        }
+      });
+
+      //操作日志
+      getOperation().then((response) => {
+        if (response.code == 200) {
+          this.swiperList = response.data;
+          this.$nextTick(() => {
+            var swiper = new Swiper(".swiper-container", {
+              direction: "vertical",
+              loop: true,
+              autoplay: {
+                delay: 1000,
+                disableOnInteraction: false,
+              },
+              scrollbar: {
+                el: ".swiper-scrollbar",
+              },
+              slidesPerView: 3,
+              freeMode: true,
+              // spaceBetween: 1,
+            });
+          });
+        } else {
+          console.log(response);
+          this.$message.error("获取数据失败");
+        }
+      });
+
+      //原材料统计
+      getMaterial().then((response) => {
+        if (response.code == 200) {
+          //  console.log(response.data);
+          let tabularList = response.data;
+          //  tabularList.push({ name: "多表数量", value: 30 });
+          let labelList = response.data.map((item) => item.name);
+          this.chartObj.myChart3.setOption({
+            yAxis: {
+              data: labelList,
+            },
+            series: [
+              {
+                data: response.data,
+              },
+            ],
+          });
+        } else {
+          console.log(response);
+          this.$message.error("获取数据失败");
+        }
+      });
+
+      //用户登录统计
+      getLogin().then((response) => {
+        if (response.code == 200) {
+          let modelData = response.data;
+          //  console.log(modelData);
+          this.chartObj.myChart4?.setOption({
+            series: [
+              {
+                data: [modelData],
+              },
+            ],
+          });
+        } else {
+          console.log(response);
+          this.$message.error("获取数据失败");
+        }
+      });
+    },
+
+    initChart1() {
+      this.chartObj.myChart1 = this.$echarts.init(this.$refs.pieChart);
+      let option = {
+        color: ["#9370db", "#ffd700", "#00ccff", "#ff6600", "#ff9900"],
+        title: {
+          text: "任务统计",
+          left: "left",
+          textStyle: {
+            fontSize: 16,
+            fontWeight: "normal",
+            color: "#696969",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          left: "60%",
+          top: "60%",
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: "pie",
+            radius: ["40%", "100%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              // borderRadius: 10,
+              borderColor: "#fff",
+              borderWidth: 2,
+            },
+            right: "40%",
+            top: "50%",
+            data: [
+              { value: 10, name: "工艺流" },
+              { value: 20, name: "审批流" },
+            ],
+            label: {
+              show: false,
+              position: "center",
+            },
+            labelLine: {
+              show: false,
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 20,
+                fontWeight: "bold",
+              },
+            },
+          },
+        ],
+      };
+      this.chartObj.myChart1.setOption(option);
+    },
+
+    initChart2() {
+      this.chartObj.myChart2 = this.$echarts.init(this.$refs.lineChart);
+      let option = {
+        color: ["#FF88E0", "#9FE080"],
+        title: {
+          text: "管道统计",
+          textStyle: {
+            fontSize: 16,
+            fontWeight: "normal",
+            color: "#696969",
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["在产生产任务", "完成数量"],
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          top: "20%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "01\nMon",
+            "02\nTue",
+            "03\nWed",
+            "04\nThu",
+            "05\nFri",
+            "06\nSat",
+            "07\nSun",
+            "08\nMon",
+            "09\nTue",
+            "10\nWed",
+            "11\nThu",
+            "12\nFri",
+            "13\nSat",
+            "14\nSun",
+            "15\nMon",
+            "16\nTue",
+            "17\nWed",
+            "18\nThu",
+            "19\nFri",
+            "20\nSat",
+            "21\nSun",
+            "22\nMon",
+            "23\nTue",
+            "24\nWed",
+            "25\nThu",
+            "26\nFri",
+            "27\nSat",
+            "28\nSun",
+            "29\nMon",
+            "30\nTue",
+          ],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "客户端",
+            type: "line",
+            smooth: true,
+            data: [
+              10, 23, 42, 13, 30, 25, 40, 30, 42, 55, 40, 28, 20, 30, 45, 25,
+              20, 30, 40, 33, 35, 40, 46, 31, 13, 34, 20, 10, 36, 43,
+            ],
+          },
+          {
+            name: "工具端",
+            type: "line",
+            smooth: true,
+            data: [
+              20, 30, 29, 40, 55, 33, 30, 26, 36, 45, 50, 34, 38, 25, 28, 43,
+              16, 30, 45, 52, 40, 46, 33, 57, 50, 33, 40, 59, 56, 56,
+            ],
+          },
+        ],
+      };
+      this.chartObj.myChart2.setOption(option);
+    },
+
+    initChart3() {
+      this.chartObj.myChart3 = this.$echarts.init(this.$refs.gaugeChart);
+      let option = {
+        color: ["#00ccff", "#ff6600", "#ff9900", "#9370db", "#ffd700"],
+        title: {
+          text: "原材料统计",
+          left: "left",
+          textStyle: {
+            fontSize: 16,
+            fontWeight: "normal",
+            color: "#696969",
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "0%",
+          right: "3%",
+          top: "20%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          nameLocation: "middle",
+          nameTextStyle: {
+            align: "center",
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+
+        yAxis: {
+          type: "category",
+          data: ["总数", "入库数量", "出库数量"],
+          inverse: true, // 使类目从右向左排列
+        },
+
+        series: [
+          {
+            type: "bar",
+            barWidth: "18",
+            orientation: "horizontal",
+            data: [
+              { value: 88, name: "表单" },
+              { value: 66, name: "表格" },
+              { value: 33, name: "三级联动" },
+            ],
+            showBackground: true,
+            backgroundStyle: {
+              color: "#F0F8FF",
+            },
+          },
+        ],
+      };
+      this.chartObj.myChart3.setOption(option);
+    },
+
+    initChart4() {
+      this.chartObj.myChart4 = this.$echarts.init(this.$refs.barChart);
+      let option = {
+        color: ["#5D84FE"],
+        title: {
+          text: "用户登录统计",
+          textStyle: {
+            fontSize: 16,
+            fontWeight: "normal",
+            color: "#696969",
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: [
+            "1月",
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月",
+          ],
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 100,
+          interval: 20,
+          splitLine: {
+            show: false, // 关闭y轴的水平分割线
+          },
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          top: "30%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        series: [
+          {
+            data: [0],
+            type: "bar",
+            barWidth: "30", // 设置柱体宽度
+            showBackground: true,
+            backgroundStyle: {
+              color: "#E8EFFF",
+            },
+          },
+        ],
+      };
+      this.chartObj.myChart4.setOption(option);
+    },
+
     /** 导入按钮操作 */
     handleImport() {
       this.upload.title = "用户导入";
@@ -147,10 +626,6 @@ export default {
       return formatDate(new Date());
     },
   },
-  mounted() {
-    // this.title = window.sessionStorage.getItem("title") || "智能制造平台";
-    this.title = window.sessionStorage.getItem("title") || "生产协同管理系统";
-  },
 };
 </script>
 
@@ -158,17 +633,153 @@ export default {
 .home {
   position: relative;
   width: 100%;
-  // height: 500px;
-  min-height: calc(100vh - 140px);
+  /* 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;
@@ -176,7 +787,7 @@ export default {
         width: 160px;
         border-radius: 50%;
       }
-    }
+    } */
     .name {
       font-size: 30px;
       margin-bottom: 5px;
@@ -188,8 +799,7 @@ export default {
       margin-bottom: 10px;
     }
     .title {
-      // font-size: 16px;
-      font-size: 20px;
+      font-size: 16px;
     }
   }
 }