<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="time">{{ parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s} 周{a}') }}</div>
      <div class="span" style="color: #3597df;top: 19.5%;left: 38.7%;">A项温度</div>
      <div class="span" style="color: #3597df;top: 19.5%;left: 54.7%;">B项温度</div>
      <div class="span" style="color: #3597df;top: 31.2%;left: 38.7%;">C项温度</div>
      <div class="span" style="color: #3597df;top: 31.2%;left: 54.7%;">D项温度</div>
      <div class="span" style="color: #3597df;top: 48.6%;left: 38.7%;">A项温度</div>
      <div class="span" style="color: #3597df;top: 48.6%;left: 54.7%;">B项温度</div>
      <div class="span" style="color: #3597df;top: 60.5%;left: 38.7%;">C项温度</div>
      <div class="span" style="color: #3597df;top: 60.5%;left: 54.7%;">D项温度</div>
      <div class="span" style="color: #3597df;top: 78.1%;left: 38.7%;">1#烟感</div>
      <div class="span" style="color: #3597df;top: 78.1%;left: 54.7%;">2#烟感</div>
      <div class="span" style="color: #3597df;top: 89.8%;left: 38.7%;">3#烟感</div>
      <div class="span" style="color: #3597df;top: 89.8%;left: 54.7%;">4#烟感</div>

      <div class="span1" style="color: #3597df;top: 19.5%;left: 45.5%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 19.5%;left: 61.7%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 31.2%;left: 45.5%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 31.2%;left: 61.7%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 48.6%;left: 45.5%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 48.6%;left: 61.7%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 60.5%;left: 45.5%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 60.5%;left: 61.7%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 78.1%;left: 45.5%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
      </div>
      <div class="span1" style="color: #3597df;top: 78.1%;left: 61.7%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
      </div>
      <div class="span1" style="color: #3597df;top: 89.8%;left: 45.5%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
      </div>
      <div class="span1" style="color: #3597df;top: 89.8%;left: 61.7%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
      </div>

      <Chart class="chart1" ref="chart1"></Chart>
      <Chart class="chart2" ref="chart2"></Chart>
      <Chart class="chart3" ref="chart3"></Chart>
      <Chart class="chart4" ref="chart4"></Chart>

      <div class="table">
        <vue-seamless-scroll
          :class-option="scrollTableOption"
          :data="scrollTableData"
          class="case-item"
          style="height: 100%"
        >
          <div
            v-for="(item, index) in scrollTableData"
            :key="index"
          >
            <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
              <div class="scrollTableItem" style="color:#65c2f3;">
                {{ item.value1 }}
              </div>
              <div class="scrollTableItem" style="color:#65c2f3;">
                {{ item.value2 }}
              </div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      subTitleList: [
        {
          name: '湿度曲线',
          top: 11.2,
          left: 3
        },
        {
          name: '照度',
          top: 40.5,
          left: 3
        },
        {
          name: '颗粒物柱状图',
          top: 69.6,
          left: 3
        },
        {
          name: '1#变压器测温',
          top: 11.2,
          left: 35.4
        },
        {
          name: '2#变压器测温',
          top: 40.5,
          left: 35.4
        },
        {
          name: '烟感',
          top: 69.6,
          left: 35.4
        },
        {
          name: '告警统计',
          top: 11.2,
          left: 68
        },
        {
          name: '未处理报警',
          top: 55.1,
          left: 68
        },
      ],
      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: Array(5).fill('').map(function (i, k) {
        return {
          value1: 'ASDFGHJKL_1',
          value2: '2222-22-22 22:22:22',
        }
      }),
    }
  },
  components: {
    vueSeamlessScroll,
    Chart
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.$refs.chart1.setData({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          top: "15%",
          left: "10%",
          right: "5%",
          bottom: "15%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              color: "#fff",
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: ["A", "B", "C", "D", "E", "F"],
          },
        ],

        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisLine: {
              // show: false,
            },
            axisLabel: {
              // show: false,
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
              },
            },
            axisTick: {
              // show: false,
            },
          },
        ],
        series: [
          {
            name: "注册总量",
            type: "line",
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 10,
            lineStyle: {
              normal: {
                color: "#00ca95",
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#00ca95",
              },
            },

            itemStyle: {
              color: "#00ca95",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,202,149,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,202,149,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0,202,149, 0.9)",
                shadowBlur: 20,
              },
            },
            data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14],
          },
        ],
      })
      this.$refs.chart2.setData({
        series: [
          {
            title: {
              show: false,
            },
            name: "",
            type: "gauge",
            min: 0,
            max: 100,
            splitNumber: 10,
            startAngle: 180,
            endAngle: 0,
            center: ["50%", '95%'],
            radius: '180%',
            axisLabel: {
              distance: 0,
              fontFamily: "Microsoft YaHei UI",
              fontSize: 16,
              fontWeight: "normal",
              fontStyle: "normal",
              color: "#FFFFFF",
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: '#2776e3',
              },
            },
            pointer: {
              length:'50%',
              show: true,
            },
            itemStyle: {
              normal: {
                color: '#2776e3',
              },
            },
            axisTick: {
              length: 16,
              lineStyle: {
                width: 4,
                color: '#2776e3',
              },
            },
            splitLine: {
              length: 32,
              lineStyle: {
                width: 4,
                color: '#2776e3',
              },
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 66,
                name: "半圆仪表_0",
              },
            ],
          },
        ],
      })
      this.$refs.chart3.setData({
        grid: {
          top: "15%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
        },
        xAxis: [
          {
            type: "category",
            position: "bottom",
            data: ["1#", "2#", "3#"],
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "#fff",
            },
          },
        ],
        yAxis: [
          {
            name: "",
            show: true,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              color: "#fff",
            },
          },
        ],
        series: [
          {
            name: "数量",
            type: "pictorialBar",
            barCategoryGap: "50%",
            symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
            data: [
              {
                name: "1#",
                value: 10,
              },
              {
                name: "2#",
                value: 6,
              },
              {
                name: "3#",
                value: 5,
              },
            ],
          },
        ],
      })
      this.$refs.chart4.setData({
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
          },
        },
        xAxis: {
          show: true,
          type: "value",
          axisLine:{
            show: true,
          },
          axisTick:{
            show: false,
          },
          axisLabel:{
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          splitLine:{
            show: false,
          }
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: [1,2,3,4,5],
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "12",
              },
            },
            data: [1,2,3,4,5],
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgb(57,89,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgb(46,200,207,1)",
                  },
                ]),
              },
            },
            barWidth: 20,
            data: [1,2,3,4,5],
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 20,
            barGap: "-100%",
            data: [5,5,5,5,5],
            itemStyle: {
              normal: {
                color: "rgba(24,31,68,1)",
                barBorderRadius: 0,
              },
            },
          },
        ],
      })
    }
  }
}
</script>
<style scoped>
.content {
  background-image: url("~@/assets/board/bg3.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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

.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%);
}

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

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

.span1 {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.9vw;
  letter-spacing: 1px;
}
.chart1{
  position: absolute;
  top: 15.4%;
  left: 2.2%;
  width: 30.8%;
  height: 20.2%;
}
.chart2{
  position: absolute;
  top: 44.6%;
  left: 2.2%;
  width: 30.8%;
  height: 20.2%;
}
.chart3{
  position: absolute;
  top: 74%;
  left: 2.2%;
  width: 30.8%;
  height: 20.2%;
}
.chart4{
  position: absolute;
  top: 15.4%;
  left: 67.1%;
  width: 30.8%;
  height: 34.8%;
}
.table {
  position: absolute;
  top: 59.4%;
  left: 67.1%;
  width: 30.8%;
  height: 34.8%;
  overflow: hidden;
}
.scrollTableItem {
  display: inline-block;
  width: 50%;
  text-align: center;
  padding: 14px 0;
  color: #4e99c5
}
</style>
