首页数据交互

zkqy-ui/src/api/homePage/index.js

@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+//工业流&审批流
+export function getProcess() {
+    return request({
+      url: '/statistics/info/getProcessInformation',
+      method: 'get',
+    })
+}
+
+//登录次数统计
+export function getLogin() {
+   return request({
+     url: '/statistics/info/getLoginInformationStatistics',
+     method: 'get',
+   })
+}
+
+//登录统计信息
+export function getOperation() {
+    return request({
+      url: '/statistics/info/getOperationInformationStatistics',
+      method: 'get',
+    })
+}
+
+//数据建模数量
+export function getData() {
+    return request({
+      url: '/statistics/info/getDataModelingStatistics',
+      method: 'get',
+    })
+}
+//表单表格
+export function getTabular() {
+    return request({
+      url: '/statistics/info/getTabularStatistics',
+      method: 'get',
+    })
+}

zkqy-ui/src/views/index.vue

@@ -50,7 +50,7 @@
     </el-row> -->
     <div class="info-content">
       <!-- <div class="header" @click="toPersonalCenter"> -->
-        <!-- <img :src="avatar" class="user-avatar" /> -->
+      <!-- <img :src="avatar" class="user-avatar" /> -->
       <!-- </div> -->
       <!-- <div class="name">{{ nickName }}</div> -->
       <!-- <div class="tenant-name">{{ tenantName }}</div> -->
@@ -59,10 +59,14 @@
       <!-- <div class="title">欢迎登录Mec OS 化纤行业生产管理系统</div> -->
       <div class="echarts1">
         <div class="pieChart" ref="pieChart"></div>
-        <P class="planNum">10</P>  
-        <P class="approvalNum">20</P>  
-        <P class="plan">工艺流</P>  
-        <P class="approval">审批流</P>  
+        <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>
@@ -76,11 +80,15 @@
         <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.name }}</span>
-                <span class="ip">{{ item.ip }}</span>      
-              </div>   
+            <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>
@@ -99,14 +107,29 @@
 import { formatDate } from "@/utils";
 import { getToken } from "@/utils/auth";
 import { mapGetters, mapState } from "vuex";
-import 'swiper/css/swiper.css'; 
-import Swiper from 'swiper';
+import "swiper/css/swiper.css";
+import Swiper from "swiper";
+import {
+  getProcess,
+  getOperation,
+  getLogin,
+  getTabular,
+  getData,
+} 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"
         },
@@ -129,7 +152,7 @@ export default {
         {
           name: "666",
           ip: "192.168.1.6"
-        },
+        }, */
       ],
       // 用户导入参数
       upload: {
@@ -156,258 +179,385 @@ export default {
     this.initChart2();
     this.initChart3();
     this.initChart4();
-    this.$nextTick(() => {
-      var swiper = new Swiper(".swiper-container", {
-        direction: "vertical",
-        loop: true,
-        autoplay: {
-          delay: 1000, 
-        },
-        scrollbar: {
-          el: ".swiper-scrollbar",
-        },
-        slidesPerView: 3,
-        freeMode: true,
-        // spaceBetween: 1,
-      });
-    });
+
+    this.initData();
   },
   methods: {
+    initData() {
+      //工业流&审批流
+      getProcess().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("获取数据失败");
+        }
+      });
+
+      //登录次数统计
+      getLogin().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("获取数据失败");
+        }
+      });
+
+      // 表格统计
+      getTabular().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("获取数据失败");
+        }
+      });
+
+      //数据建模数量
+      getData().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() {
-      // 通过 $ref 进行挂载
-      let myChart1 = this.$echarts.init(this.$refs.pieChart);
+      this.chartObj.myChart1 = this.$echarts.init(this.$refs.pieChart);
       let option = {
         color: ["#9370db", "#ffd700", "#00ccff", "#ff6600", "#ff9900"],
         title: {
-          text: '流程统计',
-          // subtext: '\n\t\t\t\t\t10\t\t\t\t\t\t\t\t\t\t\t\t\t\t20',
-          left: 'left',
+          text: "流程统计",
+          left: "left",
           textStyle: {
             fontSize: 16,
-            fontWeight: 'normal',
-            color: '#696969'
+            fontWeight: "normal",
+            color: "#696969",
           },
-          /* subtextStyle: {
-            fontSize: 20,
-            color: '#000000'
-          } */
         },
         tooltip: {
-          trigger: 'item'
+          trigger: "item",
         },
         legend: {
-          left: '60%',
-          top: '60%',
+          left: "60%",
+          top: "60%",
         },
         series: [
           {
             // name: 'Access From',
-            type: 'pie',
-            radius: ['40%', '100%'],
+            type: "pie",
+            radius: ["40%", "100%"],
             avoidLabelOverlap: false,
             itemStyle: {
               // borderRadius: 10,
-              borderColor: '#fff',
-              borderWidth: 2
+              borderColor: "#fff",
+              borderWidth: 2,
             },
-            right: '40%',
-            top: '50%',
+            right: "40%",
+            top: "50%",
             data: [
-              { value: 10, name: '工艺流' },
-              { value: 20, name: '审批流' },
+              { value: 10, name: "工艺流" },
+              { value: 20, name: "审批流" },
             ],
             label: {
               show: false,
-              position: 'center'
+              position: "center",
             },
             labelLine: {
-              show: false
+              show: false,
             },
             emphasis: {
               label: {
                 show: true,
                 fontSize: 20,
-                fontWeight: 'bold'
-              }
-            }
-          }
-        ]
+                fontWeight: "bold",
+              },
+            },
+          },
+        ],
       };
-      myChart1.setOption(option);
+      this.chartObj.myChart1.setOption(option);
     },
-    
-    initChart2(){
-      let myChart2 = this.$echarts.init(this.$refs.lineChart);
+
+    initChart2() {
+      this.chartObj.myChart2 = this.$echarts.init(this.$refs.lineChart);
       let option = {
         color: ["#FF88E0", "#9FE080"],
         title: {
-          text: '用户登录统计',
+          text: "用户登录统计",
           textStyle: {
             fontSize: 16,
-            fontWeight: 'normal',
-            color: '#696969'
+            fontWeight: "normal",
+            color: "#696969",
           },
         },
         tooltip: {
-          trigger: 'axis'
+          trigger: "axis",
         },
         legend: {
-          data: ['客户端', '工具端']
+          data: ["客户端11", "工具端22"],
         },
         grid: {
-          left: '3%',
-          right: '4%',
-          top: '20%',
-          bottom: '0%',
-          containLabel: true
+          left: "3%",
+          right: "4%",
+          top: "20%",
+          bottom: "0%",
+          containLabel: true,
         },
         xAxis: {
-          type: 'category',
+          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', 
-                ]
+            "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'
+          type: "value",
         },
         series: [
           {
-            name: '客户端',
-            type: 'line',
+            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]
+            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',
+            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]
+            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,
+            ],
           },
-        ]
-      }
-      myChart2.setOption(option);
+        ],
+      };
+      this.chartObj.myChart2.setOption(option);
     },
 
-    initChart3(){
-      let myChart3 = this.$echarts.init(this.$refs.gaugeChart);
+    initChart3() {
+      this.chartObj.myChart3 = this.$echarts.init(this.$refs.gaugeChart);
       let option = {
-        color: ["#00ccff", "#ff6600", "#ff9900","#9370db", "#ffd700"],
+        color: ["#00ccff", "#ff6600", "#ff9900", "#9370db", "#ffd700"],
         title: {
-          text: '表格统计',
-          left: 'left',
+          text: "表格统计",
+          left: "left",
           textStyle: {
             fontSize: 16,
-            fontWeight: 'normal',
-            color: '#696969'
+            fontWeight: "normal",
+            color: "#696969",
           },
         },
         tooltip: {
           trigger: "axis",
           axisPointer: {
-            type: "shadow"
-          }
+            type: "shadow",
+          },
         },
         grid: {
-          left: '0%',
-          right: '3%',
-          top: '30%',
-          bottom: '0%',
-          containLabel: true
+          left: "0%",
+          right: "3%",
+          top: "20%",
+          bottom: "0%",
+          containLabel: true,
         },
         xAxis: {
-          type: 'value',
-          nameLocation: 'middle',
+          type: "value",
+          nameLocation: "middle",
           nameTextStyle: {
-            align: 'center'
+            align: "center",
           },
           splitLine: {
-            show: false
+            show: false,
           },
         },
-        
+
         yAxis: {
-          type: 'category',
-          data: ['表单', '表格', '三级联动', '多表数量'], 
+          type: "category",
+          data: ["表单", "表格", "三级联动", "多表数量"],
           inverse: true, // 使类目从右向左排列
         },
 
         series: [
           {
-            type: 'bar',
-            barWidth: '15', 
-            orientation: 'horizontal', 
+            type: "bar",
+            barWidth: "18",
+            orientation: "horizontal",
             data: [
-              { value: 88, name: '表单' },
-              { value: 66, name: '表格' },
-              { value: 33, name: '三级联动' },
-              { value: 55, name: '多表数量' },
+              { value: 88, name: "表单" },
+              { value: 66, name: "表格" },
+              { value: 33, name: "三级联动" },
+              { value: 55, name: "多表数量" },
             ],
             showBackground: true,
             backgroundStyle: {
-              color: '#F0F8FF'
-            }
-          }
-        ]
-      }
-      myChart3.setOption(option);
+              color: "#F0F8FF",
+            },
+          },
+        ],
+      };
+      this.chartObj.myChart3.setOption(option);
     },
 
-    initChart4(){
-      let myChart4 = this.$echarts.init(this.$refs.barChart);
+    initChart4() {
+      this.chartObj.myChart4 = this.$echarts.init(this.$refs.barChart);
       let option = {
         color: ["#5D84FE"],
         title: {
-          text: '数据建模统计',
+          text: "数据建模统计",
           textStyle: {
             fontSize: 16,
-            fontWeight: 'normal',
-            color: '#696969'
+            fontWeight: "normal",
+            color: "#696969",
           },
         },
         tooltip: {
           trigger: "axis",
           axisPointer: {
-            type: "shadow"
-          }
+            type: "shadow",
+          },
         },
         xAxis: {
-          type: 'category',
-          data: ['数据建模'],
+          type: "category",
+          data: ["数据建模"],
         },
         yAxis: {
-          type: 'value',
+          type: "value",
+          min: 0,
+          max: 100,
+          interval: 20,
           splitLine: {
-            show: false // 关闭y轴的水平分割线
+            show: false, // 关闭y轴的水平分割线
           },
         },
         grid: {
-          left: '5%',
-          right: '5%',
-          top: '30%',
-          bottom: '0%',
-          containLabel: true
+          left: "5%",
+          right: "5%",
+          top: "30%",
+          bottom: "0%",
+          containLabel: true,
         },
         series: [
           {
-            data: [88],
-            type: 'bar',
-            barWidth: '20', // 设置柱体宽度
+            data: [0],
+            type: "bar",
+            barWidth: "30", // 设置柱体宽度
             showBackground: true,
             backgroundStyle: {
-              color: '#E8EFFF'
-            }
-          }
-        ]
-      }
-      myChart4.setOption(option);
+              color: "#E8EFFF",
+            },
+          },
+        ],
+      };
+      this.chartObj.myChart4.setOption(option);
     },
-    
-    
+
     /** 导入按钮操作 */
     handleImport() {
       this.upload.title = "用户导入";
@@ -472,7 +622,7 @@ export default {
   position: relative;
   width: 100%;
   /* height: 500px; */
-  background-color: #EFF2F7;
+  background-color: #eff2f7;
   .info-content {
     width: 100%;
     height: 100%;
@@ -485,36 +635,40 @@ export default {
       height: 280px;
       margin: auto;
       padding: 20px 15px;
-      box-shadow: 10px 10px 5px #E0E0E0;
+      box-shadow: 10px 10px 5px #e0e0e0;
       background-color: #fff;
       border-radius: 10px;
       .pieChart {
         width: 100%;
         height: 100%;
       }
-      .planNum {
-        position: absolute;
-        font-size: 20px;
-        color: black;
-        left: 53px;
-        top: 55px;
-      }
-      .approvalNum {
-        position: absolute;
-        font-size: 20px;
-        color: black;
-        left: 160px;
-        top: 55px;
-      }
-      .plan {
-        position: absolute;
-        left: 40px;
-        top: 90px;
+      .describe1 {
+        .text {
+          position: absolute;
+          left: 50px;
+          top: 90px;
+        }
+        .num {
+          position: absolute;
+          font-size: 20px;
+          color: black;
+          left: 63px;
+          top: 55px;
+        }
       }
-      .approval {
-        position: absolute;
-        left: 146px;
-        top: 90px;
+      .describe2 {
+        .text {
+          position: absolute;
+          left: 157px;
+          top: 90px;
+        }
+        .num {
+          position: absolute;
+          font-size: 20px;
+          color: black;
+          left: 170px;
+          top: 55px;
+        }
       }
     }
     .echarts2 {
@@ -522,7 +676,7 @@ export default {
       height: 280px;
       margin: auto;
       padding: 20px 15px;
-      box-shadow: 10px 10px 5px #E0E0E0;
+      box-shadow: 10px 10px 5px #e0e0e0;
       background-color: #fff;
       border-radius: 10px;
       margin-right: 30px;
@@ -536,7 +690,7 @@ export default {
       height: 200px;
       margin: auto;
       padding: 20px 15px;
-      box-shadow: 10px 10px 5px #E0E0E0;
+      box-shadow: 10px 10px 5px #e0e0e0;
       background-color: #fff;
       border-radius: 10px;
       margin-top: 20px;
@@ -545,7 +699,7 @@ export default {
       }
       .title {
         font-size: 16px;
-        color: '#696969'
+        color: "#696969";
       }
       .text {
         display: flex;
@@ -575,10 +729,11 @@ export default {
         .name {
           text-align: center;
           font-size: 16px;
-          margin-left: 15px;
-          margin-right: 90px;
+          margin-left: 2px;
+          margin-right: 59px;
         }
         .ip {
+          text-align: center;
           font-size: 16px;
         }
       }
@@ -588,7 +743,7 @@ export default {
       height: 200px;
       margin: auto;
       padding: 20px 15px;
-      box-shadow: 10px 10px 5px #E0E0E0;
+      box-shadow: 10px 10px 5px #e0e0e0;
       background-color: #fff;
       border-radius: 10px;
       margin-top: 20px;
@@ -602,7 +757,7 @@ export default {
       height: 200px;
       margin: auto;
       padding: 20px 15px;
-      box-shadow: 10px 10px 5px #E0E0E0;
+      box-shadow: 10px 10px 5px #e0e0e0;
       background-color: #fff;
       border-radius: 10px;
       margin-top: 20px;