<!--
 * @Version: 1.0
 * @Author: kery.chen
 * @Description: 总体概览右侧
 * @Date: 2021-11-30 11:08:50
 * @LastEditTime: 2023-08-22 08:57:33
 * @FilePath     : \\tcingiocpro\\src\\views\\privateOrder\\ecosphere\\components\\componentRight.vue
-->
<template>
  <div class="container">
    <div class="module-container">
      <div class="section-reportingProcess">
        <div class="processflow">
          <div class="processTitle">举报流程</div>
          <div class="processIcon">
            <div style="top: -33px; left: 303px">
              <img src="@/assets/ecosphere/网络举报事件.png" alt="" />
              <span style="margin-left: -40px; color: #fbe84f">
                网络举报事件
              </span>
            </div>
            <div style="top: 73px; left: 499px">
              <img src="@/assets/ecosphere/举报中心.png" alt="" />
              <span style="margin-left: -12px">举报中心</span>
            </div>
            <div style="top: 266px; left: 499px">
              <img src="@/assets/ecosphere/研判分析.png" alt="" />
              <span style="margin-left: -15px">研判分析</span>
            </div>
            <div style="top: 365px; left: 303px">
              <img src="@/assets/ecosphere/事件办理处置.png" alt="" />
              <span style="margin-left: -40px">事件办理处置</span>
            </div>
            <div style="top: 266px; left: 98px">
              <img src="@/assets/ecosphere/汇总结果.png" alt="" />
              <span style="margin-left: -15px">汇总结果</span>
            </div>
            <div style="top: 73px; left: 98px">
              <img src="@/assets/ecosphere/反馈举报人.png" alt="" />
              <span style="margin-left: -25px">反馈举报人</span>
            </div>
          </div>
          <div id="processRotate"></div>
        </div>
      </div>
      <div class="section">
        <module-title> 举报事件年度分类统计 </module-title>
        <div id="pie" />
      </div>
      <div class="section" style="padding-top: 35px">
        <module-title> 清朗专项行动数据统计</module-title>
        <div class="qlzfsjtj">
          <div class="qlzf-head">
            <div>处理有害信息数量(条)</div>
            <div>关闭直播平台违规账号(个)</div>
          </div>
          <div class="qlzf-box">
            <div class="qlzf-left">
              <div
                v-for="(item, index) in qlzfDataStatistics[0].data"
                :key="index"
                class="left-item"
              >
                <span>{{ item.num }}</span>
                <div class="processBox">
                  <!-- 分母是为了数据展示好看 要求这样 -->
                  <div
                    class="process"
                    :style="{ width: (item.num / 25000) * 251 + 'px' }"
                  ></div>
                  <div class="dark"></div>
                </div>
              </div>
            </div>
            <div class="qlzf-right">
              <div
                v-for="(item, index) in qlzfDataStatistics[1].data"
                :key="index"
                class="right-item"
              >
                <span class="month">{{ item.name }}</span>
                <div class="processBox">
                  <!-- 分母是为了数据展示好看 要求这样 -->
                  <div
                    class="process"
                    :style="{ width: (item.num / 230) * 251 + 'px' }"
                  ></div>
                  <div class="dark"></div>
                </div>
                <span class="num">{{ item.num }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section" style="padding-top: 35px">
        <module-title> 清朗专项行动动态 </module-title>
        <div @click.stop="itemClick($event)">
          <vueSeamlessScroll
            style="overflow: hidden"
            :data="qlzxdtList"
            :class-option="classOption"
          >
            <div class="zxxd">
              <div
                v-for="(item, index) in qlzxdtList"
                :key="index"
                style="width: 458px"
              >
                <div class="img-item" :data-curData="index">
                  <div
                    :style="{
                      backgroundImage: 'url(' + item.imgList[0].url + ')',
                    }"
                    :data-curData="index"
                    style="
                      width: 383px;
                      height: 291px;
                      background-size: 100% 100%;
                      position: relative;
                    "
                  >
                    <div class="footer" :data-curData="index">
                      {{ item.title }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </vueSeamlessScroll>
        </div>
        <div class="leftmh"></div>
        <div class="rightmh"></div>
      </div>
      <!-- 地图右边框 -->
      <div class="bcRight"></div>
      <!-- 弹窗 -->
      <div v-if="qlzfDialogFlag" class="qlzf-dialog">
        <div class="close" @click="qlzfDialogFlag = false"></div>
        <div class="title">{{ eldialogData.title }}</div>
        <div class="qlzf-dialog_left">
          <div
            v-for="(item, index) in eldialogData.imgList"
            :key="index"
            style="margin-bottom: 18px"
          >
            <img
              :src="item.url"
              style="width: 355px; height: 269px; background-size: 100% 100%"
            />
          </div>
        </div>
        <div class="right">
          <div class="qlzf-dialog_right" v-html="eldialogData.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
window.JSZip = require('jszip')
import { qlzxdtData } from './json'
import { getreportNum } from '@/api/common'
import { zhuanxiang, managescreen } from '@/api/zongzhi/st.js'
import { echartsJump } from '../../../../../public/static/echartsJump'
import { download } from "@/utils/safesoft"
import vueSeamlessScroll from 'vue-seamless-scroll'
import image from '../../../../assets/ecosphere/饼图标注.png'
import ModuleTitle from '../../common/ModuleTitle.vue'
export default {
  components: {
    vueSeamlessScroll,
    ModuleTitle
  },
  data() {
    return {
      imgList: [
        { url: require('@/assets/ecosphere/清朗专项行动图/1-1.png') },
        { url: require('@/assets/ecosphere/清朗专项行动图/1-2.png') },
        { url: require('@/assets/ecosphere/清朗专项行动图/1-3.png') },
        { url: require('@/assets/ecosphere/清朗专项行动图/1-4.png') }
      ],
      qlzxdtList: null,
      number: 0,
      reportingTimer: null,
      pieData: [
        { value: 25, name: '上级下发' },
        { value: 4, name: '部门转办' },
        { value: 8, name: '小程序' },
        { value: 4, name: '无效' }
      ],
      qlzfDataStatistics: [
        {
          title: '处理有害信息数量(条)',
          data: [
            {
              name: '2月',
              num: 19552
            },
            {
              name: '1月',
              num: 9938
            },
            {
              name: '12月',
              num: 16495
            },
            {
              name: '11月',
              num: 12379
            },
            {
              name: '10月',
              num: 12753
            },
            {
              name: '9月',
              num: 17786
            },
            {
              name: '8月',
              num: 16668
            },
            {
              name: '7月',
              num: 16427
            },
            {
              name: '6月',
              num: 15503
            },
            {
              name: '5月',
              num: 21079
            },
            {
              name: '4月',
              num: 13871
            },
            {
              name: '3月',
              num: 12166
            }

          ]
        },
        {
          title: '关闭直播平台违规账号(个)',
          data: [
            {
              name: '2月',
              num: 64
            },
            {
              name: '1月',
              num: 36
            },
            {
              name: '12月',
              num: 48
            },
            {
              name: '11月',
              num: 68
            },
            {
              name: '10月',
              num: 86
            },
            {
              name: '9月',
              num: 20
            },
            {
              name: '8月',
              num: 199
            },
            {
              name: '7月',
              num: 183
            },
            {
              name: '6月',
              num: 220
            },
            {
              name: '5月',
              num: 111
            },
            {
              name: '4月',
              num: 116
            },
            {
              name: '3月',
              num: 39
            }

          ]
        }
      ],
      qlzfDialogFlag: false,
      eldialogData: null,
      yhxiTotal: 0,
      wgptTotal: 0
    }
  },
  computed: {
    classOption() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {},
  destroyed() {
    clearInterval(this.reportingTimer)
  },
  mounted() {
    this.qlzxdtList = qlzxdtData
    // this.zhuanxiangList()
    // 开启定时器旋转
    this.reportingProcessTimer()
    
    this.inItPie()
    // getreportNum().then(res => {
    //   this.pieData[0].value = res.data.reportTotalCount - 12
    //   this.inItPie()
    // })
  },
  methods: {
    itemClick(e) {
      this.eldialogData = this.qlzxdtList[e.target.dataset.curdata]
      this.qlzfDialogFlag = true
    },
    changeImg(item, index) {
      item.index = index
    },
    // 清朗专项行动动态
    async zhuanxiangList(){
      let res = await zhuanxiang();
      let imgArr
      let qlzxdtList = JSON.parse(JSON.stringify(res.rows))
      this.qlzxdtList = qlzxdtList
      for(let i = 0; i < qlzxdtList.length; i++){
        imgArr = qlzxdtList[i].zhuanxiangImg
        imgArr = imgArr.split(',')
        this.qlzxdtList[i].zhuanxiangImg = imgArr
        for(let j = 0; j < imgArr.length; j++){
          imgArr[j] = process.env.VUE_APP_BASE_API3 + imgArr[j]
        }
      }
      // zhuanxiang().then(res => {
        
      //   console.log(this.qlzxdtList)
      // })
    },
    // 饼图
    inItPie() {
      const chartDom = document.getElementById('pie')
      const myChart = this.$echarts.init(chartDom)
      const optionSecond = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        emphasis: {
          show: true,
          formatter: '{fz41|{a}\n{az24|{b}个}',
          textStyle: {
            rich: {
              fz41: {
                fontSize: 41,
                padding: [0, 5, 0, 0]
              },
              fz24: {
                fontSize: 24
              }
            }
          }
        },
        color: ['#6bd3ff', '#2590fd', '#f6ff00', '#ffd616'],
        legend: {
          orient: 'vertical',
          icon: 'circle',
          left: '55%',
          top: '10%',
          itemGap: 50,
          padding: 5,
          formatter: (name) => {
            const data = this.pieData
            let target
            data.forEach((v) => {
              if (v.name === name) {
                target = v.value + '件'
              }
            })
            const arr = [
              `{a|${name}}{b|${String(target).replace(
                /(\d)(?=(\d{3})+$)/g,
                '$1,'
              )}}`
            ]
            return arr.join('\n')
          },
          textStyle: {
            rich: {
              a: {
                width: 180,
                fontSize: 28,
                // fontWeight: 'bold',
                color: '#ffffff'
              },
              b: {
                fontSize: 28,
                color: 'rgba(251,232,79)',
                backgroundColor: {
                  image: image
                },
                align: 'center'
              }
            },
            fontSize: 18,
            color: 'rgba(255, 255, 255, .5)'
          }
        },
        series: [
          {
            name: '举报事件年度分类统计',
            type: 'pie',
            radius: ['55%', '78%'],
            avoidLabelOverlap: false,
            center: ['24%', '48%'],
            label: {
              show: false,
              position: 'center',
              formatter: (params) => {
                return `{a| ${params.name}} \n {b|${params.value}}`
              },
              rich: {
                a: {
                  fontFamily: 'SourceHanSansCN-Regular',
                  color: '#ffffff',
                  fontSize: 28
                },
                b: {
                  fontFamily: 'DIN-Medium',
                  color: '#6ddefb',
                  fontSize: 32,
                  lineHeight: 50
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '25',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.pieData
          }
        ]
      }
      myChart.setOption(optionSecond, true)
      echartsJump(myChart, optionSecond)
    },
    // 定时器旋转+字体颜色变
    reportingProcessTimer() {
      let index = 0
      this.reportingTimer = setInterval(() => {
        this.number += 60
        const content = document.getElementById('processRotate')
        content.style.transform = 'rotateZ(' + this.number + 'deg)'
        if (index === 5) {
          document.getElementsByClassName(
            'processIcon'
          )[0].children[0].children[1].style.color = '#fbe84f'
          document.getElementsByClassName(
            'processIcon'
          )[0].children[5].children[1].style.color = '#ffffff'
        } else {
          document.getElementsByClassName('processIcon')[0].children[
            index + 1
          ].children[1].style.color = '#fbe84f'
          document.getElementsByClassName('processIcon')[0].children[
            index
          ].children[1].style.color = '#ffffff'
        }
        if (index > 4) {
          index = 0
        } else {
          index++
        }
      }, 4000)
    }
  }
}
</script>

<style lang="scss" scoped>
.bcRight {
  width: 210px;
  height: 924px;
  position: absolute;
  top: 156px;
  left: -220px;
  background: url("~@/assets/ecosphere/右.png") no-repeat;
  background-size: 100% 100%;
}
.container {
  width: 100%;
  height: 100%;
  .module-container {
    width: 1540px;
    height: 955px;
    float: right;
    margin: 130px 50px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    .section {
      width: 720px;
      height: 487px;
    }
    .section-reportingProcess {
      width: 720px;
      height: 500px;
      .processflow {
        position: relative;
        top: 26px;
        left: 70px;
        width: auto;
        height: 500px;
        background: url("~@/assets/ecosphere/环形图-bg.png") no-repeat 26px -8px;
        .processTitle {
          width: 90px;
          position: absolute;
          left: 305px;
          top: 180px;
          font-family: PangMenZhengDao, sans-serif;
          font-size: 44px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 41px;
          letter-spacing: 0;
          color: rgb(111, 226, 251);
          background-image: -webkit-linear-gradient(
            #feffff 0%,
            rgba(111, 226, 251, 1) 100%
          );
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .processIcon {
          div {
            position: absolute;
            img {
              display: block;
            }
            span {
              font-family: SourceHanSansCN-Regular;
              font-size: 28px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #ffffff;
            }
          }
        }
        #processRotate {
          top: 86px;
          left: 213px;
          position: absolute;
          height: 259px;
          width: 259px;
          background: url("~@/assets/ecosphere/高亮箭头.png") no-repeat;
          transform-origin: center;
          transition: transform 0.5s ease-in 0s;
        }
        @keyframes rotate {
          0% {
            transform: rotateZ(0deg);
            transform-origin: center;
          }
          8% {
            transform: rotateZ(60deg);
            transform-origin: center;
          }
          16% {
            transform: rotateZ(60deg);
            transform-origin: center;
          }
          24% {
            transform: rotateZ(120deg);
            transform-origin: center;
          }
          32% {
            transform: rotateZ(120deg);
            transform-origin: center;
          }
          40% {
            transform: rotateZ(180deg);
            transform-origin: center;
          }
          48% {
            transform: rotateZ(180deg);
            transform-origin: center;
          }
          56% {
            transform: rotateZ(240deg);
            transform-origin: center;
          }
          64% {
            transform: rotateZ(240deg);
            transform-origin: center;
          }
          72% {
            transform: rotateZ(300deg);
            transform-origin: center;
          }
          80% {
            transform: rotateZ(300deg);
            transform-origin: center;
          }
          89% {
            transform: rotateZ(360deg);
            transform-origin: center;
          }
          100% {
            transform: rotateZ(360deg);
            transform-origin: center;
          }
        }
      }
    }
    #pie {
      position: relative;
      top: 43px;
      left: 5px;
      width: 100%;
      height: 344px;
      background: url("~@/assets/ecosphere/bg-饼图.png") no-repeat;
    }
    .qlzfsjtj {
      margin-left: 54px;
      .qlzf-head {
        margin-top: 28px;
        margin-left: 73px;
        width: 555px;
        display: flex;
        justify-content: space-between;
        > div {
          text-align: center;
          width: 251px;
          height: 40px;
          line-height: 40px;
          color: #68cff9;
          font-family: SourceHanSansCN-Medium, sans-serif;
          font-size: 20px;
          background: url("~@/assets/ecosphere/二级标题-bg.png") no-repeat;
        }
      }
      .qlzf-box {
        width: 740px;
        height: 320px;
        margin-left: -31px;
        overflow: auto;
        display: flex;
        justify-content: space-between;
      }
      .qlzf-left {
        height: 291px;
        margin-top: 20px;
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .left-item {
          position: relative;
          left: 70px;
          width: 251px;
          margin-bottom: 44px;
          display: flex;
          align-items: center;
          > span {
            position: absolute;
            left: -86px;
            font-size: 22px;
            color: #65cd93;
          }
          .processBox {
            position: relative;
            height: 8px;
            width: 251px;
            overflow: hidden;
          }
          .dark {
            position: absolute;
            width: 251px;
            height: 8px;
            background-color: #557591;
            opacity: 0.5;
          }
          .process {
            position: absolute;
            right: 0;
            z-index: 999;
            height: 8px;
            background-image: linear-gradient(90deg, #8ceace 0%, #66cd93 100%);
            animation: move 2s ease-in;
          }
        }
      }
      .qlzf-right {
        height: 291px;
        width: 400px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .right-item {
          position: relative;
          left: 75px;
          width: 251px;
          margin-bottom: 44px;
          display: flex;
          align-items: center;
          .month {
            position: absolute;
            left: -55px;
            font-family: SourceHanSansCN-Medium, sans-serif;
            font-size: 24px;
            color: #ffffff;
          }
          .num {
            position: absolute;
            right: -55px;
            font-family: DIN-Medium, sans-serif;
            color: #50a2f8;
            font-size: 22px;
          }
          .processBox {
            position: relative;
            height: 8px;
            width: 251px;
            overflow: hidden;
          }
          .dark {
            position: absolute;
            width: 251px;
            height: 8px;
            background-color: #557591;
            opacity: 0.5;
          }
          .process {
            position: absolute;
            // right: 0;
            z-index: 999;
            height: 8px;
            background-image: linear-gradient(90deg, #50a1f8 0%, #94d8fb 100%);
            animation: move2 2s ease-in;
          }
        }
      }
    }
    .zxxd {
      margin-left: 20px;
      margin-top: 35px;
      width: 3350px;
      display: flex;
      justify-content: space-around;
      .img-item {
        margin-right: 20px;
        width: 457px;
        height: 365px;
        background: url("~@/assets/ecosphere/照片框.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .footer {
          position: absolute;
          width: 383px;
          height: 38px;
          line-height: 38px;
          background-color: #000000;
          opacity: 0.8;
          bottom: 0;
          font-size: 20px;
          color: #ffffff;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .dotList {
          top: 291px;
          position: absolute;
          z-index: 999;
          display: flex;
          .dot {
            margin-right: 20px;
            width: 13px;
            height: 13px;
            border-radius:50%;
          }
        }
      }
    }
    .qlzf-dialog {
      width: 1200px;
      height: 677px;
      position: relative;
      left: -107%;
      top: -83%;
      background: url("~@/assets/ecosphere/弹窗 拷贝.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      .close {
        position: absolute;
        right: 15px;
        top: 15px;
        cursor: pointer;
        height: 30px;
        width: 30px;
        z-index: 22;
      }
      .title {
        width: 1200px;
        height: 60px;
        line-height: 60px;
        text-indent: 43px;
        letter-spacing: 1px;
        color: #fbe84f;
        font-size: 24px;
        position: absolute;
      }
      &_left {
        overflow: auto;
        height: 550px;
        margin-top: 90px;
        margin-left: 30px;
      }
      .right {
        ::-webkit-scrollbar {
          width: 12px;
        }

        .qlzf-dialog_right {
          margin-top: 102px;
          margin-left: 61px;
          overflow: auto;
          text-align: justify;
          width: 736px;
          padding-right: 23px;
          height: 528px;
          font-family: SourceHanSansCN-Regular, sans-serif;
          font-size: 24px;
          line-height: 38px;
          letter-spacing: 1px;
          color: #ffffff;
        }
      }
    }
    .leftmh {
      position: relative;
      top: -362px;
      left: -28px;
      height: 365px;
      width: 20px;
      box-shadow: 21px 0 20px 15px #051831;
    }
    .rightmh {
      position: relative;
      top: -731px;
      left: 723px;
      height: 365px;
      width: 20px;
      box-shadow: -21px 0 20px 15px #051831;
    }
  }
}
@keyframes move {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0px);
  }
}
@keyframes move2 {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0px);
  }
}
</style>
