mec-cloud_-intelligent-manufacturing_crm/zkqy-ui/src/views/index.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 mt20">欢迎登录工业应用引擎</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.oper_name }}</span>
                <span class="ip">{{ item.oper_ip }}</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 {
  getProcess,
  getOperation,
  getLogin,
  getTabular,
  getData,
} from "@/api/homePage/index";

export default {
  name: "Index",
  data() {
    return {
      echars: true,
      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() {
    this.title = sessionStorage.getItem("title") || "智能制造平台";
    // 初始化 echarts
    this.initChart1();
    this.initChart2();
    this.initChart3();
    this.initChart4();

    this.initData();
  },
  methods: {
    initData() {
      //工业流&审批流
      getProcess().then((response) => {
        if(response.code == 200){
          this.processList = response.data;
          console.log(response.data);
          this.chartObj.myChart1.setOption({
            series: [
              {
                data: response.data
              }
            ]
          })
        } else {
          console.log(response);
          this.$message.error("获取数据失败");
        }
      })

      //登录次数统计
      getLogin().then(response => {
        if(response.code == 200){
          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({
            xAxis: {
              data: xAxisData
            },
            legend: {
              data: loginList
            },
            series: response.data
          })
        } else {
          console.log(response);
          this.$message.error("获取数据失败");
        }
      })

      //登录统计信息
      getOperation().then(response => {
        if(response.code == 200){
          this.swiperList = response.data;
          console.log(this.swiperList);
          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){
          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){
          console.log(response.data);
          this.chartObj.myChart4.setOption({
            series: [
              {
                data: [response.data]
              }
            ]
          })
        } else {
          console.log(response);
          this.$message.error("获取数据失败");
        }
      })
    },

    initChart1() {
      // 通过 $ref 进行挂载
      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: [
          {
            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: ['客户端11', '工具端11']
        },
        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: '三级联动' },
              { value: 55, 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: ['数据建模'],
        },
        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: [20],
            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; */
  .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: 48%;
      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: 25%;
      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; */
      font-size: 20px;
    }
  }
}
.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>