<template>
  <div class="mainBox">
    <div class="leftBox">
      <div class="left-item" style="height:calc(45% - 7px)">
        <div class="title-item"><span>预警概览</span></div>
        <div class="title-param">
          <span>数据范围：</span>
          <a-select v-model="searchParams.tmScope" placeholder="日期类型" size="small" style="width: 100px" @change="onTypeChange">
            <a-select-option value="0">全部</a-select-option>
            <a-select-option value="1">按年份</a-select-option>
            <a-select-option value="2">按月份</a-select-option>
            <a-select-option value="3">自定义</a-select-option>
          </a-select>
          <a-date-picker v-if="searchParams.tmScope==='1' || searchParams.tmScope==='2'" style="width: 120px;margin-left: 10px;" mode="year" placeholder="选择年份" :open="dateOpen" v-model="searchParams.scopeYear" format="YYYY" :allowClear="false" value-format="YYYY" @panelChange="handlePanelChange" @openChange="handleOpenChange" size="small"/>
          <a-select v-if="searchParams.tmScope==='2'" v-model="searchParams.scopeMonth" placeholder="月份" size="small" style="width: 100px;margin-left: 10px" @change="onMonthChange">
            <a-select-option v-for="(item,index) in 12" :value="item<10?'0'+(item):(item)">{{ item }}月</a-select-option>
          </a-select>
          <a-range-picker v-if="searchParams.tmScope==='3'" v-model="dateRange" format="YYYY-MM-DD" separator="至" :allowClear="false" size="small" @change="changeRangeDate" style="width: 220px;margin-left: 10px"/>
        </div>
        <div class="item-content">
          <ul class="left-sum-ul">
            <li style="color:#cf0202;" @click="showDetail(null,1)">
              <span><a-icon type="warning" /></span>
              <span>预警总数<br/>{{ this.chartData1.totalNum }}（条）</span>
            </li>
            <li style="color:#f8611f;"  @click="showDetail(0,1)">
              <span><a-icon type="warning" /></span>
              <span>未解除<br/>{{ this.chartData1.noNum }}（条）</span>
            </li>
            <li style="color:#6acc02;"  @click="showDetail(7,1)">
              <span><a-icon type="warning" /></span>
              <span>已解除<br/>{{ this.chartData1.finishNum }}（条）</span>
            </li>
          </ul>
          <div class="chart1" id="chart1"></div>
        </div>
      </div>
      <div class="left-item" style="height:calc(55% - 7px)">
        <div class="title-item"><span>预警分布</span></div>
        <div class="title-param" style="padding: 5px">
          <ul class="left-type-ul">
            <li :class="{'active':activeIndex===1}" @mousemove="showChart(1)" @click="showDetail('督查填报预警',2)">
              督查填报预警<br/>{{ chartData2.dctbNum }}（条）
            </li>
            <li :class="{'active':activeIndex===2}" @mousemove="showChart(2)"  @click="showDetail('整改审核预警',2)">
              整改审核预警<br/>{{ chartData2.zgshNum }}（条）
            </li>
            <li :class="{'active':activeIndex===3}" @mousemove="showChart(3)"  @click="showDetail('投诉信息预警',2)">
              投诉信息预警<br/>{{ chartData2.tsxxNum }}（条）
            </li>
            <li :class="{'active':activeIndex===4}" @mousemove="showChart(4)"  @click="showDetail('虚假整改预警',2)">
              虚假整改预警<br/>{{ chartData2.xjzgNum }}（条）
            </li>
            <li :class="{'active':activeIndex===5}" @mousemove="showChart(5)"  @click="showDetail('超期整改预警',2)">
              超期整改预警<br/>{{ chartData2.cqzgNum }}（条）
            </li>
          </ul>
        </div>
        <div class="item-content">
           <div class="chart2" id="chart2" v-show="activeIndex===1"></div>
           <div class="chart2" id="chart3" v-show="activeIndex===2"></div>
           <div class="chart2" id="chart4" v-show="activeIndex===3"></div>
           <div class="chart2" id="chart5" v-show="activeIndex===4"></div>
           <div class="chart2" id="chart6" v-show="activeIndex===5"></div>
        </div>
      </div>
    </div>
    <div class="centerBox">
      <div class="center-item" style="height:calc(25% - 6px)">
        <div class="title-item">督查组主题</div>
        <div class="item-content-c">
          <a-table
              ref="table_1"
              class="ultra-compact-table"
              :columns="columns_1"
              :dataSource="dataSource_1"
              :pagination="false"
              size="small"
              :bordered="true">
            <template #bodyCell="{ column, record, text, index }">
              <template v-if="column.slots?.customRender === 'index'">
                <span>{{ index + 1 }}</span>
              </template>
              <template v-else-if="column.slots?.customRender === 'groupTooltip'">
                <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
              </template>
              <template v-else-if="column.slots?.customRender === 'batch1Tooltip'">
                <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
              </template>
              <template v-else-if="column.slots?.customRender === 'leaderTooltip'">
                <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
              </template>
              <template v-else-if="column.slots?.customRender === 'locTooltip'">
                <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
              </template>
              <template v-else>
                {{ text }}
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <div class="center-item" style="height:calc(25% - 6px)">
        <div class="title-item">业务处主题</div>
        <div class="item-content-c">
          <a-table
              ref="table_2"
              class="ultra-compact-table"
              :columns="columns_2"
              :dataSource="dataSource_2"
              :pagination="false"
              size="small"
              :bordered="true">
            <template #bodyCell="{ column, record, text, index }">
              <template v-if="column.slots?.customRender === 'index'">
                <span>{{ index + 1 }}</span>
              </template>
              <template v-else-if="column.slots?.customRender === 'dutyDeptTooltip'">
                <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
              </template>
              <template v-else-if="column.slots?.customRender === 'warnSourceTooltip'">
                <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
              </template>
              <template v-else-if="column.slots?.customRender === 'noNum'">
                <span @click="showDetail(record.dutyDept,3)" style="cursor:pointer;color:rgba(14,126,250,0.8)">{{ record.noNum }}</span>
              </template>
              <template v-else>
                {{ text }}
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <div class="center-item" style="height:calc(25% - 6px)">
        <div class="title-item">投诉信息主题</div>
        <div class="item-content-c">
          <a-table
              ref="table_3"
              class="ultra-compact-table"
              :columns="columns_3"
              :dataSource="dataSource_3"
              :pagination="false"
              size="small"
              :bordered="true">
            <template #bodyCell="{ column, record, text, index }">
              <template v-if="column.slots?.customRender === 'index'">
                <span>{{ index + 1 }}</span>
              </template>
              <template v-else-if="column.slots?.customRender === 'num1Tooltip'">
                <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
              </template>
              <template v-else-if="column.slots?.customRender === 'num2Tooltip'">
                <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
              </template>
              <template v-else-if="column.slots?.customRender === 'num3Tooltip'">
                <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
              </template>
              <template v-else>
                {{ text }}
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <div class="center-item" style="height:calc(25% - 6px)">
        <div class="title-item">行政区主题</div>
        <div class="item-content-c">
          <a-table
              ref="table_4"
              class="ultra-compact-table"
              :columns="columns_4"
              :dataSource="dataSource_4"
              :pagination="false"
              size="small"
              :bordered="true">
            <template #bodyCell="{ column, record, text, index }">
              <template v-if="column.slots?.customRender === 'index'">
                <span>{{ index + 1 }}</span>
              </template>
              <template v-else-if="column.slots?.customRender === 'adNameTooltip'">
                <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
              </template>
              <template v-else-if="column.slots?.customRender === 'warnSourceTooltip'">
                <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
              </template>
              <template v-else-if="column.slots?.customRender === 'noNum'">
                <span @click="showDetail(record.adCode,4)" style="cursor:pointer;color:rgba(14,126,250,0.8)">{{ record.noNum }}</span>
              </template>
              <template v-else>
                {{ text }}
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <div class="rightBox">
      <div class="right-item" style="height:calc(30% - 7px)">
        <div class="title-item"><span>预警推送</span></div>
        <div class="title-param" style="height:30px"><a-icon type="snippets" style="font-size: 20px;margin: 0px 10px"/>预警推送<span style="cursor: pointer;color:rgba(14,126,250,0.8)" @click="showDetail(null,5)">{{ sendTotal }}</span>条</div>
        <div class="item-content" style="height: calc(100% - 60px);padding: 0;overflow: auto">
          <a-table
              ref="table_5"
              class="ultra-compact-table"
              :columns="columns_5"
              :dataSource="dataSource_5"
              :pagination="false"
              size="small"
              :bordered="true">
            <template #bodyCell="{ column, record, text, index }">
              <template v-if="column.slots?.customRender === 'index'">
                <span>{{ index + 1 }}</span>
              </template>
              <template v-else-if="column.slots?.customRender === 'warnItem'">
                <span style="color:rgba(14,126,250,0.8);cursor:pointer;" @click="showDetail(record.warnItem,6)">{{ record.warnItem }}</span>
              </template>
              <template v-else-if="column.slots?.customRender === 'warnDetailTooltip'">
                <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
              </template>
              <template v-else-if="column.slots?.customRender === 'warnState'">
                <span>{{ formatState(record.warnState) }}</span>
              </template>
              <template v-else>
                {{ text }}
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <div class="right-item" style="height:calc(30% - 7px)">
        <div class="title-item"><span>预警解除统计</span></div>
        <div class="title-param" style="height:30px;">
          <ul class="right-ul">
            <li :class="{'ractive':activeIndex_r===1}" @mousemove="showTab(1)">按预警类型统计</li>
            <li :class="{'ractive':activeIndex_r===2}" @mousemove="showTab(2)">按时间统计</li>
          </ul>
        </div>
        <div class="item-content" style="height:calc(100% - 60px);padding: 0;">
          <div class="chart2" id="chart7" v-show="activeIndex_r===1"></div>
          <div class="chart2" id="chart8" v-show="activeIndex_r===2"></div>
        </div>
      </div>
      <div class="right-item" style="height:calc(40% - 7px)">
        <div class="title-item"><span>预警排行</span></div>
        <div class="title-param" style="height:30px;">
          <ul class="right-ul">
            <li :class="{'ractive':activeIndex_c===1}" @mousemove="showTabc(1)">按预警类型排行</li>
            <li :class="{'ractive':activeIndex_c===2}" @mousemove="showTabc(2)">按日期排行</li>
          </ul>
        </div>
        <div class="item-content" style="height:calc(100% - 60px);padding: 0;overflow: auto">
          <ul v-show="activeIndex_c===1" class="sort-ul" id="sortId">
            <li v-for="(item,index) in sortList_1"><span>{{item.warnItem}}</span><span @click="showDetail(item.warnItem,2)" :style="{'width':item.width+'px !important','background':(index===0?'red':index===1?'#ff9900':index===2?'#0080ff':'')}">{{item.totalNum}}条</span></li>
          </ul>
          <ul v-show="activeIndex_c===2" class="sort-ul">
            <li v-for="(item,index) in sortList_2"><span>{{item.alarmTime}}</span><span @click="dealTime(null,item.alarmTime,3)" :style="{'width':item.width+'px !important','background':(index===0?'red':index===1?'#ff9900':index===2?'#0080ff':'')}">{{item.totalNum}}条</span></li>
          </ul>
        </div>
      </div>
    </div>
    <a-modal
        title="预警信息查询结果"
        v-model:open="open"
        @cancel="open = false"
        :footer="null"
        width="1000px"
        v-if="open">
       <div style="height:650px">
        <a-table
            ref="table_10"
            :columns="columnsList"
            :dataSource="tableColumnData"
            :pagination="false"
            :scroll="{x:'100%',y:600}"
            size="small"
            :bordered="true">
          <template #bodyCell="{ column, record, text, index }">
            <template v-if="column.slots?.customRender === 'index'">
              <span>{{ (pageNum - 1) * pageSize + index + 1 }}</span>
            </template>
            <template v-else-if="column.slots?.customRender === 'warnItemTooltip'">
              <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
            </template>
            <template v-else-if="column.slots?.customRender === 'warnRuleTooltip'">
              <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
            </template>
            <template v-else-if="column.slots?.customRender === 'warnDetailTooltip'">
              <a-tooltip placement="topLeft" :title="text">{{ text }}</a-tooltip>
            </template>
            <template v-else-if="column.slots?.customRender === 'warnState'">
              <span>{{ formatState(record.warnState) }}</span>
            </template>
            <template v-else-if="column.slots?.customRender === 'action'">
              <a-button icon="eye" type="link" @click="showDialog(record)"></a-button>
            </template>
            <template v-else>
              {{ text }}
            </template>
          </template>
        </a-table>
        <a-pagination v-model:pageSize="pageSize" :total="total" :show-total="total => `共${total}条`" @change="handleCurrentChange" style="float:right;margin:0px 10px;" />
         <a-modal
             :title="currentObj.warnItem+'详情'"
             v-model:open="open1"
             @cancel="open1 = false"
             :footer="null"
             width="1000px"
             v-if="open1">
           <div style="height:550px" class="dialog-box">
             <p><span>预警规则:</span><span>{{currentObj.warnRule}}</span></p>
             <p v-if="currentObj.warnItem==='督查填报预警' || currentObj.warnItem==='整改审核预警' || currentObj.warnItem==='投诉信息预警' || currentObj.warnItem==='虚假整改预警'"><span>预警日期:</span><span>{{currentObj.alarmTime}}</span></p>
             <p v-if="currentObj.warnItem==='超期整改预警'"><span>预警年月:</span><span>{{currentObj.warnYear}}</span></p>
             <p><span>预警信息内容:</span><span>{{currentObj.warnDetail}}</span></p>
             <p v-if="currentObj.warnItem==='督查填报预警'"><span>预警督查批次:</span><span>{{currentObj.warnBatch}}</span></p>
             <p v-if="currentObj.warnItem==='虚假整改预警'"><span>整改复查批次:</span><span>{{currentObj.warnBatch}}</span></p>
             <p v-if="currentObj.warnItem==='虚假整改预警'"><span>问题行政区划:</span><span>{{currentObj.areaName}}</span></p>
             <p v-if="currentObj.warnItem==='督查填报预警'"><span>督查填报超期设定时长:</span><span>{{currentObj.deadlineTm}}</span></p>
             <p v-if="currentObj.warnItem==='整改审核预警'"><span>整改审核超期设定时长:</span><span>{{currentObj.deadlineTm}}</span></p>
             <p v-if="currentObj.warnItem==='投诉信息预警'"><span>投诉人名称:</span><span>{{currentObj.complainUser}}</span></p>
             <p v-if="currentObj.warnItem==='投诉信息预警'"><span>投诉来源:</span><span>{{currentObj.warnSource}}</span></p>
             <p style="text-align: center"><a-button type="primary" @click="open1 = false">确定</a-button></p>
           </div>
         </a-modal>
       </div>
    </a-modal>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import moment from 'moment/moment';
import tsdetail from '@/views/complaint/tsdetail.vue';
import { hostUrl } from '../../utils/global_variable.js';
import request from '../../utils/gw_ajax_request.js';
import { dateFormat, formatD } from '../../utils/gw_date';
export default {
  components: { tsdetail },
  data() {
    return {
      moment,
      open: false,
      open1: false,
      currentObj: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      currentType: null,
      currentItem: null,
      timer: null,
      statusOptions: [
        { value: '1', label: '未处置' },
        { value: '3', label: '超期未处置' },
        { value: '4', label: '待审批' },
        { value: '5', label: '超期未审批' },
        { value: '6', label: '审批驳回' },
        { value: '7', label: '预警关闭' },
      ],
      searchParams: {
        tmScope: '2',
        scopeYear: moment(new Date()).format('YYYY'),
        scopeMonth: moment(new Date()).format('MM'),
        sttm: '',
        edtm: '',
      },
      dateOpen: false,
      dateRange: [moment(), moment()],
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null,
      chart6: null,
      chart7: null,
      chart8: null,
      chartData1: { totalNum: null, noNum: null, finishNum: null },
      chartData2: {
        dctbNum: null,
        zgshNum: null,
        tsxxNum: null,
        xjzgNum: null,
        cqzgNum: null,
      },
      chartData2_1: { xAxis: [], yAxis1: [], yAxis2: [] },
      chartData2_2: { xAxis: [], yAxis1: [], yAxis2: [] },
      chartData2_3: { xAxis: [], yAxis: [] },
      chartData2_4: { xAxis: [], yAxis1: [], yAxis2: [], yAxis3: [] },
      chartData2_5: { xAxis: [], yAxis1: [], yAxis2: [], yAxis3: [] },
      chartData3_1: { xAxis: [], yAxis1: [], yAxis2: [] },
      chartData3_2: { xAxis: [], yAxis1: [], yAxis2: [], yAxis3: [] },
      activeIndex: 1,
      activeIndex_r: 1,
      activeIndex_c: 1,
      tableHeight: 0,
      tableHeight1: 0,
      tableColumnData: [],
      sendTotal: 0,
      columnsList: [
        {
          title: '序号',
          slots: { customRender: 'index' },
          width: 80,
          align: 'center',
        },
        {
          title: '预警事项',
          dataIndex: 'warnItem',
          align: 'center',
          width: 150,
          ellipsis: true,
          slots: { customRender: 'warnItemTooltip' },
        },
        {
          title: '预警规则',
          dataIndex: 'warnRule',
          align: 'center',
          width: 80,
          ellipsis: true,
          slots: { customRender: 'warnRuleTooltip' },
        },
        {
          title: '预警信息内容',
          dataIndex: 'warnDetail',
          align: 'center',
          width: 200,
          ellipsis: true,
          slots: { customRender: 'warnDetailTooltip' },
        },
        {
          title: '预警日期',
          dataIndex: 'alarmTime',
          align: 'center',
          width: 160,
        },
        {
          title: '预警状态',
          align: 'center',
          width: 100,
          slots: { customRender: 'warnState' },
        },
        {
          title: '操作',
          slots: { customRender: 'action' },
          width: 60,
          align: 'center',
        },
      ],
      columns_1: [
        {
          title: '序号',
          slots: { customRender: 'index' },
          width: 50,
          align: 'center',
        },
        {
          title: '督查组名称',
          dataIndex: 'group',
          align: 'center',
          width: 70,
          ellipsis: true,
          slots: { customRender: 'groupTooltip' },
        },
        {
          title: '所属督查批次',
          dataIndex: 'batch1',
          align: 'center',
          width: 80,
          ellipsis: true,
          slots: { customRender: 'batch1Tooltip' },
        },
        {
          title: '创建日期',
          dataIndex: 'tm',
          width: 80,
          ellipsis: true,
          align: 'center',
        },
        {
          title: '组内领导',
          dataIndex: 'leader',
          align: 'center',
          width: 70,
          ellipsis: true,
          slots: { customRender: 'leaderTooltip' },
        },
        {
          title: '督查目的地',
          dataIndex: 'loc',
          align: 'center',
          width: 80,
          ellipsis: true,
          slots: { customRender: 'locTooltip' },
        },
        {
          title: '督查任务数',
          dataIndex: 'taskNum',
          align: 'center',
          width: 70,
          ellipsis: true,
        },
        {
          title: '督查状态',
          dataIndex: 'state',
          align: 'center',
          width: 60,
          ellipsis: true,
        },
      ],
      columns_2: [
        {
          title: '序号',
          slots: { customRender: 'index' },
          width: 50,
          align: 'center',
        },
        {
          title: '处室名称',
          dataIndex: 'dutyDept',
          align: 'center',
          width: 80,
          ellipsis: true,
          slots: { customRender: 'dutyDeptTooltip' },
        },
        {
          title: '预警来源',
          dataIndex: 'warnSource',
          align: 'center',
          width: 80,
          ellipsis: true,
          slots: { customRender: 'warnSourceTooltip' },
        },
        {
          title: '超期审核问题数量',
          dataIndex: 'cqzgNum',
          width: 120,
          ellipsis: true,
          align: 'center',
        },
        {
          title: '虚假整改问题数量',
          dataIndex: 'xjzgNum',
          align: 'center',
          width: 120,
          ellipsis: true,
        },
        {
          title: '未解除预警数',
          slots: { customRender: 'noNum' },
          align: 'center',
          width: 120,
        },
      ],
      columns_3: [
        {
          title: '序号',
          slots: { customRender: 'index' },
          width: 50,
          align: 'center',
        },
        {
          title: '投诉人',
          dataIndex: 'num1',
          align: 'center',
          width: 80,
          ellipsis: true,
          slots: { customRender: 'num1Tooltip' },
        },
        {
          title: '投诉信息',
          dataIndex: 'num2',
          align: 'center',
          width: 80,
          ellipsis: true,
          slots: { customRender: 'num2Tooltip' },
        },
        {
          title: '投诉来源',
          dataIndex: 'num3',
          align: 'center',
          width: 80,
          ellipsis: true,
          slots: { customRender: 'num3Tooltip' },
        },
        {
          title: '联系方式',
          dataIndex: 'batch1',
          align: 'center',
          width: 100,
          ellipsis: true,
        },
        {
          title: '投诉时间',
          dataIndex: 'tm',
          align: 'center',
          width: 160,
          ellipsis: true,
        },
      ],
      columns_4: [
        {
          title: '序号',
          slots: { customRender: 'index' },
          width: 50,
          align: 'center',
        },
        {
          title: '行政区划',
          dataIndex: 'adName',
          align: 'center',
          width: 80,
          ellipsis: true,
          slots: { customRender: 'adNameTooltip' },
        },
        {
          title: '预警来源',
          dataIndex: 'warnSource',
          align: 'center',
          width: 80,
          ellipsis: true,
          slots: { customRender: 'warnSourceTooltip' },
        },
        {
          title: '超期审核问题数量',
          dataIndex: 'cqzgNum',
          width: 120,
          ellipsis: true,
          align: 'center',
        },
        {
          title: '虚假整改问题数量',
          dataIndex: 'xjzgNum',
          align: 'center',
          width: 120,
          ellipsis: true,
        },
        {
          title: '未解除预警数',
          slots: { customRender: 'noNum' },
          align: 'center',
          width: 120,
        },
      ],
      columns_5: [
        {
          title: '序号',
          slots: { customRender: 'index' },
          width: 40,
          align: 'center',
        },
        {
          title: '预警类型',
          slots: { customRender: 'warnItem' },
          align: 'center',
          width: 80,
          ellipsis: true,
        },
        {
          title: '预警消息',
          dataIndex: 'warnDetail',
          align: 'center',
          width: 80,
          ellipsis: true,
          slots: { customRender: 'warnDetailTooltip' },
        },
        {
          title: '预警日期',
          dataIndex: 'alarmTime',
          width: 120,
          ellipsis: true,
          align: 'center',
        },
        {
          title: '预警状态',
          slots: { customRender: 'warnState' },
          align: 'center',
          width: 60,
        },
      ],
      dataSource_1: [],
      dataSource_2: [],
      dataSource_3: [],
      dataSource_4: [],
      dataSource_5: [],
      max: 0,
      sortList_1: [],
      sortList_2: [],
    };
  },
  computed: {
    userId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
    hostUrl() {
      return hostUrl;
    },
    formatD() {
      return formatD;
    },
  },
  watch: {
    $route(n, o) {
      this.hasStat = n.path.substring(n.path.length - 3);
      this.search();
    },
  },
  created() {},
  mounted() {
    // this.calcHeight();

    this.initData();
    window.onresize = () => {
      this.initChart();
      // this.calcHeight()
      // this.initSort(1)
    };
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    initData() {
      this.initData1();
      this.initData2();
      this.initData2_1();
      this.initData2_2();
      this.initData2_3();
      this.initData2_4();
      this.initData2_5();
      this.initData3(1);
      this.initData3(2);
      this.initData3(3);
      this.initData3(4);
      this.initData4();
      this.initData5(1);
      this.initData5(2);
      this.initData6(1);
      this.initData6(2);
    },
    showDialog(row) {
      this.open1 = true;
      this.currentObj = row;
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.showDetail(this.currentType, this.currentItem);
    },
    formatState(v) {
      let str = '';
      this.statusOptions.forEach((item, index) => {
        if (item.value === v) {
          str = item.label;
        }
      });
      return str;
    },
    onTypeChange() {
      this.initData();
    },
    onMonthChange() {
      this.initData();
    },
    handlePanelChange(value) {
      this.dateOpen = false; // 关闭面板
      this.searchParams.scopeYear = moment(value).format('YYYY');
      this.initData();
    },
    changeRangeDate(dates) {
      //debugger
      if (dates && dates.length === 2) {
        this.dateRange = [
          dates[0].format('YYYY-MM-DD'),
          dates[1].format('YYYY-MM-DD'),
        ];
        this.initData();
      }
    },
    handleOpenChange(open) {
      this.dateOpen = open;
    },
    dealTime(p, v, t) {
      if (v) {
        if (v.indexOf('日') > -1) {
          const month =
            parseInt(v.split('月')[0]) > 9
              ? parseInt(v.split('月')[0])
              : '0' + parseInt(v.split('月')[0]);
          const day =
            parseInt(v.split('月')[1].replace('日', '')) > 9
              ? parseInt(v.split('月')[1].replace('日', ''))
              : '0' + parseInt(v.split('月')[1].replace('日', ''));
          if (t === 1) {
            this.showDetail(
              p,
              7,
              this.searchParams.scopeYear + '-' + month + '-' + day,
            );
          }
          if (t === 2) {
            this.showDetail(
              p,
              8,
              this.searchParams.scopeYear + '-' + month + '-' + day,
            );
          }
          if (t === 3) {
            this.showDetail(
              p,
              9,
              this.searchParams.scopeYear + '-' + month + '-' + day,
            );
          }
        } else {
          const month =
            parseInt(v.split('年')[1].replace('月', '')) > 9
              ? parseInt(v.split('年')[1].replace('月', ''))
              : '0' + parseInt(v.split('年')[1].replace('月', ''));
          if (t === 1) {
            this.showDetail(p, 7, this.searchParams.scopeYear + '-' + month);
          }
          if (t === 2) {
            this.showDetail(p, 8, this.searchParams.scopeYear + '-' + month);
          }
          if (t === 3) {
            this.showDetail(p, 9, this.searchParams.scopeYear + '-' + month);
          }
        }
      }
    },
    showDetail(v, t, d) {
      this.currentType = v;
      this.currentItem = t;
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.searchParams.tmScope === '3'
      ) {
        this.searchParams.sttm = moment(this.dateRange[0])
          .format('YYYY-MM-DD')
          .substring(0, 10);
        this.searchParams.edtm = moment(this.dateRange[1])
          .format('YYYY-MM-DD')
          .substring(0, 10);
      }
      const params = {
        tmScope: this.searchParams.tmScope,
        scopeYear: this.searchParams.scopeYear,
        scopeMonth:
          this.searchParams.scopeYear + '-' + this.searchParams.scopeMonth,
        sttm: this.searchParams.sttm,
        edtm: this.searchParams.edtm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      if (t === 1) {
        params.warnState = v;
      }
      if (t === 2) {
        params.warnItem = v;
      }
      if (t === 21) {
        params.warnItem = v;
        params.warnState = 7;
      }
      if (t === 3) {
        params.dutyDept = v;
      }
      if (t === 4) {
        params.adCode = v;
      }
      if (t === 5) {
        params.pushStat = 1;
        params.warnState = v;
      }
      if (t === 6) {
        params.pushStat = 1;
        params.warnItem = v;
      }
      if (t === 7) {
        params.chartDate = d;
        params.warnItem = v;
      }
      if (t === 8) {
        params.chartDate = d;
        params.warnState = 7;
      }
      if (t === 9) {
        params.chartDate = d;
      }
      this.open = true;
      request
        .post(`/bis/insp/warning/statistics/num/page`, params)
        .then((res) => {
          if (res.success) {
            this.tableColumnData = res.data.list;
            this.total = res.data.total;
          }
        });
    },
    initData1() {
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.searchParams.tmScope === '3'
      ) {
        this.searchParams.sttm = moment(this.dateRange[0])
          .format('YYYY-MM-DD')
          .substring(0, 10);
        this.searchParams.edtm = moment(this.dateRange[1])
          .format('YYYY-MM-DD')
          .substring(0, 10);
      }
      const params = {
        tmScope: this.searchParams.tmScope,
        scopeYear: this.searchParams.scopeYear,
        scopeMonth:
          this.searchParams.scopeYear + '-' + this.searchParams.scopeMonth,
        sttm: this.searchParams.sttm,
        edtm: this.searchParams.edtm,
      };
      request.post(`/bis/insp/warning/statistics/num`, params).then((res) => {
        if (res.success) {
          this.chartData1 = res.data;
          this.$nextTick(() => {
            this.initOption_1();
          });
        }
      });
    },
    initData2_1() {
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.searchParams.tmScope === '3'
      ) {
        this.searchParams.sttm = moment(this.dateRange[0])
          .format('YYYY-MM-DD')
          .substring(0, 10);
        this.searchParams.edtm = moment(this.dateRange[1])
          .format('YYYY-MM-DD')
          .substring(0, 10);
      }
      const params = {
        tmScope: this.searchParams.tmScope,
        scopeYear: this.searchParams.scopeYear,
        scopeMonth:
          this.searchParams.scopeYear + '-' + this.searchParams.scopeMonth,
        sttm: this.searchParams.sttm,
        edtm: this.searchParams.edtm,
      };
      request
        .post(`/bis/insp/warning/statistics/chart/all/dctb`, params)
        .then((res) => {
          if (res.success) {
            this.chartData2_1 = res.data;
            this.$nextTick(() => {
              this.initOption_2();
            });
          }
        });
    },
    initData2_2() {
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.searchParams.tmScope === '3'
      ) {
        this.searchParams.sttm = moment(this.dateRange[0])
          .format('YYYY-MM-DD')
          .substring(0, 10);
        this.searchParams.edtm = moment(this.dateRange[1])
          .format('YYYY-MM-DD')
          .substring(0, 10);
      }
      const params = {
        tmScope: this.searchParams.tmScope,
        scopeYear: this.searchParams.scopeYear,
        scopeMonth:
          this.searchParams.scopeYear + '-' + this.searchParams.scopeMonth,
        sttm: this.searchParams.sttm,
        edtm: this.searchParams.edtm,
      };
      request
        .post(`/bis/insp/warning/statistics/chart/all/zgsh`, params)
        .then((res) => {
          if (res.success) {
            this.chartData2_2 = res.data;
            this.$nextTick(() => {
              this.initOption_3();
            });
          }
        });
    },
    initData2_3() {
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.searchParams.tmScope === '3'
      ) {
        this.searchParams.sttm = moment(this.dateRange[0])
          .format('YYYY-MM-DD')
          .substring(0, 10);
        this.searchParams.edtm = moment(this.dateRange[1])
          .format('YYYY-MM-DD')
          .substring(0, 10);
      }
      const params = {
        tmScope: this.searchParams.tmScope,
        scopeYear: this.searchParams.scopeYear,
        scopeMonth:
          this.searchParams.scopeYear + '-' + this.searchParams.scopeMonth,
        sttm: this.searchParams.sttm,
        edtm: this.searchParams.edtm,
      };
      request
        .post(`/bis/insp/warning/statistics/chart/all/tsxx`, params)
        .then((res) => {
          if (res.success) {
            this.chartData2_3 = res.data;
            this.$nextTick(() => {
              this.initOption_4();
            });
          }
        });
    },
    initData2_4() {
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.searchParams.tmScope === '3'
      ) {
        this.searchParams.sttm = moment(this.dateRange[0])
          .format('YYYY-MM-DD')
          .substring(0, 10);
        this.searchParams.edtm = moment(this.dateRange[1])
          .format('YYYY-MM-DD')
          .substring(0, 10);
      }
      const params = {
        tmScope: this.searchParams.tmScope,
        scopeYear: this.searchParams.scopeYear,
        scopeMonth:
          this.searchParams.scopeYear + '-' + this.searchParams.scopeMonth,
        sttm: this.searchParams.sttm,
        edtm: this.searchParams.edtm,
      };
      request
        .post(`/bis/insp/warning/statistics/chart/all/xjzg`, params)
        .then((res) => {
          if (res.success) {
            this.chartData2_4 = res.data;
            this.$nextTick(() => {
              this.initOption_5();
            });
          }
        });
    },
    initData2_5() {
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.searchParams.tmScope === '3'
      ) {
        this.searchParams.sttm = moment(this.dateRange[0])
          .format('YYYY-MM-DD')
          .substring(0, 10);
        this.searchParams.edtm = moment(this.dateRange[1])
          .format('YYYY-MM-DD')
          .substring(0, 10);
      }
      const params = {
        tmScope: this.searchParams.tmScope,
        scopeYear: this.searchParams.scopeYear,
        scopeMonth:
          this.searchParams.scopeYear + '-' + this.searchParams.scopeMonth,
        sttm: this.searchParams.sttm,
        edtm: this.searchParams.edtm,
      };
      request
        .post(`/bis/insp/warning/statistics/chart/all/cqzg`, params)
        .then((res) => {
          if (res.success) {
            this.chartData2_5 = res.data;
            this.setTimer();
            this.$nextTick(() => {
              this.initOption_6();
            });
          }
        });
    },
    initData2() {
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.searchParams.tmScope === '3'
      ) {
        this.searchParams.sttm = moment(this.dateRange[0])
          .format('YYYY-MM-DD')
          .substring(0, 10);
        this.searchParams.edtm = moment(this.dateRange[1])
          .format('YYYY-MM-DD')
          .substring(0, 10);
      }
      const params = {
        tmScope: this.searchParams.tmScope,
        scopeYear: this.searchParams.scopeYear,
        scopeMonth:
          this.searchParams.scopeYear + '-' + this.searchParams.scopeMonth,
        sttm: this.searchParams.sttm,
        edtm: this.searchParams.edtm,
      };
      request
        .post(`/bis/insp/warning/statistics/chart/all/num`, params)
        .then((res) => {
          if (res.success) {
            this.chartData2 = res.data;
          }
        });
    },
    initData3(v) {
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.searchParams.tmScope === '3'
      ) {
        this.searchParams.sttm = moment(this.dateRange[0])
          .format('YYYY-MM-DD')
          .substring(0, 10);
        this.searchParams.edtm = moment(this.dateRange[1])
          .format('YYYY-MM-DD')
          .substring(0, 10);
      }
      const params = {
        tmScope: this.searchParams.tmScope,
        scopeYear: this.searchParams.scopeYear,
        scopeMonth:
          this.searchParams.scopeYear + '-' + this.searchParams.scopeMonth,
        sttm: this.searchParams.sttm,
        edtm: this.searchParams.edtm,
      };
      request
        .post(`/bis/insp/warning/statistics/main/body/${v}`, params)
        .then((res) => {
          if (res.success) {
            this['dataSource_' + v] = res.data;
            // if(v===4){
            //   this.calcHeight();
            // }
          }
        });
    },
    initData4() {
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.searchParams.tmScope === '3'
      ) {
        this.searchParams.sttm = moment(this.dateRange[0])
          .format('YYYY-MM-DD')
          .substring(0, 10);
        this.searchParams.edtm = moment(this.dateRange[1])
          .format('YYYY-MM-DD')
          .substring(0, 10);
      }
      const params = {
        tmScope: this.searchParams.tmScope,
        scopeYear: this.searchParams.scopeYear,
        scopeMonth:
          this.searchParams.scopeYear + '-' + this.searchParams.scopeMonth,
        sttm: this.searchParams.sttm,
        edtm: this.searchParams.edtm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        pushStat: 1,
      };
      request
        .post(`/bis/insp/warning/statistics/num/page`, params)
        .then((res) => {
          if (res.success) {
            this.dataSource_5 = res.data.list;
            this.sendTotal = res.data.total;
          }
        });
    },
    initData5(v) {
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.searchParams.tmScope === '3'
      ) {
        this.searchParams.sttm = moment(this.dateRange[0])
          .format('YYYY-MM-DD')
          .substring(0, 10);
        this.searchParams.edtm = moment(this.dateRange[1])
          .format('YYYY-MM-DD')
          .substring(0, 10);
      }
      const params = {
        tmScope: this.searchParams.tmScope,
        scopeYear: this.searchParams.scopeYear,
        scopeMonth:
          this.searchParams.scopeYear + '-' + this.searchParams.scopeMonth,
        sttm: this.searchParams.sttm,
        edtm: this.searchParams.edtm,
      };
      request
        .post(`/bis/insp/warning/statistics/chart/finish/${v}`, params)
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              if (v === 1) {
                this.chartData3_1 = res.data;
                this.initOption_7();
              }
              if (v === 2) {
                this.chartData3_2 = res.data;
                this.initOption_8();
              }
            });
          }
        });
    },
    initData6(v) {
      if (
        this.dateRange &&
        this.dateRange.length > 0 &&
        this.searchParams.tmScope === '3'
      ) {
        this.searchParams.sttm = moment(this.dateRange[0])
          .format('YYYY-MM-DD')
          .substring(0, 10);
        this.searchParams.edtm = moment(this.dateRange[1])
          .format('YYYY-MM-DD')
          .substring(0, 10);
      }
      const params = {
        tmScope: this.searchParams.tmScope,
        scopeYear: this.searchParams.scopeYear,
        scopeMonth:
          this.searchParams.scopeYear + '-' + this.searchParams.scopeMonth,
        sttm: this.searchParams.sttm,
        edtm: this.searchParams.edtm,
      };
      request
        .post(`/bis/insp/warning/statistics/rank/num/${v}`, params)
        .then((res) => {
          if (res.success) {
            this.initSort(res.data, v);
          }
        });
    },
    initChart() {
      this.chart1?.resize();
      this.chart2?.resize();
      this.chart3?.resize();
      this.chart4?.resize();
      this.chart5?.resize();
      this.chart6?.resize();
      this.chart7?.resize();
      this.chart8?.resize();
    },
    initChart1() {
      this.chart2?.resize();
      this.chart3?.resize();
      this.chart4?.resize();
      this.chart5?.resize();
      this.chart6?.resize();
    },
    initChart2() {
      this.chart7?.resize();
      this.chart8?.resize();
    },
    setTimer() {
      this.timer = setInterval(() => {
        if (this.activeIndex === 5) {
          this.activeIndex = 1;
        } else {
          this.activeIndex++;
        }
        this.$nextTick(() => {
          this.initChart1();
        });
      }, 5000);
    },
    calcHeight() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.tableHeight = window.innerHeight / 4 - 100;
          this.tableHeight1 = window.innerHeight / 3 - 160;
          this.$refs.table_1.refreshScroll();
          this.$refs.table_1.refreshLayout();
        }, 2000);
      });
    },
    showTab(index) {
      this.activeIndex_r = index;
      this.$nextTick(() => {
        this.initChart2();
      });
    },
    showTabc(index) {
      this.activeIndex_c = index;
      this.$nextTick(() => {
        this.initSort(this.sortData.c, index);
      });
    },
    showChart(index) {
      this.activeIndex = index;
      this.$nextTick(() => {
        this.initChart1();
      });
    },
    initSort(data, index) {
      const width = document.getElementById('sortId').clientWidth - 130;
      const maxC = [];
      data.forEach((item) => {
        maxC.push(item.totalNum);
      });
      const max = Math.max(...maxC);
      data.forEach((item) => {
        item.width = (width * item.totalNum) / (max === 0 ? 1 : max);
      });
      if (index === 1) {
        this.sortList_1 = data;
      }
      if (index === 2) {
        this.sortList_2 = data;
      }
    },
    initOption_1() {
      this.chart1 = echarts.init(document.getElementById('chart1'));
      const option = {
        backgroundColor: '#fff',
        title: {
          text: '预警分类',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
          },
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          bottom: '5%',
          data: ['未解除', '已解除'],
          left: 'right',
          top: 'center',
        },
        color: ['#f48302', '#46cf00'],
        series: [
          {
            type: 'pie',
            selectedMode: 'single',
            radius: ['40%', '92%'],

            label: {
              normal: {
                position: 'inner',
                formatter: '{b}{c}',

                textStyle: {
                  color: '#ffffff',
                  fontSize: 12,
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: this.chartData1.noNum,
                name: '未解除',
              },
              {
                value: this.chartData1.finishNum,
                name: '已解除',
              },
            ],
          },
        ],
      };
      if (this.chart1) {
        this.chart1.clear();
      }
      this.chart1.setOption(option);
      this.chart1.on('click', (params) => {
        this.showDetail(params.name === '未解除' ? 0 : 7, 1);
      });
    },
    initOption_2() {
      this.chart2 = echarts.init(document.getElementById('chart2'));
      const option = {
        backgroundColor: '#fff',
        title: {
          left: 'center',
          top: 0,
          text: '督查填报预警分布',
          textStyle: {
            color: '#919191',
            fontWeight: 400,
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        color: ['#227aed', '#6f6bf1'],
        legend: {
          data: ['填报超期督查组', '当前已提交督查组'],
          left: 'center',
          top: 30,
          icon: 'circle',
          textStyle: {
            color: '#919191',
            fontWeight: 400,
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
        },
        grid: {
          top: '20%',
          left: '2%',
          right: '4%',
          bottom: '3%',
          backgroundColor: '#333',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.chartData2_1.xAxis,
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#d8d7d7',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#f1f1f1',
              },
            },
          },
        ],
        series: [
          {
            name: '填报超期督查组',
            type: 'bar',
            data: this.chartData2_1.yAxis1,
            barWidth: 10,
          },
          {
            name: '当前已提交督查组',
            type: 'bar',
            data: this.chartData2_1.yAxis2,
            barWidth: 10,
          },
        ],
      };
      if (this.chart2) {
        this.chart2.clear();
      }
      this.chart2.setOption(option);
    },
    initOption_3() {
      this.chart3 = echarts.init(document.getElementById('chart3'));
      const option = {
        backgroundColor: '#fff',
        title: {
          left: 'center',
          top: 0,
          text: '整改审核预警分布',
          textStyle: {
            color: '#919191',
            fontWeight: 400,
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        color: ['#227aed', '#6f6bf1'],
        legend: {
          data: ['预警总数', '预警关闭数'],
          left: 'center',
          top: 30,
          icon: 'circle',
          textStyle: {
            color: '#919191',
            fontWeight: 400,
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
        },
        grid: {
          top: '20%',
          left: '2%',
          right: '4%',
          bottom: '3%',
          backgroundColor: '#333',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.chartData2_2.xAxis,
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#d8d7d7',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#f1f1f1',
              },
            },
          },
        ],
        series: [
          {
            name: '预警总数',
            type: 'bar',
            data: this.chartData2_2.yAxis1,
            barWidth: 10,
          },
          {
            name: '预警关闭数',
            type: 'bar',
            data: this.chartData2_2.yAxis2,
            barWidth: 10,
          },
        ],
      };
      if (this.chart3) {
        this.chart3.clear();
      }
      this.chart3.setOption(option);
      this.chart3.on('click', (params) => {
        this.dealTime('整改审核预警', params.name, 1);
      });
    },
    initOption_4() {
      this.chart4 = echarts.init(document.getElementById('chart4'));
      const option = {
        backgroundColor: '#fff',
        title: {
          left: 'center',
          top: 0,
          text: '投诉信息预警分布',
          textStyle: {
            color: '#919191',
            fontWeight: 400,
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        color: ['#227aed'],
        legend: {
          data: ['预警信息数'],
          left: 'center',
          top: 30,
          icon: 'circle',
          textStyle: {
            color: '#919191',
            fontWeight: 400,
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
        },
        grid: {
          top: '20%',
          left: '2%',
          right: '4%',
          bottom: '3%',
          backgroundColor: '#333',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.chartData2_3.xAxis,
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#d8d7d7',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#f1f1f1',
              },
            },
          },
        ],
        series: [
          {
            name: '预警信息数',
            type: 'line',
            data: this.chartData2_3.yAxis,
          },
        ],
      };
      if (this.chart4) {
        this.chart4.clear();
      }
      this.chart4.setOption(option);
    },
    initOption_5() {
      this.chart5 = echarts.init(document.getElementById('chart5'));
      const option = {
        backgroundColor: '#fff',
        title: {
          left: 'center',
          top: 0,
          text: '虚假整改预警分布',
          textStyle: {
            color: '#919191',
            fontWeight: 400,
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        color: ['#227aed', '#6f6bf1', '#37bd02', '#d6ac03'],
        legend: {
          data: ['预警触发', '业务部门审批', '审批驳回', '预警关闭'],
          left: 'center',
          top: 30,
          icon: 'circle',
          textStyle: {
            color: '#919191',
            fontWeight: 400,
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
        },
        grid: {
          top: '20%',
          left: '2%',
          right: '4%',
          bottom: '3%',
          backgroundColor: '#333',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.chartData2_4.xAxis,
            axisTick: {
              show: false,
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#d8d7d7',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#f1f1f1',
              },
            },
          },
        ],
        series: [
          {
            name: '预警触发',
            type: 'bar',
            data: this.chartData2_4.yAxis1,
            barWidth: 10,
          },
          {
            name: '业务部门审批',
            type: 'bar',
            data: this.chartData2_4.yAxis2,
            barWidth: 10,
          },
          {
            name: '审批驳回',
            type: 'bar',
            data: this.chartData2_4.yAxis3,
            barWidth: 10,
          },
          {
            name: '预警关闭',
            type: 'bar',
            data: this.chartData2_4.yAxis4,
            barWidth: 10,
          },
        ],
      };
      if (this.chart5) {
        this.chart5.clear();
      }
      this.chart5.setOption(option);
    },
    initOption_6() {
      this.chart6 = echarts.init(document.getElementById('chart6'));
      const option = {
        backgroundColor: '#fff',
        title: {
          left: 'center',
          top: 0,
          text: '超期整改预警分布',
          textStyle: {
            color: '#919191',
            fontWeight: 400,
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        color: ['#227aed', '#6f6bf1', '#37bd02'],
        legend: {
          data: ['超期整改问题数', '当前提交审核问题数', '当前已销号问题数'],
          left: 'center',
          top: 30,
          icon: 'circle',
          textStyle: {
            color: '#919191',
            fontWeight: 400,
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
        },
        grid: {
          top: '20%',
          left: '2%',
          right: '4%',
          bottom: '3%',
          backgroundColor: '#333',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.chartData2_5.xAxis,
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#d8d7d7',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#f1f1f1',
              },
            },
          },
        ],
        series: [
          {
            name: '超期整改问题数',
            type: 'bar',
            data: this.chartData2_5.yAxis1,
            barWidth: 10,
          },
          {
            name: '当前提交审核问题数',
            type: 'bar',
            data: this.chartData2_5.yAxis2,
            barWidth: 10,
          },
          {
            name: '当前已销号问题数',
            type: 'bar',
            data: this.chartData2_5.yAxis3,
            barWidth: 10,
          },
        ],
      };
      if (this.chart6) {
        this.chart6.clear();
      }
      this.chart6.setOption(option);
    },
    initOption_7() {
      this.chart7 = echarts.init(document.getElementById('chart7'));
      const option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        color: ['#227aed', '#6f6bf1'],
        legend: {
          data: ['预警总数', '预警解除数'],
          left: 'center',
          top: 10,
          icon: 'circle',
          textStyle: {
            color: '#919191',
            fontWeight: 400,
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
        },
        grid: {
          top: '20%',
          left: '2%',
          right: '4%',
          bottom: '3%',
          backgroundColor: '#333',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.chartData3_1.xAxis,
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#d8d7d7',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '(个)',
            axisLabel: {
              formatter: '{value}',
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#f1f1f1',
              },
            },
          },
        ],
        series: [
          {
            name: '预警总数',
            type: 'bar',
            data: this.chartData3_1.yAxis1,
            barWidth: 10,
          },
          {
            name: '预警解除数',
            type: 'bar',
            data: this.chartData3_1.yAxis2,
            barWidth: 10,
          },
        ],
      };
      if (this.chart7) {
        this.chart7.clear();
      }
      this.chart7.setOption(option);
      this.chart7.on('click', (params) => {
        this.showDetail(params.name, 21);
      });
    },
    initOption_8() {
      this.chart8 = echarts.init(document.getElementById('chart8'));
      const option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        color: ['#227aed', '#757be4', '#02e420'],
        legend: {
          data: ['预警总数', '预警解除数', '解除率'],
          left: 'center',
          top: 10,
          icon: 'circle',
          textStyle: {
            color: '#919191',
            fontWeight: 400,
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
        },
        grid: {
          top: '20%',
          left: '2%',
          right: '4%',
          bottom: '3%',
          backgroundColor: '#333',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.chartData3_2.xAxis,
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#d8d7d7',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '(个)',
            axisLabel: {
              formatter: '{value}',
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#f1f1f1',
              },
            },
          },
          {
            type: 'value',
            name: '(%)',
            axisLabel: {
              formatter: '{value}',
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#a3a2a2',
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#f1f1f1',
              },
            },
          },
        ],
        series: [
          {
            name: '预警总数',
            type: 'line',
            yAxisIndex: 0,
            data: this.chartData3_2.yAxis1,
          },
          {
            name: '预警解除数',
            type: 'line',
            yAxisIndex: 0,
            data: this.chartData3_2.yAxis2,
          },
          {
            name: '解除率',
            type: 'line',
            yAxisIndex: 1,
            data: this.chartData3_2.yAxis3,
          },
        ],
      };
      if (this.chart8) {
        this.chart8.clear();
      }
      this.chart8.setOption(option);
      this.chart8.on('click', (params) => {
        //debugger
        this.dealTime(null, params.name, 2);
      });
    },
  },
};
</script>

<style lang='less' scoped>
  .mainBox{
    width: 100%;
    height:100%;
    margin: 0;
    padding:0;
    border:1px solid #a9a9a9;
    display: flex;
    align-items: center;
    background: #fafafa;
  }
  .leftBox{
    width: 30%;
    height:100%
  }
  .left-item{
    border:1px solid #a9a9a9;
    margin: 5px;
    background: #ffffff;
  }
  .centerBox{
    width: 40%;
    height:100%;
    border-left:1px solid #a9a9a9;
    border-right:1px solid #a9a9a9;
  }
  .center-item{
    border:1px solid #a9a9a9;
    margin: 5px;
    background: #ffffff;
  }
  .rightBox{
    width: 30%;
    height:100%
  }
  .right-item{
    border:1px solid #a9a9a9;
    margin: 5px;
    background: #ffffff;
  }
  .title-item{
    width: 100%;
    height:30px;
    display: flex;
    align-items: center;
    text-indent: 10px;
    font-size: 14px;
    letter-spacing: 5px;
    color: #f8812d;
    span{
      width: 200px;
      height:30px;
      background: #00A3EF;
      color:#ffffff;
      display: flex;
      align-items: center;
      letter-spacing: 5px;
    }
  }
  .title-param{
    width: 100%;
    padding: 10px;
    height:60px;
    display: flex;
    align-items: center;
  }
  .item-content{
    width: 100%;
    padding: 10px;
    height:calc(100% - 90px);
  }
  .item-content-c{
    width: 100%;
    height:calc(100% - 30px);
    overflow: auto;
  }
  .left-sum-ul{
    width: 100%;
    height:60px;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    li{
      width: 33%;
      height:100%;
      display: flex;
      align-items: center;
      border: 1px solid #bebebe;
      margin: 5px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      cursor: pointer;
      span:first-child{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height:60px;
        .anticon-warning{
          font-size: 40px;
        }
      }
      span:nth-child(2){
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 50px);
        height:60px;
        font-size: 12px;
        text-align: left;
      }
    }
  }
  .chart1{
    width: 100%;
    height:calc(100% - 60px);
  }
  .left-type-ul{
    width: 100%;
    height:40px;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    li{
      width: 20%;
      margin: 2px;
      height:100%;
      border: 1px solid #bebebe;
      font-size: 12px;
      text-align: center;
      line-height: 18px;
      cursor: pointer;
    }
  }
  .active{
    background: #00A3EF !important;
    color:#ffffff !important;
  }
  .ractive{
    color:rgba(14, 126, 250, 0.8) !important;
    border-bottom: 1px solid rgba(14, 126, 250, 0.8);
  }
  .chart2{
    width: 100%;
    height:100%;
  }
  .right-ul{
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    li{
      width: 120px;
      margin: 0px 50px;
      text-align: center;
      color: rgba(126, 127, 128, 0.8);
      cursor: pointer;
      font-size: 12px;
    }
  }
  .sort-ul{
    width: 100%;
    height:100%;
    margin: 0;
    padding: 10px;
    list-style: none;
    li{
      width: 100%;
      height:15px;
      font-size: 12px;
      margin-top: 10px;
      background: #f4f4f4;
      span:first-child{
        display: block;
        float: left;
        width: 100px !important;
        height: 15px;
        line-height: 15px;
        background: #ffffff;
        text-align: right;
        padding-right: 10px;
      }
      span:nth-child(2){
        display: block;
        float: left;
        height: 15px;
        line-height: 15px;
        width: calc(100% - 102px);
        position: relative;
        background: #cfcfcf;
        text-align: center;
        color:#311a1a;
      }
    }
  }
  :deep(.ant-table-body) {
    position: inherit !important;
    //overflow: auto !important;
  }
  :deep(.ant-table-header) {
    //overflow: auto !important;
  }
  .ultra-compact-table :deep(.ant-table-thead > tr > th) {
    padding: 5px 5px !important; /* 更小的内边距 */
    font-size: 12px !important; /* 表头更小的字体 */
    //background: #f1f1f1 !important;
  }

  .ultra-compact-table :deep(.ant-table-tbody > tr > td) {
    padding: 5px 5px !important; /* 更小的单元格内边距 */
    font-size: 12px !important;
  }

  .ultra-compact-table :deep(.ant-table-row) {
    height: 25px; /* 更小的行高 */
  }
  .dialog-box{
    width: 100%;
    p{
      min-height: 40px;
      line-height: 20px;
      font-size: 14px;
      margin-top: 5px;
      letter-spacing: 3px;
      span:first-child{
        font-weight: bold;
      }
    }
  }
</style>
