<template>
  <div class="max-big-box TabStrip">
    <div class="big-max-box">
      <!--左侧-->
      <div class="left-max-box">
        <!--左侧上部-->
        <div class="left-top-max-box">
          <!--左侧树结构-->
          <div class="left-min-box">
            <p class="left-min-title">请选择仓库</p>
            <div v-for="(item,index) in leftTopTreeList" :key="index" @click="leftTreeClick(item.id)">
              <img v-if="leftTopTreeType==item.id" src="~@/assets/images/icon_57.png">
              <img v-else src="~@/assets/images/icon_58.png">
              <p :class="{'colorA':leftTopTreeType==item.id}">{{item.name}}</p>
            </div>
          </div>
          <div class="right-min-box">
            <div class="right-min-title-box">
              <img src="~@/assets/images/xian_1.png">
              <img src="~@/assets/images/icon_59.png">
              <p>装备物资可视化定位</p>
              <img src="~@/assets/images/xian_2.png">
            </div>
            <div class="cesium-box">
              <!--测试图-->
              <!--<img src="~@/assets/images/demo2.png">-->
              <iframe
                class="cesium-box-max-box-webMapURL"
                :src="webGlURL" scrolling="no" frameborder="0">
              </iframe>
            </div>
          </div>
        </div>
        <!--左侧下部-->
        <div class="left-bottom-max-box">
          <!--操作按钮-->
          <div class="top-box">
            <div class="input-box">
              <input class="search-input" type="text" v-model="inputData" placeholder="请输入物资编号或名称关键字进行查询">
              <div class="dropdown-box" v-for="(item,index) in downList" :key="index">
                <p class="dropdown-left-title">{{item.name}}：</p>
                <div class="dropdown-right-box cursor_pointer"
                     @mouseenter="dropdownClickOpen(index,'1')" @mouseleave="dropdownClickOpen(index,'2')">
                  <p class="dropdown-text">{{downList[index].downText}}</p>
                  <div class="dropdown-for-max" v-if="downList[index].downType">
                    <p v-for="(item,indexTwo) in downList[index].list" :key="indexTwo"
                       :class="{'color-A':downList[index].mouseColor == item}"
                       @mouseenter="colorTypeEnter(index,item)" @mouseleave="colorTypeLeave(index)"
                       @click="dropdownClick(index,item)">{{item}}</p>
                  </div>
                </div>
              </div>
              <div class="button-box cursor_pointer" @click="clickQuery">
                <img src="~@/assets/images/icon_27.png">
                <p class="cursor_pointer">查询</p>
              </div>
            </div>
          </div>
          <div class="table-box">
            <el-table
              class="TabStrip"
              ref="multipleTable"
              :row-key="getRowKey"
              tooltip-effect="dark"
              style="width: 100%"
              :data="tableData">
              <el-table-column
                type="index"
                :index="indexMethod"
                label="序号"
                width="80">
              </el-table-column>
              <el-table-column
                prop="materialNumber"
                label="编号"
                width="127">
              </el-table-column>
              <el-table-column
                prop="materialName"
                label="名称"
                width="112">
              </el-table-column>
              <el-table-column
                prop="placeAdress"
                label="位置"
                width="181">
              </el-table-column>
              <el-table-column
                prop="productDate"
                label="生产日期"
                width="225">
              </el-table-column>
              <el-table-column
                prop="expiryDate"
                label="有效期"
                width="131">
              </el-table-column>
              <el-table-column
                prop="status"
                label="质量状态"
                width="140">
                <template slot-scope="scope">
                  <p :class="{'colorB':scope.row.status==1,'colorC':scope.row.status==2,'colorD':scope.row.status==3,'colorE':scope.row.status==4,}">{{scope.row.status==1?"新品":(scope.row.status==2?"堪用品":(scope.row.status==3?"待修品":(scope.row.status==4?"待报废":"")))}}</p>
                </template>
              </el-table-column>
              <el-table-column
                label="定位"
                width="153">
                <template slot-scope="scope">
                  <p class="table-button-p" @click="infoClick(scope.$index, scope.row)">查看</p>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!--右侧-->
      <div class="right-max-box">
        <div id="eCharts-one">

        </div>
        <div id="eCharts-two">

        </div>
      </div>
      <!--定位盒子-->
      <div class="position-box" v-if="pageType">
        <div class="position-title-box">
          <p>{{positionData.organizationName}}</p>
          <img class="cursor_pointer" @click="offPosition" src="~@/assets/images/icon_x_01.png">
        </div>
        <p class="position-address">{{positionData.placeAdress}}</p>
        <div class="position-text-box">
          <img src="~@/assets/images/xian_1.png">
          <p>物资详细信息</p>
          <img src="~@/assets/images/xian_2.png">
        </div>
        <div class="position-info-box">
          <p>物资名称：</p>
          <p>{{positionData.materialName}}</p>
        </div>
        <div class="position-info-box">
          <p>单位：</p>
          <p>{{positionData.unit}}</p>
        </div>
        <div class="position-info-box">
          <p>RFID标签：</p>
          <p>{{positionData.rfid}}</p>
        </div>
        <div class="position-info-box">
          <p>质量状态：</p>
          <p>{{positionData.status=1?"新品":(positionData.status=2?"堪用品":(positionData.status=3?"待修品":(positionData.status=4?"待报废":"")))}}</p>
        </div>
        <div class="position-info-box">
          <p>生产日期：</p>
          <p>{{positionData.productDate}}</p>
        </div>
        <div class="position-info-box">
          <p>有效期：</p>
          <p>{{positionData.expiryDate}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { webGl_URL } from '@/api/config'
  import { listOrganization,temperatureOrHumidity,materialInfoAll } from '@/api/userApi'
  export default {
    name: "visualizedPositioningOfEquipmentMaterials",//装备物资可视化定位
    data () {
      return {
        webGlURL:webGl_URL,
        //搜索数据
        inputData:"",
        pageType:false,
        leftTopTreeType:"",
        leftTopTreeList:[],
        //下拉框
        downList:[
          {
            name:"请选择状态",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:["全部","新品","堪用品","待修品","待报废"],
            idType:["","1","2","3","4"]
          },
        ],
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        /*数据*/
        tableData:[],
        //悬浮展示数据
        positionData:{
          organizationName:"organizationName",
          materialNumber:"materialNumber",
          materialName:"materialName",
          placeAdress:"placeAdress",
          status:"status",
          productDate:"productDate",
          expiryDate:"expiryDate",
          unit:"unit",
          rfid:"rfid",
        },
        //图表数据
        timeList:[],
        leftList:[],
        rightList:[],
      }
    },
    created(){

    },
    mounted() {
      this.eChartsOne();
      this.eChartsTwo();
      this.listOrganization();
    },
    methods: {
      //点击查询
      clickQuery(){
        this.currentPage = 1;
        this.getListData();
      },
      //仓库列表
      async listOrganization () {
        let self = this;
        const { data } = await listOrganization();
        if(data.code==200){
          let list = [];
          for(let i=0;i<data.data.length;i++){
            let obj = {
              id:data.data[i].deptId,
              name:data.data[i].deptName,
            };
            list.push(obj);
          }
          self.leftTopTreeList = list;
          self.leftTopTreeType = list[0].id;
          self.temperatureOrHumidity();
          self.getListData();
        }
      },
      //温度湿度监控数据
      async temperatureOrHumidity () {
        let self = this;
        let obj={
          repertoryId :self.leftTopTreeType,
        };
        const { data } = await temperatureOrHumidity(obj);
        if(data.code==200){
          let newTime = [];
          let left = [];
          let Right = [];
          for(let i=0;i<data.data.length;i++){
            let playTime = data.data[i].time1.split(" ");
            playTime = playTime[1].split(":");
            let endTime = data.data[i].time2.split(" ");
            endTime = endTime[1].split(":");
            let time = playTime[0] + '-' + endTime[0];
            newTime.push(time);
            left.push(data.data[i].temperature);
            Right.push(data.data[i].humidity);
          }
          this.timeList = newTime;
          this.leftList = left;
          this.rightList = Right;
          this.eChartsOne();
          this.eChartsTwo();
        }
      },
      //列表数据
      async getListData (){
        let self = this;
        let obj={
          repertoryId:this.leftTopTreeType,
          searchValue:this.inputData,
          status:"",
          pageSize:self.pagesize,
          pageNum:self.currentPage,
        };
        for(let i=0;i<self.downList[0].list.length;i++){
          if(self.downList[0].downText==self.downList[0].list[i]){
            obj.status = self.downList[0].idType[i];
          }
        }
        const { data } = await materialInfoAll(obj);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.$forceUpdate();
        }
      },
      // eCharts上图表
      eChartsOne(){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eCharts-one'));
        let option = {
          title: {
            text: '近24小时温度变化',
            textStyle: {
              align: 'center',
              color: '#FFF',
              fontSize: 14,
            },
            top: '8%',
            left: '7%',
          },
          legend: {
            right: "7%",
            top: "8%",
            textStyle: {
              align: 'center',
              color: '#FFF',
              fontSize: 14,
            },
          },
          grid: {
            top: '25%',
            bottom: '10%',
            left: '10%',
            right: '8%'
          },
          tooltip: {
            trigger: 'axis',
            label: {
              show: true
            }
          },
          xAxis: {
            name: 'h',
            boundaryGap: true, //默认，坐标轴留白策略
            axisLine: {
              lineStyle: {
                color: "#fff",
              }
            },
            axisLabel: {
              interval:0,
              rotate:45
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            data: self.timeList
          },
          yAxis: {
            type: "value",
            name: '°C',
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            }
          },
          series: [{
            name:'温度',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#fb9a00',
            },
            itemStyle: {
              color: '#fb9a00',
              borderWidth: 1,
              borderColor: '#FFF'
            },
            data: self.leftList
          }]
        };
        myChart.setOption(option);
      },
      // eCharts下图表
      eChartsTwo(){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eCharts-two'));
        let option = {
          title: {
            text: '近24小时湿度变化',
            textStyle: {
              align: 'center',
              color: '#FFF',
              fontSize: 14,
            },
            top: '8%',
            left: '7%',
          },
          legend: {
            right: "7%",
            top: "8%",
            textStyle: {
              align: 'center',
              color: '#FFF',
              fontSize: 14,
            },
          },
          grid: {
            top: '25%',
            bottom: '10%',
            left: '10%',
            right: '8%'
          },
          tooltip: {
            trigger: 'axis',
            label: {
              show: true
            }
          },
          xAxis: {
            name: 'h',
            boundaryGap: true, //默认，坐标轴留白策略
            axisLine: {
              lineStyle: {
                color: "#fff",
              }
            },
            axisLabel: {
              interval:0,
              rotate:45
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            data: self.timeList
          },
          yAxis: {
            type: "value",
            name: 'φ',
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            }
          },
          series: [{
            name:'湿度',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#03bcea',
            },
            itemStyle: {
              color: '#03bcea',
              borderWidth: 1,
              borderColor: '#FFF'
            },
            data: self.rightList
          }]
        };
        myChart.setOption(option);
      },
      leftTreeClick(id){
        this.leftTopTreeType = id;
        this.currentPage = 1;
        this.temperatureOrHumidity();
        this.getListData();
      },
      //单品查看
      infoClick(index,row){
        this.positionData.organizationName = row.organizationName;
        this.positionData.materialNumber = row.materialNumber;
        this.positionData.materialName = row.materialName;
        this.positionData.placeAdress = row.placeAdress;
        this.positionData.status = row.status;
        this.positionData.productDate = row.productDate;
        this.positionData.expiryDate = row.expiryDate;
        this.positionData.unit = row.unit;
        this.positionData.rfid = row.rfid;
        this.pageType = true;
      },
      //关闭查看
      offPosition(){
        this.pageType = false;
      },
      //下拉菜单进入悬浮状态
      colorTypeEnter(type,item){
        this.downList[type].mouseColor=item;
      },
      //下拉菜单离开悬浮状态
      colorTypeLeave(type){
        this.downList[type].mouseColor = "";
      },
      // 下拉菜单选项悬浮事件
      dropdownClickOpen(type,state){
        if(state==1){
          this.downList[type].downType = true
        }else if(state==2){
          this.downList[type].downType = false
        }
      },
      // 下拉菜单点击事件
      dropdownClick(type,item){
        this.downList[type].downText = item;
        this.downList[type].downType = false;
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    flex:1;
    overflow-y scroll
    .big-max-box
      height:100%;
      width:1784px;
      margin:0 68px;
      display: flex
      position relative
      /*左侧*/
      .left-max-box
        width:1150px;
        //左侧上部
        .left-top-max-box
          display flex
          /*左侧树结构*/
          .left-min-box
            height:523px;
            width:198px;
            overflow hidden
            .left-min-title
              margin-top:13px;
              line-height:54px;
              color: $color_ff;
              font-size:$font_18;
              text-align left
            div
              display flex
              cursor:pointer
              img
                height:20px;
                width:20px;
                margin:7px 7px 0 0;
              p
                line-height:32px;
                color:$color_ff;
                font-size:$font_14;
                text-align left
              .colorA
                color:$theme;
          .right-min-box
            .right-min-title-box
              width:492px;
              height:49px;
              display flex
              margin:0 auto;
              img:nth-child(1)
                width:150px;
                height:2px;
                margin-top:25px;
              img:nth-child(2)
                width:20px;
                height:20px;
                margin:15px 0 0 8px;
              p:nth-child(3)
                width:158px;
                line-height:49px;
                color:$color_ff;
                font-size:$font_16;
                font-weight:700;
                text-align center
              img:nth-child(4)
                width:150px;
                height:2px;
                margin-top:25px;
            .cesium-box
              margin-top:24px;
              width:952px;
              height:448px;
              img
                width:952px;
                height:448px;
              .cesium-box-max-box-webMapURL
                width:952px;
                height:448px;
        .left-bottom-max-box
          height:360px;
          overflow hidden
          .top-box
            height:30px;
            display flex
            margin:20px 0
            .input-box
              width:1560px;
              display flex
              margin-left:105px;
              .search-input
                height:28px;
                width:360px;
                border:1px solid $theme;
                padding-left:10px;
              .dropdown-box
                display flex
                color:$color_ff;
                z-index:1;
                margin-left:30px;
                .dropdown-left-title
                  line-height:30px;
                  font-size:$font_14;
                .dropdown-right-box
                  font-size:$font_12;
                  .dropdown-text
                    width:160px;
                    height:30px;
                    line-height:30px;
                    background:url("~@/assets/images/button_15.png");
                    background-size:100% 100%;
                  .dropdown-for-max
                    background:$backColor1;
                    border-bottom-right-radius 4px
                    border-bottom-left-radius 4px
                    p
                      width:160px;
                      height:30px;
                      line-height:30px;
                    .color-A
                      /*
                      background:$backColor2 !important;
                      color:$color_ff !important;
                      */
                      color:$theme !important;
                      border-bottom-right-radius 4px
                      border-bottom-left-radius 4px
              .button-box
                margin-left:32px;
                display flex
                height:30px;
                width:80px;
                background:url("~@/assets/images/button_03.png");
                background-size:100% 100%;
                img
                  display block
                  height:20px;
                  width:20px;
                  margin:5px 6px 0 13px;
                p
                  line-height:30px;
                  font-size:$font_12;
                  color:$color_ff;
          .table-box
            height:297px;
          .table-button-p
            line-height:20px;
            height:20px;
            width:60px;
            color:#333;
            background:url("~@/assets/images/button_03.png");
            background-size 100% 100%
            margin:0 auto;
            cursor:pointer
      .right-max-box
        width:598px;
        height:850px;
        margin-left:36px;
        #eCharts-one
          height:383px;
          width:598px;
          background:url("~@/assets/images/min_back_07.png") no-repeat;
          background-size: 100% 100%
          margin-top:46px;
        #eCharts-two
          height:383px;
          width:598px;
          background:url("~@/assets/images/min_back_07.png") no-repeat;
          background-size: 100% 100%
          margin-top:26px;

      .position-box
        position absolute
        top:216px;
        left:700px;
        height:305px;
        width:450px;
        background:url("~@/assets/images/min_back_06_2.png");
        background-size 100% 100%
        text-align left
        .position-title-box
          display flex
          height:20px;
          margin-top:20px;
          p
            height:20px;
            line-height:20px;
            color:$theme;
            font-size:$font_15;
            margin-left:37px;
            flex:1;
          img
            height:14px;
            width:14px;
            margin:3px 15px 0;
        .position-address
          line-height:39px;
          margin-left:38px;
          color:$color_ff;
          font-size:$font_14;
        .position-text-box
          display flex
          width:271px;
          height:43px;
          margin:0 auto;
          img
            margin-top:21px;
            width:75px;
            height:1px;
          p
            color:$theme;
            font-size:$font_16;
            width:121px;
            line-height:43px;
            text-align center
        .position-info-box
          display flex
          margin-left:100px;
          p
            line-height:24px;
            font-size:$font_15;
          p:nth-child(1)
            width:103px;
            color:$theme;
          p:nth-child(2)
            flex:1;
            color:$color_ff;
  .el-table
    background rgba(6,177,240,0.2)
  .el-table /deep/ .el-table__empty-text
    width: 100%;
    text-align left
    margin-left:550px;
  .el-table /deep/ .el-table__body-wrapper
    height:250px;
    overflow-x:hidden;
    overflow-y:scroll;
    white-space: nowrap;
  .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px $theme;
    background: $theme;
  .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-track
    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
    border-radius: 0;
    background: rgba(255,255,255,0);
  .el-table /deep/ tr
  .el-table /deep/ th
    background rgba(6,177,240,0)
  .el-table::before
    height:0;
  .el-table /deep/ .cell
    max-height:46px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  .el-table /deep/ td
  .el-table /deep/ th.is-leaf
    border-bottom:0!important;
  .el-table /deep/ .el-checkbox__inner
    //background rgba(6,177,240,0.2)
    border 1px solid #216f93 !important
  .el-table /deep/ thead
    color:$color_ff;
  .el-table /deep/ th
    text-align-last: center;
  .el-table /deep/ td
    text-align-last: center;
  .el-table
    color:$color_a1
  .el-table /deep/ tbody tr:hover > td
    background rgba(6,177,240,0.2)
    color:$theme;
  .el-table /deep/ .el-checkbox
    width:14px;
    margin:0 auto;
    display block
  //修改动作条样式
  .el-pagination.is-background /deep/ .btn-next
  .el-pagination.is-background /deep/ .btn-prev
  .el-pagination.is-background /deep/ .el-pager li
    background:url("~@/assets/images/button_13.png");
    color:$color_ff;
  .el-pagination.is-background /deep/ .el-pager li:not(.disabled).active
    background:url("~@/assets/images/button_14.png");
    color:$color_ff;
  .colorA
    color :$theme;
  .colorB
    color :$theme1;
  .colorC
    color :$theme2;
  .colorD
    color :$theme3;
  .colorE
    color :$theme4;
  ::-webkit-input-placeholder
    color: $border_1;
  ::-moz-placeholder
    color: $border_1;
  ::-ms-input-placeholder
    color: $border_1;
</style>
