前端：index布局

src/dashoo.cn/frontend_web/src/pages/indexNew.vue

@@ -0,0 +1,421 @@
+<template>
+  <div class="home-body" v-loading="downloading" element-loading-text="'数据读取中，请稍候。。。'">
+    <!--标题部分-->
+    <div style="display: flex; height: 20%; padding-top: 0px; margin-bottom: 1%">
+      <div style="width: 20%; margin: 0 5px; border: 1px solid #F6931F"></div>
+      <div style="width: 20%; margin: 0 5px; border: 1px solid #F6931F"></div>
+      <div style="width: 20%; margin: 0 5px; border: 1px solid #F6931F"></div>
+      <div style="width: 20%; margin: 0 5px; border: 1px solid #F6931F"></div>
+      <div style="width: 20%; margin: 0 5px; border: 1px solid #F6931F"></div>
+    </div>
+    <div style="width: 100%; height: 80%; padding-top: 0px; margin-bottom: 1%">
+      <div style="display: flex; width: 100%; height: 50%; padding-top: 0px; margin-bottom: 1%">
+        <div style="width: 50%; height: 100%; margin: 0 5px; padding-top: 0px; border: 1px solid #00ffff; margin-bottom: 1%"></div>
+        <div style="width: 50%; height: 100%; margin: 0 5px; padding-top: 0px; border: 1px solid #f13f40; margin-bottom: 1%"></div>
+      </div>
+      <div style="display: flex; width: 100%; height: 50%; padding-top: 0px; margin-bottom: 1%">
+        <div style="width: 50%; height: 100%; margin: 0 5px; padding-top: 0px; border: 1px solid #00ffff; margin-bottom: 1%"></div>
+        <div style="width: 50%; height: 100%; margin: 0 5px; padding-top: 0px; border: 1px solid #f13f40; margin-bottom: 1%"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import {
+    mapGetters
+  } from 'vuex'
+  export default {
+    name: 'index',
+
+    data () {
+      return {
+        todoNumList: {
+          newAccess: 0, // 新准入
+          append: 0, // 增项
+          yearAudit: 0, // 年审
+          infoChange: 0, // 信息变更
+          business: 0 // 业绩评价
+        },
+        // 饼状图&柱状图
+        deviceChartPie: null,
+        deviceChartBar: null,
+        // 折线图
+        deviceContractLine: null, // 合同
+        deviceCustomerLine: null, // 客户
+        deviceCollectionline: null, // 样本采集
+        devicePrepareline: null, // 制备
+        // num: 0,
+        usertotal: {},
+        user: {
+          photo: '',
+          name: '',
+          Realname: '',
+          host: ''
+        },
+        contracttotal: { // 合同统计
+          Total: 0, // 总数
+          Inprogress: 0, // 执行中
+          Addcontract: 0, // 本月新增
+          MonthTotal: [] // 月总数
+        },
+        customertotal: { // 客户统计
+          Total: 0, // 总数
+          Addcontract: 0, // 本月新增
+          MonthTotal: [] // 月总数
+        },
+        collectiontotal: { // 样本采集统计
+          Total: 0, // 总数
+          Addcontract: 0, // 本月新增
+          MonthTotal: [] // 月总数
+        },
+        preparetotal: { // 制备统计
+          InPreparation: 0, // 制备中
+          EndPreparation: 0, // 制备完成
+          MonthTotal: [] // 月总数
+        },
+        tjzztitles: [], // 样本统计图
+        tjzzdata: [], // 样本统计图
+        tjdevicex: [], // 容器统计图
+        tjdevicey: [], // 容器统计图
+        tjdevicecolor: [
+          '#6A5ACD', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B',
+          '#60C0DD', '#E87C25', '#27727B', '#FE8463'
+        ],
+        downloading: true
+      }
+    },
+    created () {
+      // this.getToDoNumList()
+      // this.initData()
+      // this.getContractinfo() // 合同统计
+      // this.getCustomerinfo() // 客户统计
+      // this.getCollectioninfo() // 采集
+      // this.getPrepareinfo() // 制备
+      let _this = this
+      _this.user.photo = _this.authUser.Profile.Photo
+      _this.user.name = _this.authUser.Profile.name
+      _this.user.Realname = _this.authUser.Profile.Realname
+      _this.user.host = _this.authUser.Profile.Host
+    },
+    computed: mapGetters({
+      authUser: 'authUser'
+    }),
+    methods: {
+      getToDoNumList () {
+        this.$axios.get('/supplier/todo-num', {}).then(res => {
+          console.log('待办任务数据返回结果', res)
+        })
+      },
+      initData () {
+        let _this = this
+        this.$axios.get('/users/getaccountingo', {})
+          .then(res => {
+            _this.usertotal = res.data
+            _this.getgroupzzqg()
+            _this.getgroupdevice()
+          })
+          .catch(err => {
+            // handle error
+            this.downloading = false
+            console.error(err)
+          })
+      },
+      toUrl (type) {
+        console.log('跳转到：', type)
+      },
+      // 获取合同信息
+      getContractinfo () {
+        let _this = this
+        this.$axios.get('/cellstotal/getcontractinfo', {})
+          .then(res => {
+            _this.contracttotal = res.data.items
+            _this.contracttotal.Addcontract = _this.contracttotal.MonthTotal[0].Count
+            let time = new Array()
+            let total = new Array()
+            let length = _this.contracttotal.MonthTotal.length
+            for (let index = 0; index < length; index++) {
+              time[index] = _this.contracttotal.MonthTotal[length - 1 - index].Year + '.' + _this.contracttotal.MonthTotal[
+              length - 1 - index].Month
+              total[index] = _this.contracttotal.MonthTotal[length - 1 - index].Count
+            }
+            _this.drawContractline('deviceContractLine', time, total) // 合同
+          })
+          .catch(err => {
+            // handle error
+            console.error(err)
+          })
+      },
+      // 获取客户信息
+      getCustomerinfo () {
+        let _this = this
+        this.$axios.get('/cellstotal/getcustomerinfo', {})
+          .then(res => {
+            _this.customertotal = res.data.items
+            _this.customertotal.Addcontract = _this.customertotal.MonthTotal[0].Count
+            let time = new Array()
+            let total = new Array()
+            let length = _this.customertotal.MonthTotal.length
+            for (let index = 0; index < length; index++) {
+              time[index] = _this.customertotal.MonthTotal[length - 1 - index].Year + '.' + _this.customertotal.MonthTotal[
+              length - 1 - index].Month
+              total[index] = _this.customertotal.MonthTotal[length - 1 - index].Count
+            }
+            _this.drawContractline('deviceCustomerLine', time, total) // 客户
+          })
+          .catch(err => {
+            // handle error
+            console.error(err)
+          })
+      },
+      // 获取采集信息
+      getCollectioninfo () {
+        let _this = this
+        this.$axios.get('/cellstotal/getcollectioninfo', {})
+          .then(res => {
+            _this.collectiontotal = res.data.items
+            _this.collectiontotal.Addcontract = _this.collectiontotal.MonthTotal[0].Count
+            let time = new Array()
+            let total = new Array()
+            let length = _this.collectiontotal.MonthTotal.length
+            for (let index = 0; index < length; index++) {
+              time[index] = _this.collectiontotal.MonthTotal[length - 1 - index].Year + '.' + _this.collectiontotal.MonthTotal[
+              length - 1 - index].Month
+              total[index] = _this.collectiontotal.MonthTotal[length - 1 - index].Count
+            }
+            _this.drawContractline('deviceCollectionline', time, total) // 样本采集
+          })
+          .catch(err => {
+            // handle error
+            console.error(err)
+          })
+      },
+      // 获取制备信息
+      getPrepareinfo () {
+        let _this = this
+        this.$axios.get('/cellstotal/getprepareinfo', {})
+          .then(res => {
+            _this.preparetotal = res.data.items
+            _this.preparetotal.EndPreparation = _this.preparetotal.MonthTotal[0].Count
+            let time = new Array()
+            let total = new Array()
+            let length = _this.preparetotal.MonthTotal.length
+            for (let index = 0; index < length; index++) {
+              time[index] = _this.preparetotal.MonthTotal[length - 1 - index].Year + '.' + _this.preparetotal.MonthTotal[
+              length - 1 - index].Month
+              total[index] = _this.preparetotal.MonthTotal[length - 1 - index].Count
+            }
+            _this.drawContractline('devicePrepareline', time, total) // 制备
+          })
+          .catch(err => {
+            // handle error
+            console.error(err)
+          })
+      },
+      getgroupzzqg () {
+        let _this = this
+        _this.$axios.get('/users/gettotalbysampletype', {})
+          .then(res => {
+            _this.downloading = false
+            for (var i = 0; i < res.data.length; i++) {
+              if (res.data[i].Name === '') {
+                res.data[i].Name = '未知'
+              }
+              if (i < 5) {
+                _this.tjzztitles.push({
+                  name: res.data[i].Name
+                })
+                _this.tjzzdata.push({
+                  name: res.data[i].Name,
+                  value: res.data[i].Num
+                })
+              } else {
+                _this.tjzzdata.push({
+                  name: res.data[i].Name,
+                  value: res.data[i].Num
+                })
+              }
+            }
+            _this.drawPieChart()
+          })
+          .catch(err => {
+            // handle error
+            _this.downloading = false
+            console.error(err)
+          })
+      },
+      getgroupdevice () {
+        let _this = this
+        _this.$axios.get('/users/gettotalbygroupbydevice', {})
+          .then(res => {
+            for (var i = 0; i < res.data.length; i++) {
+              if (res.data[i].Name === '') {
+                res.data[i].Name = '未知'
+              }
+              if (i > 12) {
+                _this.tjdevicecolor.push(_this.tjdevicecolor[i % 12])
+              }
+              _this.tjdevicex.push(res.data[i].Name)
+              _this.tjdevicey.push(res.data[i].Num)
+            }
+            _this.drawBarChart()
+          })
+          .catch(err => {
+            // handle error
+            console.error(err)
+          })
+      },
+      // 统计样本总数的饼状图
+      drawPieChart () {
+        var chartPie = echarts.init(document.getElementById('deviceChartPie'))
+        chartPie.setOption({
+          title: {
+            text: ''
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{b} {c} ({d}%)'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'right',
+            itemHeight: 20,
+            itemWidth: 20,
+            data: this.tjzztitles
+          },
+          color: ['#D1EEEE', '#FFE1FF', '#FFA500', '#6A5ACD', '#D1EEEE', '#CAE1FF', '#C0FF3E', '#1E90FF', '#000080'],
+          series: [{
+            name: '样本类型',
+            type: 'pie',
+            radius: '92%',
+            label: {
+              normal: {
+                show: false
+              }
+            },
+            data: this.tjzzdata
+          }]
+        })
+      },
+      // 容器数据统计柱状图
+      drawBarChart () {
+        let _this = this
+        var chartBar = echarts.init(document.getElementById('deviceChartBar'))
+        chartBar.setOption({
+          title: {
+            text: ''
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '({b}) {c}'
+          },
+          xAxis: {
+            data: this.tjdevicex,
+            axisLabel: {
+              interval: 0,
+              rotate: 40
+            }
+          },
+          yAxis: {},
+          series: [{
+            name: '容器类型',
+            type: 'bar',
+            label: {
+              normal: {
+                show: false
+              }
+            },
+            data: this.tjdevicey,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  var colorList = _this.tjdevicecolor
+                  return colorList[params.dataIndex]
+                }
+              }
+            }
+          }]
+        })
+      },
+      // 折线图
+      drawContractline (val, xdata, ydata) {
+        let _this = this
+        var chartBar = echarts.init(document.getElementById(val))
+        chartBar.setOption({
+          title: {
+            text: ''
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: xdata
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data: ydata,
+            type: 'line'
+          }]
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .avatar-index {
+    width: 45px;
+    height: 45px;
+    margin-top: -15px;
+    margin-bottom: -15px;
+  }
+
+  .home-show .el-card__header {
+    /*padding: 5px 10px;*/
+    /*font-size: 10px;*/
+  }
+  .home-body {
+    padding: 0 5px;
+    display: flex;
+    flex-direction: column;
+    .header-card {
+      .header-box {
+        height: 150px;
+        font-size: 26px;
+        font-weight: bold;
+        text-align: left;
+        .box-title {
+          height: 30%;
+          margin: 10px 22px;
+          /*border: 1px solid #00ffff;*/
+          span {
+            color: #F56C6C;
+          }
+        }
+        .box-content {
+          height: 70%;
+          margin: 20px 25px;
+          cursor: pointer;
+          /*border: 1px solid #F56C6C;*/
+          span:hover{
+            color: #1D8CE0;
+          }
+        }
+      }
+    }
+    .chart {
+      flex: 1;
+      .home-show {
+        .chart-box {
+          width: 100%;
+          min-height: 300px;
+        }
+      }
+    }
+  }
+</style>