<template>
  <!-- 运行信息 -->
  <vue-scroll style="height: 100%">
    <div class="operationInfo">
      <div class="title whiteBlock">
        <el-form :inline="true" size="medium" class="demo-form-inline">
          <el-form-item :label="$t('message.lifter.devName')">
            <el-select
              v-model="devSn"
              :placeholder="
                $t('message.lifter.pleaseSelect') + $t('message.lifter.devName')
              " @visible-change='visibleChange'
            >
              <el-option
                :label="item.devName"
                v-for="(item, index) in lifterList"
                :key="index"
                :value="item.devSn"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getListData" plain>{{
              $t("message.lifter.demand")
            }}</el-button>
            <!-- <el-button type="warning" plain @click="refresh">{{
              $t("message.lifter.refresh")
            }}</el-button> -->
          </el-form-item>
        </el-form>
      </div>

      <div class="content whiteBlock">
        <div class="bottom_info flex" style="height: 398px">
          <div class="T_H_wrap" style="margin-right: 12px">
            <div class="load whiteBlock">
              <div class="state_title pageTitle">{{ $t("message.lifter.realTimeVideo") }}</div>
              <div style="margin-bottom: 15px">
                <el-select
                  size="small"
                  v-model="videoId"
                  :placeholder="$t('message.lifter.pleaseSelectVideo')"
                  @change="getVideo"
                  @visible-change='visibleChange'
                >
                  <el-option
                    v-for="item in videoList"
                    :key="item.id"
                    :label="item.videoName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-button type="primary" size="small" style="margin-left: 10px;height:32px" plain
                  >{{ $t("message.lifter.demand") }}</el-button
                >
              </div>
              <videoModule
                class="playVideoBox"
                :type="'1x1'"
                :value="selectList"
                :displayBottomMod="false"
                :winNumBer="1"
                :autoplay="false"
                :showCaptrue="false"
                :showControl="false"
                :showPlayback="false"
              ></videoModule>
            </div>
          </div>
          <div class="T_H_wrap" style="margin-right: 12px">
            <div class="load whiteBlock">
              <div class="flex2">
                <div class="state_title pageTitle">{{company == 'longguang'? $t("message.lifter.currentLiftOperator") : $t("message.lifter.currentElevatorDriver") }}</div>
                <el-button
                  type="primary"
                  size="small"
                  style="margin-left: 10px; margin-bottom: 15px"
                  @click="showDriver = true"
                  plain
                  >{{company == 'longguang'? $t("message.lifter.viewLiftOperator") : $t("message.lifter.viewDriverList") }}</el-button
                >
              </div>
              <vue-scroll style="height: 86%;">
                <div class="driver_info" v-if="company == 'longguang' ||  item.idCard == realTimeDevData.driverIdCard" v-for="item in driverList">
                  <img
                          class="imgHead"
                          :src="fileUrl + item.fieldAcquisitionUrl"
                          v-if="item.fieldAcquisitionUrl"
                          width=""
                  />
                  <img src="@/assets/images/profile_photo.png" v-else />
                  <div>{{ $t("message.lifter.fullName") }}：{{ item.workerName }}</div>
                  <div>{{ $t("message.lifter.contactNumber") }}：{{ item.emergentPhone }}</div>
                </div>
<!--                <div class="driver_info" v-for="item in driverList">-->
<!--                  <img-->
<!--                          :src="realTimeDevData.fieldAcquisitionUrl"-->
<!--                          v-if="realTimeDevData.fieldAcquisitionUrl"-->
<!--                  />-->
<!--                  <img src="@/assets/images/profile_photo.png" v-else />-->
<!--                  <div>姓名：{{ realTimeDevData.driverName }}</div>-->
<!--                  <div>上岗时间：{{ realTimeDevData.reciveTime }}</div>-->
<!--                </div>-->
              </vue-scroll>
            </div>
          </div>
          <div class="T_H_wrap">
            <div class="load whiteBlock">
              <div class="state_title pageTitle">{{ $t("message.lifter.recentWork") }}</div>
              <div class="flex">
                <el-date-picker style="width: 300px"
                  v-model="timeValue"
                  type="daterange"
                  size="small"
                  :range-separator="$t('message.lifter.to')"
                  :start-placeholder="$t('message.lifter.startDate')"
                  value-format="yyyy-MM-dd"
                  :end-placeholder="$t('message.lifter.deadline')"
                  @change="getTime"
                >
                </el-date-picker>
                <el-button
                  type="primary"
                  size="small"
                  style="margin-left: 10px"
                  plain
                  @click="getRecentWorkList"
                  >{{ $t("message.lifter.demand") }}</el-button
                >
              </div>

              <el-table
                :data="workList"
                class="tables"
                style="width: 100%; min-height: 180px"
              >
                <el-table-column prop="startTime" :label="$t('message.lifter.startTime')" width="180">
                </el-table-column>
                <el-table-column prop="endTime" :label="$t('message.lifter.endTime')" width="180">
                </el-table-column>
                <el-table-column prop="workTime" :label="$t('message.lifter.workingHours')">
                </el-table-column>
                <el-table-column prop="loading" :label="$t('message.lifter.liftingWeight')"> </el-table-column>
                <el-table-column prop="driverName" :label="company == 'longguang'? $t('message.lifter.liftOperator') : $t('message.lifter.driver') ">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>

        <div class="direction_data_wrap  flex" style="margin-top: 5px">
          <div class="data_wrap whiteBlock" >
            <div class="state_title pageTitle">
              {{ $t("message.lifter.realTimeData") }}
            </div>
            <div class="flex">
              <div class="data_type">
                <div class="type bg1 flex2">
                  <div class="left">
                    <img
                      src="@/assets/images/towericon/towercurrentdata11.png"
                    />
                    <div>{{ $t("message.lifter.load") }}</div>
                  </div>
                  <div class="value">{{ realTimeData.loading?realTimeData.loading:0 }} kg</div>
                </div>
                <div class="type bg1 flex2 marg_t">
                  <div class="left">
                    <img
                      src="@/assets/images/towericon/towercurrentdata13.png"
                    />
                    <div>{{ $t("message.lifter.weightPercentage") }}</div>
                  </div>
                  <div class="value">{{ realTimeData.loadRatio?realTimeData.loadRatio:0 }} %</div>
                </div>
              </div>
              <div class="data_type">
                <div class="type bg2 flex2">
                  <div class="left">
                    <img
                      src="@/assets/images/towericon/towercurrentdata2.png"
                    />
                    <div>{{ $t("message.lifter.altitude") }}</div>
                  </div>
                  <div class="value">{{ realTimeData.height?realTimeData.height:0 }} m</div>
                </div>
                <!-- 预警 -->
                <div class="type bg2 flex2 marg_t">
                  <div class="left">
                    <img
                      src="@/assets/images/towericon/towercurrentdata10.png"
                    />
                    <div>{{ $t("message.lifter.alarmStatus") }}</div>
                  </div>
                  <div class="value">{{realTimeData.isAlarm==1? $t("message.lifter.abnormal") : $t("message.lifter.normal") }}</div>
                </div>
              </div>
              <div class="data_type">
                <div class="type bg3 flex2">
                  <div class="left">
                    <img
                      src="@/assets/images/towericon/towercurrentdata12.png"
                    />
                    <div>{{ $t("message.lifter.heightPercentage") }}</div>
                  </div>
                  <div v-if="floorNumS" class="value">{{ floorNumS?floorNumS:"--" }} %</div>
                </div>
                <div class="type bg3 flex2 marg_t">
                  <div class="left">
                    <img
                      src="@/assets/images/towericon/towercurrentdata6.png"
                    />
                    <div>{{ $t("message.lifter.currentSpeed") }}</div>
                  </div>
                  <div class="value">{{realTimeData.speed?realTimeData.speed:0}}m/s</div>
                </div>
              </div>
              <div class="data_type">
                <div class="type bg4 flex2">
                  <div class="left">
                    <img
                      src="@/assets/images/towericon/towercurrentdata4.png"
                    />
                    <div>{{ $t("message.lifter.dipAngle") }}X</div>
                  </div>
                  <div class="value">{{ realTimeData.dipAngleX?realTimeData.dipAngleX:0 }} °</div>
                </div>
                <div class="type bg4 flex2 marg_t">
                  <div class="left">
                    <img
                      src="@/assets/images/towericon/towercurrentdata6.png"
                    />
                    <div>{{ $t("message.lifter.airSpeed") }}</div>
                  </div>
                  <div class="value">{{realTimeData.windSpeed?realTimeData.windSpeed:0}} m/s</div>
                </div>
              </div>

              <div class="data_type">
                <div class="type bg5 flex2">
                  <div class="left">
                    <img
                      src="@/assets/images/towericon/towercurrentdata5.png"
                    />
                    <div>{{ $t("message.lifter.dipAngle") }}Y</div>
                  </div>
                  <div class="value">{{ realTimeData.dipAngleY?realTimeData.dipAngleY:0 }} °</div>
                </div>
                <div class="type bg5 flex2 marg_t">
                  <div class="left">
                    <img
                      src="@/assets/images/towericon/towercurrentdata2.png"
                    />
                    <div>{{ $t("message.lifter.currentFloor") }}</div>
                  </div>
                  <div class="value">{{realTimeData.floorNum}}</div>
                </div>
              </div>
              <div class="data_type">
                <div class="type bg6 flex2">
                  <div class="left">
                    <img
                      src="@/assets/images/towericon/towercurrentdata14.png"
                    />
                    <div>{{ $t("message.lifter.numberOfPeople") }}</div>
                  </div>
                  <div class="value">{{ realTimeData.peopleNumber?realTimeData.peopleNumber:0 }}</div>
                </div>
                <div class="type bg6 flex2 marg_t">
                  <div class="left">
                    <img
                      src="@/assets/images/towericon/towercurrentdata10.png"
                    />
                    <div>{{ $t("message.lifter.equipmentStatus") }}</div>
                  </div>
                  <div class="value">{{devonline===0? $t("message.lifter.offLine") : $t("message.lifter.onLine") }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="bottom_info flex">
          <div class="T_H_wrap" style="margin-right: 12px">
            <div class="load whiteBlock">
              <div class="state_title pageTitle">
                {{
                  $t("message.lifter.realTime") +
                  $t("message.lifter.liftingWeight")
                }}
              </div>
              <div style="height: 85%; width: 100%" ref="liftingWeight"></div>
            </div>
            <!-- <div class="altitude">
              <div class="state_title pageTitle">{{$t('message.lifter.realTime')+$t('message.lifter.inclination')}}</div>
              <div style="height: 85%; width: 100%" ref="gradient"></div>
            </div> -->
          </div>
          <div class="T_H_wrap">
            <div class="load whiteBlock">
              <div class="state_title pageTitle">
                {{
                  $t("message.lifter.realTime") + $t("message.lifter.altitude")
                }}
              </div>
              <div style="height: 85%; width: 100%" ref="height"></div>
            </div>
            <!-- <div class="altitude">
              <div class="state_title pageTitle">{{$t('message.lifter.realTime')+$t('message.lifter.alarm')}}</div>
              <div style="height: 85%; width: 100%" ref="alarm"></div>
            </div> -->
          </div>
        </div>
      </div>


        <!-- 查看司机信息 -->
    <el-dialog :modal-append-to-body="false" :title="company == 'longguang'? $t('message.lifter.liftOperator') : $t('message.lifter.driverInfo') " :visible.sync="showDriver" width="667px">
      <div class="dialog_content">
        <el-table :data="driverList" class="tables" style="width: 100%">
          <el-table-column prop="workerName" :label="$t('message.lifter.fullName')"> </el-table-column>
          <el-table-column prop="emergentPhone" :label="$t('message.lifter.contactNumber')">
          </el-table-column>
          <el-table-column prop="address" :label="$t('message.lifter.photo')">
            <template slot-scope="scope">
              <img
                :src="fileUrl + scope.row.fieldAcquisitionUrl"
                @click="openImg(fileUrl + scope.row.fieldAcquisitionUrl)"
                width="20"
                alt=""
                srcset=""
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>


    </div>
  </vue-scroll>
</template>
<script>
import echarts from 'echarts4';;
import {
  getLifterListApi,
  getLifterCurrentDataApi,
  getSelectLifterBySnApi,
  getSelectLifterWorkCycleListApi,
  getTodayLifterCurrentDataListApi
} from "@/assets/js/api/lifter";

import {
  hidePluginWindow,showPluginWindow
} from "@/components/videoModule/isc_plugin/video_isc_plugin.js";


import videoModule from "@/components/videoModule/videoModule.vue";
export default {
  components: {
    videoModule,
  },
  data() {
    return {
      projectSn: "",
      lifterList: [],
      devSn: "",
      realTimeData: {
        loading: 0,
        loadRatio: 0,
        height: 0,
        heightRatio: 0,
        biasAngle: 0,
        biasRatio: 0,
        peopleNumber: 0,
        dipAngleX:0,
        speed:0,
        floorNum:0,
        windSpeed:0,
        isAlarm:0
      },
      videoId: "",
      videoList: [],
      selectList: [], //视频数据源
      realTimeDevData: {},
      showDriver: false,
      timeValue: "",
      fileUrl: "",
      workList: [],
      driverList:[],
      startTime:'',
      endTime:'',
      echartsArr:[],
      devonline:0,
      maxHeight:'',
      floorNumS:"",
      company:COMPANY
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
     this.fileUrl = this.$store.state.FILEURL;
    this.getLifterList();
  },
  mounted() {

  },
  methods: {
    openImg(src){
      window.open(src)
    },
      //下拉框聚焦
    visibleChange(val){
      if(val){
        hidePluginWindow();
      }else{
        showPluginWindow();
      }
    },



     //选择时间时
    getTime(val) {
      if (val) {
        this.startTime = val[0];
        this.endTime = val[1];
      } else {
        this.startTime = "";
        this.endTime = "";
      }
    },

     //获取近期工作数据列表
    getRecentWorkList() {
      let data = {
        endTime: this.endTime,
        startTime: this.startTime,
        devSn: this.devSn,
      };
      getSelectLifterWorkCycleListApi(data).then((res) => {
        if (res.code == 200) {
          this.workList = res.result;
        }
      });
    },


    //获取设备列表下拉
    getLifterList() {
      let data = {
        projectSn: this.projectSn,
      };
      getLifterListApi(data).then((res) => {
        if (res.code == 200) {
          this.lifterList = res.result;
          if(res.result.length>0){
            this.devSn = res.result[0].devSn;
            this.getListData();
            this.getSelectLifterBySn();
            this.getRecentWorkList();
            this.getTodayLifterCurrentDataList();
          }

        }
      });
    },

        //获取 设备 视频列表
    getSelectLifterBySn(){
      let data = {
        devSn:this.devSn
      }
      getSelectLifterBySnApi(data).then(res=>{
        this.maxHeight = res.result.lifter.maxHeight
        if(res.code==200){
          this.videoList = res.result.videoList;
          this.devonline=res.result.lifter.devonline
          this.driverList = res.result.driverList;
          if(res.result.videoList.length>0){
            this.videoId = res.result.videoList[0].id;
          this.getVideo(res.result.videoList[0].id);
          }
        }
      })
    },

    //获取实时数据
    getListData() {
      let data = {
        devSn: this.devSn,
      };
      getLifterCurrentDataApi(data).then((res) => {
        if (res.code == 200) {
          if (res.result) {
            this.realTimeData = res.result;
            console.log(this.maxHeight);
            if (!this.maxHeight){
              this.$message.error(this.$t('message.lifter.theHeightIsZero'));
              return
            }
            let Num = res.result.height/this.maxHeight*100
            this.floorNumS = Num.toFixed(2)
            this.getSelectLifterBySn();
            this.realTimeDevData = res.result;
            this.getTodayLifterCurrentDataList();

          }else{
            this.realTimeData= {
              loading: 0,
              loadRatio: 0,
              height: 0,
              heightRatio: 0,
              biasAngle: 0,
              biasRatio: 0,
              peopleNumber: 0,
              dipAngleX:0,
              speed:0,
              floorNum:0,
              windSpeed:0,
              isAlarm:0
            }
            this.echartsArr = []
            this.createdEcharts();
          }
        }
      });
    },

    //选择的视频
    getVideo(val) {
      for (let i = 0; i < this.videoList.length; i++) {
        if (val == this.videoList[i].id) {
          this.selectList = [this.videoList[i]];
        }
      }
    },

    //刷新
    refresh() {
      this.devSn = "";
    },
    //获取图表数据
    getTodayLifterCurrentDataList(){
      let data = {
        devSn:this.devSn
      };
      getTodayLifterCurrentDataListApi(data).then(res=>{
        if(res.code==200){
          if(res.result){
            this.echartsArr = res.result;

          }else{
            this.echartsArr = []
          }
          this.createdEcharts(); //创建图表
        }
      })
    },



    //创建图表
    createdEcharts() {
      var chart1 = echarts.init(this.$refs.liftingWeight);
      // var chart2 = echarts.init(this.$refs.gradient);
      var chart3 = echarts.init(this.$refs.height);
      // var chart4 = echarts.init(this.$refs.alarm);
      chart1.clear();
      // chart2.clear();
      chart3.clear();
      // chart4.clear();
      chart1.setOption(this.getOption(0));
      // chart2.setOption(this.getOption(1));
      chart3.setOption(this.getOption(2));
      // chart4.setOption(this.getOption(3));
    },
    //图表信息
    getOption(index) {
      let heightArr = [];
      let loadArr = [];
      let timeArr = [];
      for(let i =0; i<this.echartsArr.length; i++){
         let time = this.echartsArr[i].reciveTime.substring(12);
         heightArr.push(this.echartsArr[i].height);
         loadArr.push(this.echartsArr[i].loading);
         timeArr.push(time)
      }
      var colors = ["#3A7BFF", "#55CBBB", "#B59CF2", "#F3D025"];
      var opt = {
        color: colors,
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: 30,
          bottom: 30,
        },
        // legend: {},
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: timeArr,
          axisLabel: {
            //X轴刻度配置
            interval: "auto", //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
          },
        },
        yAxis: {
          name: [
            this.$t("message.lifter.load") + "(kg)",
            this.$t("message.lifter.angle") + "(°)",
            this.$t("message.lifter.altitude") + "(m)",
            this.$t("message.lifter.alarm") +
              "(" +
              this.$t("message.lifter.next") +
              ")",
          ][index],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#eee",
            },
          },
        },
        dataZoom: [
          {
            show: true,
            // realtime: true,
            start: 0,
            end: 100,
            height: 8,
            borderColor: "transparent",
            backgroundColor: "#e8e8e8",
            filterColor: "#999999",
            bottom: 0,
          },
        ],
        series: [
          {
            name: [
              this.$t("message.lifter.load"),
              this.$t("message.lifter.angle"),
              this.$t("message.lifter.altitude"),
              this.$t("message.lifter.alarm"),
            ][index],
            type: "line",
            symbol: "none",
            smooth: true,
            data: index==0?loadArr:heightArr,
            // markLine: getMarkLine(index),
            itemStyle: {
              normal: {
                lineStyle: {
                  color: colors[index],
                },
                areaStyle: {
                  color: colors[index],
                  opacity: 0.1,
                },
              },
            },
          },
        ],
      };
      return opt;
    },
  },
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
}
.flex2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.operationInfo {
  width: 100%;
  height: 100%;
  .title {
    padding: 0 20px;
    padding-top: 17px;
    height: 70px;
    box-sizing: border-box;
  }
  .content {
    margin-top: 12px;
    box-sizing: border-box;
    width: 100%;
    height: 298px;
    .pageTitle {
      line-height: 20px;
    }
    .direction_data_wrap {
      box-sizing: border-box;
      height: 260px;
      width: 100%;

      .data_wrap {
        width: 100%;
        height: 100%;
        padding: 12px 20px;
        box-sizing: border-box;
        .data_type {
          width: 16%;
          margin-right: 12px;
          .type {
            width: 100%;
            height: 80px;
            border-radius: 8px;
            box-sizing: border-box;
            padding: 10px 15px;
            color: #ffffff;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            .left {
              width: 45%;
            }
          }
          .value {
            font-size: 24px;
            font-weight: 500;
            text-align: right;
          }
        }
        .marg_t {
          margin-top: 12px;
        }
      }
    }
    .bottom_info {
      width: 100%;
      height: calc(100%);
      margin-top: 12px;
      box-sizing: border-box;
      .T_H_wrap {
        width: 50%;
        height: 100%;
        box-sizing: border-box;
        .load {
          width: 100%;
          height: calc(100% - 6px);
          // background: #fff;
          padding: 12px 20px;
          box-sizing: border-box;
        }
        .altitude {
          margin-top: 12px;
          width: 100%;
          height: calc(50% - 6px);
          background: #fff;
          padding: 12px 20px;
          box-sizing: border-box;
        }
      }
    }
  }
  .playVideoBox {
    height: calc(100% - 90px);
  }

  .driver_info {
    /*text-align: center;*/
    line-height: 25px;
    margin-top: 100px;
    .imgHead{
      width: 100px;
    }
    img {
      margin-bottom: 18px;
    }
    div {
      padding: 0 20px;
      text-align: left;
    }
  }

  .bg1 {
    background-color: #7ba6ff;
    background-image: none;
  }
  .bg2 {
    background-color: #55cbbb;
  }
  .bg3 {
    background-color: #84ccf3;
  }
  .bg4 {
    background-color: #b59cf2;
  }
  .bg5 {
    background-color: #f6b87d;
  }
  .bg6 {
    background-color: #9ed96b;
  }
}
</style>
