physical_distribution/src/views/dashboard/homepage.vue

<template>
  <div class="container_box">
    <div class="left_box">
      <div class="left_top">
        <div class="time_box">
          <div style="font-size: 0.4rem; color: #fff">{{ time }}</div>
          <div class="date_box">
            <div style="font-size: 0.18rem; color: #fff">{{ date }}</div>
            <div style="font-size: 0.18rem; color: #fff">{{ week }}</div>
          </div>
        </div>
        <div class="weather_box"></div>
      </div>
      <div class="left_cen">
        <div class="title_box">
          <div class="left_tit">收件量</div>
          <div class="right_tit">
            <div class="btn">收</div>
            <div class="btn">发</div>
            <div class="btn">到</div>
            <div class="btn">派</div>
            <div class="btn">签</div>
          </div>
        </div>
        <div class="cen_con"></div>
      </div>
      <div class="left_bot">
        <div class="title_box">
          <div class="tit">村点信息</div>
        </div>
        <div class="table_box">
           <table cellspacing=30>
            <tr>
              <th>站点名称</th>
              <th>上行</th>
              <th>下行</th>
            </tr>
            <tr v-for="item in villageData" :key="item.name">
              <td>{{item.name}}</td>
              <td>{{item.upData}}</td>
              <td>{{item.downData}}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="center_box">
      <div class="center_top">
        <div class="top_tit">莒县物流服务中心</div>
      </div>
      <div class="cen_data">
        <div class="data_top">
          <div class="left_btn">
            <div class="txt txt_left" :class="active == 1 ? 'active' : ''" @click="changeData(1)">按日</div>
            <div class="txt txt_right" :class="active == 2 ? 'active' : ''" @click="changeData(2)">按月</div>
          </div>
          <div class="right_time">数据更新时间:2022-01-09</div>
        </div>
        <div class="data_bot">
          <div class="data_box" v-for="item in totalData" :key="item.name">
            <div class="data_txt">{{item.name}}</div>
            <div class="data_txt" style="font-size:0.38rem">{{item.data}}</div>
            <div class="data_txt">环比{{item.huanbi}}</div>
          </div>
        </div>
      </div>
      <div class="center_cen">
        <PathMap></PathMap>
      </div>
      <div class="cen_bot">
        <div class="echarts">
          <ShowMap></ShowMap>
        </div>
        <div class="echarts">
          <div id="trendChart" class="trend_box"></div>
        </div>
      </div>
    </div>
    <div class="right_box">
      <div class="full_btn">
        <img v-show="!isFullFlag" src="~@/assets/images/full.png" @click="clickFun" alt="">
        <img v-show="isFullFlag" src="~@/assets/images/nofull.png" @click="clickFun" alt="">
      </div>
      <div class="right_top">
        <div class="title_box">
          <div class="tit">派件入库量占比</div>
        </div>
         <div class="pie_box" id="pieChart"></div>
      </div>
      <div class="right_center">
        <div class="title_box">
          <div class="tit">车辆行驶里程</div>
        </div>
        <CarMile></CarMile>
      </div>
      <div class="right_bot">
        <div class="title_box">
          <div class="tit">车辆报警</div>
        </div>
        <CarWarn></CarWarn>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import * as XLSX from "xlsx/xlsx.mjs";
import PathMap from '../components/pathMap';
import ShowMap from '../components/showmap';
import CarMile from '../components/carMile';
import CarWarn from '../components/carWarn';
export default {
  components: {
    PathMap,
    CarMile,
    CarWarn,
    ShowMap,
  },
  data() {
    return {
      timer: null,
      day: "",
      time: "",
      date: "",
      week: "",
      isFullFlag:false,
      isSupport:false,
      dayData:[],
      monthData:[],
      totalData:[],
      active:1,
      xData:[],
      yData1:[],
      yData2:[],
      villageData:[
      ]
    };
  },
  created() {
    this.getTime();
    this.readExcelFile("http://192.168.1.35:8081/excel/wuliu.xlsx");
    
  },
  mounted() {
    this.isSupport=document.fullscreenEnabled
  },
  methods: {
     readExcelFile(url) {
      axios
        .get(url, {
          responseType: "arraybuffer",
        })
        .then((res) => {
          // console.log(res);
          let data = new Uint8Array(res);
        //   console.log(data);
          let wb = XLSX.read(data, {
            type: "array",
          });
        //   console.log(wb);
          let sheets = wb.Sheets; // 获取文档数据
          // console.log(sheets);
          this.content = this.transformSheets(sheets);
        });
    },
    transformSheets(sheets) {
      const content1 = [];
      for (const key in sheets) {
        content1.push(XLSX.utils.sheet_to_json(sheets[key]));
      }
      console.log(content1);
      this.dayData.push(
        {name:'收件量',data:content1[0][0].日总收件量,huanbi:content1[0][0].收件量日总环比},
        {name:'发件量',data:content1[0][0].日总发件量,huanbi:content1[0][0].发件量日总环比},
        {name:'到件量',data:content1[0][0].日总到件量,huanbi:content1[0][0].到件量日总环比},
        {name:'派件量',data:content1[0][0].日总派件量,huanbi:content1[0][0].派件量日总环比},
        {name:'签件量',data:content1[0][0].日总签件量,huanbi:content1[0][0].签件量日总环比},
      )
      this.monthData.push(
        {name:'收件量',data:content1[0][0].月总收件量,huanbi:content1[0][0].收件量月总环比},
        {name:'发件量',data:content1[0][0].月总发件量,huanbi:content1[0][0].发件量月总环比},
        {name:'到件量',data:content1[0][0].月总到件量,huanbi:content1[0][0].到件量月总环比},
        {name:'派件量',data:content1[0][0].月总派件量,huanbi:content1[0][0].派件量月总环比},
        {name:'签件量',data:content1[0][0].月总签件量,huanbi:content1[0][0].签件量月总环比},
      )
      this.totalData = this.dayData
      content1[1].map(item =>{
        this.xData.unshift(item.日期.substring(item.日期.length-5).replace('.','-'))
        this.yData1.push(item.到件量)
        this.yData2.push(item.派件量)
      })
      content1[3].map(item =>{
        this.villageData.push({name:item.村点名称,upData:item.上行,downData:item.下行})
      })
      console.log(this.villageData)
      this.$nextTick(() =>{
        this.createChart()
      })
    },

    // 按照日月更换数据
    changeData(val){
      this.active = val
      if(val == 1){
        this.totalData = this.dayData
      }else if(val == 2){
        this.totalData = this.monthData
      }
    },
    clickFun(){
      if (this.isSupport) {
        if (document.fullscreenElement) {
          //document.exitFullscreen()退出全屏模式的方法
          document.exitFullscreen();
          this.isFullFlag = false;
        } else {
          //requestFullscreen(),请求全屏的方法
          document.documentElement.requestFullscreen();
          this.isFullFlag = true;
        }
	    }
      console.log(this.isFullFlag)
      // this.isFullFlag =!this.isFullFlag
			// if (!screenfull.enabled) {
			// 	this.$message({
			// 		 message: 'Your browser does not work',
			// 		 type: 'warning'
			// 	})
			// 	return false
			// }
			// screenfull.toggle()
    },

    createChart() {
      this.trendChart = this.$echarts.init(document.getElementById("trendChart"));
      window.addEventListener("resize", function () {
        this.trendChart.resize();
      });
      var option = {
         color: ["#91cc75",  "#4cabce", ],
        title: {
          text: "仓库收件量趋势",
          textStyle: {
            fontSize: 15,
            color: "#fff",
          },
        },
        legend: {
          data: ["到件量", "派件量"],
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xData,
          axisLine: {
      lineStyle: {
        color: "#fff"
      }
    }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            color: "#fff",
          },
        },
        series: [
          {
            name: "到件量",
            type: "line",
            smooth: true,
            data: this.yData1,
          },
          {
            name: "派件量",
            type: "line",
            smooth: true,
            data:this.yData2,
          },
        ],
      };
      this.trendChart.setOption(option);
    },
    
    fn(str) {
      let num = null;
      str >= 10 ? (num = str) : (num = "0" + str);
      return num;
    },
    getWeek(e) {
      let arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      this.week = arr[e];
    },
    getTime() {
      //获取当前时间
      this.timer = setInterval(() => {
        var date = new Date();
        var year = date.getFullYear(); //当前年份
        var month = date.getMonth(); //当前月份
        var data = date.getDate(); //天
        var hours = date.getHours(); //小时
        var minute = date.getMinutes(); //分
        var second = date.getSeconds(); //秒
        this.day = date.getDay(); //获取当前星期几
        this.getWeek(this.day);
        this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second);
        this.date = year + "/" + (month + 1) + "/" + data;
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.container_box {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(~@/assets/images/index_bg.png);
  background-size: 100% 100%;
  display: flex;

  .left_box {
    width: 25%;
    height: 100%;
    background: url(~@/assets/images/line_img.png) top right repeat-y;

    .left_top {
      width: 90%;
      height: 12%;
      border: 1px solid #0e94ea;
      margin: 0 auto;
      margin-top: 0.1rem;

      .time_box {
        width: 49%;
        height: 100%;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        .date_box {
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          color: #fff;
          font-size: 0.18rem;
        }
      }
    }

    .left_cen {
      width: 90%;
      height: 45%;
      margin: 0 auto;
      margin-top: 0.1rem;
      .title_box {
        width: 100%;
        height: 0.42rem;
        background: url(~@/assets/images/box_title.png) top left no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_tit {
          color: #fff;
          width: 30%;
          display: flex;
          padding-left: 0.4rem;
          align-items: center;
          font-size: 0.2rem;
        }
        .right_tit {
          width: 65%;
          color: #fff;
          display: flex;
          height: 70%;
          border: 0.5px solid #0e94ea;
          border-radius: 10px;
          justify-content: space-between;
          align-items: center;
          margin-right: 0.3rem;

          .btn {
            width: 20%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-right: 0.5px solid #0e94ea;
            cursor: pointer;
            font-size: 0.18rem;
            color: #fff;

            &:last-child {
              border-right: none;
            }
          }
        }
      }
      .cen_con {
        width: 100%;
        height: 89%;
      }
    }

    .left_bot {
      width: 90%;
      height: 39%;
      // background: red;
      margin: 0 auto;
      margin-top: 0.1rem;

      .title_box {
        width: 100%;
        height: 0.42rem;
        background: url(~@/assets/images/box_title.png) top left no-repeat;
        background-size: 100% 100%;

        .tit {
          width: 30%;
          height: 100%;
          font-size: 0.2rem;
          color: #fff;
          display: flex;
          align-items: center;
          padding-left: 0.4rem;
        }
      }
      .table_box{
        width: 100%;
        height:88%;
        overflow-y:auto ;
      }
      table{
        width: 100%;

        tr{
          th{
            font-size: 0.18rem;
            color: #fff;
            padding: 0.1rem 0;

            &:first-child{
              width: 40%;
            }
          }
          td{
            font-size:0.18rem;
            color: #fff;
            padding: 0.08rem 0;
          }
        }
      }
    }
  }
  .center_box {
    width: 45%;
    height: 100%;
    
    .center_top{
      width: 100%;
      height: 8.8%;
      background: red;
      background: url(~@/assets/images/title_border.png) bottom center no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;

      .top_tit{
        color: #cdddf7;
        font-size: 0.52rem;
      }
    }
    .cen_data{
      width: 100%;
      height: 15%;

      .data_top{
        width: 100%;
        height: 30%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left_btn{
          width: 15%;
          height: 65%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 0.1rem;
          margin-left: 0.1rem;

          .txt{
            font-size: 0.18rem;
            color: #fff;
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            // border-right: 1px solid #0e94ea;
            border: 1px solid #0e94ea;
            align-items: center;
            cursor: pointer;

            &:last-child{
              border-left: none;
            }
          }

          .txt_left{
            border-top-left-radius: 0.1rem;
            border-bottom-left-radius: 0.1rem;
          }
          .txt_right{
            border-top-right-radius: 0.1rem;
            border-bottom-right-radius: 0.1rem;
          }

          .active{
            background:#0e94ea ;
          }
        }
        .right_time{
          width: 25%;
          height: 100%;
          color: #fff;
          font-size: 0.18rem;
          display: flex;
          align-items: center;
        }
      }

      .data_bot{
        width: 100%;
        height: 70%;
        display: flex;
        // background: rebeccapurple;

        .data_box{
          width: 20%;
          height: 100%;
          // background: green;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;

          .data_txt{
            color: #fff;
            font-size: 0.18rem;
          }
        }
      }
    }

    .center_cen{
      width: 100%;
      height: 46%;
      background: red;
    }
    .cen_bot{
      width: 100%;
      height: 30%;
      display: flex;
      // background: green;

      .echarts{
        width: 50%;
        height: 100%;
        .trend_box{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .right_box {
    width: 30%;
    height: 100%;
    background: url(~@/assets/images/line_img.png) top left repeat-y;

    .full_btn{
      width: 92%;
      height: 3%;
      // background: red;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .right_top{
      width: 92%;
      height: 30%;
      margin: 0 auto;
      margin-top: 0.1rem;

      .title_box {
        width: 100%;
        height: 0.42rem;
        background: url(~@/assets/images/box_title.png) top left no-repeat;
        background-size:100% 100% ;

        .tit {
          width: 30%;
          height: 100%;
          font-size: 0.2rem;
          color: #fff;
          display: flex;
          align-items: center;
          padding-left: 0.4rem;
        }
      }

      .pie_box{
        width: 100%;
        height: 80%;
        // background: red;
      }
    }

    .right_center{
      width: 92%;
      height: 45%;
      // background: red;
      margin:0 auto;
      .title_box {
        width: 100%;
        height: 0.42rem;
        background: url(~@/assets/images/box_title.png) top left no-repeat;
        background-size:100% 100% ;

        .tit {
          width: 30%;
          height: 100%;
          font-size: 0.2rem;
          color: #fff;
          display: flex;
          align-items: center;
          padding-left: 0.4rem;
        }
      }
    }

    .right_bot{
      width: 92%;
      height: 20%;
      // background: green;
      margin:0 auto;
      .title_box {
        width: 100%;
        height: 0.42rem;
        background: url(~@/assets/images/box_title.png) top left no-repeat;
        background-size:100% 100% ;

        .tit {
          width: 30%;
          height: 100%;
          font-size: 0.2rem;
          color: #fff;
          display: flex;
          align-items: center;
          padding-left: 0.4rem;
        }
      }
    }
  }
}
</style>