From 46aea778070a0c774a97d2cd5bef205d192102b2 Mon Sep 17 00:00:00 2001
From: ZhaoTongYao <531131322@qq.com>
Date: Thu, 9 Jun 2022 17:15:00 +0800
Subject: [PATCH] partyOld

---
 .../visual/communityParty/partyOld.vue        | 1090 +++++++++++++++++
 1 file changed, 1090 insertions(+)
 create mode 100644 src/views/modules/visual/communityParty/partyOld.vue

diff --git a/src/views/modules/visual/communityParty/partyOld.vue b/src/views/modules/visual/communityParty/partyOld.vue
new file mode 100644
index 00000000..be0c958c
--- /dev/null
+++ b/src/views/modules/visual/communityParty/partyOld.vue
@@ -0,0 +1,1090 @@
+<template>
+  <div class="warning-box">
+    <cpt-card>
+      <div class="card-title">
+        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          党员信息统计&nbsp;&nbsp;
+          <el-cascader 
+            v-model="selectAgency"
+            :options="propTree" 
+            :props="{ checkStrictly: true }" 
+            :show-all-levels="false"
+            :getCheckedNodes="getCheckedNodes"
+            clearable @change="handleCascader">
+          </el-cascader>
+        </div> 
+      </div>
+      <div class="card-echart">
+        <div class="card-left">
+          <div class="card-left-title">党员年龄统计</div>
+          <div class="card-flex">
+            <div class="echart-wr">
+              <!-- <div class="echart-cicle"></div>  -->
+              <screen-echarts-frame class="echart-org"
+                              @myChartMethod="pieInitOk"
+                              ref="ageChart"></screen-echarts-frame>
+              <!-- <div id="echartOrg" class="echart-org"></div> -->
+            </div>
+            <div class="echarts-tips echarts-tips-wd50">
+              <div class="tips-lists">
+                <div v-for="(item, index) in ageItem" :key="index" class="tips-items">
+                  <div class="tips-items-title" :class="'tips-items-title' + item.code">
+                    {{ item.name }}
+                  </div>
+                  <div class="tips-items-num">
+                    <div class="tips-item-count">{{item.value}}</div>
+                    <div class="tips-item-has">{{ item.radio }}</div>
+                  </div>
+                </div>
+                
+              </div>
+            </div>
+            
+          </div>
+          <div class="ecahrts-button">
+            <el-button type="warning" size="small" @click="handleExport('age')">导出</el-button>
+          </div>
+          <div class="warning-box-bottom">
+            <screen-table
+              :headerList="headerList"
+              :tableData="ageList"
+              :headerStyle="headerStyle"
+              :tableContentStyle="headerStyle"
+              :visibleLoading="visibleAgeLoading"
+              :operate="false"
+              @row="handleClickRow"
+            ></screen-table>
+            <div class="pagination">
+              <el-pagination
+                :current-page="agePageNo"
+                :page-size="agePageSize"
+                background
+                layout="prev, pager, next"
+                @size-change="pageSizeChangeHandleAge"
+                @current-change="pageCurrentChangeHandleAge"
+                :total="ageTotal"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+        <div class="card-left">
+          <div class="card-left-title">党员学历统计</div>
+          <div class="card-flex">
+            <div class="echart-wr echart-wr100">
+              <!-- <div class="echart-cicle echart-cicle0"></div> -->
+              <!-- <div id="echartType" class="echart-org"></div> -->
+              <screen-echarts-frame class="echart-org"
+                              @myChartMethod="pieInitOks"
+                              ref="eduChart"></screen-echarts-frame>
+            </div>
+            <div v-if="false" class="echarts-tips">
+              <div class="tips-list">
+                <div v-for="item in eduItem" :key="item.value" class="tips-item">
+                  <div class="tips-item-icon" :style="'background:' + item.color"></div>
+                  <div class="tips-item-text">{{item.name}}</div>
+                </div>
+                
+              </div>
+            </div>
+          </div>
+          <div class="ecahrts-button">
+            <el-button type="warning" size="small" @click="handleExport('edu')">导出</el-button>
+          </div>
+          <div class="warning-box-bottom">
+            <screen-table
+              :headerList="headerEduList"
+              :tableData="eduList"
+              :headerStyle="headerStyle"
+              :tableContentStyle="headerStyle"
+              :visibleLoading="visibleLoading"
+              :operate="false"
+              @row="handleClickRow"
+            ></screen-table>
+            <div class="pagination">
+              <el-pagination
+                :current-page="pageNo"
+                :page-size="pageSize"
+                background
+                layout="prev, pager, next"
+                @size-change="pageSizeChangeHandleNew"
+                @current-change="pageCurrentChangeHandleNew"
+                :total="total"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      
+    </cpt-card>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import screenTable from "../components/screen-table/index";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+import screenEchartsFrame from "../components/screen-echarts-frame";
+import { pieOption } from './options'
+
+import * as echarts from 'echarts';
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable,
+    screenEchartsFrame
+  },
+  data() {
+    return {
+      headerList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "姓名", coulmn: 'name' },
+        { title: "年龄", coulmn: 'age' },
+        { title: "手机号码", coulmn: 'mobile' }
+      ],
+      headerStyle: [
+        {
+          'max-width': '60px'
+        },
+        {
+          'min-width': '100px'
+        },
+        {
+          'min-width': '100px'
+        },
+        {
+          'min-width': '160px'
+        }
+      ],
+      headerEduList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "姓名", coulmn: 'name' },
+        { title: "学历", coulmn: 'education' },
+        { title: "手机号码", coulmn: 'mobile' }
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      noInit: false,
+      noEduInit: false,
+      selectAgency: null,
+      ageTotalCount: 0,
+      eduTotalCount: 0,
+      propTree: [],
+      value2: '',
+      visibleAgeLoading: true,
+      visibleLoading: true,
+      agencyId: '',
+      orgType: '',
+      ageCode: '',
+      eduCode: '',
+      pageNo: 1,
+      pageSize: 10,
+      agePageNo: 1,
+      agePageSize: 10,
+      total: 0,
+      ageTotal: 0,
+      eduItem: [
+        {
+          name: '小学',
+          value: 0,
+          color: 'rgba(27, 81, 255, 1)'
+        }, {
+          name: '初中',
+          value: 1,
+          color: 'rgba(0, 229, 237, 1)'
+        }, {
+          name: '高中',
+          value: 2,
+          color: 'rgba(120, 0, 255, 1)'
+        }, {
+          name: '中专',
+          value: 3,
+          color: 'rgba(255, 120, 0, 1)'
+        }, {
+          name: '大专',
+          value: 4,
+          color: 'rgba(255, 186, 0, 1)'
+        }, {
+          name: '本科',
+          value: 5,
+          color: 'rgba(22, 215, 131, 1)'
+        }, {
+          name: '硕士',
+          value: 6,
+          color: 'rgba(42, 0, 255, 1)'
+        }, {
+          name: '博士',
+          value: 7,
+          color: 'rgba(198, 0, 255, 1)'
+        }, {
+          name: '其他',
+          value: 8,
+          color: 'rgba(255, 42, 0, 1)'
+        }
+      ],
+      ageItem: [
+        {
+          name: '50岁以下',
+          value: 1,
+          color: 'rgba(27, 81, 255, 1)'
+        }, {
+          name: '50-59岁',
+          value: 2,
+          color: 'rgba(0, 229, 237, 1)'
+        }, {
+          name: '60-69岁',
+          value: 3,
+          color: 'rgba(120, 0, 255, 1)'
+        }, {
+          name: '70-79岁',
+          value: 4,
+          color: 'rgba(255, 120, 0, 1)'
+        }, {
+          name: '80岁以上',
+          value: 5,
+          color: 'rgba(255, 186, 0, 1)'
+        }
+      ],
+      ageList: [],
+      eduList: [],
+      pieAgeChartS: null,
+      pieEduChartSs: null,
+      pieAgeOptions: null,
+      pieEduOptions: null
+    };
+  },
+  async mounted() {
+    await nextTick(100);
+    await this.getAgencyList()
+    this.getAgeCount(this.$store.state.user.agencyId, 'agency')
+    this.getEduCount(this.$store.state.user.agencyId, 'agency')
+    // this.initAgeCharts()
+    // this.initEduCharts()
+    this.getAgeList(this.$store.state.user.agencyId, 'agency')
+    this.getEduList(this.$store.state.user.agencyId, 'agency')
+    // this.initChartType()
+  },
+  methods: {
+    pieInitOk (dom) {
+      console.log('pie准备好了', dom)
+      this.pieAgeChartS = dom
+      // this.pieInitState = true
+
+    },
+    pieInitOks (dom) {
+      console.log('pies准备好了', dom)
+      this.pieEduChartS = dom
+      // this.pieInitState = true
+
+    },
+    initAgeCharts() {
+      // const eId = document.getElementById('echartOrg')
+      // let _charts = echarts.init(eId)
+      let option = {
+      
+      }
+      this.pieAgeOptions = pieOption(this.pieAgeChartS)
+      this.clickAgePie(0)
+      let fun = params => {
+        this.clickAgePie(params.dataIndex)
+      }
+      this.$refs.ageChart.handleClick(fun)
+      // option && this.$refs.pieChart.setOption(option);
+
+    },
+    initEduCharts() {
+      // const eId = document.getElementById('echartOrg')
+      // let _charts = echarts.init(eId)
+      let option = {
+      
+      }
+      let legend = {
+        show: true,
+        orient: 'vertical',
+        top: '20%',
+        right: 0,
+        textStyle: {
+          width: 90,
+          color: '#fff',
+          rich: {
+            a: {
+              width: 90
+            }
+          }
+        },
+        formatter: name => {
+          for (let a = 0; a < this.eduItem.length; a++) {
+            // this.data  这个数据中有名称和次数
+            if (this.eduItem[a].name === name) {
+              //两个名称进行对比，取出对应的次数
+              let params1 = name + "\n"; //然后return你需要的legend格式即可
+              console.log(params1);
+              let tmp = params1.split("\n");
+              let res = "" + params1;
+              for (let i in tmp) {
+                res = res.replace(tmp[i], "");
+              }
+              return res + params1;
+            }
+          }
+        }
+      }
+      this.pieEduOptions = pieOption(this.pieEduChartS)
+      this.pieEduOptions.legend = { ...legend }
+      // this.pieEduOptions.series[1].width = 400
+      this.clickEduPie(0)
+      let fun = params => {
+        this.clickEduPie(params.dataIndex)
+      }
+      this.$refs.eduChart.handleClick(fun)
+      // this.noInit = true
+      // option && this.$refs.pieChart.setOption(option);
+
+    },
+    initChartType() {
+      const eId = document.getElementById('echartType')
+      let _charts = echarts.init(eId)
+      
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          show: true,
+          orient: 'vertical',
+          top: '20%',
+          right: 0,
+          textStyle: {
+            width: 90,
+            color: '#fff',
+            rich: {
+              a: {
+                width: 90
+              }
+            }
+          },
+          formatter: name => {
+            for (let a = 0; a < this.eduItem.length; a++) {
+              // this.data  这个数据中有名称和次数
+              if (this.eduItem[a].name === name) {
+                //两个名称进行对比，取出对应的次数
+                let params1 = name + "\n"; //然后return你需要的legend格式即可
+                console.log(params1);
+                let tmp = params1.split("\n");
+                let res = "" + params1;
+                for (let i in tmp) {
+                  res = res.replace(tmp[i], "");
+                }
+                return res + params1;
+              }
+            }
+          }
+        },
+        title: {
+          text: '12000',  //图形标题，配置在中间对应效果图的80%
+          subtext: '总数',
+          left: 196,
+          top: "center",
+          textAlign: 'center',
+          textStyle: {
+            color: "#fff",
+            fontSize: 28,
+            align: "center"
+          },
+          subtextStyle: {
+            fontSize: 16,
+            color: '#fff',
+            align: 'center'
+          }
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            // center: ['50%', '50%'],
+            radius: ['40%', '60%'],
+            avoidLabelOverlap: true,
+            // top: top + '%',
+            // height: '80%',
+            // left: 0,
+            width: 400,
+            label: {
+              position: 'outside',
+              alignTo: 'edge',
+              formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+              minMargin: 5,
+              edgeDistance: 20,
+              lineHeight: 15,
+              color: '#fff',
+              fontSize: 15,
+              rich: {
+                name: {
+                  padding: [0, 6, 0, 6]
+                },
+                a: {
+                  fontSize: 15,
+                  color: '#fff',
+                  padding: [0, 6, 0, 6]
+                },
+                r: {
+                  backgroundColor: 'auto',
+                  borderRadius: 6,
+                  width: 6,
+                  height: 6,
+                  // padding: [3, 3, 0, -12]
+                }
+              }
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '14',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 0,
+              maxSurfaceAngle: 80
+            },
+            labelLayout: function (params) {
+              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+              const points = params.labelLinePoints;
+              // Update the end point.
+              points[2][0] = isLeft
+                ? params.labelRect.x
+                : params.labelRect.x + params.labelRect.width;
+              return {
+                labelLinePoints: points
+              };
+            },
+            data: this.eduItem
+          }
+        ]
+      }
+      option && _charts.setOption(option);
+
+    },
+    clickAgePie (seriesIndex) {
+      let _code = ''
+      let isClick = false
+      console.log('seriesIndex---', seriesIndex)
+      this.ageItem.forEach((element, index) => {
+        if (index === seriesIndex) {
+          _code = element.code
+          
+          if (!this.noInit) isClick = false
+          else {
+            element.isClick = !element.isClick
+            isClick = element.isClick
+          }
+
+          element.label = {
+            show: true,
+
+          };
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+
+          };
+          console.log('zlcm', element)
+        } else {
+          element.isClick = false
+          element.label = {
+            show: false,
+
+          };
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+
+          };
+
+        }
+      });
+      this.ageCode = isClick && _code || ''
+      this.pieAgeOptions.title.text = this.ageTotalCount
+      this.pieAgeOptions.series[1].data = this.ageItem
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.ageChart.setOption(this.pieAgeOptions)
+      if (this.noInit) {
+        const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
+        const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+         console.log('zlcm---isClick', isClick)
+         this.agePageNo = 1
+        this.getAgeList(_arr[0], orgType, isClick && _code || '')
+      }
+      this.noInit = true
+
+    },
+    clickEduPie (seriesIndex) {
+      let _code = ''
+      let isClick = false
+      this.eduItem.forEach((element, index) => {
+        if (index === seriesIndex) {
+          _code = element.code
+
+          if (!this.noEduInit) isClick = false
+          else {
+            element.isClick = !element.isClick
+            isClick = element.isClick
+          }
+
+          element.label = {
+            show: true,
+
+          };
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+
+          };
+          console.log('zlcm')
+        } else {
+          element.isClick = false
+          element.label = {
+            show: false,
+
+          };
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+
+          };
+
+        }
+      });
+      this.eduCode = isClick && _code || ''
+      this.pieEduOptions.title.text = this.eduTotalCount
+      this.pieEduOptions.series[1].data = this.eduItem
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.eduChart.setOption(this.pieEduOptions)
+      if (this.noEduInit) {
+        const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
+        const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+        this.pageNo = 1
+        this.getEduList(_arr[0], orgType, isClick && _code || '')
+      }
+      this.noEduInit = true
+      
+
+    },
+    async getAgeCount(orgId, orgType) {
+      const url = "/epmetuser/icresiuser/partymemberagestatistics";
+      let params = {
+        orgId,
+        orgType
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        const colorList = [
+          {
+            name: '50岁以下',
+            value: 1,
+            color: '#FAC126'
+          }, {
+            name: '50-59岁',
+            value: 2,
+            color: '#3DDA83'
+          }, {
+            name: '60-69岁',
+            value: 3,
+            color: '#A800FF'
+          }, {
+            name: '70-79岁',
+            value: 4,
+            color: '#2865FA'
+          }, {
+            name: '80岁以上',
+            value: 5,
+            color: '#00DAD2'
+          }
+        ]
+        this.ageItem = data.map((item, index) => {
+          return {
+            ...item,
+            name: item.label,
+            isClick: false,
+            itemStyle: {
+              color: colorList[index].color
+            }
+          }
+        })
+        this.ageTotalCount = 0
+        data.forEach(item => {
+          this.ageTotalCount += Number(item.value)
+        })
+        this.initAgeCharts()
+      } else {
+      }
+    },
+    async getEduCount(orgId, orgType) {
+      const url = "/epmetuser/icresiuser/partymembereducationstatistics";
+      let params = {
+        orgId,
+        orgType
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.eduItem = data.map(item => {
+          return {
+            ...item,
+            name: item.label,
+            isClick: false
+          }
+        })
+        this.eduTotalCount = 0
+        data.forEach(item => {
+          this.eduTotalCount += Number(item.value)
+        })
+        this.initEduCharts()
+      } else {
+      }
+    },
+    async getAgeList(orgId, orgType, _code) {
+      
+      this.visibleAgeLoading = true
+      const url = "/epmetuser/icresiuser/partymemberagelist";
+      let params = {
+        orgId,
+        orgType,
+        code: _code || '',
+        pageNo: this.agePageNo,
+        pageSize: this.agePageSize
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.ageList = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1
+          }
+        })
+        this.ageTotal = data.total
+      } else {
+        this.$message.error(msg)
+      }
+      // if (_code == 0 || _code) this.noInit = true
+      this.visibleAgeLoading = false
+    },
+    async getEduList(orgId, orgType, _code) {
+      this.visibleLoading = true
+      const url = "/epmetuser/icresiuser/partymembereducationlist";
+      let params = {
+        orgId,
+        orgType,
+        code: _code || '',
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.eduList = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1
+          }
+        })
+        this.total = data.total
+      } else {
+        this.$message.error(msg)
+      }
+      this.visibleLoading = false
+    },
+    async getAgencyList(node, resolve) {
+      // const url = "/gov/org/customeragency/staffinagencylist";
+      const url = '/gov/org/customeragency/agencygridtree'
+      // let params = {
+      //   agencyId: this.$store.state.user.agencyId,
+      // };
+      const { data, code, msg } = await requestPost(url);
+      if (code === 0) {
+        console.log('data-org----o', data)
+        this.selectAgency = [`${data.agencyId}-${data.level}`]
+        this.orgType = data.level
+        this.agencyId = data.agencyId
+        let arr = []
+        arr.push(data)
+        this.propTree = arr && this.getTreeData(arr)
+
+      } else {
+      }
+    },
+    getTreeData(data){
+      if (!Array.isArray(data)) return []
+      let arr = data.map(item => {
+        let _item = {}
+        if (item.subAgencyList) {
+          if (item.subAgencyList.length === 0) {
+            _item = { 
+              label: item.agencyName,
+              value: item.agencyId + '-' + item.level,
+              level: item.level,
+              children: undefined 
+            }
+          } else _item = { 
+            label: item.agencyName,
+            value: item.agencyId + '-' + item.level,
+            level: item.level,
+            children: this.getTreeData(item.subAgencyList)}
+        } else {
+          _item = { 
+            label: item.agencyName,
+            value: item.agencyId + '-' + item.level,
+            level: item.level,
+          }
+        }
+        return _item
+      })
+      return arr
+    },
+    handleClickRow(val) {
+      console.log('click-row----', val)
+      this.$router.push({
+        path: `/main-shuju/visual-basicinfo-people/${val.userId}`,
+      });
+    },
+    handleCascader(val) {
+      console.log('val-vvv', val)
+      const _arr = val[val.length - 1].split('-')
+      const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+      this.agencyId = _arr[0]
+      this.orgType = orgType
+      this.noInit = false
+      this.noEduInit = false
+      this.getAgeCount(_arr[0], orgType)
+      this.getEduCount(_arr[0], orgType)
+      this.getAgeList(_arr[0], orgType)
+      this.getEduList(_arr[0], orgType)
+    },
+    getCheckedNodes(val) {
+      console.log('val-nnn', val)
+    },
+    lazyLoad(node, resolve) {
+      setTimeout(() => {
+        this.getAgeList(node, resolve)
+      }, 500)
+    },
+    pageSizeChangeHandleAge(val) {
+      this.agePageNo = 1
+      this.agePageSize = val
+      this.getAgeList(this.agencyId, this.orgType, this.ageCode)
+    },
+    pageCurrentChangeHandleAge (val) {
+      this.agePageNo = val
+      this.getAgeList(this.agencyId, this.orgType, this.ageCode)
+    },
+    pageSizeChangeHandleNew(val) {
+      this.pageNo = 1;
+      this.pageSize = val;
+      this.getEduList(this.agencyId, this.orgType, this.eduCode)
+    },
+    pageCurrentChangeHandleNew(val) {
+      this.pageNo = val;
+      this.getEduList(this.agencyId, this.orgType, this.eduCode)
+    },
+    async handleExport(type) {
+      const urls = {
+        age: '/epmetuser/icresiuser/partymemberagelist/export',
+        edu: '/epmetuser/icresiuser/partymembereducationlist/export'
+      }
+      const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
+      const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+      let params = {
+        orgId: _arr[0],
+        orgType: orgType,
+        code: type == 'age' ? this.ageCode : this.eduCode,
+      }
+      // .post('epmetuser/icresiuser/exportExcel', params)
+      await this.$http({
+        method: 'POST',
+        url: urls[type],
+        responseType: 'blob',
+        data: params
+      })
+        .then(res => {
+          console.log('resllll', res)
+          let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
+          console.log('filename', fileName)
+          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
+          var url = window.URL.createObjectURL(blob)
+          var aLink = document.createElement('a')
+          aLink.style.display = 'none'
+          aLink.href = url
+          aLink.setAttribute('download', fileName)
+          document.body.appendChild(aLink)
+          aLink.click()
+          document.body.removeChild(aLink) //下载完成移除元素
+          window.URL.revokeObjectURL(url) //释放掉blob对象
+        })
+        .catch((err) => {
+          console.log('获取导出失败', err)
+          return this.$message.error('网络错误')
+        })
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  ::v-deep .el-dropdown {
+    font-size: 18px;
+    color: #fff;
+    font-weight: 800;
+  }
+  .title-time {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin-left: 30px;
+    font-size: 14px;
+    color: #fff;
+    .title-time-label {
+      margin-right: 10px;
+    }
+    ::v-deep .el-date-editor--month {
+      width: 100px;
+      .el-input__inner {
+        width: 100px;
+        height: 24px;
+        box-sizing: border-box;
+        padding: 0;
+        font-size: 14px;
+        color: #fff;
+        line-height: 24px;
+        text-align: center;
+        background: #06186D;
+        border: 1px solid #1A64CC;
+        border-radius: 2px;
+      }
+      .el-input__prefix {
+        display: none;
+      }
+      .el-input__suffix {
+        right: 0;
+        .el-input__icon {
+          line-height: 24px;
+        }
+      }
+      
+    }
+  }
+  .title-label {
+    font-size: 20px;
+    font-weight: 800;
+    ::v-deep .el-input {
+      
+      width: 180px;
+      .el-input__inner {
+        font-size: 18px;
+        // font-weight: 800;
+        color: #fff;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-down::before {
+          content: "\e790";
+      }
+    }
+  }
+}
+.card-echart {
+  display: flex;
+  margin-top: 40px;
+  height: 100%;
+  .card-left {
+    position: relative;
+    flex: 1;
+    // display: flex;
+    height: 100%;
+    .card-flex {
+      width: 100%;
+      display: flex;
+    }
+  }
+}
+.card-left-title {
+  position: relative;
+  padding-left: 40px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+}
+.card-left-title::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+  margin-top: -6px;
+  background: #2865FA;
+  border-radius: 50%;
+}
+.echart-wr {
+  position: relative;
+  flex-shrink: 0;
+  width: 50%;
+  height: 320px;
+  box-sizing: border-box;
+  .echart-org {
+    width: 100%;
+    height: 100%;
+  }
+  .echart-cicle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 240px;
+    height: 240px;
+    box-sizing: border-box;
+    margin-top: -120px;
+    margin-left: -120px;
+    border: 1px dashed rgba(0, 96, 240, 1);
+    border-radius: 50%;
+  }
+  .echart-cicle0 {
+    left: 80px;
+    margin-left: 0;
+  }
+}
+.echart-wr100 {
+  width: 70%;
+}
+.echarts-tips {
+  width: 40%;
+  // flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.echarts-tips-wd50 {
+  width: 320px;
+}
+.tips-list, .tips-item, .tips-lists, .tips-items-num {
+  display: flex;
+  align-items: center;
+}
+.tips-list {
+  // width: 100%;
+  // height: 100%;
+  flex-wrap: wrap;
+  // justify-content: center;
+  .tips-item {
+    // flex: 1;
+    width: 50%;
+    margin-top: 20px;
+    // margin-right: 40px;
+    cursor: pointer;
+    .tips-item-icon {
+      width: 20px;
+      height: 10px;
+      box-sizing: border-box;
+      margin-right: 8px;
+      background: #1B51FF;
+      border-radius: 2px;
+    }
+    .tips-item-text {
+      font-size: 16px;
+      color: #D2E7FF;
+    }
+  }
+}
+.tips-lists {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 30px 0 0 30px;
+  flex-wrap: wrap;
+  .tips-items {
+    margin-bottom: 30px;
+    margin-right: 40px;
+    // width: 50%;
+    cursor: pointer;
+    .tips-items-title {
+      position: relative;
+      width: 100px;
+      height: 26px;
+      box-sizing: border-box;
+      padding-left: 6px;
+      font-size: 16px;
+      color: #EFF0F1;
+      background: url('../../../../assets/img/shuju/measure/huang@2x.png') no-repeat left bottom;
+      &1 {
+        background: url('../../../../assets/img/shuju/measure/lv@2x.png') no-repeat left bottom;
+      }
+      &2 {
+        background: url('../../../../assets/img/shuju/measure/zi@2x.png') no-repeat left bottom;
+      }
+      &3 {
+        background: url('../../../../assets/img/shuju/measure/lan@2x.png') no-repeat left bottom;
+      }
+      &4 {
+        background: url('../../../../assets/img/shuju/measure/lanlv@2x.png') no-repeat left bottom;
+      }
+    }
+    .tips-items-num {
+      justify-content: space-between;
+      box-sizing: border-box;
+      margin-top: 10px;
+      // padding-right: 30px;
+      font-size: 20px;
+      .tips-item-has {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.warning-box-bottom {
+  height: calc(100% - 500px);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 30px;
+  // overflow-y: scroll;
+}
+.ecahrts-button {
+  width: 100%;
+  padding-right: 30px;
+  text-align: right;
+  ::v-deep .el-button--warning {
+
+    background: linear-gradient(90deg, #0863EA, #3B9FFC);
+    border: 0;
+  }
+}
+</style>