weiqin-web/src/components/home/homePage.vue

<template>
  <div class="home-page-max-big-box">
    <div class="home-page-big-box" v-show="pageType=='home'">
      <!--左侧盒子-->
      <div class="max-big-left-box">
        <!--仓库目录-->
        <div class="left-top-max-box">
          <div class="left-top-title-box">
            <img src="~@/assets/images/icon_52.png">
            <p>仓库目录</p>
          </div>
          <!--树结构-->
          <el-tree class="max-tree-box TabStrip" :indent="0"
                   ref="dataConfigTree"
                   default-expand-all
                   :expand-on-click-node="false"
                   node-key="id" :highlight-current="false"
                   :data="leftTopData" icon-class="none">
            <div class="tree-box" slot-scope="{ node, data }" @click="clickTree(data,node)">
              <!--<img :class="{'levelImg':node.level==1}" v-if="node.expanded&&node.childNodes[0]"-->
                   <!--src="~@/assets/images/icon_42.png">-->
              <!--<img :class="{'levelImg':node.level==1}" v-if="!node.expanded&&node.childNodes[0]"-->
                   <!--src="~@/assets/images/icon_43.png">-->
              <p class="label-p"
                 :class="{'level1':node.level==1,'level2':node.level==2,'level3':node.level==3,'levelColorA':node.checked||node.indeterminate,'levelColorB':!node.checked&&!node.indeterminate}"
              >{{ node.label }}</p>
            </div>
          </el-tree>
          <p class="position-p"></p>
        </div>
        <!--战备值班-->
        <div class="left-bottom-max-box">
          <div class="left-bottom-title-box">
            <img src="~@/assets/images/icon_53.png">
            <p>战备值班</p>
          </div>
          <!--视频盒子-->
          <div class="left-bottom-big-box">
            <div class="left-bottom-for-title-box">
              <p>值班人员</p>
              <p>仓库名称</p>
              <p>视频监控</p>
            </div>
            <div class="left-bottom-for-big-box TabStrip cursor_pointer">
              <div class="left-bottom-for-box" @click="listClick(item)"
                   v-for="(item,index) in leftBottomData" :key="index">
                <img :src="item.photo">
                <p>{{item.organizationName}}</p>
                <img src="~@/assets/images/icon_20.png">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--中间盒子-->
      <div class="max-big-center-box">
        <!--ecsium地图-->
        <div class="max-big-center-top-box">
          <!--<img class="demo-img" src="~@/assets/images/demo.png">-->
          <iframe
            class="webMapURL"
            :src="webMapURL" scrolling="auto" frameborder="0">
          </iframe>
        </div>
        <!--当前任务状态-->
        <div class="max-big-center-bottom-box">
          <div class="max-big-center-bottom-title-box">
            <img src="~@/assets/images/icon_55.png">
            <p>当前任务状态</p>
          </div>
          <div class="max-big-center-bottom-for-title-box">
            <p>序号</p>
            <p>任务名称</p>
            <p>状态</p>
            <p>查看详情</p>
          </div>
          <div class="max-big-center-bottom-for-big-box TabStrip">
            <div class="max-big-center-bottom-for-box" v-for="(item,index) in centerBottomData" :key="index">
              <p>{{item.id}}</p>
              <p>{{item.task_name}}</p>
              <p :class="{'colorA':item.task_status==1,'color2':item.task_status==2,'color3':item.task_status==3,'color4':item.task_status==4,'color5':item.task_status==5,'color6':item.task_status==6,'color7':item.task_status==7,'color8':item.task_status==8}">
                {{item.task_status==1?statusList[0].taskName:(item.task_status==2?statusList[1].taskName:(item.task_status==3?statusList[2].taskName:(item.task_status==4?statusList[3].taskName:(item.task_status==5?statusList[4].taskName:(item.task_status==6?statusList[5].taskName:(item.task_status==7?statusList[6].taskName:(item.task_status==8?statusList[7].taskName:"")))))))}}
              </p>
              <p class="cursor_pointer" @click="openTaskDetails(item)">详情</p>
            </div>
            <p v-if="!centerBottomData[0]" style="color:#fff;line-height:100px;">暂无执行中的任务</p>
          </div>
        </div>
      </div>
      <!--右侧盒子-->
      <div class="max-big-right-box">
        <div class="max-big-right-title-box">
          <img src="~@/assets/images/icon_54.png">
          <p>装备物资</p>
        </div>
        <div class="max-big-right-top-box">
          <div class="max-big-right-top-title-box">
            <p></p>
            <p>各仓库装备数量</p>
          </div>
          <div class="eCharts-box" id="eChartsOne"></div>
        </div>
        <div class="max-big-right-bottom-box">
          <div class="max-big-right-bottom-title-box">
            <p></p>
            <p>各仓库耗材数量</p>
          </div>
          <div class="eCharts-box" id="eChartsTwo"></div>
        </div>
      </div>
      <!--悬浮窗口-->
      <div class="position-left-box" v-if="positionLeftData.userName">
        <div class="position-left-title-box">
          <div class="position-left-title-min-box">
            <div>
              <img src="~@/assets/images/icon_51.png">
              <p>{{positionLeftData.organizationName}}</p>
            </div>
            <p class="position-left-address">位置：{{positionLeftData.detailAddress}}</p>
          </div>
          <img class="position-left-button-img cursor_pointer" src="~@/assets/images/icon_20.png" @click="videoClick">
          <div class="position-left-button-out-box cursor_pointer" @click="outListClick">
            <img src="~@/assets/images/icon_x_01.png">
          </div>
        </div>
        <p class="position-left-text">值班人员信息</p>
        <div class="position-left-info-box">
          <div>
            <p>姓名：</p>
            <p>{{positionLeftData.userName}}</p>
          </div>
          <div>
            <p>电话：</p>
            <p>{{positionLeftData.phone}}</p>
          </div>
          <div>
            <p>值班时间：</p>
            <p>{{positionLeftData.dutyStartTime}}至{{positionLeftData.dutyEndTime}}</p>
          </div>
          <div>
            <p>备注：</p>
            <p>{{positionLeftData.remark}}</p>
          </div>
        </div>
      </div>
    </div>
      <task-details v-if="pageType=='taskDetails'" :taskData="taskData"></task-details>
      <warehouse-monitoring v-if="pageType=='warehouseMonitoring'"></warehouse-monitoring>
  </div>
</template>

<script>
  import { statusInfoList,deptTreeselect,frontRepertoryList,frontdutyInfo,frontTasklist,frontTaskDetailList } from '@/api/userApi'
  import { webMap_URL } from '@/api/config'
  export default {
    name: "homePage.vue",//首页
    components:{
      taskDetails: resolve => {require(['@/components/home/taskDetails'], resolve)},//任务详细信息查看
      warehouseMonitoring: resolve => {require(['@/components/home/warehouseMonitoring'], resolve)},//仓库监控
    },
    data () {
      return {
        webMapURL:webMap_URL,
        pageType:"home",
        //树结构
        leftTopData: [],
        //值班信息
        leftBottomData:[],
        //任务状态数据
        statusList:[],
        //任务数据
        centerBottomData:[],
        // 图表数据
        rightTopData:{},
        rightBottomData:{},
        //监控选中数据
        positionLeftData:{},
        //任务详情传参
        taskData:{},
        //当前选中仓库ID
        organizationId:"",
      }
    },

    created(){

    },
    mounted() {
      this.statusInfoList();
      this.frontRepertoryList();
    },
    methods: {
      //获取任务状态名称
      async statusInfoList(){
        let self = this;
        const { data } = await statusInfoList();
        if(data.code==200){
          this.statusList = data.rows;
          this.deptTreeselect();
        }
      },
      //获取图表数据
      async frontRepertoryList () {
        let self = this;
        const { data } = await frontRepertoryList();
        if(data.code==200){
          //装备数据
          let equipmentData = {
            organizationName:[],
            articlesProduct:[],
            newProduct:[],
            oldProduct:[],
            repairedProduct:[],
          };
          for(let i=0;i<data.data.listMapEquipment.length;i++){
            equipmentData.organizationName.push(data.data.listMapEquipment[i].organizationName);
            equipmentData.articlesProduct.push(data.data.listMapEquipment[i].articlesProduct);
            equipmentData.newProduct.push(data.data.listMapEquipment[i].newProduct);
            equipmentData.oldProduct.push(data.data.listMapEquipment[i].oldProduct);
            equipmentData.repairedProduct.push(data.data.listMapEquipment[i].repairedProduct);
          }
          self.rightTopData = equipmentData;
          //耗材数据
          let productData = {
            organizationName:[],
            articlesProduct:[],
            newProduct:[],
            oldProduct:[],
            repairedProduct:[],
          };
          for(let i=0;i<data.data.listMapProduct.length;i++){
            productData.organizationName.push(data.data.listMapProduct[i].organizationName);
            productData.articlesProduct.push(data.data.listMapProduct[i].articlesProduct);
            productData.newProduct.push(data.data.listMapProduct[i].newProduct);
            productData.oldProduct.push(data.data.listMapProduct[i].oldProduct);
            productData.repairedProduct.push(data.data.listMapProduct[i].repairedProduct);
          }
          self.rightBottomData = productData;
          this.eChartsOne();
          this.eChartsTwo();
        }
      },
      //获取组织架构树状数据
      async deptTreeselect () {
        let self = this;
        const { data } = await deptTreeselect();
        if(data.code==200){
          this.leftTopData = data.data;
          this.$refs.dataConfigTree.setCheckedKeys([data.data[0].id]);
          self.organizationId = data.data[0].id;
          setTimeout(function(){
            self.frontdutyInfo();
            self.frontTasklist();
          },100);
        }
      },
      //获取值班信息
      async frontdutyInfo () {
        let self = this;
        let obj = {
          organizationId:self.organizationId,
        }
        const { data } = await frontdutyInfo(obj);
        if(data.code==200){
          self.leftBottomData = data.data;
          // this.leftTopData = data.data;
        }
      },
      //获取任务信息
      async frontTasklist () {
        let self = this;
        let obj = {
          organizationId:self.organizationId,
        }
        const { data } = await frontTasklist(obj);
        if(data.code==200){
          this.centerBottomData = data.data;
          // this.leftTopData = data.data;
        }
      },
      //左上点击事件
      clickTree(data,node){
        let self = this;
        // if(node.checked){
        //   this.$refs.dataConfigTree.setCheckedKeys([]);
        // }else{
        //   this.$refs.dataConfigTree.setCheckedKeys([node.data.id]);
        // }
        if(node.data.id != self.organizationId){
          this.$refs.dataConfigTree.setCheckedKeys([node.data.id]);
          this.organizationId = node.data.id;
          this.frontdutyInfo();
          this.frontTasklist();
        }
      },
      // eCharts右上图表
      eChartsOne(){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eChartsOne'));
        let option = {
          color: ["#37A1DA", "#9FE7B8", "#FEDB5B", "#FF9F7F"],
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
          },
          legend: {
            // width: "60%",
            // top: "10%",
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            top: "20%",
            bottom: "20%",
            left: "10%",
            right: "10%"
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLine: {
              lineStyle: { color: '#fff' }
            },
            axisLabel: {
              interval:0,
              rotate:40,
              textStyle: { color: '#fff', fontSize: 13 }
            },
            data: self.rightTopData.organizationName
          },
          yAxis: {
            name: "数量",
            nameTextStyle: { color: "#fff", fontSize: 13 },
            type: 'value',
            splitLine: {
              lineStyle: { color: "#fff", type: "dashed" }
            },
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              textStyle: { color: '#fff', fontSize: 13 }
            }
          },
          series: [{
            name: "新品",
            type: 'bar',
            stack: 'all',
            barWidth: "40%",
            data: self.rightTopData.newProduct
          }, {
            name: "堪用品",
            type: 'bar',
            stack: 'all',
            barWidth: "40%",
            data: self.rightTopData.articlesProduct
          }, {
            name: "待修品",
            type: 'bar',
            stack: 'all',
            barWidth: "40%",
            data: self.rightTopData.repairedProduct
          }, {
            name: "待报废",
            type: 'bar',
            stack: 'all',
            barWidth: "40%",
            data: self.rightTopData.oldProduct
          }]
        };
        myChart.setOption(option);
      },
      // eCharts右下图表
      eChartsTwo(){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eChartsTwo'));
        let option = {
          color: ["#37A1DA", "#9FE7B8", "#FEDB5B", "#FF9F7F"],
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
          },
          legend: {
            // width: "60%",
            // top: "10%",
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            top: "20%",
            bottom: "20%",
            left: "10%",
            right: "10%"
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLine: {
              lineStyle: { color: '#fff' }
            },
            axisLabel: {
              interval:0,
              rotate:40,
              textStyle: { color: '#fff', fontSize: 13 }
            },
            data: self.rightBottomData.organizationName
          },
          yAxis: {
            name: "数量",
            nameTextStyle: { color: "#fff", fontSize: 13 },
            type: 'value',
            splitLine: {
              lineStyle: { color: "#fff", type: "dashed" }
            },
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              textStyle: { color: '#fff', fontSize: 13 }
            }
          },
          series: [{
            name: "新品",
            type: 'bar',
            stack: 'all',
            barWidth: "40%",
            data: self.rightBottomData.newProduct
          }, {
            name: "堪用品",
            type: 'bar',
            stack: 'all',
            barWidth: "40%",
            data: self.rightBottomData.articlesProduct
          }, {
            name: "待修品",
            type: 'bar',
            stack: 'all',
            barWidth: "40%",
            data: self.rightBottomData.repairedProduct
          }, {
            name: "待报废",
            type: 'bar',
            stack: 'all',
            barWidth: "40%",
            data: self.rightBottomData.oldProduct
          }]
        };
        myChart.setOption(option);
      },
      // 左侧视频点击事件
      listClick(item){
        this.positionLeftData = item;
      },
      // 左侧视频窗口关闭事件
      outListClick(){
        this.positionLeftData = "";
      },
      openTaskDetails(item){
        let self = this;
        let obj = {
          processingId : item.id,
          taskNameList : []
        };
        for(let i=0;i<self.statusList.length;i++){
          obj.taskNameList.push(self.statusList[i].taskName);
        }
        this.taskData = obj;
        this.pageType = "taskDetails";
      },
      //视频监控点击跳转
      videoClick(){
        this.pageType = "warehouseMonitoring";
      },
      //返回当前页面 供子页面调用
      outPage(){
        this.pageType = "home";
      },
    }
  }
</script>

<style scoped lang="stylus">
.home-page-max-big-box
  flex-direction: inherit;
  flex: 1;
  .home-page-big-box
    padding:46px 23px 31px;
    display flex
    position relative
    /*左侧盒子*/
    .max-big-left-box
      width:446px;
      height:100%
      /*仓库目录*/
      .left-top-max-box
      .left-bottom-max-box
        width:446px;
        height:448px;
        background url("~@/assets/images/min_back_01.png")
        background-size 100% 100%
        overflow hidden
        position relative
        .left-top-title-box
        .left-bottom-title-box
          margin:15px 0 0 30px;
          display flex
          img
            display block
            margin-top:5px;
            width:20px;
            height:20px;
          p
            font-size:$font_17;
            color:$color_ff;
            font-weight:700;
            margin-left:7px;
            line-height:29px;
        //树结构
        .max-tree-box
          z-index:1;
          height:400px;
          margin:10px 100px 0 100px;
          overflow-x:hidden;
          overflow-y:scroll;
          white-space: nowrap;
          .tree-box
            display flex
            img
              display block
              width:20px;
              height:20px;
            p
              margin-left:8px;
        .position-p
          position absolute
          top:53px;
          left:42px;
          background url("~@/assets/images/icon_21.png")
          background-size 100% 100%
          width:260px;
          height:28px;
      //战备值班
      .left-bottom-max-box
        margin-top:10px;
        //视频盒子
        .left-bottom-big-box
          margin:26px 30px 0;
          .left-bottom-for-title-box
            display flex
            p
              flex:1;
              line-height:30px;
              font-size:$font_16;
              color:$color_ff;
          .left-bottom-for-big-box
            height:336px;
            width:394px;
            overflow-x:hidden;
            overflow-y:scroll;
            white-space: nowrap;
            .left-bottom-for-box
              display flex
              height:54px;
              width:386px;
              margin:6px 8px 0 0;
              background url("~@/assets/images/icon_21.png")
              background-size 100% 100%
              img:nth-child(1)
                display block
                width:59px;
                height:47px;
                margin:4px 0 0 10px;
                border-radius:5px;
              p
                flex:1;
                color:$theme;
                font-size:$font_14;
                line-height:54px;
              img:nth-child(3)
                display block
                width:58px;
                height:30px;
                margin:13px 14px 0 0;
            .left-bottom-for-box:hover
              background-color:rgba(6,177,240,0.3);
    .max-big-center-box
      width:932px;
      height:100%
      margin:0 26px;
      //ecsium地图
      .max-big-center-top-box
        height: 561px;
        width: 934px;
        margin: 11px 0 15px;
        border: 1px solid #05BCE9;
        .webMapURL
          height:559px;
          width:932px;
      //  当前任务状态
      .max-big-center-bottom-box
        /*height:286px;*/
        height:320px;
        width:932px;
        background url("~@/assets/images/min_back_02.png")
        background-size 100% 100%
        overflow hidden
        .max-big-center-bottom-title-box
          display flex
          margin:14px 0 0 30px;
          img
            display block
            height:20px;
            width:20px;
            margin:5px 12px 0 0;
          p
            line-height:30px;
            font-size:$font_17;
            color:$color_ff;
            font-weight:700;
        .max-big-center-bottom-for-title-box
          display flex
          margin-top:4px;
          width:916px;
          p
            height:60px;
            line-height:60px;
            color:$color_ff;
            font-size:$font_16;
          p:nth-child(1)
            width:153px;
          p:nth-child(2)
            flex:1;
          p:nth-child(3)
            width:182px;
          p:nth-child(4)
            width:204px;
        .max-big-center-bottom-for-big-box
          overflow-x:hidden;
          overflow-y:scroll;
          white-space: nowrap;
          height:168px;
          width:916px;
          .max-big-center-bottom-for-box
            display: flex
            p
              height:42px;
              line-height:42px;
              font-size:$font_15;
            p:nth-child(1)
              width:153px;
              color: $color_91
            p:nth-child(2)
              flex:1;
              color: $color_91
            p:nth-child(3)
              width:182px;
            p:nth-child(4)
              width:204px;
              color:$fontColor_08;
            .colorA
              color:$theme3;
            .color2
              color:#4fd1f3;
            .color3
              color:#72c9d0;
            .color4
              color:#68a4a5;
            .color5
              color:#e9ffce;
            .color6
              color:#f4db87;
            .color7
              color:#ec9e4b;
            .color8
              color:#7ce030;
          .max-big-center-bottom-for-box:hover
            background-color:rgba(6,177,240,0.3);
            p:nth-child(1)
              color: $theme !important
            p:nth-child(2)
              color: $theme !important
    .max-big-right-box
      width:446px;
      height:906px
      background url("~@/assets/images/min_back_03.png")
      background-size 100% 100%
      .max-big-right-title-box
        display flex
        margin:14px 0 0 30px;
        img
          display block
          height:20px;
          width:20px;
          margin:5px 12px 0 0;
        p
          line-height:30px;
          font-size:$font_17;
          color:$color_ff;
          font-weight:700;
      .max-big-right-top-box
      .max-big-right-bottom-box
        width:446px;
        height:364px;
        .max-big-right-top-title-box
        .max-big-right-bottom-title-box
          height:54px;
          display flex
          p:nth-child(1)
            width:4px;
            height:20px;
            background:$fontColor_e5;
            border-radius:4px;
            margin:17px 7px 0 28px;
          p:nth-child(2)
            color:$fontColor_e5;
            font-size:$font_15;
            font-weight:700;
            line-height:54px;
        .eCharts-box
          height:310px;
          width:447px;
        .max-big-right-top-title-box
          margin-top:20px;
        .max-big-right-bottom-title-box
          margin-top:50px;
    .position-left-box
      position:absolute;
      bottom:120px;
      left:470px;
      height:305px;
      width:450px;
      background url("~@/assets/images/min_back_06.png")
      background-size 100% 100%
      .position-left-title-box
        display flex
        .position-left-title-min-box
          height:62px;
          width:297px;
          margin:14px 0 0 30px;
          div
            display: flex
            img
              display block
              height:20px;
              width:20px;
              margin:5px 7px 0 0;
            p
              flex:1;
              text-align left
              color:$theme;
              font-size:$font_15;
              font-weight:700;
              line-height 31px
          .position-left-address
            text-align left
            color:$color_ff;
            font-size:$font_14;
            line-height 31px
        .position-left-button-img
          width:58px;
          height:30px;
          margin:29px 26px 0 0;
        .position-left-button-out-box
          width:32px;
          height:32px;
          margin:14px 0 0 0;
          img
            display block
            height:14px;
            width:14px;
            margin:9px;
      .position-left-text
        margin-top:5px;
        height:36px;
        line-height 36px
        font-size:$font_16;
        color:$theme;
      .position-left-info-box
        margin:19px 64px 0;
        div
          display flex
          p
            font-size:$font_14;
            text-align left
          p:nth-child(1)
            width:76px;
            padding:4px 0;
            line-height:20px;
            color:$theme;
          p:nth-child(2)
            padding:4px 0;
            line-height:20px;
            width:248px;
            word-wrap:break-word;
            word-break:break-all;
            overflow: hidden;
            color:$color_ff;
  .el-tree
    background rgba(0,0,0,0) !important

  /*多层级样式*/
  .levelImg{
    margin-top: 7px;
  }
  .level1{
    font-size:$font_17;
    color:$theme !important;
    height:34px;
    line-height 34px
  }
  .level2{
    font-size:$font_14;
    height:22px;
    line-height 22px
  }
  .level3{
    font-size:$font_12;
    height:20px;
    line-height 20px
  }
  .levelColorA{
    color:$color_ff;
  }
  .levelColorB{
    color:$color_91;
  }
  /*层级指引线*/
  .tree-container /deep/ .el-tree > .el-tree-node :after {
    border-top: none;
  }
  .el-tree /deep/ .el-tree-node .el-tree-node {
    position: relative;
    padding-left: 16px !important;
  }
  .el-tree /deep/ .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree /deep/ .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree /deep/ .el-tree-node .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree /deep/ .el-tree-node .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree /deep/ .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree /deep/ .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }

  .tree-container { //树的parent，样式自定
  }
  .el-tree /deep/ .el-tree-node__content .el-tree-node__expand-icon{
    padding:1px !important
  }
  //修改悬浮样式
  .el-tree /deep/ .el-tree-node:focus > .el-tree-node__content {
    background-color: rgba(0,0,0,0) !important;
  }
  .el-tree /deep/ .el-tree-node__content:hover {    background-color: rgba(0,0,0,0);
  }
  .el-tree /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: rgba(0,0,0,0);
  }
</style>