supervise-monitor-ui/src/views/index8.vue

<template>
  <div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
    <div class="index_top">

      <div style="flex: 1;">
        <span class="index_top_text" @click="show">数据总览</span>
        <el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期">
        </el-date-picker>
      </div>

      <!-- <div class="index_top_right">{{ info.notice }}</div> -->

    </div>
    <div class="index_bottom">

      <div style="flex: 0.1;"></div>

    </div>

    <div class="index_content">
      <div class="index_content_top">

        <div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">

          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />

          <div style="display: flex;flex-direction: column; margin-left: 10px;">
            <span style="font-size: 20px;">506</span>
            <div style="margin-top: 10px;">
              <span style="font-size: 14px;color: #999;">供应商</span>
              <span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 25.6%</span>
            </div>
          </div>

        </div>

        <div style="flex: 0.3;"></div>

        <div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">

          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />

          <div style="display: flex;flex-direction: column; margin-left: 10px;">
            <span style="font-size: 20px;">121</span>
            <div style="margin-top: 10px;">
              <span style="font-size: 14px;color: #999;">仓库</span>
              <span style="font-size: 14px; margin-left: 10px; color: #13BDA0 ;">↑ 9.8%</span>
            </div>
          </div>

        </div>

        <div style="flex: 0.3;"></div>

        <div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">

          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />

          <div style="display: flex;flex-direction: column; margin-left: 10px;">
            <span style="font-size: 20px;">624</span>
            <div style="margin-top: 10px;">
              <span style="font-size: 14px;color: #999;">商品种类</span>
              <span style="font-size: 14px; margin-left: 10px; color: #FF4747  ;">↓ 15.6%</span>
            </div>
          </div>

        </div>

        <div style="flex: 0.3;"></div>

        <div class="item_border" style="display: flex;flex-direction: row; padding: 30px 20px; flex: 1;">

          <img src="../assets/images/cgsp.png" style="width: 54px;height: 54px;" />

          <div style="display: flex;flex-direction: column; margin-left: 10px;">
            <span style="font-size: 20px;">￥50905.96</span>
            <div style="margin-top: 10px;">
              <span style="font-size: 14px;color: #999;">货区价值</span>
              <span style="font-size: 14px; margin-left: 10px; color: #FF4747 ;">↓ 15.6%</span>
            </div>
          </div>

        </div>

      </div>
      <div class="index_content_bottom">

        <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
          <span style="font-weight: 600;">商品统计</span>
          <div id="main1" ref="main1" class="middle">
          </div>
        </div>

        <div style="flex: 0.1;"></div>

        <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
          <span style="font-weight: 600;">仓库分区占比</span>
          <div id="main2" ref="main2" class="middle">
          </div>
        </div>

      </div>

    </div>



  </div>
</template>

</div>
<script>
import * as echarts from 'echarts';
export default {
  name: '',
  data() {
    return {
      token: '',
      params: {
        date: null
      },
      info: {
        date: "",
        notice: "通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]"
      },
      newMessageList: [{
        sid: "1",
        name: "[员工变动]2023年6月12日收到人事通知，对 聂风 进行转正",
        date: "2023-06-12"

      }, {
        sid: "2",
        name: "[员工变动]2023年6月12日收到人事通知，对 冷拧 进行转正",
        date: "2023-06-12"

      }, {
        sid: "3",
        name: "[员工变动]2023年6月12日收到人事通知，对 冷枫 进行转正",
        date: "2023-06-12"

      }, {
        sid: "4",
        name: "[员工变动]2023年6月12日收到人事通知，对 邹好好 进行转正",
        date: "2023-06-12"

      }],
      larmCenterList: [{
        sid: "1",
        name: "[岗位调整]由2023年6月12号起，  聂风 由原岗位调动至采购部岗位工作",
        date: "2023-06-12"

      }, {
        sid: "2",
        name: "[岗位调整]由2023年6月12号起，  冷拧 由原岗位调动至采购部岗位工作",
        date: "2023-06-12"

      }, {
        sid: "3",
        name: "[岗位调整]由2023年6月12号起，  冷枫 由原岗位调动至采购部岗位工作",
        date: "2023-06-12"

      }, {
        sid: "4",
        name: "[岗位调整]由2023年6月12号起，  邹好好 由原岗位调动至采购部岗位工作",
        date: "2023-06-12"
      }

      ]
    }
  },
  mounted() {
    this.drawLine1();
    this.drawLine2();
  },

  methods: {
    show() {
      this.drawLine1();
      this.drawLine2();
    },
    drawLine1() {

      // let mychart = echarts.init(this.$refs.main1)
      var myChart = echarts.init(document.getElementById('main1'));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: {
              // 数据视图
              show: false,
              readOnly: false
            },
            magicType: {
              // 切换图形
              show: false,
              type: ['line', 'bar']
            },
            // 还原
            restore: {
              show: false
            },
            // 下载
            saveAsImage: {
              show: false
            }

          }
        },
        grid: {
          height: 220
        },
        legend: {
          data: ['出库商品', '入库商品']
        },
        xAxis: [{
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          axisPointer: {
            type: 'shadow'
          }
        }],
        yAxis: [{
          type: 'value',
          name: '个数/个',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value}'
          }
        }
        ],
        series: [
          {
            name: '出库商品',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 个';
              }
            },
            data: [
              20, 20, 20, 20, 60, 70, 90
            ]
          },
          {
            name: '入库商品',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 个';
              }
            },
            data: [
              30, 30, 30, 50, 50, 50, 60
            ]
          },
        ]
      });
    },

    // 饼状图图初始化
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      // let mychart =  echarts.init(this.$refs.main2)
      var myChart = echarts.init(document.getElementById('main2'));
      // 绘制图表
      // console.log('option', obj)
      myChart.setOption({
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            // 数据图标
            dataView: {
              show: false,
              readOnly: false
            },
            // 刷新图标
            restore: {
              show: false
            },
            // 下载图标
            saveAsImage: {
              show: false
            }
          }
        },
        tooltip: {
          show: true,
          trigger: "item"
        },
        series: [{
          name: '仓库分区占比',
          type: 'pie',
          radius: [20, 100],
          center: ['50%', '40%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [{
            "value": 20,
            "name": "河北仓库"
          },
          {
            "value": 15,
            "name": "北京仓库"
          },
          {
            "value": 30,
            "name": "天津仓库"
          },
          {
            "value": 20,
            "name": "东北仓库"
          }
          ]
        }]
      })
    },

    //  	getToken(){
    //  		let params = {
    //  			password: "329653",
    //					roleSid: "",
    //					token: "",
    //					userName: "15097329653",
    //					verifyCode: ""
    //  		}
    //  		login1(params).then(res => {
    //  			this.token = res.data.token
    //  			window.sessionStorage.setItem('token', res.data.token)
    //        })
    //  	}
  }
}
</script>

<style lang="scss" scoped>
.imgDemo {
  width: 100%;
  height: 100%;
  background: radial-gradient(#fff, #f5f7f4, #fff);
}

.middle {
  justify-content: center;
  width: 100%;
  height: 300px;

}

.index {
  padding: 40px 80px;
  background: #FFFFFF;

  .index_top {

    display: flex;
    flex-direction: row;
    align-items: center;

    .index_top_text {
      font-size: 25px;
      font-weight: bold;
      color: #000;
      margin-right: 20px;
    }

    .index_top_right {
      font-size: 14px;
      font-weight: bold;
      color: #FF5046;
    }
  }

  .index_content {
    display: flex;
    flex-direction: column;
    margin-top: 30px;

    .index_content_top {
      display: flex;
      flex-direction: row;
    }

    .index_content_bottom {
      display: flex;
      flex-direction: row;
      margin-top: 30px;
    }

    .item_border {
      border-radius: 10px;
      border: 1px solid #cddbf7;
    }
  }

  .index_bottom {
    margin-top: 20px;
    display: flex;

    .item_border {
      border-radius: 10px;
      border: 1px solid #cddbf7;
    }
  }
}

canvas {}
</style>