<template>
  <div class="container">
    <div class="left">
      <div class="block1">
        <div class="man_title">基本信息</div>
        <div style="flex: 1">
          <div class="title">
            秦皇岛卓云科技有限公司
            <span class="state">正常</span>
          </div>
          <div class="info">
            <div class="item">
              <span class="label">统一信用代码:</span>
              <span class="value">91130301MAOFOB270G</span>
            </div>
            <div class="item">
              <span class="label">企业类型:</span>
              <span class="value">民爆类/民用爆炸物品销售企业</span>
            </div>
            <div class="item">
              <span class="label">培训行业类型:</span>
              <span class="value">内蒙古液化气站</span>
            </div>
            <div class="item">
              <span class="label">成立日期:</span>
              <span class="value">2020-05-23</span>
            </div>
            <div class="item">
              <span class="label">会员级别:</span>
              <span class="value">双重预防升级版</span>
            </div>
            <div class="item">
              <span class="label">人员总数:</span>
              <span class="value">22</span>
            </div>
            <div class="item">
              <span class="label">岗位数:</span>
              <span class="value">5</span>
            </div>
            <div class="item">
              <span class="label">行业资质数量:</span>
              <span class="value">4</span>
            </div>
            <div class="item">
              <img
                v-viewer
                src="https://gimg2.baidu.com/image_search/src=https%3A%2F%2Fwww.generalwatertech.com%2Fuploadfiles%2F2020%2F01%2F20200109175314541.jpg%3FMS5qcGc%3D&refer=http%3A%2F%2Fwww.generalwatertech.com&app=2002&size=f10000,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1692409167&t=10fce801de46a1e3bf60239342d02113"
                alt="">
              <img
                v-viewer
                src="https://gimg2.baidu.com/image_search/src=https%3A%2F%2Fwww.generalwatertech.com%2Fuploadfiles%2F2020%2F01%2F20200109175314541.jpg%3FMS5qcGc%3D&refer=http%3A%2F%2Fwww.generalwatertech.com&app=2002&size=f10000,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1692409167&t=10fce801de46a1e3bf60239342d02113"
                alt="">
            </div>
          </div>
        </div>
        <div id="main1"/>
      </div>
      <div style="display: flex;justify-content: space-between">
        <div class="block2">
          <div class="man_title">高危作业</div>
          <div id="main2"/>
        </div>
        <div class="block3">
          <div class="man_title">风险管控</div>
          <div id="main3"/>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="block4">
        <div class="man_title">核心数据</div>
        <div class="item">
          <div>
            <img
              src="../../../assets/images/img1.png"
              alt="">
          </div>
          <div>
            <div class="value">3232</div>
            <div class="label">编制检查清单数</div>
          </div>
        </div>
        <div class="item">
          <div>
            <img
              src="../../../assets/images/img2.png"
              alt="">
          </div>
          <div>
            <div class="value">3232</div>
            <div class="label">检查记录数</div>
          </div>
        </div>
        <div class="item">
          <div>
            <img
              src="../../../assets/images/img3.png"
              alt="">
          </div>
          <div>
            <div class="value">3232</div>
            <div class="label">隐患数</div>
          </div>
        </div>
      </div>
      <div style="display: flex;justify-content: space-between">
        <div class="block5">
          <div class="man_title">清单检查</div>
          <el-table
            :data="list"
            :header-cell-style="{
              'font-weight': 'bold',
              'color': '#000'
            }"
            border
            stripe
            height="210px"
          >
            <el-table-column type="index" label="序号" width="50px" align="center"/>
            <el-table-column prop="name" label="清单名称" align="center" min-width="100px"/>
            <el-table-column prop="name1" label="检查时间" width="90px" align="center"/>
            <el-table-column prop="name2" label="检查人员" width="70px" align="center"/>
            <el-table-column prop="name3" label="已检查和应检查数" width="120px" align="center"/>
            <el-table-column prop="name4" label="检查率" width="60px" align="center"/>
          </el-table>
        </div>
        <div class="block6">
          <div :class="['man_title',{active:tabIndex===0}]" @click="tabIndex = 0">部门考核</div>
          <div :class="['man_title','man_title1',{active:tabIndex===1}]" @click="tabIndex = 1">人员考核</div>
          <el-table
            :data="list1"
            :header-cell-style="{
              'font-weight': 'bold',
              'color': '#000'
            }"
            border
            stripe
            height="210px"
          >
            <el-table-column type="index" label="序号" width="60px" align="center"/>
            <el-table-column prop="name" label="部门" align="center" width="100px"/>
            <el-table-column prop="name1" label="考核等级" align="center" width="70px"/>
            <el-table-column prop="name2" label="得分" align="center" width="70px"/>
          </el-table>
        </div>
      </div>
      <div style="display: flex;justify-content: space-between">
        <div class="block7">
          <div class="man_title">隐患趋势</div>
          <div id="main4"/>
        </div>
        <div class="block8">
          <div class="man_title">教育培训情况</div>
          <div id="main5"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

let Echarts1
let Echarts2
let Echarts3
let Echarts4
let Echarts5
export default {
  data() {
    return {
      list: [],
      list1: [],
      tabIndex: 0
    }
  },
  mounted() {
    for (let i = 0; i < 10; i++) {
      this.list.push({
        name: '1-13清单',
        name1: '2023/7/18',
        name2: '张三',
        name3: '84/3',
        name4: '3.57%'
      })
      this.list1.push({
        name: '安全部',
        name1: '三级',
        name2: '42'
      })
    }
    this.fnInitEcharts1()
    this.fnInitEcharts2()
    this.fnInitEcharts3()
    this.fnInitEcharts4()
    this.fnInitEcharts5()
    window.onresize = function() {
      Echarts1 && Echarts1.resize()
      Echarts2 && Echarts2.resize()
      Echarts3 && Echarts3.resize()
      Echarts4 && Echarts4.resize()
      Echarts5 && Echarts5.resize()
    }
  },
  beforeDestroy() {
    Echarts1 && Echarts1.dispose()
    Echarts2 && Echarts2.dispose()
    Echarts3 && Echarts3.dispose()
    Echarts4 && Echarts4.dispose()
    Echarts5 && Echarts5.dispose()
  },
  methods: {
    fnInitEcharts1() {
      Echarts1 = echarts.init(document.querySelector('#main1'))
      var data = [
        {
          text: '企业基本\n信息完善',
          max: 100
        },
        {
          text: '风险辨\n识台账',
          max: 100
        },
        {
          text: '隐患排\n查情况',
          max: 100
        },
        {
          text: '日常检查\n排查完成率',
          max: 100
        },
        {
          text: '体系完善',
          max: 100
        }
      ]
      const option = {
        title: [
          {
            text: 86,
            left: '45%',
            top: '45%',
            textAlign: 'center',
            textStyle: {
              fontSize: '30',
              fontWeight: '700',
              color: '#fff',
              textAlign: 'center'
            }
          },
          {
            text: '分',
            left: '54%',
            top: '46.5%',
            textAlign: 'center',
            textStyle: {
              fontSize: '20',
              fontWeight: '400',
              color: '#fff',
              textAlign: 'center'
            }
          },
          {
            subtext: '较高',
            left: '48%',
            top: '51%',
            textAlign: 'center',
            subtextStyle: {
              fontSize: '15',
              fontWeight: '400',
              color: '#fff',
              textAlign: 'center'
            }
          }

        ],
        radar: [{
          indicator: data,
          radius: 100,
          startAngle: 90,
          splitNumber: 4,
          shape: 'circle',
          name: {
            textStyle: {
              color: '#e99bff',
              fontSize: 15
            }

          },
          axisLine: {
            lineStyle: {
              color: '#9c97f8'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#9c97f8',
              width: 2
            }
          },
          splitArea: {
            areaStyle: {
              color: '#fff'
            }
          }
        }],
        series: [{
          name: '雷达图',
          type: 'radar',
          symbol: 'circle',
          symbolSize: 10,
          itemStyle: {
            normal: {
              color: '#e99bff'
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#ec9bff'
                  },
                  {
                    offset: 1,
                    color: '#7276f5'
                  }
                ],
                false
              ),
              opacity: 0.8
            }
          },
          data: [
            [54, 58, 66, 45, 50]
          ]
        }]
      }
      Echarts1.setOption(option)
    },
    fnInitEcharts2(data) {
      Echarts2 = echarts.init(document.querySelector('#main2'))
      const option = {
        color: ['#fc7e2a', '#d55ceb', '#00cdac', '#f9d423', '#ed7c86', '#7597e2', '#ec4a4a', '#07a4fd'],
        tooltip: {
          show: true,
          backgroundColor: 'rgba(0,0,0,.8)',
          borderWidth: 0,
          textStyle: {
            fontSize: 14,
            color: '#fff'
          },
          formatter: '{b}:{d}%'
        },
        legend: {
          orient: 'horizontal',
          icon: 'circle',
          padding: 0,
          bottom: '0px',
          left: 'center',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 5,
          textStyle: {
            fontSize: 12,
            color: '#000'
          }
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            top: '2%',
            left: '0%',
            radius: ['0%', '90%'],
            avoidLabelOverlap: false,
            clockwise: false,
            startAngle: 60,
            roseType: 'area',
            label: {
              show: true,
              position: 'inside',
              formatter: '{c}',
              textStyle: {
                fontSize: 14,
                color: '#fff'
              }
            },
            itemStyle: {
              borderColor: 'rgba(0,0,0,.1)',
              borderWidth: 0
            },
            data: [
              { value: data[2] && data[2].pass_count || 0, name: '受限空间作业' },
              { value: data[5] && data[5].pass_count || 0, name: '高处作业' },
              { value: data[0] && data[0].pass_count || 0, name: '盲板抽堵作业' },
              { value: data[7] && data[7].pass_count || 0, name: '动火作业' },
              { value: data[6] && data[6].pass_count || 0, name: '吊装作业' },
              { value: data[1] && data[1].pass_count || 0, name: '动士作业' },
              { value: data[4] && data[4].pass_count || 0, name: '断路作业' },
              { value: data[3] && data[3].pass_count || 0, name: '临时用电作业' }
            ].sort((a, b) => b.value - a.value),

            emphasis: {
              scale: true,
              scaleSize: 10,
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.35)'
              }
            }
          }
        ]
      }
      Echarts2.setOption(option)
    },
    fnInitEcharts3() {
      Echarts3 = echarts.init(document.querySelector('#main3'))
      var colors = ['#00DFF3', '#007AFF']
      var option = {
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '30px',
          right: '1px',
          bottom: '20px',
          top: '40px'
        },
        xAxis: {
          data: ['辨识部位', '风险点数'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(55, 117, 246, 0.4)'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#b7b7b7',
            fontSize: 12
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#DDD'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#b7b7b7',
            fontSize: 12
          }
        },
        series: [
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [15, 7],
            symbolOffset: [0, 5],
            z: 12,
            animationDuration: function(idx) {
              return 3000
            },
            itemStyle: {
              opacity: 1,
              color: function(params) {
                return colors[params.dataIndex]
              }
            },
            data: [1, 1]
          },
          {
            name: '',
            type: 'bar',
            barWidth: 15,
            barGap: '-100%',
            animationDuration: function(idx) {
              return 3000
            },
            itemStyle: {
              opacity: 0.7,
              color: function(params) {
                return colors[params.dataIndex]
              }
            },
            data: [30, 90]
          },
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [15, 7],
            symbolOffset: [0, -5],
            z: 12,
            animationDuration: function(idx) {
              return 3000
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 12,
              color: '#b7b7b7',
              fontFamily: 'FZHZGBJW'
            },
            itemStyle: {
              opacity: 1,
              color: function(params) {
                return colors[params.dataIndex]
              }
            },
            symbolPosition: 'end',
            data: [30, 90]
          }
        ]
      }
      Echarts3.setOption(option)
    },
    fnInitEcharts4() {
      Echarts4 = echarts.init(document.querySelector('#main4'))
      var DataName = ['隐患发现数', '隐患整改数', '未整改隐患数']
      var DataA = ['115', '93', '72', '25', '31', '65', '54']
      var DataB = ['51', '85', '20', '117', '13', '60', '12']
      var DataC = ['12', '25', '4', '78', '9', '7', '97']
      var DataDM = ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            textStyle: {
              color: '#fff'
            }
          }
        },
        grid: {
          top: '2%',
          left: '12%',
          right: '5%',
          bottom: '25%'
        },
        legend: {
          align: 'left',
          left: 'center',
          bottom: '0%',
          textStyle: {
            color: '#b7b7b7',
            fontSize: 12
          },
          icon: 'pin',
          itemGap: 25,
          itemWidth: 20,
          itemHeight: 5,
          data: DataName
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#b7b7b7',
              width: 1
            }
          },
          axisLabel: {
            textStyle: {
              color: '#b7b7b7',
              padding: [10, 0, 0, 0],
              fontSize: 12
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: DataDM
        }
        ],
        yAxis: [
          {
            min: 0,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(200,200,200,.5)',
                type: 'dashed'
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#b7b7b7',
                padding: 16,
                fontSize: 12
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: DataName[0],
            type: 'line',
            showAllSymbol: true,
            symbolSize: 8,
            symbol: 'circle',
            smooth: true,
            lineStyle: {
              normal: {
                width: 1,
                color: '#00CA94'
              },
              borderColor: 'rgba(0,0,0,.4)'
            },
            itemStyle: {
              color: '#00CA94'
            },
            tooltip: {
              show: true
            },
            data: DataA
          },
          {
            name: DataName[1],
            type: 'line',
            showAllSymbol: true,
            symbolSize: 8,
            symbol: 'circle',
            smooth: true,
            lineStyle: {
              normal: {
                width: 1,
                color: '#FB388F'
              },
              borderColor: 'rgba(0,0,0,.4)'
            },
            itemStyle: {
              color: '#FB388F'
            },
            tooltip: {
              show: true
            },
            data: DataB
          },
          {
            name: DataName[2],
            type: 'line',
            showAllSymbol: true,
            symbolSize: 8,
            symbol: 'circle',
            smooth: true,
            lineStyle: {
              normal: {
                width: 1,
                color: '#c438fb'
              },
              borderColor: 'rgba(0,0,0,.4)'
            },
            itemStyle: {
              color: '#c438fb'
            },
            tooltip: {
              show: true
            },
            data: DataC
          }
        ]
      }
      Echarts4.setOption(option)
    },
    fnInitEcharts5() {
      Echarts5 = echarts.init(document.querySelector('#main5'))
      const colorStopsArray = [
        [
          {
            offset: 0,
            color: 'rgba(204,251,255, 0.8)'
          },
          {
            offset: 1,
            color: 'rgba(239,150,197, 0.8)'
          }
        ],
        [
          {
            offset: 0,
            color: 'rgba(249,149,127, 0.8)'
          },
          {
            offset: 1,
            color: 'rgba(242,245,208, 0.8)'
          }
        ]
      ]
      const riskName = ['开班数', '开班人数']
      const riskData = [123, 600]
      var option = {
        title: {
          text: '',
          x: '2%',
          y: '2%',
          textStyle: {
            color: '#1890FF',
            fontSize: 14,
            fontWeight: 400
          }
        },
        backgroundColor: '#fff',
        grid: {
          left: '10%',
          top: '8%',
          bottom: '10%',
          right: '5%'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          data: riskName,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#1890FF',
              fontSize: 14,
              fontWeight: 400
            }
          }
        },
        yAxis: [{
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#1890FF',
              fontWeight: 400,
              fontSize: 14
            }
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: 'rgba(255,255,255,.5)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(24,144,255, 0.15)',
              width: 1,
              type: 'dashed'
            }
          }
        }
        ],
        series: [
          {
            name: '',
            type: 'pictorialBar',
            barCategoryGap: '-50%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            label: {
              show: false,
              position: 'top',
              distance: 15,
              color: '#1890FF',
              fontWeight: 'bolder',
              fontSize: 14
            },
            itemStyle: {
              normal: {
                color: function(data) {
                  var obj = {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      colorStopsArray[data.dataIndex][0],
                      colorStopsArray[data.dataIndex][1]
                    ],
                    global: false
                  }
                  return obj
                }
              },
              emphasis: {
                opacity: 1
              }
            },
            data: riskData,
            z: 10
          }
        ]
      }
      Echarts5.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>

.container {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  --man_title_height: 30px;

  @mixin block($height,$margin_top) {
    margin-top: $margin_top;
    height: $height;
    border: 1px solid #206bf5;
    border-radius: 10px;
    position: relative;
    padding: 20px;
  }

  .man_title {
    background-color: #206bf5;
    color: #fff;
    padding: 0 20px;
    height: var(--man_title_height);
    line-height: var(--man_title_height);
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: absolute;
    top: calc(var(--man_title_height) - var(--man_title_height) * 2);
    left: 20px;
  }

  .left {
    margin-right: 0.5%;
    flex-basis: 44%;

    .block1 {
      @include block(450px, var(--man_title_height));
      display: flex;

      .title {
        font-size: 20px;
        font-weight: bold;
        display: flex;
        align-items: center;

        .state {
          display: inline-block;
          background-color: #40b948;
          color: #fff;
          font-size: 12px;
          font-weight: unset;
          padding: 3px 5px;
          margin-left: 10px;
          border-radius: 5px;
        }
      }

      .info {
        font-size: 14px;

        .item {
          margin-top: 15px;

          img {
            width: 120px;
            height: 100px;
            margin-left: 20px;

            &:first-child {
              margin-left: 0;
            }
          }
        }
      }

      #main1 {
        flex: 1;
        height: 430px;
      }
    }

    .block2 {
      margin-right: 10px;
      flex: 1;
      @include block(300px, 50px);

      #main2 {
        flex: 1;
        height: 260px;
      }
    }

    .block3 {
      margin-left: 10px;
      flex: 1;
      @include block(300px, 50px);

      #main3 {
        flex: 1;
        height: 260px;
      }
    }
  }

  .right {
    margin-left: 0.5%;
    flex-basis: 55%;

    .block4 {
      @include block(150px, var(--man_title_height));
      display: flex;
      justify-content: space-around;

      .item {
        flex-basis: 30%;
        border-radius: 20px;
        box-shadow: 0 8px 14px 0 rgba(142,45,159,0.3);
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        text-align: center;
        padding: 10px;

        img {
          width: 120px;
          height: 72px;
        }

        .value {
          font-size: 18px;
          font-weight: bold;
        }

        .label {
          color: #888888;
          font-size: 14px;
        }
      }
    }

    .block5 {
      @include block(250px, 50px);
      margin-right: 10px;
      flex: 1;
    }

    .block6 {
      @include block(250px, 50px);
      margin-left: 10px;
      flex: 1;

      .man_title {
        cursor: pointer;
        background-color: #6197fa;

        &.man_title1 {
          left: 130px;
        }

        &.active {
          background-color: #206bf5;
        }
      }
    }

    .block7 {
      @include block(300px, 50px);
      margin-right: 10px;
      flex: 1;

      #main4 {
        flex: 1;
        height: 260px;
      }
    }

    .block8 {
      @include block(300px, 50px);
      margin-left: 10px;
      flex: 1;

      #main5 {
        flex: 1;
        height: 260px;
      }
    }
  }
}
</style>
