<template>
  <div>
    <div class="content">
      <div class="title">赛轮智慧热电无人巡检系统</div>
      <div class="subTitle" v-for="i in subTitleList" :style="`top:${i.top}%;left:${i.left}%`">{{ i.name }}</div>
      <!--      <div class="safe">已安全运行 <span style="color: #4667d0;font-size: 1.2vw;padding: 0 0.3vw"> 382 </span> 天</div>-->
      <div class="time">{{ parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s} 周{a}') }}</div>
      <div class="span" style="color: #46c9f9;top: 29%;left: 6.8%">智能巡检</div>
      <div class="span" style="color: #4befb7;top: 29%;left: 15.3%">无线测温</div>
      <div class="span" style="color: #f3de40;top: 29%;left: 23.7%">动力环境</div>
      <div class="span1" style="color: #f3de40;top: 32%;left: 6.8%;font-weight: 700">{{ data1.num1 }}</div>
      <div class="span1" style="color: #f3de40;top: 32%;left: 15.3%;font-weight: 700">{{ data1.num2 }}</div>
      <div class="span1" style="color: #f3de40;top: 32%;left: 23.7%;font-weight: 700">{{ data1.num3 }}</div>
      <div class="span2" style="color: #46c9f9;top: 49.7%;left: 9.6%"><span
        style="font-weight: 600;font-size:1.3vw;">{{ data2.num1 }}</span>℃
      </div>
      <div class="span2" style="color: #46c9f9;top: 49.7%;left:21.1%"><span
        style="font-weight: 600;font-size:1.3vw;">{{ data2.num2 }}</span>℃
      </div>
      <div class="span" style="color: #eee;top: 56%;left: 9.4%">温度</div>
      <div class="span" style="color: #eee;top: 56%;left: 20.9%">湿度</div>
      <div class="span" style="font-size: 0.6vw;color: #eee;top: 64.5%;left: 5.9%;">照度</div>
      <div class="span" style="font-size: 0.6vw;color: #eee;top: 64.5%;left: 13%">410-1烟感</div>
      <div class="span" style="font-size: 0.6vw;color: #eee;top: 64.5%;left:17%">410-2烟感</div>
      <div class="span" style="font-size: 0.6vw;color: #eee;top: 64.5%;left: 24.8%">噪声</div>
      <div class="span2" style="color: #46c9f9;top:61.8%;left:24.8%;font-size: 0.9vw">{{ data2.num4 }}db
      </div>
      <div class="span2" style="color: #46c9f9;top:61.8%;left:5.9%;font-size: 0.9vw">{{ data2.num3 }}
      </div>

      <div class="span3" style="color: #3597df;top: 30%;left: 50%">设备监控</div>
      <div class="span" style="color: #3597df;top: 31.2%;    left: 38.7%;">温度</div>
      <div class="span" style="color: #3597df;top: 47%;left: 34.9%">湿度</div>
      <div class="span" style="color: #3597df;top: 62.2%;left: 41%">照度</div>
      <div class="span" style="color: #3597df;top: 31.2%;left: 61.3%">颗粒物</div>
      <div class="span" style="color: #3597df;top: 47%;left: 65.1%">烟感</div>
      <div class="span" style="color: #3597df;top: 62.2%;    left: 59%;">噪声</div>

      <div class="icon" style="top:61.8%;left:13%"></div>
      <div class="icon" style="top:61.8%;left:17%"></div>
      <!--      <div class="icon1" style="top:61.8%;left:24.8%"></div>-->
      <Chart ref="chart1" class="chart1"></Chart>
      <Chart ref="chart2" class="chart2"></Chart>

      <div class="table">
        <div style="background-color: #1077bc19">
          <div class="scrollTableItem" style="width:22%;color:#65c2f3;font-weight: bold;">
            报警开始时间
          </div>
          <div class="scrollTableItem" style="width:16%;color:#65c2f3;font-weight: bold;">
            报警来源
          </div>
          <div class="scrollTableItem" style="width:16%;color:#65c2f3;font-weight: bold;">
            报警类型
          </div>
          <div class="scrollTableItem" style="width:16%;color:#65c2f3;font-weight: bold;">
            报警内容
          </div>
          <div class="scrollTableItem" style="width:30%;color:#65c2f3;font-weight: bold;">
            操作
          </div>
        </div>
        <vue-seamless-scroll
          :class-option="scrollTableOption"
          :data="scrollTableData"
          class="case-item"
          style="height: calc(100% - 30px);overflow: hidden;"
        >
          <div
            v-for="(item, index) in scrollTableData"
            :key="index"
          >
            <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
              <div class="scrollTableItem" style="width:22%;color:#65c2f3;">
                {{ item.recordTime }}
              </div>
              <div class="scrollTableItem" style="width:16%;color:#65c2f3;">
                {{ item.busbarAlias }}
<!--                智能巡检-->
              </div>
              <div class="scrollTableItem" style="width:16%;color:#65c2f3;">
                {{ item.alarmType}}
              </div>
              <div class="scrollTableItem" style="width:16%;color:#65c2f3;">
                {{ item.alarmContent }}
              </div>
              <div class="scrollTableItem" style="width:30%;color:#65c2f3;">
                <el-button type="primary" size="mini">查看</el-button>
                <el-button type="info" size="mini">处理</el-button>
              </div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/Chart'
import vueSeamlessScroll from 'vue-seamless-scroll'
import {
  baseMonitorInfoList,
  countCabinet,
  boardTempList,
  selectLastTWTempertureData, recordBusbarAlarmCount, recordBusbarAlarmList
} from "@/api/board/index2";

export default {
/*  dicts:['alarm_type'],*/
  data() {
    return {
      scrollTableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0,
      },
      scrollTableData: [],
      subTitleList: [
        {
          name: '场景统计',
          top: 11.2,
          left: 3
        },
        {
          name: '智能巡检测温曲线',
          top: 71.2,
          left: 3
        },
        {
          name: '设备监控',
          top: 11.2,
          left: 30.8
        },
        {
          name: '告警信息',
          top: 49.2,
          left: 72.8
        },
        {
          name: '告警趋势图',
          top: 11.2,
          left: 72.8
        },
      ],
      data1:{
        num1:1,
        num2:30,
        num3:15
      },
      data2:{
        num1:0,
        num2:0,
        num3:0,
        num4:0
      }
    }
  },
  components: {
    vueSeamlessScroll,
    Chart
  },
  mounted() {
    this.getData()
    this.setAlarmType()
  },
  methods: {
    setAlarmType(e){
/*      console.log(this.dict.type.alarm_type)*/
    },
    getData(){

      baseMonitorInfoList().then(e=>{
        this.data1.num2 = e.data.filter(v=>v.monitorType === 1).length
        this.data1.num3 = e.data.filter(v=>v.monitorType !== 1).length
      })
      countCabinet().then(e=>{
        this.data1.num1 = e
      })
      selectLastTWTempertureData().then(e=>{
        this.data2 = {
          num1:e[0]?.tempreture || 0,
          num2:e[0]?.humidity || 0,
          num3:e[0]?.illuminance || 0,
          num4:e[0]?.noise || 0,
        }
      })
      boardTempList().then(e=>{
        this.$refs.chart1.setData({
          grid: {
            top: 30,
            left: '2%',
            right: '5%',
            bottom: '2%',
            containLabel: true
          },
          legend: {
            textStyle: {
              color: '#fff'
            }
          },

          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: e.data.map(v=>v.cabinetAlias),
            axisLabel: {
              margin: 10,
              color: '#ffffff63'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#ffffff1f'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#ffffff1f'
              }
            }
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                margin: 10,
                color: '#ffffff63'
              },

              axisTick: {
                show: true,
                lineStyle: {
                  color: '#ffffff1f'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: '#ffffff1f'
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              }
            }
          ],
          series: [
            {
              name: '温度',
              type: 'line',
              smooth: true, //是否平滑曲线显示
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: '#fff' // 线条颜色
                }
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              },
              itemStyle: {
                color: 'red',
                borderColor: '#fff',
                borderWidth: 3
              },
              tooltip: {
                // show: false,
              },
              data:  e.data.map(v=>v.tempMax),
            },
          ]
        })
      })
      recordBusbarAlarmCount().then(e=>{
        this.$refs.chart2.setData({
          grid: {
            top: 30,
            left: '2%',
            right: '5%',
            bottom: '2%',
            containLabel: true
          },
          legend: {
            textStyle: {
              color: '#fff'
            }
          },

          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: e.data.map(v=>v.recordDate),
            axisLabel: {
              margin: 10,
              color: '#ffffff63'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#ffffff1f'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#ffffff1f'
              }
            }
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                margin: 10,
                color: '#ffffff63'
              },

              axisTick: {
                show: true,
                lineStyle: {
                  color: '#ffffff1f'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: '#ffffff1f'
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              }
            }
          ],
          series: [
            {
              name: '次数',
              type: 'line',
              smooth: true, //是否平滑曲线显示
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: '#ff0' // 线条颜色
                }
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              },
              itemStyle: {
                color: 'red',
                borderColor: '#fff',
                borderWidth: 3
              },
              tooltip: {
                // show: false,
              },
              data: e.data.map(v=>v.alarmCount),
            }
          ]
        })
      })
      recordBusbarAlarmList().then(e=>{
        console.log(e)
        this.scrollTableData = e.data
      })
    }
  }
}
</script>
<style scoped>
.content {
  background-image: url("~@/assets/board/bg2.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  top: 2.8%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1.5vw;
  color: #fff;
  font-weight: 700;
  letter-spacing: 10px;
  transform: translateY(-50%);
}

.subTitle {
  position: absolute;
  transform: translateY(-50%);
  font-size: 0.9vw;
  color: #fff;
  letter-spacing: 2px;
}

.safe {
  position: absolute;
  top: 2.4%;
  right: 2%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.7vw;
}

.time {
  position: absolute;
  top: 2.4%;
  left: 2%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.7vw;
  letter-spacing: 1px;
}

.span {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.9vw;
  letter-spacing: 1px;
}

.span1 {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.5vw;
  font-weight: 700;
  letter-spacing: 1px;
}

.span2 {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.6vw;
  letter-spacing: 3px;
}

.span3 {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.4vw;
  letter-spacing: 2px;
}


.icon {
  position: absolute;
  width: 1.15vw;
  transform: translate(-50%, -50%);
  height: 1.35vw;
  background-image: url("~@/assets/board/icon1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.icon1 {
  position: absolute;
  width: 1.3vw;
  transform: translate(-50%, -50%);
  height: 1.2vw;
  background-image: url("~@/assets/board/icon2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.chart1 {
  position: absolute;
  top: 75.3%;
  left: 2.3%;
  width: 67.8%;
  height: 18.6%;
}

.chart2 {
  position: absolute;
  top: 15.7%;
  left: 71.7%;
  width: 26%;
  height: 28.6%;
}

.table {
  position: absolute;
  top: 51.8%;
  left: 72%;
  width: 25.9%;
  height: 42.4%;
}

.scrollTableItem {
  display: inline-block;
  text-align: center;
  padding: 14px 0;
  color: #4e99c5
}

</style>
