<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="span1" style="top: 17.3%;left: 24%;">设备状态：</div>
      <div class="span1" style="top: 23.5%;left: 24%;">运行速度：</div>
      <div class="span1" style="top: 29.8%;left: 24%;">升降状态：</div>
      <div class="span1" style="top: 36.2%;left: 24%;">实时位置：</div>
      <div class="info1" style="top: 17.3%;right: 64.5%;color:#a80d1b">停止</div>
      <div class="info1" style="top: 23.5%;right: 64.5%;">0m/s</div>
      <div class="info1" style="top: 29.8%;right: 64.5%;">停止</div>
      <div class="info1" style="top: 36.2%;right: 64.5%;">位置1#</div>


      <div class="span2" style="top: 49.6%;left: 6%;">平均温度</div>
      <div class="span2" style="top: 49.6%;left: 24.3%;">最高温度</div>
      <div class="span2" style="top: 57.6%;left: 6%;">最低温度</div>
      <div class="span2" style="top: 57.6%;left: 24.3%;">温差</div>
      <div class="info2" style="top: 49.6%;left: 13%;"><span style="font-size: 2vw;color: #38d6d9">19 </span> ℃</div>
      <div class="info2" style="top: 49.6%;left: 30.5%;"><span style="font-size: 2vw;color: #fe792a">39 </span> ℃</div>
      <div class="info2" style="top: 57.6%;left: 13%;"><span style="font-size: 2vw;color: #3fb0f2">19 </span> ℃</div>
      <div class="info2" style="top: 57.6%;left: 30.5%;"><span style="font-size: 2vw;color: #f5f5f5">0 </span> ℃</div>

      <div class="span3">当前状态：<span style="color：#eee">巡检中</span></div>
      <Chart class="chart1" ref="chart1"/>
      <Chart class="chart2" ref="chart2"/>

      <el-button type="primary" class="analyse" size="mini">告警分析</el-button>
      <div class="table">
        <div style="background-color: #1077bc19">
          <div class="scrollTableItem" style="width:20%;color:#65c2f3;font-weight: bold;">
            报警开始时间
          </div>
          <div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;">
            报警类型
          </div>
          <div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;">
            报警来源
          </div>
          <div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;">
            告警等级
          </div>
          <div class="scrollTableItem" style="width:13%;color:#65c2f3;font-weight: bold;">
            报警对象
          </div>
          <div class="scrollTableItem" style="width:18%;color:#65c2f3;font-weight: bold;">
            报警内容
          </div>
          <div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;">
            采集资源
          </div>
          <div class="scrollTableItem" style="width:15%;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:20%;color:#65c2f3;">
                {{ item.value1 }}
              </div>
              <div class="scrollTableItem" style="width:8%;color:#65c2f3;">
                {{ item.value2 }}
              </div>
              <div class="scrollTableItem" style="width:8%;color:#65c2f3;">
                {{ item.value3 }}
              </div>
              <div class="scrollTableItem" style="width:8%;color:#65c2f3;">
                {{ item.value4 }}
              </div>
              <div class="scrollTableItem" style="width:13%;color:#65c2f3;">
                {{ item.value5 }}
              </div>
              <div class="scrollTableItem" style="width:18%;color:#65c2f3;">
                {{ item.value6 }}
              </div>
              <div class="scrollTableItem" style="width:8%;color:#65c2f3;">
                {{ item.value7 }}
              </div>
              <div class="scrollTableItem" style="width:15%;color:#65c2f3;">
                操作
              </div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>

      <div class="prodLine"></div>
      <div class="station" v-for="(i,k) in stationList"
           :style="`top: ${i.top}%;left: ${i.left}%;background-color: ${k === 4 ?'#2979e8':'#234271'}`"></div>

      <div class="video1"></div>
      <div class="video2"></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>
  </div>
</template>

<script>
import Chart from '@/components/Charts/Chart'
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  data() {
    return {
      scrollTableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 22, // 开始无缝滚动的数据量 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: Array(100).fill('').map(function (i, k) {
        return {
          value1: '2222-22-22 22:22:22',
          value2: '出库出库',
          value3: '1#机器人',
          value4: '一般警告',
          value5: '巡检对象名称1',
          value6: '【一般警告】噪音>60db',
          value7: '无',
        }
      }),
      subTitleList: [
        {
          name: '设备状态',
          top: 11.2,
          left: 3
        },
        {
          name: '温度参数',
          top: 42.2,
          left: 3
        },
        {
          name: '任务信息',
          top: 66.1,
          left: 3
        },
        {
          name: '视频监控',
          top: 11.2,
          left: 42.8
        },
        {
          name: '巡检状态',
          top: 42.2,
          left: 42.8
        },
        {
          name: '告警信息',
          top: 66.1,
          left: 42.8
        },
      ],
      stationList: [
        {
          top: 49,
          left: 47.3
        },
        {
          top: 49,
          left: 52.9
        },
        {
          top: 49,
          left: 58.6
        },
        {
          top: 49,
          left: 64.1
        },
        {
          top: 49,
          left: 69.8
        },
        {
          top: 49,
          left: 75.4
        },
        {
          top: 49,
          left: 81
        },
        {
          top: 49,
          left: 86.6
        },
        {
          top: 49,
          left: 92.2
        },
        {
          top: 58.4,
          left: 47.3
        },
        {
          top: 58.4,
          left: 52.9
        },
        {
          top: 58.4,
          left: 58.6
        },
        {
          top: 58.4,
          left: 64.1
        },
        {
          top: 58.4,
          left: 69.8
        },
        {
          top: 58.4,
          left: 75.4
        },
        {
          top: 58.4,
          left: 81
        },
        {
          top: 58.4,
          left: 86.6
        },
        {
          top: 58.4,
          left: 92.2
        },
      ]
    }
  },
  components: {
    vueSeamlessScroll,
    Chart
  },
  mounted() {
    this.$refs.chart1.setData({
      "color": [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000"
      ],
      "tooltip": {
        "show": false
      },
      "legend": {
        "icon": "circle",
        "orient": "horizontal",
        "right": 0,
        "y": 'center',
        "align": "right",
        "textStyle": {
          "color": "#fff"
        },
        "itemGap": 20
      },
      "toolbox": {
        "show": false
      },
      "series": [
        {
          "name": "",
          "type": "pie",
          "clockWise": false,
          "radius": [
            '50%',
            '60%'
          ],
          center: ['30%', '50%'],
          "hoverAnimation": false,
          "itemStyle": {
            "normal": {
              "label": {
                "show": false,
                "position": "outside",
                "color": "#ddd"
              },
            }
          },
          "data": [
            {
              "value": 20,
              "name": "已巡检",
              "itemStyle": {
                "normal": {
                  "borderWidth": 5,
                  "shadowBlur": 5,
                  "borderColor": "#00ffff",
                  "shadowColor": "#00ffff"
                }
              }
            },
            {
              "value": 2,
              "name": "",
              "itemStyle": {
                "normal": {
                  "label": {
                    "show": false
                  },
                  "labelLine": {
                    "show": false
                  },
                  "color": "rgba(0, 0, 0, 0)",
                  "borderColor": "rgba(0, 0, 0, 0)",
                  "borderWidth": 0
                }
              }
            },
            {
              "value": 10,
              "name": "待巡检",
              "itemStyle": {
                "normal": {
                  "borderWidth": 5,
                  "shadowBlur": 5,
                  "borderColor": "#00cfff",
                  "shadowColor": "#00cfff"
                }
              }
            },
            {
              "value": 2,
              "name": "",
              "itemStyle": {
                "normal": {
                  "label": {
                    "show": false
                  },
                  "labelLine": {
                    "show": false
                  },
                  "color": "rgba(0, 0, 0, 0)",
                  "borderColor": "rgba(0, 0, 0, 0)",
                  "borderWidth": 0
                }
              }
            },
          ]
        }
      ]
    })
    this.$refs.chart2.setData({
      "color": [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000"
      ],
      "tooltip": {
        "show": false
      },
      "legend": {
        "icon": "circle",
        "orient": "horizontal",
        "right": 0,
        "y": 'center',
        "align": "right",
        "textStyle": {
          "color": "#fff"
        },
        "itemGap": 20
      },
      "toolbox": {
        "show": false
      },
      "series": [
        {
          "name": "",
          "type": "pie",
          "clockWise": false,
          "radius": [
            '50%',
            '60%'
          ],
          center: ['40%', '50%'],
          "hoverAnimation": false,
          "itemStyle": {
            "normal": {
              "label": {
                "show": true,
                "position": "outside",
                "color": "#ddd"
              },
              "labelLine": {
                "length": 10,
                "length2": 50,
                "show": true,
                "color": "#00ffff"
              }
            }
          },
          "data": [
            {
              "value": 20,
              "name": "正常",
              "itemStyle": {
                "normal": {
                  "borderWidth": 5,
                  "shadowBlur": 20,
                  "borderColor": "#00ffff",
                  "shadowColor": "#00ffff"
                }
              }
            },
            {
              "value": 2,
              "name": "",
              "itemStyle": {
                "normal": {
                  "label": {
                    "show": false
                  },
                  "labelLine": {
                    "show": false
                  },
                  "color": "rgba(0, 0, 0, 0)",
                  "borderColor": "rgba(0, 0, 0, 0)",
                  "borderWidth": 0
                }
              }
            },
            {
              "value": 10,
              "name": "异常",
              "itemStyle": {
                "normal": {
                  "borderWidth": 5,
                  "shadowBlur": 20,
                  "borderColor": "#00cfff",
                  "shadowColor": "#00cfff"
                }
              }
            },
            {
              "value": 2,
              "name": "",
              "itemStyle": {
                "normal": {
                  "label": {
                    "show": false
                  },
                  "labelLine": {
                    "show": false
                  },
                  "color": "rgba(0, 0, 0, 0)",
                  "borderColor": "rgba(0, 0, 0, 0)",
                  "borderWidth": 0
                }
              }
            },
            {
              "value": 30,
              "name": "待巡检",
              "itemStyle": {
                "normal": {
                  "borderWidth": 5,
                  "shadowBlur": 20,
                  "borderColor": "#006ced",
                  "shadowColor": "#006ced"
                }
              }
            },
            {
              "value": 2,
              "name": "",
              "itemStyle": {
                "normal": {
                  "label": {
                    "show": false
                  },
                  "labelLine": {
                    "show": false
                  },
                  "color": "rgba(0, 0, 0, 0)",
                  "borderColor": "rgba(0, 0, 0, 0)",
                  "borderWidth": 0
                }
              }
            },
          ]
        }
      ]
    })
  },
  methods: {}
}
</script>
<style>
.content {
  background-image: url("~@/assets/board/bg.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;
}

.span1 {
  position: absolute;
  transform: translateY(-50%);
  font-size: 0.9vw;
  color: #7da6e4;
  letter-spacing: 1px;
  font-weight: 500;
}

.span2 {
  position: absolute;
  transform: translateY(-50%);
  font-size: 1vw;
  color: #7da6e4;
  letter-spacing: 2px;
}

.info1 {
  position: absolute;
  transform: translateY(-50%);
  font-size: 1vw;
  color: #eee;
  letter-spacing: 2px;
}

.info2 {
  position: absolute;
  transform: translateY(-50%);
  font-size: 1vw;
  color: #7da6e4;
  letter-spacing: 2px;
}

.span3 {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #7da6e4;
  letter-spacing: 2px;
  top: 72.7%;
  left: 19.7%
}

.chart1 {
  position: absolute;
  top: 77.4%;
  left: 2.2%;
  width: 13.8%;
  height: 16.7%;
}

.chart2 {
  position: absolute;
  top: 77.4%;
  left: 17%;
  width: 20%;
  height: 16.7%;
}

.table {
  position: absolute;
  top: 69%;
  left: 42%;
  width: 56%;
  height: 24.7%;
}

.analyse {
  position: absolute;
  top: 66.3%;
  right: 2%;
  transform: translateY(-50%);
}

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

.prodLine {
  position: absolute;
  top: 53.7%;
  left: 70%;
  transform: translate(-50%, -50%);
  border: 2px solid #3e78ca;
  width: 53%;
  height: 4.8%;
  border-radius: 2.4vh;
}

.station {
  position: absolute;
  width: 3.7%;
  height: 1.9%;
  background-color: #234271;
  transform: translate(-50%, -50%);
  border-radius: 5px;
}

.video1 {
  position: absolute;
  width: 27.3%;
  height: 23.5%;
  top: 15.2%;
  left: 42%;
  background-image: url("~@/assets/board/bg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.video2 {
  position: absolute;
  width: 27.3%;
  height: 23.5%;
  top: 15.2%;
  left: 70.7%;
  background-image: url("~@/assets/board/bg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.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;
}
</style>
