<template>
  <div class="big-data-wrapper">
    <div class="big-data-chart-row">
      <div class="big-data1 big-data">
        <div class="big-data-title-wrapper">
          区域报警统计
          <div class="big-data-title-dec"></div>
        </div>
        <div class="big-data-chart1">
          <div class="alarm-sum-wrapper">
            <div>报警总数量</div>
            <div>881770</div>
          </div>
          <div class="big-data-chart1-alarm1"></div>
        </div>
      </div>
      <div class="big-data2 big-data">
        <div class="big-data-title-wrapper">
          报警信息卡
          <div class="big-data-title-dec"></div>
        </div>
        <div class="big-data-chart2">
          <div class="big-data-chart2-alarm-sum2">
            <div class="big-data-chart2-sum">
              <span>报警数量</span>
              <span>98次</span>
            </div>
            <div class="big-data-chart2-sum">
              <span>解除报警数量</span>
              <span>86次</span>
            </div>
          </div>
          <div class="big-data-chart2-table-wrapper">
            <div class="big-data-chart2-table-title">
              <span class="big-data-chart2-table-title1">报警设备名称</span>
              <span class="big-data-chart2-table-title2">报警状态</span>
              <span class="big-data-chart2-table-title3">时间</span>
            </div>
            <div class="big-data-chart2-table-content-wrapper">
              <div class="big-data-chart2-table-content-item">
                <span>1111</span>
                <span>2222</span>
                <span>3333</span>
              </div>
              <div class="big-data-chart2-table-content-item">
                <span>4444</span>
                <span>5555</span>
                <span>6666</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="big-data-chart-row">
      <div class="big-data3 big-data">
        <div class="big-data-title-wrapper">
          矿企产量趋势图
          <div class="big-data-title-dec"></div>
        </div>
        <div class="big-data-chart3"></div>
      </div>
      <div class="big-data4 big-data">
        <div class="big-data-title-wrapper">
          重大安全隐患统计
          <div class="big-data-title-dec"></div>
        </div>
        <div class="big-data-chart4"></div>
      </div>
    </div>
    <div class="big-data-chart-row">
      <div class="big-data5 big-data">
        <div class="big-data-title-wrapper">
          重大安全隐患整改数量情况统计
          <div class="big-data-title-dec"></div>
        </div>
        <div class="big-data-chart5"></div>
      </div>
      <div class="big-data6 big-data">
        <div class="big-data-title-wrapper">
          生产风险统计
          <div class="big-data-title-dec"></div>
        </div>
        <div class="big-data-chart6"></div>
      </div>
    </div>
    <div class="big-data-chart-row">
      <div class="big-data7 big-data">
        <div class="big-data-title-wrapper">
          行业生产风险统计
          <div class="big-data-title-dec"></div>
        </div>
        <div class="big-data-chart7"></div>
      </div>
      <div class="big-data8 big-data">
        <div class="big-data-title-wrapper">
          区域生产风险统计
          <div class="big-data-title-dec"></div>
        </div>
        <div class="big-data-chart8"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      alarmInfo: {
        // 报警数量
        alarmSum: 10,
        // 解除报警数量
        disarmSum: 8,
        alarmTable:[
          {
            // 报警设备名称
            alarmDeviceName: 'device1',
            // 报警状态
            alarmState: '11',
            // 报警时间
            alarmTime: '2020-11-30 08-20-01'
          }
        ]
      },
    }
  },
  mounted() {
    this.init1()
    this.init3()
    this.init4()
    this.init5()
    this.init6()
    this.init7()
    this.init8()
  },
  methods: {
    init1() {
      const targetDom = document.querySelector('.big-data-chart1-alarm1')
      const mychart = echarts.init(targetDom)
      const option = {
        series: [
          {
            name: 'alarm1',
            type: 'pie',
            radius: ['20%', '70%'],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {
                value: 40,
                name: '正常数量'
              },
              {
                value: 20,
                name: '报警数量'
              }
            ]
          }
        ]
      }
      mychart.setOption(option)
    },
    init3() {
      const targetDom = document.querySelector('.big-data-chart3');
      const mychart = echarts.init(targetDom)
      const option = {
        color: ["#E74C3C", "#F39C12", "#ECF0F1", "#9B59B6", "#2ECC71"],
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: '10%',
          top: '15%',
          bottom: '10%',
          right: '10%'
        },
        xAxis: {
          type: "category",
          name: '时间',
          nameTextStyle: {
            color: '#ffffff'
          },
          axisLabel: {
            color: "#FFF"
          },
          data: ['2021-1','2021-2','2021-3','2021-4']
        },
        yAxis: {
          type: "value",
          name: '隐患总量',
          axisLine: {
            show: false
          },
          nameTextStyle: {
            color: '#ffffff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          },
          axisLabel: {
            color: "#fff"
          }
        },
        series: [
          {
            type: 'line',
            name: '非煤矿山',
            smooth: true,
            symbol: 'none',
            data: [20, 50, 80, 10]
          },
          {
            type: 'line',
            name: '煤矿',
            smooth: true,
            symbol: 'none',
            data: [10, 90, 20, 70]
          },
          {
            type: 'line',
            name: '危险化学品企业',
            smooth: true,
            symbol: 'none',
            data: [80, 30, 10, 50]
          },
          {
            type: 'line',
            name: '冶金工贸',
            smooth: true,
            symbol: 'none',
            data: [70, 100, 200, 10]
          }
        ]
      }
      mychart.setOption(option)
    },
    init4() {
      const targetDom = document.querySelector('.big-data-chart4');
      const mychart = echarts.init(targetDom)
      const option = {
        color: ["#E74C3C", "#F39C12", "#ECF0F1", "#9B59B6", "#2ECC71"],
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: '10%',
          top: '15%',
          bottom: '10%',
          right: '10%'
        },
        xAxis: {
          type: "category",
          name: '时间',
          nameTextStyle: {
            color: '#ffffff'
          },
          axisLabel: {
            color: "#FFF"
          },
          data: ['2021-1','2021-2','2021-3','2021-4']
        },
        yAxis: {
          type: "value",
          name: '隐患总量',
          axisLine: {
            show: false
          },
          nameTextStyle: {
            color: '#ffffff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          },
          axisLabel: {
            color: "#fff"
          }
        },
        series: [
          {
            name: '一般隐患',
            type: 'bar',
            stack: 'total',
            data: [60, 120, 220, 70]
          },
          {
            name: '重大隐患',
            type: 'bar',
            stack: 'total',
            data: [10, 110, 320, 80]
          }
        ]
      }
      mychart.setOption(option)
    },
    init5() {
      const targetDom = document.querySelector('.big-data-chart5')
      const mychart = echarts.init(targetDom)
      const option = {
        title: {
            text: "总数量",
            subtext: "" + 700,
            left: "center",
            top: "40%",
            textStyle: {
              color: "#F88F12",
              fontSize: "20"
            },
            subtextStyle: {
              color: "#F88F12",
              fontSize: "20"
            }
          },
          tooltip: {
            trigger: "item"
          },
          legend: {
            show: false
          },
          series: [
            {
              type: "pie",
              radius: ["40%", "78%"],
              avoidLabelOverLap: true,
              data: [
                {
                  value: 200,
                  name: "重大隐患未闭环",
                  itemStyle: {
                    color: "#E74C3C"
                  }
                },
                {
                  value: 500,
                  name: "重大隐患已闭环",
                  itemStyle: {
                    color: "#FDFA02"
                  }
                },
              ],
              label: {
                align: "left",
                normal: {
                  formatter(v) {
                    return `${v.name}\n${v.value}`;
                  },
                  textStyle: {
                    fontSize: 16
                  }
                }
              },
              labelLine: {
                length: 3,
                length2: 10
              }
            }
          ]
      }
      mychart.setOption(option)
    },
    init6() {
      const targetDom = document.querySelector('.big-data-chart6')
      const mychart = echarts.init(targetDom)
      const option = {
        title: {
            text: "总数量",
            subtext: "" + 15468,
            left: "center",
            top: "40%",
            textStyle: {
              color: "#F88F12",
              fontSize: "20"
            },
            subtextStyle: {
              color: "#F88F12",
              fontSize: "20"
            }
          },
          tooltip: {
            trigger: "item"
          },
          legend: {
            show: false
          },
          series: [
            {
              type: "pie",
              radius: ["40%", "78%"],
              avoidLabelOverLap: true,
              data: [
                {
                  value: 100,
                  name: "低风险",
                  itemStyle: {
                    color: "#057AFD"
                  }
                },
                {
                  value: 200,
                  name: "一般风险",
                  itemStyle: {
                    color: "#FEFA03"
                  }
                },
                {
                  value: 400,
                  name: "较大风险",
                  itemStyle: {
                    color: "#F88F12"
                  }
                },
                {
                  value: 300,
                  name: "重大风险",
                  itemStyle: {
                    color: "#FF414B"
                  }
                },
              ],
              label: {
                align: "left",
                normal: {
                  formatter(v) {
                    return `${v.name}\n${v.value}`;
                  },
                  textStyle: {
                    fontSize: 16
                  }
                }
              },
              labelLine: {
                length: 3,
                length2: 10
              }
            }
          ]
      }
      mychart.setOption(option)
    },
    init7() {
      const targetDom = document.querySelector('.big-data-chart7')
      const mychart = echarts.init(targetDom)
      const option = {
        title: {
            text: "总数量",
            subtext: "" + 15468,
            left: "center",
            top: "40%",
            textStyle: {
              color: "#F88F12",
              fontSize: "20"
            },
            subtextStyle: {
              color: "#F88F12",
              fontSize: "20"
            }
          },
          tooltip: {
            trigger: "item"
          },
          legend: {
            show: false
          },
          series: [
            {
              type: "pie",
              radius: ["40%", "78%"],
              avoidLabelOverLap: true,
              data: [
                {
                  value: 100,
                  name: "低风险",
                  itemStyle: {
                    color: "#057AFD"
                  }
                },
                {
                  value: 200,
                  name: "一般风险",
                  itemStyle: {
                    color: "#FEFA03"
                  }
                },
                {
                  value: 400,
                  name: "较大风险",
                  itemStyle: {
                    color: "#F88F12"
                  }
                },
                {
                  value: 300,
                  name: "重大风险",
                  itemStyle: {
                    color: "#FF414B"
                  }
                },
              ],
              label: {
                align: "left",
                normal: {
                  formatter(v) {
                    return `${v.name}\n${v.value}`;
                  },
                  textStyle: {
                    fontSize: 16
                  }
                }
              },
              labelLine: {
                length: 3,
                length2: 10
              }
            }
          ]
      }
      mychart.setOption(option)
    },
    init8() {
      const targetDom = document.querySelector('.big-data-chart8')
      const mychart = echarts.init(targetDom)
      const option = {
        title: {
            text: "总数量",
            subtext: "" + 15468,
            left: "center",
            top: "40%",
            textStyle: {
              color: "#F88F12",
              fontSize: "20"
            },
            subtextStyle: {
              color: "#F88F12",
              fontSize: "20"
            }
          },
          tooltip: {
            trigger: "item"
          },
          legend: {
            show: false
          },
          series: [
            {
              type: "pie",
              radius: ["40%", "78%"],
              avoidLabelOverLap: true,
              data: [
                {
                  value: 100,
                  name: "低风险",
                  itemStyle: {
                    color: "#057AFD"
                  }
                },
                {
                  value: 200,
                  name: "一般风险",
                  itemStyle: {
                    color: "#FEFA03"
                  }
                },
                {
                  value: 400,
                  name: "较大风险",
                  itemStyle: {
                    color: "#F88F12"
                  }
                },
                {
                  value: 300,
                  name: "重大风险",
                  itemStyle: {
                    color: "#FF414B"
                  }
                },
              ],
              label: {
                align: "left",
                normal: {
                  formatter(v) {
                    return `${v.name}\n${v.value}`;
                  },
                  textStyle: {
                    fontSize: 16
                  }
                }
              },
              labelLine: {
                length: 3,
                length2: 10
              }
            }
          ]
      }
      mychart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
  .big-data-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) !important;
    height: 92vh;
    width: 70vw;
    background: #040624;
    border-radius: 7px;
    z-index: 1000;
    color: #05D6EC;
    .big-data-chart-row {
      display: flex;
      height: 22vh;
      margin: 0.5vh auto;
      .big-data {
        display: flex;
        flex-direction: column;
        .big-data-chart1 {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          .alarm-sum-wrapper {
            display: flex;
            justify-content: space-around;
            border: 1px solid #3FFFEA;
            box-shadow: inset 0 8px 19px -7px #3fffea;
            padding: 5px;
            margin: 3px 10px;
            font-size: 18px;
          }
          .big-data-chart1-alarm1 {
            flex-grow: 1;
          }
        }
        .big-data-chart2 {
          .big-data-chart2-alarm-sum2 {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            border: 1px solid #3FFFEA;
            box-shadow: inset 0 8px 19px -7px #3fffea;
            padding: 5px;
            margin: 3px 10px;
            .big-data-chart2-sum {
              display: flex;
              flex-direction: row;
              justify-content: space-around;
              align-items: center;
              span {
                &:first-child {
                  color: #7BB8C2;
                  font-size: 14px;
                }
                &:last-child {
                  color: #00FCFF;
                  font-size: 18px;
                  margin-left: 20px;
                }
              }
            }
          }
          .big-data-chart2-table-wrapper {
            display: flex;
            flex-direction: column;
            font-size: 14px;
            text-align: center;
            .big-data-chart2-table-title {
              display: flex;
              color: #019AEF;
              .big-data-chart2-table-title1 {
                flex-basis: 42%;
              }
              .big-data-chart2-table-title2 {
                flex-basis: 26%;
              }
              .big-data-chart2-table-title3 {
                flex-basis: 32%;
              }
            }
            .big-data-chart2-table-content-wrapper {
              flex-grow: 1;
              overflow-y: scroll;
              &::-webkit-scrollbar {
                display: none;
              }
              .big-data-chart2-table-content-item {
                display: flex;
                color: white;
                background-color: rgba(32, 47, 88, .8);
                padding: 2px;
                margin: 2px 10px;
                span {
                  &:nth-child(1) {
                    flex-basis: 42%;
                  }
                  &:nth-child(2) {
                    flex-basis: 26%;
                  }
                  &:nth-child(3) {
                    flex-basis: 32%;
                  }
                }
              }
            }
          }
        }
        .big-data-chart3 {
          flex-grow: 1;
        }
        .big-data-chart4 {
          flex-grow: 1;
        }
        .big-data-chart5 {
          flex-grow: 1;
        }
        .big-data-chart6 {
          flex-grow: 1;
        }
        .big-data-chart7 {
          flex-grow: 1;
        }
        .big-data-chart8 {
          flex-grow: 1;
        }
      }
      .big-data1 {
        flex-basis: 50%;
      }
      .big-data2 {
        flex-basis: 50%;
      }
      .big-data3 {
        flex-basis: 50%;
      }
      .big-data4 {
        flex-basis: 50%;
      }
      .big-data5 {
        flex-basis: 50%;
      }
      .big-data6 {
        flex-basis: 50%;
      }
      .big-data7 {
        flex-basis: 50%;
      }
      .big-data8 {
        flex-basis: 50%;
      }
    }
  }
  .big-data-title-wrapper {
    position: relative;
    font-family: "SourceHanSansCN-Medium";
    color: aqua;
    font-size: 16px;
    font-weight: bold;
    /* background: -webkit-gradient(linear, left bottom, left top, color-stop(23.583984375%, #3fffea), to(#007eff)); */
    background: linear-gradient(0deg, #3fffea 23.583984375%, #007eff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: 80px;
    padding-top: 5px;
    .big-data-title-dec {
      position: absolute;
      left: 20px;
      top: 5px;
      width: 53px;
      height: 21px;
      background-repeat: no-repeat;
      background-image: url('../../assets/images/dec4.png');
      transform: scale(0.75);
    }
  }
</style>