<template>
    <div class="right_wraper">
        <div class="item_wraper flexbetween">
            <div class="l_item_wraper">
                <div class="title_wraper">
                    <p>设备产能利用</p>
                </div>
                <div class="content_wraper">
                  <div class="echart_wraper">
                      <div id="new_home_echart_6" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
            </div>
            <div class="l_item_wraper">
                <div class="title_wraper">
                    <p>设备运行统计</p>
                </div>
                <div class="content_wraper relative">
                  <div class="pie_wraper_2">
                    <div class="echart_wraper">
                      <div id="new_home_echart_7" style="width: 100%; height: 100%;"></div>
                    </div>
                  </div>
                  <div class="pie_legend">
                    <div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
                      <p class="pie_legend_txt_1">{{ e.stateName }}</p>
                      <div class="pie_legend_txt_wraper">
                        <p class="pie_legend_txt_2">{{ e.status }}</p>
                        <p class="pie_legend_txt_3">{{ e.rate }}</p>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
        <div class="item_wraper flexbetween">
            <div class="l_item_wraper">
                <div class="title_wraper">
                    <p>工序设备状态</p>
                </div>
                <div class="content_wraper">
                  <div class="echart_wraper">
                      <div id="new_home_echart_8" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
            </div>
            <div class="l_item_wraper">
                <div class="title_wraper">
                    <p>30天故障-TOP10</p>
                </div>
                <div class="content_wraper content_wraper_1">
                  <div class="echart_wraper">
                      <div id="new_home_echart_9" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
            </div>
        </div>
        <div class="item_wraper">
            <div class="title_wraper">
                <p>设备工单生产</p>
            </div>
            <div class="content_wraper">
              <div class="scroll_wrap">
                <ul class="scroll_tab_1">
                  <li>工序</li>
                  <li>设备号</li>
                  <li>设备名称</li>
                  <li>状态</li>
                  <li>生产工单</li>
                  <li>BOM号</li>
                  <li>物料</li>
                  <li>数量</li>
                  <li>开始时间</li>
                </ul>
                <div class="scroll_container_1">
                  <vue-seamless-scroll :data="deviceWorkOrder" :class-option="defaultOption1">
                    <ul class="scroll-ul_1">
                      <li v-for="(e, i) in deviceWorkOrder" :key="i">
                      <div class="scroll-ul_1_div">{{e.process}}</div>
                      <div class="scroll-ul_1_div">{{e.deviceCode}}</div>
                      <div class="scroll-ul_1_div">{{e.deviceName}}</div>
                      <div class="scroll-ul_1_div">
                        <span class="state" :class="'state_' + e.status"></span>
                        <p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
                      </div>
                      <div class="scroll-ul_1_div">{{e.workOrder}}</div>
                      <div class="scroll-ul_1_div">{{e.bom}}</div>
                      <div class="scroll-ul_1_div">{{e.material}}</div>
                      <div class="scroll-ul_1_div">{{e.qty}}</div>
                      <div class="scroll-ul_1_div">{{e.startTime}}</div>
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
// import { homepageDataRight } from '@js/mork2.js'
import { homepageDataRight } from '@js/getData2.js'
import bg1 from '@img/bg1.png'
import bg2 from '@img/bg2.png'
import bg3 from '@img/bg3.png'
import bg4 from '@img/bg4.png'
import pointerImg from '@img/pointer.png'
export default {
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      chart7Timer: null,
      chart9Timer: null,
      capacityRate: [], // 设备产能利用
      stateStatistics: {}, // 设备运行统计
      deviceWorkOrder: [], // 设备工单生产
      areaDeviceStatus: [{process: '混料'}, {process: '压制'}, {process: '干燥'}, {process: '包装'}], // 工序设备状态
      top10Of30Days: [] // 30天故障top10
    }
  },
  computed: {
    defaultOption1 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        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: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created () {
    this._homepageDataRight()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
    clearInterval(this.chart7Timer)
    clearInterval(this.chart9Timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this._homepageDataRight()
      }, this.interTime)
    },
    async _homepageDataRight () {
      let res = await homepageDataRight()
      clearInterval(this.chart7Timer)
      clearInterval(this.chart9Timer)
      this.capacityRate = [...res.capacityRate]
      res.stateStatistics.fourState.map(el => {
        let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)
        rate = rate.toFixed(2) + '%'
        this.$set(el, 'rate', rate)
      })
      this.stateStatistics = res.stateStatistics
      this.deviceWorkOrder = [...res.deviceWorkOrder]
      this.areaDeviceStatus.map((e, i) => {
        if (i === 0) {
          this.$set(e, 'running', res.areaDeviceStatus.mix.running)
          this.$set(e, 'pausing', res.areaDeviceStatus.mix.pausing)
          this.$set(e, 'shutdown', res.areaDeviceStatus.mix.shutdown)
          this.$set(e, 'inTrouble', res.areaDeviceStatus.mix.inTrouble)
        }
        if (i === 1) {
          this.$set(e, 'running', res.areaDeviceStatus.press.running)
          this.$set(e, 'pausing', res.areaDeviceStatus.press.pausing)
          this.$set(e, 'shutdown', res.areaDeviceStatus.press.shutdown)
          this.$set(e, 'inTrouble', res.areaDeviceStatus.press.inTrouble)
        }
        if (i === 2) {
          this.$set(e, 'running', res.areaDeviceStatus.dry.running)
          this.$set(e, 'pausing', res.areaDeviceStatus.dry.pausing)
          this.$set(e, 'shutdown', res.areaDeviceStatus.dry.shutdown)
          this.$set(e, 'inTrouble', res.areaDeviceStatus.dry.inTrouble)
        }
        if (i === 3) {
          this.$set(e, 'running', res.areaDeviceStatus.sort.running)
          this.$set(e, 'pausing', res.areaDeviceStatus.sort.pausing)
          this.$set(e, 'shutdown', res.areaDeviceStatus.sort.shutdown)
          this.$set(e, 'inTrouble', res.areaDeviceStatus.sort.inTrouble)
        }
      })
      this.top10Of30Days = [...res.top10Of30Days]
      this.top10Of30Days.map((e, i) => {
        this.$set(e, 'sort', i + 1)
      })
      this.top10Of30Days = this.top10Of30Days.reverse()
      this.setEchart1()
      this.setEchart2()
      this.setEchart3()
      this.setEchart4()
    },
    setEchart1 () {
      let img = {pointerImg: pointerImg}
      let cdata = []
      this.capacityRate.map(el => {
        cdata.push({name: el.device_name, data: Number(el.numerical).toFixed(0)})
      })
      let centerArr = [['25%', '38%'], ['75%', '38%'], ['25%', '89%'], ['75%', '89%']]
      let topArr = ['39%', '39%', '90%', '90%']
      let leftArr = ['0%', '50%', '0%', '50%']
      let titleArr = []
      let seriesArr = []
      cdata.forEach((item, index) => {
        titleArr.push({
          text: item.name,
          top: topArr[index],
          left: leftArr[index],
          textAlign: 'left',
          textStyle: {
            color: '#AEC3DC',
            fontSize: 16
          }
        })
        seriesArr.push({
          name: item.name,
          type: 'gauge',
          radius: '63%',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          splitNumber: 5,
          center: centerArr[index],
          pointer: {// 仪表盘指针
            icon: 'image://' + img.pointerImg,
            width: 24,
            height: 88,
            length: '90%',
            offsetCenter: [0, 10]
          },
          axisLine: { // 坐标轴线
            lineStyle: {
              width: 10,
              color: [
                [1 / 5, '#67D470'],
                [7 / 10, '#1980EA'],
                [4 / 5, '#13448B'],
                [1, '#324C66']
              ]
            }
          },
          axisLabel: {
            show: true,
            color: '#3A578D',
            fontSize: 14,
            fontFamily: 'SourceHanSansCN-Regular',
            distance: -8
          },
          axisTick: {
            show: true,
            splitNumber: 5,
            distance: 0,
            lineStyle: {
              color: '#fff', // 用颜色渐变函数不起作用
              width: 1
            },
            length: -4
          },
          splitLine: {
            show: true,
            distance: 0,
            lineStyle: {
              color: '#fff',
              width: 1
            },
            length: -12
          },
          title: {
            show: false
          },
          detail: {
            fontSize: 20,
            fontFamily: 'YouSheBiaoTiHei',
            color: '#D5F2FF',
            align: 'right',
            offsetCenter: ['100%', 15],
            valueAnimation: true,
            formatter: '{value}' + '%'
          },
          data: [{
            value: item.data
          }]
        })
        seriesArr.push({
          type: 'gauge',
          radius: '40%',
          startAngle: 180,
          endAngle: 0,
          center: centerArr[index],
          splitLine: { // 表盘上的轴线
            show: false
          },
          axisLabel: { // 表盘上的刻度数值文字
            show: false
          },
          axisTick: { // 表盘上的刻度线
            show: false
          },
          axisLine: { // 坐标轴线
            lineStyle: {
              width: 16,
              color: [
                [1, '#20406A']
              ]
            }
          },
          z: 1
        })
      })
      let option = {
        grid: {
          top: 55,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: titleArr,
        series: seriesArr
      }
      if (document.getElementById('new_home_echart_6') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_6'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_6'))
      echart.setOption(option)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart2 () {
      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
      let seriesData = this.stateStatistics.fourState
      seriesData.map((el, i) => {
        el.value = el.status
        el.name = el.stateName
      })
      let total = this.stateStatistics.count
      let option = {
        color: colors,
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: {
          text: `{a|总数}\n{b|${total}}`,
          x: 'center',
          y: '39%',
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                lineHeight: 20,
                color: '#A8C3E6',
                fontFamily: 'SourceHanSansCN-Regular'
              },
              b: {
                fontSize: 30,
                lineHeight: 36,
                color: '#DBE7F6',
                fontFamily: 'YouSheBiaoTiHei'
              }
            }
          }
        },
        series: [{
          name: '设备运行统计',
          type: 'pie',
          radius: ['61%', '69%'],
          center: ['50%', '50%'],
          labelLine: {
            show: false
          },
          tooltip: {
            show: false
          },
          itemStyle: {
            borderColor: 'RGBA(27, 58, 98, .5)',
            borderWidth: 2
          },
          label: {
            show: false
          },
          selectedMode: 'single',
          selectedOffset: 20,
          data: seriesData
        }]
      }
      if (document.getElementById('new_home_echart_7') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_7'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_7'))
      echart.setOption(option)
      // let bu = 0
      // this.chart7Timer = setInterval(() => {
      //   if (bu > seriesData.length - 1) {
      //     bu = 0
      //   }
      //   echart.dispatchAction({
      //     type: 'select', // 默认显示江苏的提示框
      //     seriesIndex: 0, // 这行不能省
      //     dataIndex: bu
      //   })
      //   bu++
      // }, 2000)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart3 () {
      let barName = []
      let barData1 = []
      let barData2 = []
      let barData3 = []
      let barData4 = []
      this.areaDeviceStatus.map(el => {
        barName.push(el.process)
        barData1.push(el.running)
        barData2.push(el.pausing)
        barData3.push(el.shutdown)
        barData4.push(el.inTrouble)
      })
      let option = {
        grid: {
          top: 55,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          top: '0',
          right: '0',
          textStyle: {
            color: '#9BB9DD',
            fontSize: 16,
            lineHeight: 16
          },
          itemGap: 30,
          itemWidth: 8,
          itemHeight: 8,
          data: [{name: '运行', itemStyle: {color: '#1980EA'}}, {name: '待机', itemStyle: {color: '#67D470'}}, {name: '关机', itemStyle: {color: '#B4C9EF'}}, {name: '故障', itemStyle: {color: '#EF5252'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#3C5787'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#7591B2',
            fontSize: 16,
            lineHeight: 16,
            fontFamily: 'SourceHanSansCN-Regular',
            margin: 10
          },
          data: barName
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitNumber: 4,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B5C5D4',
            fontSize: 16,
            fontFamily: 'SourceHanSansCN-Regular'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [4, 3],
              color: '#455C86'
            }
          }
        },
        series: [
          {
            name: '运行',
            type: 'pictorialBar',
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [9, 4],
            symbolPosition: 'center',
            symbolOffset: [-24, 0],
            itemStyle: {
              color: '#1980EA'
            },
            data: barData1
          },
          {
            name: '待机',
            type: 'pictorialBar',
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [9, 4],
            symbolPosition: 'center',
            symbolOffset: [-9, 0],
            itemStyle: {
              color: '#67D470'
            },
            data: barData2
          },
          {
            name: '关机',
            type: 'pictorialBar',
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [9, 4],
            symbolPosition: 'center',
            symbolOffset: [9, 0],
            itemStyle: {
              color: '#B4C9EF'
            },
            data: barData3
          },
          {
            name: '故障',
            type: 'pictorialBar',
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [9, 4],
            symbolPosition: 'center',
            symbolOffset: [24, 0],
            itemStyle: {
              color: '#EF5252'
            },
            data: barData4
          }
        ]
      }
      if (document.getElementById('new_home_echart_8') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_8'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_8'))
      echart.setOption(option)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart4 () {
      let ydata = []
      let xdata = []
      let total = 0
      this.top10Of30Days.map(el => {
        total = Math.max(total, Number(el.count))
      })
      let data = []
      this.top10Of30Days.map(el => {
        ydata.push(el.device_name)
        xdata.push({name: el.device_name, value: el.count, sort: el.sort})
        data.push({value: total, num: el.count})
      })
      let img = {
        bg1: bg1,
        bg2: bg2,
        bg3: bg3,
        bg4: bg4
      }
      let colorArray = [
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#6B4C43',
          bottom: '#B8A590'
        },
        {
          top: '#3261FB',
          bottom: '#6BB5FB'
        }, {
          top: '#8C620F',
          bottom: '#C7B51C'
        }
      ]
      let option = {
        grid: {
          top: 13,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ydata,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          max: total
        },
        series: [{
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: '#FFFFFF',
            borderWidth: 5
          },
          label: {
            show: true,
            position: [-2, -32],
            formatter: (value) => {
              let o = value.data
              if (o.sort === 1) {
                return '{one|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
              } else if (o.sort === 2) {
                return '{two|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
              } else if (o.sort === 3) {
                return '{three|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
              } else {
                return '{four|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
              }
            },
            rich: {
              // 第一名
              one: {
                backgroundColor: {
                  image: img.bg1
                },
                color: '#fff',
                width: 60,
                height: 32,
                fontSize: 16,
                lineHeight: 16,
                align: 'center',
                fontFamily: 'YouSheBiaoTiHei'
              },
              // 第二名
              two: {
                backgroundColor: {
                  image: img.bg2
                },
                color: '#fff',
                width: 60,
                height: 32,
                fontSize: 16,
                lineHeight: 16,
                align: 'center',
                fontFamily: 'YouSheBiaoTiHei'
              },
              // 第三名
              three: {
                backgroundColor: {
                  image: img.bg3
                },
                color: '#fff',
                width: 60,
                height: 32,
                fontSize: 16,
                lineHeight: 16,
                align: 'center',
                fontFamily: 'YouSheBiaoTiHei'
              },
              four: {
                backgroundColor: {
                  image: img.bg4
                },
                color: '#fff',
                width: 60,
                height: 32,
                fontSize: 16,
                lineHeight: 16,
                align: 'center',
                fontFamily: 'YouSheBiaoTiHei'
              },
              a: {
                color: '#AEC3DC',
                height: 32,
                fontSize: 16,
                lineHeight: 16,
                padding: [0, 0, 0, 7],
                fontFamily: 'SourceHanSansCN-Regular'
              }
            }
          },
          barWidth: 3,
          itemStyle: {
            color: (params) => {
              let num = colorArray.length
              return {
                type: 'linear',
                colorStops: [
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }
                ]
                // globalCoord: false
              }
            }
          },
          data: xdata
        }, {
          name: '背景',
          type: 'bar',
          barWidth: 3,
          barGap: '-100%',
          itemStyle: {
            color: '#fff'
          },
          z: 1,
          label: {
            show: true,
            position: 'insideTopRight',
            offset: [0, -32],
            formatter: (value) => {
              return '{a|' + value.data.num + '}'
            },
            rich: {
              a: {
                height: 32,
                fontSize: 20,
                lineHeight: 20,
                align: 'left',
                fontFamily: 'YouSheBiaoTiHei',
                color: '#E1F6FF'
              }
            }
          },
          data: data
        }],
        dataZoom: [
          {
            yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 9, // 从头开始。
            endValue: 6 // 展示到第几个。
          }
        ]
      }
      if (document.getElementById('new_home_echart_9') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_9'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_9'))
      echart.setOption(option)
      this.chart9Timer = setInterval(() => {
        if (option.dataZoom[0].endValue === 0) {
          option.dataZoom[0].endValue = 6
          option.dataZoom[0].startValue = 9
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue - 1
          option.dataZoom[0].startValue = option.dataZoom[0].startValue - 1
        }
        echart.setOption(option)
      }, 2000)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.right_wraper
    _wh(100%, 100%)
.item_wraper
    _wh(100%, calc((100% - 40px) / 3))
    margin-bottom 20px
    &:last-child
        margin-bottom 0
.l_item_wraper
    _wh(calc(50% - 15.5px), 100%)
    .title_wraper
      background center / 100% url('../../../../images/bg-title_2.png') no-repeat
    .content_wraper
      padding 20px
      background center / 100% url('../../../../images/bg-m_2.png') no-repeat
.title_wraper
    _wh(100%, 42px)
    background center / 100% url('../../../../images/bg-title_1.png') no-repeat
    padding 6px 44px
    p
      font-size 24px
      font-family: 'YouSheBiaoTiHei';
      font-weight: 400;
      color: transparent;
      line-height 24px
      background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
      -webkit-background-clip: text;
      background-clip: text;
.content_wraper
    _wh(100%, calc(100% - 42px))
    background center / 100% url('../../../../images/bg-m_1.png') no-repeat
.echart_wraper
    _wh(100%, 100%)
.scroll_wrap
    _wh(100%, 100%)
    padding 20px 20px 5px 20px
.scroll_tab_1
  _wh(100%, 38px)
  background center / 100% url('../../../../images/table-bg_1.png') no-repeat
  li
    float left
    width 10%
    _font(16px,38px,#AFBED8,,center)
    font-family: 'SourceHanSansCN-Regular';
    font-weight: bold;
    font-style: italic;
    word-wrap break-word
    word-break break-all
    white-space nowrap
    padding 0 5px
    overflow hidden
    box-sizing border-box
    &:nth-child(1)
      width 5%
    &:nth-child(2)
      width 12%
    &:nth-child(3)
      width 14%
    &:nth-child(4)
      width 9%
    &:nth-child(5)
      width 10%
    &:nth-child(7)
      width 19%
    &:nth-child(9)
      width 11%
    .state
      display block
        _wh(20px, 14px)
    .state_name
      width calc(100% - 20px)
.scroll_container_1
  width 100%
  height calc(100% - 38px)
  overflow hidden
.scroll-ul_1
  li
    _wh(100%, 40px)
    border-bottom 1px solid rgba(122,159,224,0.17)
    &:nth-child(even)
      background rgba(31,46,73,0.7)
    &:nth-child(odd)
      background rgba(31,46,73,0.55)
    .scroll-ul_1_div
      float left
      _wh(10%, 39px)
      _fj(row, center)
      _font(16px, 16px, #B2BBD7,,center)
      font-family: 'SourceHanSansCN-Regular';
      font-style: italic;
      word-wrap break-word
      word-break break-all
      // white-space nowrap
      padding 0 5px
      overflow hidden
      &:nth-child(1)
        width 5%
      &:nth-child(2)
        width 12%
      &:nth-child(3)
        width 14%
      &:nth-child(4)
        width 9%
      &:nth-child(5)
        width 10%
      &:nth-child(7)
        width 19%
      &:nth-child(9)
        width 11%
      .state
        display block
        _wh(20px, 14px)
      .state_name
        width calc(100% - 20px)
.pie_wraper_2
    position absolute
    top 17px
    left 0
    _wh(222px, 222px)
    background center / 100% auto url('../../../../images/pie-bg_2.png') no-repeat
.pie_legend
  _wh(calc(100% - 200px), 100%)
  margin-left 200px
  _fj(row,)
  flex-wrap: wrap
.pie_legend_item
  width 50%
  padding 0 0px 2px 20px
.pie_legend_item_bg_1
  background top left / 18px auto url('../../../../images/fk_1.png') no-repeat
.pie_legend_item_bg_2
  background top left / 18px auto url('../../../../images/fk_2.png') no-repeat
.pie_legend_item_bg_3
  background top left / 18px auto url('../../../../images/fk_3.png') no-repeat
.pie_legend_item_bg_4
  background top left / 18px auto url('../../../../images/fk_5.png') no-repeat
.pie_legend_item_bg_5
  background top left / 18px auto url('../../../../images/fk_4.png') no-repeat
.pie_legend_item_bg_6
  background top left / 18px auto url('../../../../images/fk_6.png') no-repeat
.pie_legend_item_bg_7
  background top left / 18px auto url('../../../../images/fk_7.png') no-repeat
.pie_legend_txt_1
  font-size: 16px;
  line-height: 16px
  font-family: 'SourceHanSansCN-Regular';
  color: #9BB9DD;
  margin-bottom 8px
.pie_legend_txt_wraper
  width 100%
.pie_legend_txt_2
  font-size 20px
  line-height: 20px
  font-family: 'YouSheBiaoTiHei'
  color: transparent;
  background: linear-gradient(0deg, #E5F2FC 0%, #CDEAFC 53.3154296875%, #A0DBFC 100%);
  filter: drop-shadow(rgba(5,28,55,0.42) 0px 2px 8px);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom 8px
.pie_legend_txt_3
  font-size: 16px;
  line-height: 16px
  font-family: 'SourceHanSansCN-Regular';
  color: #9BB9DD;
  opacity: 0.5;
.content_wraper_1
  padding-bottom: 0
  .echart_wraper
    height calc(100% + 21px)
</style>
