<template>
  <div class="container">
    <div class="centerImg"></div>
    <BoardTopNav nowMenu="1"></BoardTopNav>
    <Chart ref="chart1" class="chart1"></Chart>
    <div class="chart1Right">
      <p style="color: #2ff;">电流互感器</p>
      <p style="color: #f22;">电压互感器</p>
      <p style="color: #f2f;">变压器</p>
      <p style="color: #1f1;">电容电抗器</p>
    </div>
    <div class="chart1Table">
      <div style="background-color: #094170">
        <div class="scrollTable" style="font-weight: bold;">
          名称
        </div>
        <div class="scrollTable" style="font-weight: bold;">
          监控数量
        </div>
        <div class="scrollTable" style="font-weight: bold;">
          报警数量
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="chart1TableOption"
        :data="chart1Data"
        class="case-item"
        style="height: 84%;overflow: hidden;"
      >
        <div
          v-for="(item, index) in chart1Data"
          :key="index"

        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div
              class="scrollTable">
              {{ item.name }}
            </div>
            <div
              class="scrollTable">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTable">
              {{ item.value }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <Chart ref="chart2" class="chart2"></Chart>
    <div class="chart2Table">
      <div style="background-color: #094170">
        <div class="scrollTable" style="font-weight: bold;width: 50%">
          名称
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 50%">
          数量
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="chart1TableOption"
        :data="chart2Data"
        class="case-item"
        style="height: 84%;overflow: hidden;"
      >
        <div
          v-for="(item, index) in chart2Data"
          :key="index"

        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div class="scrollTable" style="width: 50%">
              {{ item.name }}
            </div>
            <div class="scrollTable" style="width: 50%">
              {{ item.value }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div>
      <div class="centerInfo">传感器数量</div>
      <div class="centerInfo" style="font-weight:bold;top:19.3%;left: 42.5%;font-size: 2vw;">978</div>
      <div class="centerInfo" style="left: 56%">监控单元数量</div>
      <div class="centerInfo" style="font-weight:bold;top:19.3%;left: 66%;font-size: 2vw;">978</div>
    </div>
    <div class="inTransit">在运： <span style="color: #00f6ff">{{ inTransitNum }}</span></div>
    <Chart ref="chart3" class="chart3"></Chart>
    <div class="table1">
      <div style="background-color: #094170">
        <div class="scrollTable" style="font-weight: bold;width: 25%">
          告警编号
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 25%">
          告警类型
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 25%">
          告警位置
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 25%">
          操作
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="chart1TableOption"
        :data="table1Data"
        class="case-item"
        style="height: calc(100% - 33px);overflow: hidden;"
      >
        <div
          v-for="(item, index) in table1Data"
          :key="index"
        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div class="scrollTable" style="width: 25%">
              {{ item.no }}
            </div>
            <div class="scrollTable" style="width: 25%">
              {{ item.type }}
            </div>
            <div class="scrollTable" style="width: 25%">
              {{ item.location }}
            </div>
            <div class="scrollTable" style="width: 25%">
              <el-button size="mini" type="primary">操作</el-button>
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

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

export default {
  components: {
    vueSeamlessScroll,
    Chart,
    BoardTopNav
  },
  data() {
    return {
      chart1Option: {
        tooltip: {},
        angleAxis: {
          max: 100,
          clockwise: true,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        polar: {
          center: ["40%", "50%"],
          radius: "100%", //图形大小
        },
      },
      chart1Color: ['#2ff', '#f22', '#f2f', '#1f1'],
      chart1Data: [
        {
          value: 12,
          value2: 100,
          name: '电流互感器',
        },
        {
          value: 23,
          value2: 100,
          name: '电压互感器',
        },
        {
          value: 34,
          value2: 100,
          name: '变压器',
        },
        {
          value: 45,
          value2: 100,
          name: '电容电抗器',
        }
      ],
      chart1TableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 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,
      },
      chart2Data: [
        {
          value: 111,
          name: '无源温度传感器',
        },
        {
          value: 111,
          name: '有源温度传感器',
        },
        {
          value: 111,
          name: '烟雾传感器',
        },
        {
          value: 111,
          name: '温湿度传感器',
        },
        {
          value: 111,
          name: 'CO传感器',
        }
      ],
      chart2Option: {
        color: ["#22acfd", "#22fe97", "#f9e728", "#ff922b", "#ed1814"],
        legend: {
          orient: "vertical",
          x: "right",
          y: "center",
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} :  ({d}%)",
        },
        series: [
          {
            type: "pie",
            radius: ["45%", "76%"],
            center: ["35%", "50%"],
            encode: {
              itemName: "group",
              value: "占比",
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
            itemStyle: {
              opacity: '0.8'
            }
          },
          {
            type: "pie",
            radius: ["75%", "90%"],
            center: ["35%", "50%"],
            encode: {
              itemName: "group",
              value: "占比",
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
        ],
      },
      inTransitNum: 1999,
      chart3Data: [
        {
          date: '10-01',
          value: '100',
        },
        {
          date: '10-02',
          value: '200',
        },
        {
          date: '10-03',
          value: '100',
        },
        {
          date: '10-04',
          value: '300',
        },
        {
          date: '10-05',
          value: '200',
        },
      ],
      chart3Option: {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "middle",
          left: "3%",
          right: "4%",
          bottom: "3%",
          height: "80%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#ccc3",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ccc",
            },
          },
          nameTextStyle: {
            color: "#999",
          },
          splitArea: {
            show: false,
          },
        },
      },
      table1Data: [
        {
          no: '001',
          type: '高温警告',
          location: '车间',
        },
        {
          no: '001',
          type: '高温警告',
          location: '车间',
        },
        {
          no: '001',
          type: '高温警告',
          location: '车间',
        },
        {
          no: '001',
          type: '高温警告',
          location: '车间',
        },
        {
          no: '001',
          type: '高温警告',
          location: '车间',
        },
        {
          no: '001',
          type: '高温警告',
          location: '车间',
        },
        {
          no: '001',
          type: '高温警告',
          location: '车间',
        },
        {
          no: '001',
          type: '高温警告',
          location: '车间',
        },
        {
          no: '001',
          type: '高温警告',
          location: '车间',
        },
        {
          no: '001',
          type: '高温警告',
          location: '车间',
        },
        {
          no: '001',
          type: '高温警告',
          location: '车间',
        },
      ]
    }
  },
  mounted() {
    let option1 = {
      ...this.chart1Option,
      series: [
        {
          type: "bar",
          data: this.chart1Data.map((e, i) => {
            return {
              value: (e.value / e.value2) * 100,
              name: e.name,
              itemStyle: {
                color: this.chart1Color[i]
              }
            }
          }),
          showBackground: true,
          coordinateSystem: "polar",
          roundCap: true,
          barWidth: 8,
        },
      ]
    }
    this.$refs.chart1.setData(option1)
    let chart2Num = eval(this.chart2Data.map(e => e.value).join("+"));
    let option2 = {
      ...this.chart2Option,
      dataset: {
        source: [
          ["group", "占比"],
          ...this.chart2Data.map(e => [e.name, (e.value / chart2Num) * 100])
        ],
      }
    }
    this.$refs.chart2.setData(option2)
    let option3 = {
      ...this.chart3Option,
      xAxis: {
        boundaryGap: false,
        type: "category",
        data: this.chart3Data.map(e => e.date),

        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#ccc3",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#999",
          },
        },
      },
      series: [
        {
          name: "",
          type: "line",
          data: this.chart3Data.map(e => e.value),
          color: "#00dae0",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#00dae033",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,202,149,0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0,202,149, 0.9)",
              shadowBlur: 20,
            },
          },
        },
      ],
    }
    this.$refs.chart3.setData(option3)
  },
  methods: {}
};
</script>
<style scoped>
.container {
  background-image: url("~@/assets/board/index/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(100vh);
  position: relative;
}

.centerImg {
  background-image: url("~@/assets/board/index/container.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 45vw;
  height: 20vw;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.scrollTable {
  color: rgb(185, 186, 192);
  margin: auto 0px;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-block;
  width: 33%;

}

.chart1 {
  position: absolute;
  width: 20%;
  height: 21%;
  top: 16%;
  left: 3%;
}

.chart1Right {
  background-image: url("~@/assets/board/common/bg1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 12px;
  position: absolute;
  top: 17%;
  left: 18%;
}

.chart1Table {
  position: absolute;
  top: 38%;
  left: 2.8%;
  width: 21%;
  height: 14%;
  overflow: hidden;
}

.chart2 {
  position: absolute;
  width: 20%;
  height: 21%;
  top: 58.5%;
  left: 3%;
}

.chart2Table {
  position: absolute;
  top: 81%;
  left: 2.8%;
  width: 21%;
  height: 15%;
  overflow: hidden;
}

.centerInfo {
  position: absolute;
  width: 7%;
  top: 17.5%;
  left: 32.7%;
  font-size: 1.4vw;
  text-align: center;
  transform: translateX(-50%);
  color: #01c7fd;
  letter-spacing: 4px;
}

.inTransit {
  position: absolute;
  top: 16%;
  left: 87%;
  transform: translateX(-50%);
  font-size: 1.2vw;
  color: rgb(30, 158, 223);
}

.chart3 {
  position: absolute;
  width: 21%;
  height: 22%;
  top: 21.5%;
  left: 76.1%;
}

.table1 {
  position: absolute;
  width: 21%;
  height: 50%;
  top: 45.5%;
  left: 76.3%;
}
</style>
