<template>
  <div id="banner" >
    <ul class="list">
      <li class="gjqk">
        <div class="banner-title two-title">
          <div class="left-title">业务数据归集总量与分布（单位：万）</div>
          <div class="right-title">数据编目总量</div>
        </div>
        <div class="banner-bottom">
          <div class="gj-echarts"  ref="gjEcharts"></div>
          <div class="tj">
            <div class="wn-class">

              <div class="name-all">
<!--                <div class="catalog_title"></div>-->
                <span class="name">空间数据编目</span>&nbsp&nbsp
                <span class="num-all">488</span>
                <span class="name">个</span>
              </div>
              <ul class="tj-list">
                <li v-for="item in gjqkWNArr" :key="item.name">
                  <div class="title">{{item.name}}&nbsp&nbsp<span class="num">{{item.number}}</span><span class="title">个</span></div>
                </li>
              </ul>
            </div>
            <div class="ww-class">
              <div class="name-all">
<!--                <div class="catalog_title"></div>-->
                <span class="name">业务数据编目</span>&nbsp&nbsp
                <span class="num-all">{{gjqkbusinessnumber}}</span>
                <span class="name">个</span></div>
              <ul class="tj-list">
                <li v-for="item in gjqkWWArr" :key="item.name">
                  <div class="title"><span class="title">{{item.name}}&nbsp&nbsp</span><span class="num">{{item.number}}</span><span class="title">个</span></div>

                </li>
              </ul>
            </div>


          </div>
        </div>
      </li>
      <li class="guiji">
        <div class="banner-title">
          业务数据归集动态量
        </div>
        <div class="guiji-echarts" ref="guijiEcharts"></div>
      </li>
      <li class="transferqk">
        <div class="banner-title">
          数据共享调用总量
        </div>
        <div class="transfer-list">
          <div  class="top-part">
            <div class="first-title">空间数据:</div>
            <div class="box-item">
              <ul ref="transferNumberTop-list">
                <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
                    v-for="(item,index) in orderNum"
                    :key="index">
       <span v-if="!isNaN(item)">
        <i ref="numberItemTopRef">0123456789</i>
       </span>
                  <span class="comma" v-else>{{item}}</span>
                </li>
              </ul>
            </div>
            <div class="first-title">次</div>
          </div>
          <div class="bottom-part">
              <div  class="high-part">
                <div class="first-title">业务数据:</div>
                <div class="box-item">
                  <ul ref="scrollNumberBottom-list">
                    <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
                        v-for="(item,index) in orderNum"
                        :key="index">
       <span v-if="!isNaN(item)">
        <i ref="numberItemBottomRef">0123456789</i>
       </span>
                      <span class="comma" v-else>{{item}}</span>
                    </li>
                  </ul>
                </div>

                <div class="first-title">次</div>
            </div>
              <div class="low-part">
                <div class="detail-part">转发数据共享调用总量:<span class="detail_num">{{transferqkBusinessTransmit}}</span>次</div>
                <div class="detail-part">委内业务数据共享调用总量:<span class="detail_num">{{transferqkBusinessWn}}</span>次</div>
              </div>
          </div>
        </div>
      </li>
    </ul>
    <ul class="list">
      <li class="lct">
        <div class="banner-title">
          数据每日治理情况
        </div>
        <div class="lct-body">
          <div>
            <ul class="left-list">
              <li v-for="item in leftCenterArr.slice(0,4)" :key="item.name">
                <div class="icon-bgc" :class="item.imageClass"></div>
                <div class="middle_title">{{item.name}}</div>
                <div class="middle_title">{{item.number}}条</div>
              </li>
            </ul>
          </div>
          <div class="line">
            <ul class="line-list">
              <li v-for="item in 4" :key="item">
                <span class="circle"></span>
                <span class="h-line">
                <span class="light-circle"></span>
              </span>

              </li>
            </ul>
            <div class="heng-2">
              <div class="line"></div>
            </div>
          </div>
          <div class="four-border">
            <ul class="four-list">
              <li v-for="item in fourCategoryArr" :key="item.name">
                <div class="icon-bgc" :class="item.iconClass"></div>
                <div>{{item.name}}</div>
                <div>{{item.number}}条</div>
                <div v-show="item.name != '数据安全'" class="one-line"></div>
              </li>
            </ul>
          </div>
          <div class="line line2">
            <ul class="line-list">
              <li v-for="item in 4" :key="item">
                <span class="circle"></span>
                <span class="h-line">
                 <span class="light-circle"></span>
              </span>

              </li>
            </ul>
            <div class="heng-2" >
              <div class="line"></div>
            </div>
          </div>
          <div>
            <ul class="left-list">
              <li v-for="item in leftCenterArr.slice(4,8)" :key="item.name">
                <div class="icon-bgc" :class="item.imageClass"></div>
                <div class="middle_title">{{item.name}}</div>
                <div class="middle_title">{{item.number}}条</div>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li class="share">
        <div class="banner-title">
          数据动态共享调用量
        </div>
        <!--        <div class="fr data">-->
        <!--          <div class="fl">-->
        <!--            <span>共享次数： </span>-->
        <!--            <span><strong class="num">8790</strong>个</span>-->
        <!--          </div>-->
        <!--          <div class="fl">-->
        <!--            <span>共享条数 </span>-->
        <!--            <span><strong class="num">8790</strong>个</span>-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="share-echarts" ref="shareEcharts"></div>
      </li>
    </ul>
    <ul class="list">
      <li class="zlqk">
        <div class="banner-title">
          数据实时治理情况
        </div>
        <div class="zlqk-div" @mouseover="stopTimer" @mouseout="startTimer">
          <ul ref="scrollListRef">
            <li v-for="item in zlqkArr" :key="item.RN">
              <span class="order">{{item.RN}}.</span>
              <span>{{item.CATALOGNAME}}</span>
              <span class="fr">{{ stateType(item.STATE)}}</span>
            </li>
          </ul>
        </div>
      </li>
      <li class="zl">
        <div class="banner-title">
          数据治理量
        </div>
        <div class="zl-echarts" ref="zlEcharts"></div>
      </li>
      <li class="t10">
        <div class="banner-title">
          数据共享TOP10
        </div>
        <div class="fr data">
          <div @click="changeRouter()" class="fl fl-all" v-bind:class="{'fl-dark':isA}">
            <span>空间</span>
          </div>
          <div @click="changeRouter()" class="fl fl-all" v-bind:class="{'fl-dark':!isA}">
            <span>业务</span>
          </div>

        </div>
        <div class="t10-echarts" ref="t10Echarts"></div>
      </li>
    </ul>
  </div>
</template>

<script>
import {scrollFun,stopScroll} from "@/unit/scroll";
import {option,gjTrend,zlEchartsOpt,qzjEchartsOpt,shareEchartsOpt,t10EchartsOpt} from "@/echarts/option";
import {setOptions} from "@/echarts/echarts";
import {requestInstance} from "@/service";
import {nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref} from "vue";
import {showMessage} from "@/unit/element-ui/tip";
let baseUrl =  ''

export default {
  name: "Banner",
  data() {
    return {

    }
  },

  setup(props,{emit}){
    const mkTimer = ref(null)
    const timer = ref({})
    const $request = requestInstance
    const transferqkBusiness = ref(0)
   const gjqkChartArr = ref( [
      {value: 0, name: '建设管理'},
      {value: 0, name: '房屋管理'},
      {value: 0, name: '城市管理'},
      {value: 0, name: '综合管理'}
    ])  //第一模块饼图数组
      const gjqkbusinessnumber=ref(0)   //第一模块 业务数据编目总量
      const guijiListChartArr = ref([])     //第二模块x轴数组
      const guijiNumberChartArr = ref([])      //第二模块数据量数组
     const transferqkSpace = ref(0)  //第三模块 数据共享调用总量  空间数据
     const transferqkBusinessTransmit = ref(0)  //第三模块 数据共享调用总量  空间数据
     const transferqkBusinessWn =ref(0)  //第三模块 数据共享调用总量  空间数据
     const gjqkWNArr = ref([
        {
          name:'委内空间数据编目',
          number:'376'
        },
        {
          name:'委外空间数据编目',
          number:'112'
        }
      ])
     const gjqkWWArr = ref([
        {
          name:'委内编目',
          number:'0'
        },
        {
          name:'委外转发编目',
          number:'0'
        }
      ])
     const zlqkArr = ref([
    ])

     const saveTableArr = ref([
        {
          qzj:'xxx',
          ysy:10020201,
          syl:'84.91%',
          syu:1000101,
          total:1122211212
        },
        {
          qzj:'xxx',
          ysy:10020201,
          syl:'84.96%',
          syu:1000101,
          total:1122211212
        },
        {
          qzj:'xxx',
          ysy:10020201,
          syl:'84.79%',
          syu:1000101,
          total:1122211212
        },
        {
          qzj:'xxx',
          ysy:10020201,
          syl:'84.76%',
          syu:1000101,
          total:1122211212
        },
        {
          qzj:'xxx',
          ysy:10020201,
          syl:'84.77%',
          syu:1000101,
          total:1122211212
        }
      ])
     const dataShareTop10Arr =ref([
         {
           name:'物业中心',
           value:100
         },
         {
           name:'安质监总站',
           value:90
         },
         {
           name:'审图中心',
           value:80
         },
         {
           name:'委监管处',
           value:75
         },
         {
           name:'委工程建设处',
           value:60
         },
         {
           name:'节能建材处',
           value:54
         },
         {
           name:'安监所',
           value:42
         },
         {
           name:'燃气处',
           value:30
         },
         {
           name:'委旧改处',
           value:23
         },
         {
           name:'住宅中心',
           value:10
         },
       ])
     const leftCenterArr = ref([
        {
          name:'建筑工程管理',
          imageClass:'jianzhu',
          number:'xxxx'
        },
        {
          name:'房屋管理',
          imageClass:'fangwu',
          number:'xxxx'
        },
        {
          name:'城市管理',
          imageClass:'city',
          number:'xxxx'
        },
        {
          name:'综合管理',
          imageClass:'zonghe',
          number:'xxxx'
        },
        {
          name:'委数据资源中心',
          imageClass:'canshu',
          number:'xxxx'
        },
        {
          name:'委档案中心',
          imageClass:'weidangan',
          number:'xxxx'
        },
        {
          name:'市大数据中心',
          imageClass:'dashuju',
          number:'xxxx'
        },
        {
          name:'市信用中心',
          imageClass:'shixinyong',
          number:'xxxx'
        }
      ])
     const fourCategoryArr = ref([
       {
         name:'数据质检',
         iconClass:'data-zj',
         number:'xxxx'
       },
       {
         name:'数据清洗',
         iconClass:'data-qx',
         number:'xxxx'
       },
       {
         name:'数据标签',
         iconClass:'data-bq',
         number:'0'
       },
       {
         name:'数据安全',
         iconClass:'data-aq',
         number:'0'
       }
     ])
     const orderNum = ref( ['0', '0', '0', ',', '0', '0', '0', ',', '0', '0', '0'])

      const isA = ref(false)    //第八模块
      const t10BusinessArrList = ref([])
      const t10BusinessArrNumber  =ref([])
      const t10SpaceArrList = ref([])
     const t10SpaceArrNumber = ref([])

      //第五模块
     const shareListArr= ref([])
     const shareSpaceArr = ref([])
     const shareBusinessArr = ref([])

      //第七模块
      const zlListArr=  ref([])
      const zlZJArr = ref([])
      const zlQXArr = ref([])
      const zlBQArr = ref([])
      const zlAQArr = ref([])
    const scrollListRef = ref(null)
    const gjEcharts = ref(null)
    const guijiEcharts = ref(null)
    const zlEcharts = ref(null)
    const t10Echarts = ref(null)
    const shareEcharts = ref(null)
    const numberItemTopRef = ref(null)
    const numberItemBottomRef = ref(null)

   function getValMax(val) {
      let max = Math.ceil(Math.max(...(dataShareTop10Arr.value.map(item3 => item3.value))))
      console.log(max>=20?20:max)
      return   max
    }

    function stopTimer(){
      stopScroll(scrollListRef.value.timer)
    }
    function setNumberTransformTop () {
      const numberItems = numberItemTopRef.value // 拿到数字的ref，计算元素数量

      const numberArr = orderNum.value.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    }
    function  setNumberTransformBottom () {
      const numberItems = numberItemBottomRef.value // 拿到数字的ref，计算元素数量
      const numberArr = orderNum.value.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    }
    // 处理总订单数字
    function  toOrderNum(num) {
      num = num.toString()
      // 把订单数变成字符串
      if (num.length < 9) {
        num = '0' + num // 如未满八位数，添加"0"补位
        toOrderNum(num) // 递归添加"0"补位
      } else if (num.length === 9) {
        // 订单数中加入逗号
        num = num.slice(0, 3) + ',' + num.slice(3, 6) + ',' + num.slice(6, 9)
        orderNum.value = num.split('') // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        showMessage({
          type:'warning',
          message:'共享数据调用总量过大，请联系管理员'
        })
      }
    }

    function  firstNum(num){
      toOrderNum(num);
      setNumberTransformTop()
    }
    function  secondNum(num){
     toOrderNum(num);
      setNumberTransformBottom()
    }

    function  changeRouter(){
      if(isA.value){
        t10EchartsOpt.yAxis.data = t10BusinessArrList.value;
        t10EchartsOpt.series[0].data = t10BusinessArrNumber.value;
        setOptions(t10Echarts.value,t10EchartsOpt)
        isA.value = !isA.value
      }else{
        t10EchartsOpt.yAxis.data = t10SpaceArrList.value;
        t10EchartsOpt.series[0].data = t10SpaceArrNumber.value;
        setOptions(t10Echarts.value,t10EchartsOpt)
        isA.value = !isA.value
      }
    }

    function  updateToParent(){

      const secounds = 5
      let num = 0
      clearInterval(mkTimer.value)
      mkTimer.value = setInterval(() => {
        if(num < secounds) {
          num++
        }else {
          clearInterval(mkTimer.value)
          //第三模块 数据共享调用总量  --空间
         $request({
            url:baseUrl+'/LogVisualization/getCellSituation_space',
            method:'post',
            data:{
            }
          }).then(response => {
            transferqkSpace.value = response.msg[0].Rows[0].data;
           firstNum(transferqkSpace.value);
          })

          // 第三模块 数据共享调用总量  --业务
         $request({
            url:baseUrl +'/LogVisualization/getCellSituation_business',
            method:'post',
            data:{
            }
          }).then(response => {
            transferqkBusiness.value = response.msg[0].Rows[0].sum;
            transferqkBusinessTransmit.value= response.msg[0].Rows[0].transmit;
            transferqkBusinessWn.value= response.msg[0].Rows[0].wn;
           secondNum(transferqkBusiness.value);
          })
        }
      }, 100)

    }

    function updateToZero(){
      firstNum('000000000');
      secondNum('000000000');
    }
    function updatetransferqk(){
      Promise.all([
       updateToZero()
      ]).then(res => {
        /* 你的逻辑代码 */
        updateToParent();
      })
    }

    function startTimer(){
      scrollFun(scrollListRef.value,'top',-scrollListRef.value.clientHeight + scrollListRef.value.parentElement.clientHeight)

    }
    onBeforeUnmount(() => {
      clearInterval(timer.value)
      clearInterval(mkTimer.value)
    })
    onMounted(() => {
      clearInterval(timer.value)
      timer.value = setInterval(updatetransferqk, 30000);
      getValMax()
      let ele = gjEcharts.value
      setOptions(ele,option)
      setOptions(gjEcharts.value,gjTrend)
      setOptions(zlEcharts.value,zlEchartsOpt)
      setOptions(t10Echarts.value,t10EchartsOpt)
      //setOptions(this.$refs['qzj-echarts'],qzjEchartsOpt)
      setOptions(shareEcharts.value,shareEchartsOpt)



     $request({
        url:baseUrl + '/zljc/getInspectionMainList',
        method:'post',
        data:{
          NAME:'',
          STATE:'',
          pageIndex:1,
          pageSize:1000
        }
      }).then(response => {
        zlqkArr.value = response.msg[0].Rows
        nextTick(() => {
          startTimer()
        })
      })

      //第一模块 业务数据数量饼图
     $request({
        url:baseUrl +'/LogVisualization/getWnDataSortCount',
        method:'post',
        data:{
        }
      }).then(response => {
        var dataArr = response.msg[0].Rows[0];
        gjqkChartArr.value[0].value = dataArr.js;
       gjqkChartArr.value[1].value = dataArr.fw;
       gjqkChartArr.value[2].value = dataArr.cs;
       gjqkChartArr.value[3].value = dataArr.zh;
        option.series[0].data = gjqkChartArr.value;
        option.series[0].label.normal.formatter = (dataArr.js * 1  +  dataArr.fw * 1 +  dataArr.cs + dataArr.zh).toString();
        setOptions(ele,option)
      })
      //第一模块 业务数据编目总量
     $request({
        url:baseUrl+'/LogVisualization/getBusinessCount',
        method:'post',
        data:{
        }
      }).then(response => {
       gjqkbusinessnumber.value = response.msg[0].Rows[0].data
      })

      //第一模块 委内编目总量
     $request({
        url:baseUrl+'/LogVisualization/getBusinessCount_wn',
        method:'post',
        data:{
        }
      }).then(response => {
       gjqkWWArr.value[1].number = response.msg[0].Rows[0].data
      })

      //第一模块 委外数据编目总量
     $request({
        url:baseUrl+'/LogVisualization/getBusinessCount_zf',
        method:'post',
        data:{
        }
      }).then(response => {
        gjqkWWArr.value[0].number = response.msg[0].Rows[0].data
      })

      //第二模块 业务数据归集动态量
     $request({
        url:baseUrl+'/LogVisualization/getCollectsTrend',
        method:'post',
        data:{
        }
      }).then(response => {
        var tempdata = response.msg[0].Rows;
        for(var i=0;i<tempdata.length;i++){
          guijiListChartArr.value.push(tempdata[i].date);
         guijiNumberChartArr.value.push(tempdata[i].sum);
        }
        gjTrend.xAxis.data = guijiListChartArr.value;
        gjTrend.series[0].data = guijiNumberChartArr.value;
        setOptions(guijiEcharts.value,gjTrend)
      })

      //第三模块 数据共享调用总量  --空间
     $request({
        url:baseUrl+'/LogVisualization/getCellSituation_space',
        method:'post',
        data:{
        }
      }).then(response => {
        transferqkSpace.value = response.msg[0].Rows[0].data;
        firstNum(transferqkSpace.value);
      })

      // 第三模块 数据共享调用总量  --业务
     $request({
        url:baseUrl+'/LogVisualization/getCellSituation_business',
        method:'post',
        data:{
        }
      }).then(response => {
        transferqkBusiness.value = response.msg[0].Rows[0].sum;
        transferqkBusinessTransmit.value= response.msg[0].Rows[0].transmit;
        transferqkBusinessWn.value= response.msg[0].Rows[0].wn;
       secondNum(transferqkBusiness.value);
      })

      // 第四模块 左半边(1，2，3，4)  --
     $request({
        url:baseUrl+'/LogVisualization/getWnDataSum',
        method:'post',
        data:{
        }
      }).then(response => {
        var dataArr = response.msg[0].Rows[0];
       leftCenterArr.value[0].number = dataArr.js;
       leftCenterArr.value[1].number = dataArr.fw;
       leftCenterArr.value[2].number = dataArr.cs;
       leftCenterArr.value[3].number = dataArr.zh;
      })
      // 第四模块 中间(5)  --
     $request({
        url:baseUrl+'/LogVisualization/getQCSum',
        method:'post',
        data:{
        }
      }).then(response => {
        var dataArr = response.msg[0].Rows[0].data;
        fourCategoryArr.value[0].number = dataArr;
      })
      // 第四模块 中间(6)  --
     $request({
        url:baseUrl+'/LogVisualization/getDataClearSum',
        method:'post',
        data:{
        }
      }).then(response => {
        var dataArr = response.msg[0].Rows[0].data;
       fourCategoryArr.value[1].number = dataArr;
      })
      // 第四模块 中间(7)  --
     $request({
        url:baseUrl+'/LogVisualization/getDataLabelSum',
        method:'post',
        data:{
        }
      }).then(response => {
        var dataArr = response.msg[0].Rows[0].data;
       fourCategoryArr.value[2].number = dataArr;
      })
      // 第四模块 中间(8)  --
     $request({
        url:baseUrl+'/LogVisualization/getDataSafetySum',
        method:'post',
        data:{
        }
      }).then(response => {
        var dataArr = response.msg[0].Rows[0].data;
        fourCategoryArr.value[3].number = dataArr;
      })
      // 第四模块 右半边(5，6，7，8)  --
     $request({
        url:baseUrl+'/LogVisualization/getConsumerSum',
        method:'post',
        data:{
        }
      }).then(response => {
        var dataArr = response.msg[0].Rows[0];
        leftCenterArr.value[4].number = dataArr.DataResource;
       leftCenterArr.value[5].number = dataArr.Record;
       leftCenterArr.value[6].number = dataArr.BigData;
       leftCenterArr.value[7].number = dataArr.Credit;
      })

      //第五模块 空间
     $request({
        url:baseUrl+'/LogVisualization/getShareSituation_space',
        method:'post',
        data:{
        }
      }).then(response => {
        var tempdata = response.msg[0].Rows;
        for(var i=0;i<tempdata.length;i++){
          shareSpaceArr.value.push(tempdata[i].count);
        }
        shareEchartsOpt.series[0].data = shareSpaceArr.value;
        setOptions(shareEcharts.value,shareEchartsOpt)
      })

      //第五模块 业务
     $request({
        url:baseUrl+'/LogVisualization/getShareSituation_business',
        method:'post',
        data:{
        }
      }).then(response => {
        var tempdata = response.msg[0].Rows;
        shareListArr.value = [];
        for(var i=0;i<tempdata.length;i++){

          shareListArr.value.push(tempdata[i].date);
          shareBusinessArr.value.push(tempdata[i].count);
        }
        shareEchartsOpt.xAxis.data = shareListArr.value;
        shareEchartsOpt.series[1].data = shareBusinessArr.value;
        setOptions(shareEcharts.value,shareEchartsOpt)
      })

      //第七模块 质检
     $request({
        url:baseUrl+'/LogVisualization/getGovernSituation',
        method:'post',
        data:{
        }
      }).then(response => {
        var tempdata = response.msg[0].Rows;
        for(var i=0;i<tempdata.length;i++){
         zlZJArr.value.push(tempdata[i].sum);
        }
        zlEchartsOpt.series[0].data = zlZJArr.value;
        setOptions(zlEcharts.value,zlEchartsOpt)
      })
      //第七模块 清洗
     $request({
        url:baseUrl+'/LogVisualization/getClearSituation',
        method:'post',
        data:{
        }
      }).then(response => {
        var tempdata = response.msg[0].Rows;
        zlListArr.value = [];
        for(var i=0;i<tempdata.length;i++){
          zlListArr.value.push(tempdata[i].date);
         zlQXArr.value.push(tempdata[i].sum);
        }
        zlEchartsOpt.xAxis[0].data = zlListArr.value;
        zlEchartsOpt.series[1].data = zlQXArr.value;
        setOptions(zlEcharts.value,zlEchartsOpt)
      })
      //第七模块 标签
     $request({
        url:baseUrl+'/LogVisualization/getLabelSituation',
        method:'post',
        data:{
        }
      }).then(response => {
        var tempdata = response.msg[0].Rows;
        zlListArr.value = [];
        for(var i=0;i<tempdata.length;i++){
          //this.zlListArr.push(tempdata[i].date);
          zlBQArr.value.push(tempdata[i].sum);
        }
        //zlEchartsOpt.xAxis[0].data = this.zlListArr;
        zlEchartsOpt.series[2].data = zlBQArr.value;
        setOptions(zlEcharts.value,zlEchartsOpt)
      })
      //第七模块 安全
     $request({
        url:baseUrl+'/LogVisualization/getSafetySituation',
        method:'post',
        data:{
        }
      }).then(response => {
        var tempdata = response.msg[0].Rows;
        zlListArr.value = [];
        for(var i=0;i<tempdata.length;i++){
          //this.zlListArr.push(tempdata[i].date);
          zlAQArr.value.push(tempdata[i].sum);
        }
        //zlEchartsOpt.xAxis[0].data = this.zlListArr;
        zlEchartsOpt.series[3].data = zlAQArr.value;
        setOptions(zlEcharts.value,zlEchartsOpt)
      })
      //第八模块 数据共享TOP10
     $request({
        url:baseUrl+'/LogVisualization/getDataShard_business',
        method:'post',
        data:{
        }
      }).then(response => {
        const tempT10data = response.msg[0].Rows;
        for(let i=0; i<tempT10data.length; i++){
         t10BusinessArrList.value.push(tempT10data[i].NAME);
          t10BusinessArrNumber.value.push(tempT10data[i].COUNT);
        }
        t10EchartsOpt.yAxis.data = t10BusinessArrList.value;
        t10EchartsOpt.series[0].data = t10BusinessArrNumber.value;
        setOptions(t10Echarts.value,t10EchartsOpt)
      })
//第八模块 数据共享TOP10
     $request({
        url:baseUrl+'/LogVisualization/getDataShard_space',
        method:'post',
        data:{
        }
      }).then(response => {
        const tempT10data = response.msg[0].Rows;
        for(let i=0; i<tempT10data.length; i++){
          t10SpaceArrList.value.push(tempT10data[i].NAME);
          t10SpaceArrNumber.value.push(tempT10data[i].COUNT);
        }
      })
    })
    return {
      scrollListRef,
      startTimer,
      gjEcharts,
      guijiEcharts,
      zlEcharts,
      t10Echarts,
      shareEcharts,
      numberItemBottomRef,
      changeRouter,
      stopTimer,
      transferqkBusiness,
      gjqkChartArr,gjqkbusinessnumber,guijiListChartArr,guijiNumberChartArr,transferqkSpace,
      transferqkBusinessTransmit,transferqkBusinessWn,gjqkWNArr,gjqkWWArr,zlqkArr,
      saveTableArr,dataShareTop10Arr,leftCenterArr,fourCategoryArr,orderNum,isA,t10BusinessArrList,
      t10BusinessArrNumber,t10SpaceArrList,shareBusinessArr,shareListArr,shareSpaceArr,zlListArr,
      zlZJArr,zlQXArr,zlBQArr,zlAQArr,
      numberItemTopRef

    }
  },
  mounted() {


    // window.localStorage.getItem("ptjk_userkeycode");

    // setTimeout(() => {
    //   this.firstNum(12345678);
    //   this.secondNum(12345678);
    // }, 500);


    //第六模块  数据实时治理情况

  },

  methods:{
    stateType(state){
      let obj = {
        '0':'未配置',
        '1':'正常运行',
        '2':'停止',
        '5':'质检中',
        '10':'异常'
      }
      return obj[state]

    }

  }
}
</script>

<style scoped lang="scss">
//100px为每个li的高度,90为header为高度，20为ul的margin，20为li的margin
//(100vh - 90px - 20px - 60px)/ 3 & 2为li的高度  100px * 4为4个li所占的高度,相减除以3是间距
$margin:calc(100px + 50px + ((100vh - 90px - 20px - 60px)/ 3 * 2 - 100px * 4 - 40px)/3);
$margin12:calc(200px + 50px +  2  * ((100vh - 90px - 20px - 60px)/ 3 * 2 - 100px * 4 - 40px)/3);
$margin13:calc(300px + 50px + 3  * ((100vh - 90px - 20px - 60px)/ 3 * 2 - 100px * 4 - 40px)/3);
$margin14:calc(400px + 50px + ((100vh - 90px - 20px - 60px)/ 3 * 2 - 100px * 4 - 40px)/3);
$margin3:calc(((100% - 60px)/ 3 * 2 + 20px - 100px * 4 - 40px) / 3  - 112px) ;
$margin4:calc(((100% - 60px)/ 3 * 2 + 20px - 100px * 4 - 40px) / 3  - 112px - (112px + 34px)) ;
@keyframes firstCircle {
  0%{

  }
  33.33%{
    top: 50px;
    left: 50px;
  }
  66.66%{
    top:100px;
    left: 50px;
  }
  100%{
    top:100px;
    left: 50px + 70px;
  }
}
@keyframes secondCircle {
  0%{

  }
  33.33%{
    top: $margin;
    left: 50px;
  }
  66.66%{
    top:100px;
    left: 50px;
  }
  100%{
    top:100px;
    left: 50px + 70px;
  }
}
@keyframes thirdCircle {
  0%{

  }
  33.33%{
    top: $margin12;
    left: 50px;
  }
  66.66%{
    top:100px;
    left: 50px;
  }
  100%{
    top:100px;
    left: 50px + 70px;
  }
}
@keyframes fourthCircle {
  0%{

  }
  33.33%{
    top: $margin13;
    left: 50px;
  }
  66.66%{
    top:100px;
    left: 50px;
  }
  100%{
    top:100px;
    left: 50px + 70px;
  }
}

@keyframes centerAni {
  0% {
    top: 24px ;
    left: 168px;

  }
  100% {

    top: 376px;
    left: 168px;
  }
}
.line{
  position: relative;
}
.line2{
  .line-list{
    li:first-child{
      .h-line .light-circle{
        top: 50px;
        animation: firstCircle reverse linear infinite 2s;
        //animation: firstCircle reverse linear infinite   2s;
      }
    }

    li:nth-child(2){
      .h-line .light-circle{
        top: $margin;
        animation: secondCircle reverse linear infinite 2s;
      }

    }
    li:nth-child(3){
      .h-line .light-circle{
        top: $margin12;
        //top: $margin3 !important;
        //left: 20px !important;
        animation: thirdCircle reverse linear infinite 2s;
      }

    }
    li:nth-child(4){
      .h-line .light-circle{
        top: $margin13 ;
        //left: ;
        //top: $margin3 !important;
        //left: 20px !important;
        animation: fourthCircle reverse linear infinite 2s;
      }

    }
  }
}
.line-list{
  li:first-child{
    .h-line .light-circle{
      top: 50px;

      animation: firstCircle linear infinite  2s;
    }
  }

  li:nth-child(2){
    .h-line .light-circle{
      top: $margin;
      animation: secondCircle linear infinite 2s;
    }

  }
  li:nth-child(3){
    .h-line .light-circle{
      top: $margin12;
      //left: 20px !important;
      animation: thirdCircle linear infinite 2s;
    }

  }
  li:nth-child(4){
    .h-line .light-circle{
      top: $margin13 ;

      //left: ;
      //top: $margin3 !important;
      //left: 20px !important;
      animation: fourthCircle linear infinite 2s;
    }

  }
}
#banner{
  display: flex;
  padding-left: 20px;
  padding-right: 20px;

  .list{
    height: 100%;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;

    flex-direction: column;
    &:nth-child(3){
      flex: 1;

    }
    &:nth-child(2),&:nth-child(1){
      width: max-content;
      flex: 1;
    }
   &:nth-child(2),&:nth-child(3){

     margin-left: 20px;
   }
    //margin-right: 20px;
    >li{

     justify-content: center;
      padding: 10px;
      min-width: 100%;
      box-sizing: border-box;

      border: 1px solid #25a9ee;
      height: calc((100% - 60px) / 3);
      //width: calc((100% - 60px )/ 3);
      //&.zlqk,&.zl,&.t10{
      //    width: 30% !important;
      //}
      &.lct{
        .lct-body{
          .heng-2{
            font-size: 0;
            height: max-content;
            .circle{
              display: inline-block;
              vertical-align: middle;
              margin-top: 0;
              margin-left: 2px;
            }
            .line{
              display: inline-block;
              height: 0;
              width:70px;

              border: 1px dashed #25a9ee;
            }
            position: absolute;
            right: 0px;
            top:100px;
            //transform: translateY(-50%);/**/

          }
          .line2{
            transform: rotate(180deg);
            .line-list{
              li{
                //margin-top: 20px;
                //margin-bottom: 0;
                .heng-2{

                  top: 100px;
                }
              }
            }
          }
          .line-list{
            position: relative;
            margin-right: 70px;
            &::after{
              position: absolute;
              right: 0px;
              top: 50px;
              content: "";
              height: calc(100px * 4 + 60px);
              width: 0px;
              border: 1px dashed #25a9ee;
            }

            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            li{
              display: flex;
              //position: relative;
              align-items: center;
              font-size: 0;
              height: 100px;
              //margin-bottom: 20px;
              .circle{

                position: relative;

                height:22px;
                width: 22px;
                box-sizing: border-box;
                border-radius: 50%;
                border: 1px dashed #61ebfd;
                //margin-top: 10px;
                &::after{
                  border-radius: 50%;
                  content: "";
                  position: absolute;
                  height: 10px;
                  width: 10px;
                  background-color: #61ebfd;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%,-50%);
                }
              }
              .h-line{

                width: 30px;
                height: 0px;
                //margin-top: 10px;
                border: 1px dashed #61ebfd;
                //position: relative;
                .light-circle{
                  margin-top: -5px;
                  z-index: 1;
                  //top: -4px;
                  //////top: -4px;
                  left: 22px;
                  //top: -4px;
                  //left: 24px;
                  //top: -4px;
                  //left: 30px;
                  position: absolute;
                  height: 10px;
                  width: 10px;
                  background: #61ebfd;
                  border-radius: 50%;
                  box-shadow: 1px 1px 10px rgba(97,235,253,0.5);
                }
              }
            }
          }
          .four-border{
            height: 80%;

            align-self: center;
            border: 1px solid #61ebfd;
            .four-list{
              height: 100%;
              display: flex;
              margin-left:20px;
              margin-right:20px;
              flex-direction: column;
              justify-content: center;
              li{
                position: relative;
                z-index: 2;

                .icon-bgc{
                  width: 30px;
                  height: 30px;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  margin: 10px auto;
                  &.data-zj{

                    background-image: url("@/assets/imgs/home/质检.png");
                  }
                  &.data-qx{

                    background-image: url("@/assets/imgs/home/清洗.png");
                  }
                  &.data-bq{

                    background-image: url("@/assets/imgs/home/数据标签.png");
                  }
                  &.data-aq{

                    background-image: url("@/assets/imgs/home/数据安全.png");
                  }
                }
                .one-line{
                  display: inline-block;
                  height: 20px;
                  width:0;
                  margin-top: 0px;
                  border: 1px dashed #25a9ee;
                }
                text-align: center;
                background: url("@/assets/imgs/home/组 101.png") no-repeat;
                background-size: 100% 100%;
                height: 90px;
                width: 90px;
                color: #fff;
                margin-top: 10px;
                margin-bottom: 10px;
                font-size: 15px;
                font-weight: bold;
              }
            }
          }

          .left-list,.right-list{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            li{
              display: flex;
              flex-direction: column;
              justify-content: center;
              height: 100px;
              margin-top: 10px;
              margin-bottom: 10px;
              text-align: center;
              //width: 120px;
              .icon-bgc{

                margin: 0 auto;
                margin-bottom: 6px;
                height: 42px;
                width: 42px;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                &.jianzhu{
                  background-image: url("@/assets/imgs/home/吊车.png");
                }
                &.fangwu{
                  background-image: url("@/assets/imgs/home/建筑.png");
                }
                &.city{
                  background-image: url("@/assets/imgs/home/城市 (2)-01.png");
                }
                &.zonghe{
                  background-image: url("@/assets/imgs/home/综合.png");
                }
                &.canshu{
                  background-image: url("@/assets/imgs/home/数据.png");
                }
                &.weidangan{
                  background-image: url("@/assets/imgs/home/档案查询.png");
                }
                &.dashuju{
                  background-image: url("@/assets/imgs/home/大数据 数据库 数据中心.png");
                }
                &.shixinyong{
                  background-image: url("@/assets/imgs/home/信用.png");
                }
              }
              .middle_title{
                font-size: 0.8em;
              }
              color: #ffffff;
            }

          }
          display: flex;
          justify-content: center;
          height: calc((100% - 40px));
        }

        height: calc((100% - 60px)/ 3 * 2 + 20px);
      }

      &.share{
        //.data{
        //  margin-top: -10px;
        //  color: #fff;
        //  div{
        //
        //    padding:2px 6px;
        //    .num{
        //      color: #25a9ee;
        //    }
        //    line-height: 24px;
        //    border: 1px solid #25a9ee;
        //    margin-left: 20px;
        //  }
        //}
        .share-echarts{
          flex: 1;
          height: 240px;
        }
      }
      //&.t10{
      //  ul{
      //    li{
      //      .progress{
      //        &.center{
      //          background-color:#18b9e7;
      //        }
      //        &.topb{
      //          background-color: #2f7ac8;
      //        }
      //        height: 16px;
      //        width: 10px;
      //        background-color: #0be6f5;
      //        transform: skewX(-30deg);
      //        margin-right: 6px;
      //
      //      }
      //      height: 24px;
      //      .name{
      //        margin-right: 20px;
      //        width: 7em;
      //        text-align: right;
      //      }
      //      color: #fff;
      //      display: flex;
      //    }
      //  }
      //}

      //width: calc();
      font-size: 15px;
      margin-bottom: 20px;
      //margin-right: 20px;
      //flex: 1;
      &.gjqk{
        color: #25a9ee;
        .two-title{
          display: flex;
          .left-title{
            width: calc((100%) * 55/ 100);
          }
          .right-title{
            width: calc((100%) * 45/ 100);
          }
        }
        .banner-bottom{
          display: flex;
          .tj{
            width: max-content;

            //width: calc((100%) * 45/ 100);

            flex-direction: column;
            justify-content: space-around;
            .wn-class,.ww-class{
              padding: 10px;
              margin-bottom: 10px;
              //padding-left: 20px;
              border: 1px solid #25a9ee;
              .name-all{
                color:#fff;
                display:flex;
                flex-direction: row;
                vertical-align: bottom;
              }
              .catalog_title{
                width: 1.5em;
                margin-right: 1em;
                margin-top: 0.8em;
                background: url('@/assets/imgs/home/catalog_title.png') center no-repeat;
                background-size: 100% 100%;
              }
              .name{
                font-size: 1.2em;
                color:#25a9ee;
                padding-top: 0.6em;
              }
              .num-all{
                color: #fff;
                font-weight: bold;
                font-size: 2em;
              }
              .tj-list {
                display: flex;
                flex-wrap: wrap;
                //padding-top:10px;
                //padding-left:40px;
                flex-direction: column;
                justify-content: space-between;
                li{
                  white-space: normal;
                  box-sizing: border-box;
                  display: flex;
                  //margin-bottom: 5px;
                  //margin-right: 10px;
                  padding-left: 2em;
                  .title{
                    white-space: nowrap;
                    font-size: 1em;
                    color: #25a9ee;
                  }
                  .num{
                    color: #fff;
                    font-weight: bold;
                    font-size: 1.2em;
                  }
                  //.icon{
                  //  width: 12px;
                  //  height: 12px;
                  //  border-radius: 6px;
                  //  margin-right: 10px;
                  //  margin-top: 10px;
                  //}
                }
              }

            }
          }
          .gj-echarts{
            flex: 1;
            height: 240px;
          }
        }


      }
      &.zlqk{
        .zlqk-div{
          position: relative;
          margin-top: 40px;
          height: 200px;
          overflow: hidden;
        }
        ul{
          width: 100%;
          position: absolute;

          li{

            padding-left: 10px;
            padding-right: 10px;
            color: #fff;
            height: 40px;
            line-height: 40px;
            .order{
              margin-right: 6px;
            }
            &:nth-child(2n+1){
              background-color:#092f56;
            }
          }
        }
      }
      &.transferqk{


        .transfer-list{
          display: flex;
          height: calc((100% - 40px));
          flex-direction: column;
          justify-content: space-between;
          .top-part{
            height: calc((100%) * 35/ 100);
            width: calc((100%));
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            background: url('@/assets/imgs/home/矩形小框.png') center no-repeat;
            background-size: 100% 100%;
            .first-title{
              white-space: nowrap;
              font-size: 1.2em;
              margin-right: 5px;
              color: #25a9ee;
            }

            .box-item {
              position: relative;
              height: 100px;
              font-size: 54px;
              line-height: 41px;
              text-align: center;
              list-style: none;
              color: #2D7CFF;
              writing-mode: vertical-lr;
              text-orientation: upright;
              /*文字禁止编辑*/
              -moz-user-select: none; /*火狐*/
              -webkit-user-select: none; /*webkit浏览器*/
              -ms-user-select: none; /*IE10*/
              -khtml-user-select: none; /*早期浏览器*/
              user-select: none;
              /* overflow: hidden; */
            }
            /* 默认逗号设置 */
            .mark-item {
              padding:0;
              border:none;
              width: 10px;
              height: 100px;
              margin-right: 5px;
              line-height: 10px;
              font-size: 48px;
              position: relative;
              & > span {
                position: absolute;
                color: #fff;
                width: 100%;
                bottom: 0;
                writing-mode: vertical-rl;
                text-orientation: upright;
              }
            }
            /*滚动数字设置*/
            .number-item {
              width: 48px;
              height: 80px;
              background: #fff;
              list-style: none;
              padding: 0;
              margin-right: 5px;
              background: url('@/assets/imgs/home/矩形数字.png') center no-repeat;
              background-size: 100% 100%;
              border:none;
              & > span {
                position: relative;
                display: inline-block;
                margin-right: 10px;
                height: 100%;
                writing-mode: vertical-rl;
                text-orientation: upright;
                overflow: hidden;
                & > i {
                  font-style: normal;
                  position: absolute;
                  color: #fff;
                  top: 11px;
                  left: 50%;
                  transform: translate(-50%,0);
                  transition: transform 1s ease-in-out;
                  letter-spacing: 10px;
                }
              }
            }
            .number-item:last-child {
              margin-right: 0;
            }






          }
          .bottom-part{
            height: calc((100%) * 55/ 100);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            background: url('@/assets/imgs/home/矩形大框.png') center no-repeat;
            background-size: 100% 100%;
            .high-part{
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              .first-title{
                font-size: 1.2em;
                margin-right: 5px;
                color: #25a9ee;
              }

              .box-item {
                position: relative;
                height: 100px;
                font-size: 54px;
                line-height: 41px;
                text-align: center;
                list-style: none;
                color: #2D7CFF;
                writing-mode: vertical-lr;
                text-orientation: upright;
                /*文字禁止编辑*/
                -moz-user-select: none; /*火狐*/
                -webkit-user-select: none; /*webkit浏览器*/
                -ms-user-select: none; /*IE10*/
                -khtml-user-select: none; /*早期浏览器*/
                user-select: none;
                /* overflow: hidden; */
              }
              /* 默认逗号设置 */
              .mark-item {
                width: 10px;
                height: 100px;
                margin-right: 5px;
                line-height: 10px;
                font-size: 48px;
                padding:0;
                border:none;
                position: relative;
                & > span {
                  position: absolute;
                  width: 100%;
                  color: #fff;
                  bottom: 0;
                  writing-mode: vertical-rl;
                  text-orientation: upright;
                }
              }
              /*滚动数字设置*/
              .number-item {
                width: 48px;
                height: 80px;
                background: #fff;
                list-style: none;
                margin-right: 5px;
                padding: 0;
                border:none;
                background: url('@/assets/imgs/home/矩形数字.png') center no-repeat;
                background-size: 100% 100%;
                & > span {
                  position: relative;
                  display: inline-block;
                  margin-right: 10px;
                  height: 100%;
                  writing-mode: vertical-rl;
                  text-orientation: upright;
                  overflow: hidden;
                  & > i {
                    font-style: normal;
                    position: absolute;
                    top: 11px;
                    left: 50%;
                    color: #fff;
                    transform: translate(-50%,0);
                    transition: transform 1s ease-in-out;
                    letter-spacing: 10px;
                  }
                }
              }
              .number-item:last-child {
                margin-right: 0;
              }
            }
            .low-part{
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              .detail-part{
                padding-left: 10px;
                padding-right: 10px;
                padding-bottom: 20px;
                font-size: 0.6em;
                color:#25a9ee;
                .detail_num{
                  margin-left: 2px;
                  margin-right: 2px;
                  font-size:1.8em;
                  color:#fff;
                }
              }
            }
          }
          li{
            box-sizing: border-box;
            padding: 20px 20px;
            display: flex;
            height: 100px;
            border: 1px solid #25a9ee;
            margin-top: 14px;
            width: 40%;

            .name{
              font-size: 12px;
              color:#03f5fb;

            }
            .value{
              font-size: 28px;
              color: #fff;
            }
            .icon{
              width: 60px;
              height: 100%;
              background-color: red;
              margin-right: 20px;
            }
            .xuniji{
              background: url('@/assets/imgs/home/服务器.png') center no-repeat;
              background-size: 100% 100%;
            }
            .savespace{
              background: url('@/assets/imgs/home/存储 内存卡.png') center no-repeat;
              background-size: 100% 100%;
            }
            .zbeifen{
              background: url('@/assets/imgs/home/备份.png') center no-repeat;
              background-size: 100% 100%;
            }
            .cbenfen{
              background: url('@/assets/imgs/home/备份.png') center no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
      //&.saveqk{
      //
      //
      //  .save-list{
      //    display: flex;
      //    justify-content: space-between;
      //    flex-wrap: wrap;
      //    padding: 0 40px;
      //    li{
      //      box-sizing: border-box;
      //      padding: 20px 20px;
      //      display: flex;
      //      height: 100px;
      //      border: 1px solid #25a9ee;
      //      margin-top: 14px;
      //      width: 40%;
      //
      //      .name{
      //        font-size: 12px;
      //        color:#03f5fb;
      //
      //      }
      //      .value{
      //        font-size: 28px;
      //        color: #fff;
      //      }
      //      .icon{
      //        width: 60px;
      //        height: 100%;
      //        background-color: red;
      //        margin-right: 20px;
      //      }
      //      .xuniji{
      //        background: url('@/assets/imgs/home/服务器.png') center no-repeat;
      //        background-size: 100% 100%;
      //      }
      //      .savespace{
      //        background: url('@/assets/imgs/home/存储 内存卡.png') center no-repeat;
      //        background-size: 100% 100%;
      //      }
      //      .zbeifen{
      //        background: url('@/assets/imgs/home/备份.png') center no-repeat;
      //        background-size: 100% 100%;
      //      }
      //      .cbenfen{
      //        background: url('@/assets/imgs/home/备份.png') center no-repeat;
      //        background-size: 100% 100%;
      //      }
      //    }
      //  }
      //}
      &.guiji{
        .guiji-echarts{
          width:100% ;
          height: 240px;
        }
      }
      &.zl{
        .zl-echarts{
          height: 240px;
          width: 100%;
        }
      }
      &.t10{
        .data{
          margin-top: -20px;
          color: #fff;
          .fl-all{
            cursor: pointer;
            padding:2px 6px;
            line-height: 20px;
            border: 1px solid #25a9ee;
          }
          .fl-dark{
            background-color: #078da7;
          }
        }
        .t10-echarts{
          flex: 1;
          height: 240px;
        }
      }
      &.saveqk{
        table{
          border-collapse: collapse;
          font-size: 14px;
          tr{
            text-align: center;
            height: 40px;
          }
          tbody{
            tr{
              color: #fff;
              &:nth-child(2n+1){
                background-color: #092f56;
              }
            }
          }
          color: #25a9ee;
          width: 100%;
        }
      }
      &.qzj-data{
        .qzj-echarts{
          height: 240px;
          width: 100%;
        }
      }

    }
  }
}
</style>
