原版首页暂存

zkqy-ui/src/views/index.vue

@@ -49,56 +49,14 @@
       </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="title">欢迎登录Mec OS 工业应用操作系统</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 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>
   </div>
 </template>
@@ -107,53 +65,12 @@
 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"
-        }, */
-      ],
+      title: "",
       // 用户导入参数
       upload: {
         // 是否显示弹出层（用户导入）
@@ -173,403 +90,7 @@ 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 + "月";
-          // });
-          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 = "用户导入";
@@ -626,6 +147,10 @@ export default {
       return formatDate(new Date());
     },
   },
+  mounted() {
+    // this.title = window.sessionStorage.getItem("title") || "智能制造平台";
+    this.title = window.sessionStorage.getItem("title") || "生产协同管理系统";
+  },
 };
 </script>
 
@@ -633,153 +158,16 @@ export default {
 .home {
   position: relative;
   width: 100%;
-  /* height: 500px; */
-  background-color: #eff2f7;
+  height: 500px;
   .info-content {
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    left: 50%;
+    top: 30%;
+    transform: translateX(-50%);
     display: flex;
-    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 {
+    flex-direction: column;
+    align-items: center;
+    .header {
       white-space: nowrap;
       margin-bottom: 5px;
       cursor: pointer;
@@ -787,7 +175,7 @@ export default {
         width: 160px;
         border-radius: 50%;
       }
-    } */
+    }
     .name {
       font-size: 30px;
       margin-bottom: 5px;
@@ -799,7 +187,8 @@ export default {
       margin-bottom: 10px;
     }
     .title {
-      font-size: 16px;
+      // font-size: 16px;
+      font-size: 20px;
     }
   }
 }