mec-cloud_-intelligent-manufacturing_client/zkqy-ui/src/views/index_chart.vue

<template>
  <div class="app-container home">
    <!-- <el-row :gutter="20"></el-row>
    <el-row :gutter="20"></el-row>
    <el-divider/>

    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                 :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport"/>
            是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                   @click="importTemplate">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <button @click="upload.open = true">上传文件</button>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8"></el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>更新日志</span>
          </div>
          <el-collapse accordion> 123123</el-collapse>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>捐赠支持</span>
          </div>
          <div class="body"></div>
        </el-card>
      </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>
    </div>
  </div>
</template>

<script>
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: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API3 + "common/importDataInfo",
      },
      // 版本号
      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 = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download(
        "system/user/importTemplate",
        {},
        `user_template_${new Date().getTime()}.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    goTarget(href) {
      window.open(href, "_blank");
    },

    toPersonalCenter() {
      this.$router.push("/user/profile");
    },
  },
  computed: {
    ...mapState({
      username: (state) => state.user.name,
      owner: (state) => state.user?.tenant.owner,
      tenantName: (state) => state.user?.tenant.tenantName,
      nickName: (state) => state.user?.nickName,
    }),

    ...mapGetters(["avatar"]),
    date: () => {
      return formatDate(new Date());
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  width: 100%;
  /* height: 500px; */
  background-color: #eff2f7;
  .info-content {
    width: 100%;
    height: 100%;
    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 {
      white-space: nowrap;
      margin-bottom: 5px;
      cursor: pointer;
      .user-avatar {
        width: 160px;
        border-radius: 50%;
      }
    } */
    .name {
      font-size: 30px;
      margin-bottom: 5px;
    }
    .tenant-name {
      font-size: 20px;
    }
    .date {
      margin-bottom: 10px;
    }
    .title {
      font-size: 16px;
    }
  }
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    /* border-left: 5px solid #eee; */
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>