From 99368c5f862ce626cf3bfefca9992626fc821b22 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 25 May 2023 14:15:10 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=AF=E5=88=86=E7=BB=9F=E8=AE=A1=E4=B8=B0?=
 =?UTF-8?q?=E9=83=BD=20=3D>=20=E6=95=B0=E5=AD=97=E5=B9=B3=E6=98=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppIntegralStatistics.vue                 | 567 +++++++++---------
 1 file changed, 286 insertions(+), 281 deletions(-)

diff --git a/project/shuzipingchang/app/AppIntegralStatistics/AppIntegralStatistics.vue b/project/shuzipingchang/app/AppIntegralStatistics/AppIntegralStatistics.vue
index 9ed37454..c0f72564 100644
--- a/project/shuzipingchang/app/AppIntegralStatistics/AppIntegralStatistics.vue
+++ b/project/shuzipingchang/app/AppIntegralStatistics/AppIntegralStatistics.vue
@@ -1,101 +1,115 @@
 <template>
   <section class="AppIntegralStatistics">
-    <el-row class="overallStatistics">
-      <div class="title">
-        <p>总体统计</p>
-        <div class="title_right">
-          <div>
-            <span v-for="(item,index) in timeCheck" :key="index" :class="type == index? 'active':''"
-             @click="timeChange(index)">{{ item }}</span>
-          </div>
+    <ai-detail list>
+      <ai-title slot="title" title="总体统计">
+        <template #rightBtn>
+          <el-row type="flex" align="middle">
+            <span class="shortcut" v-for="(item,i) in timeCheck" :key="i" :class="{active:type==i}"
+                  @click="timeChange(i)" v-text="item"/>
             <el-cascader ref="cascader1" v-model="girdArr" :options="girdOptions" placeholder="所属网格" size="small"
-              :props="defaultProps" :show-all-levels="false" @change="gridChange" clearable></el-cascader>
-        </div>
-      </div>
-      <div class="card_list">
-        <div class="card">
-          <h2>积分余额汇总
-            <el-tooltip
-              placement="right"
-              style="width: 16px;"
-              content="截止目前所有居民剩余可用积分余额的总和">
-              <i class="el-icon-warning-outline"></i>
-            </el-tooltip>
-          </h2>
-          <p class="color1">{{ data.nowIntegral || 0 }}</p>
-        </div>
-        <div class="card">
-          <h2>发放积分</h2>
-          <p class="color1">{{ data.addIntegral || 0 }}</p>
-        </div>
-        <div class="card">
-          <h2>消耗积分</h2>
-          <p class="color1">{{ Math.abs(data.reduceIntegral) || 0 }}</p>
-        </div>
-      </div>
-      <div class="echertsBox">
-        <div class="left_Box">
-          <p>个人积分排行</p>
-          <div>
-            <div id="chart1" style="height: 300px; width: 100%;" v-show="userSortListX.length && userSortListY.length"></div>
-            <ai-empty v-show="!userSortListX.length && !userSortListY.length" style="height: 200px; width: 100%;" id="empty"></ai-empty>
-          </div>
-        </div>
-        <div class="right_Box">
-          <p>网格积分排行</p>
-          <div>
-            <div id="chart2" style="height: 300px; width: 100%;" v-show="girdSortListX.length && girdSortListY.length"></div>
-            <ai-empty v-show="!girdSortListX.length && !girdSortListY.length" style="height: 200px; width: 100%;" id="empty"></ai-empty>
-          </div>
-        </div>
-      </div>
-    </el-row>
-
-    <ai-card>
-      <ai-title slot="title" title="积分明细"/>
+                         :props="defaultProps" :show-all-levels="false" @change="gridChange" clearable/>
+          </el-row>
+        </template>
+      </ai-title>
       <template #content>
-        <ai-search-bar>
-          <template #left>
-            <el-cascader ref="cascader2" v-model="girdIdArr" :options="girdOptions" placeholder="所属网格" size="small"
-              :props="defaultProps" :show-all-levels="false" clearable @change="gridChangeOpt"></el-cascader>
-            <ai-select v-model="search.integralType" placeholder="请选择类型" @change="current=1, getTableData()"
-            :selectList="dict.getDict('integralType')"/>
-            <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
-              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
-            </el-date-picker>
+        <div class="card_list">
+          <div class="card">
+            <h2>积分余额汇总
+              <el-tooltip
+                  placement="right"
+                  style="width: 16px;"
+                  content="截止目前所有居民剩余可用积分余额的总和">
+                <i class="el-icon-warning-outline"></i>
+              </el-tooltip>
+            </h2>
+            <p class="color1">{{ data.nowIntegral || 0 }}</p>
+          </div>
+          <div class="card">
+            <h2>发放积分</h2>
+            <p class="color1">{{ data.addIntegral || 0 }}</p>
+          </div>
+          <div class="card">
+            <h2>消耗积分</h2>
+            <p class="color1">{{ Math.abs(data.reduceIntegral) || 0 }}</p>
+          </div>
+        </div>
+        <el-row type="flex" class="mar-t20 gap-20">
+          <div class="chartBox fill">
+            <b>个人积分排行</b>
+            <div>
+              <div id="chart1" style="height: 300px; width: 100%;"
+                   v-show="userSortListX.length && userSortListY.length"></div>
+              <ai-empty v-if="!userSortListX.length && !userSortListY.length" style="height: 200px; width: 100%;"
+                        id="empty"/>
+            </div>
+          </div>
+          <div class="chartBox fill">
+            <b>网格积分排行</b>
+            <div>
+              <div id="chart2" style="height: 300px; width: 100%;" v-show="girdSortListX.length && girdSortListY.length"/>
+              <ai-empty v-show="!girdSortListX.length && !girdSortListY.length" style="height: 200px; width: 100%;"
+                        id="empty"/>
+            </div>
+          </div>
+        </el-row>
+        <el-row type="flex" class="mar-t20 gap-20">
+          <div class="chartBox fill" v-for="item in sta" :key="item.id">
+            <div flex>
+              <b class="fill" v-text="item.label"/>
+              <div class="color-primary" v-text="`总次数：${item.total}`"/>
+            </div>
+            <div class="chart" :id="item.id" v-show="item.sta.length>0"/>
+            <ai-empty v-if="item.sta.length==0" style="height: 200px; width: 100%;"/>
+          </div>
+        </el-row>
+        <ai-card class="mar-t20" title="积分明细">
+          <template #content>
+            <ai-search-bar>
+              <template #left>
+                <el-cascader ref="cascader2" v-model="girdIdArr" :options="girdOptions" placeholder="所属网格"
+                             size="small"
+                             :props="defaultProps" :show-all-levels="false" clearable
+                             @change="gridChangeOpt"></el-cascader>
+                <ai-select v-model="search.integralType" placeholder="请选择类型" @change="current=1, getTableData()"
+                           :selectList="dict.getDict('integralType')"/>
+                <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
+                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                                @change="onChange">
+                </el-date-picker>
+              </template>
+              <template #right>
+                <el-input size="small" placeholder="请输入姓名" v-model="search.userName" clearable
+                          @clear="current = 1, search.userName = '', getTableData()" suffix-icon="iconfont iconSearch"
+                          v-throttle="() => {(current = 1), getTableData();}"/>
+              </template>
+            </ai-search-bar>
+            <ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size"
+                      @getList="getTableData" :col-configs="colConfigs" :dict="dict">
+              <el-table-column slot="eventDesc" label='事件' align="center" width="400px" show-overflow-tooltip>
+                <template slot-scope="{ row }">
+                  <span>{{ row.integralRuleName || row.eventDesc }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column slot="changeIntegral" label="变动积分" align="center">
+                <template slot-scope="{ row }">
+                  <span>{{ row.integralCalcType == 0 ? '-' : '+' }}{{ row.changeIntegral }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column slot="options" label="操作" align="center">
+                <template slot-scope="{ row }">
+                  <el-button type="text" @click="open(row.id)">详情</el-button>
+                </template>
+              </el-table-column>
+            </ai-table>
           </template>
-          <template #right>
-            <el-input size="small" placeholder="请输入姓名" v-model="search.userName" clearable
-              @clear="current = 1, search.userName = '', getTableData()" suffix-icon="iconfont iconSearch"
-              v-throttle="() => {(current = 1), getTableData();}" />
-          </template>
-        </ai-search-bar>
-        <ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size"
-                  @getList="getTableData" :col-configs="colConfigs" :dict="dict">
-          <el-table-column slot="eventDesc" label='事件' align="center" width="400px" show-overflow-tooltip>
-            <template slot-scope="{ row }">
-              <span>{{ row.integralRuleName || row.eventDesc}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column slot="changeIntegral" label="变动积分" align="center">
-            <template slot-scope="{ row }">
-              <span>{{ row.integralCalcType == 0 ? '-' : '+' }}{{ row.changeIntegral }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column slot="options" label="操作"  align="center">
-            <template slot-scope="{ row }">
-              <el-button type="text" @click="open(row.id)">详情</el-button>
-            </template>
-          </el-table-column>
-        </ai-table>
+        </ai-card>
       </template>
-    </ai-card>
-
+    </ai-detail>
     <el-dialog title="详情" :visible.sync="dialog" customFooter width="700">
       <ai-detail>
         <template #content>
           <ai-wrapper>
-            <ai-info-item label="姓名" :value="details.integralUserName" />
+            <ai-info-item label="姓名" :value="details.integralUserName"/>
             <ai-info-item label="所属网格" :value="details.girdName"/>
             <ai-info-item label="事件" isLine :value="details.eventDesc">
               <span v-if="details.integralRuleId">{{ details.integralRuleName }}</span>
@@ -116,10 +130,9 @@
         <el-button @click="dialog = false" style="width: 92px">关闭</el-button>
       </span>
     </el-dialog>
-
     <ai-dialog :visible.sync="dialogDate" title="选择时间" width="500px" customFooter>
       <el-date-picker v-model="timeList" size="small" type="daterange" value-format="yyyy-MM-dd"
-        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+                      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
       </el-date-picker>
       <el-button slot="footer" @click="selectDete" type="primary">确认</el-button>
     </ai-dialog>
@@ -127,11 +140,15 @@
 </template>
 
 <script>
-import { mapState } from "vuex"
+import {mapState} from "vuex"
 import * as echarts from 'echarts';
 import dayjs from 'dayjs'
+import AiDetail from "dui/packages/layout/AiDetail.vue";
+import AiTitle from "dui/packages/basic/AiTitle.vue";
+
 export default {
   name: "AppIntegralStatistics",
+  components: {AiTitle, AiDetail},
   label: "积分统计",
   props: {
     instance: Function,
@@ -151,13 +168,13 @@ export default {
         startTime: '',
         endTime: '',
       },
-      girdIdArr:[],
+      girdIdArr: [],
       total: 0,
       size: 10,
       current: 1,
       girdList: [],
       time: [],
-      timeCheck: ['昨日','近7天','近30天','自定义'],
+      timeCheck: ['昨日', '近7天', '近30天', '自定义'],
       dialog: false,
       dialogDate: false,
       timeList: [],
@@ -180,29 +197,28 @@ export default {
       userSortListY: [],
       girdSortListX: [],
       girdSortListY: [],
+      sta: []
     }
   },
   computed: {
     ...mapState(['user']),
     colConfigs() {
       return [
-        { prop: "integralUserName", label: '姓名', align: "left", width: "200px" },
-        { prop: "girdName", label: '所属网格', align: "center", width: "180px" },
-        { slot: "eventDesc"},
-        { prop: "integralType", label: '类型', align: "center", dict: "integralType"},
-        { slot: "changeIntegral", label: '积分变动', align: "center", },
-        { prop: "nowIntegral", label: '剩余积分', align: "center", },
-        { prop: "createTime", label: '时间', align: "center", },
-        { slot: "options" }
+        {prop: "integralUserName", label: '姓名', align: "left", width: "200px"},
+        {prop: "girdName", label: '所属网格', align: "center", width: "180px"},
+        {slot: "eventDesc"},
+        {prop: "integralType", label: '类型', align: "center", dict: "integralType"},
+        {slot: "changeIntegral", label: '积分变动', align: "center",},
+        {prop: "nowIntegral", label: '剩余积分', align: "center",},
+        {prop: "createTime", label: '时间', align: "center",},
+        {slot: "options"}
       ]
-    }
+    },
   },
   created() {
-    this.time = [dayjs().subtract(1,'week').format('YYYY-MM-DD'),dayjs().format('YYYY-MM-DD')]
-    this.$dict.load('epidemicDangerousAreaLevel','integralType','integralRuleEvent','integralRuleEventType').then(() => {
-      this.getStatistics()
+    this.time = [dayjs().subtract(1, 'week').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
+    this.$dict.load('epidemicDangerousAreaLevel', 'integralType', 'integralRuleEvent', 'integralRuleEventType').then(() => {
       this.getGridList()
-      this.getRanking()
       this.search.startTime = this.time?.[0]
       this.search.endTime = this.time?.[1]
       this.getTableData()
@@ -211,23 +227,44 @@ export default {
   methods: {
     // 统计接口
     getStatistics() {
-      this.instance.post('/app/appintegraluser/allAppletUserIntegral',null, {
-        params: {
-          type: this.type,
-          girdId: this.girdId,
-          startTime: this.startTime,
-          endTime: this.endTime,
-        }
-      }).then(res => {
-        if(res?.data) {
-          this.data = res.data
-        }
-      })
+      return Promise.all([
+        this.instance.post('/app/appintegraluser/allAppletUserIntegral', null, {
+          params: {
+            type: this.type,
+            girdId: this.girdId,
+            startTime: this.startTime,
+            endTime: this.endTime,
+          }
+        }).then(res => {
+          if (res?.data) {
+            return this.data = res.data
+          }
+        }),
+        this.instance.post("/app/appwechatsigninfo/userSignAndIntegralApplyAndIntegralExchangeSort", null, {
+          params: {
+            type: this.type,
+            girdId: this.girdId,
+            startTime: this.startTime,
+            endTime: this.endTime,
+          }
+        }).then(res => {
+          if (res?.data) {
+            const {
+              signCountList = [], integralApplyCountList = [], integralExchangeCountList = [],
+              signCount = 0, integralExchangeCount = 0, integralApplyCount = 0
+            } = res.data
+            return this.sta = [
+              {label: "签到次数统计", id: 'signCount', sta: signCountList, total: signCount},
+              {label: "积分申请次数统计", id: 'integralApplyCount', sta: integralApplyCountList, total: integralApplyCount},
+              {label: "积分兑换次数统计（小程序用户）", id: 'integralExchangeCount', sta: integralExchangeCountList, total: integralExchangeCount}
+            ]
+          }
+        }).then(() => this.sta.map(this.renderChart))
+      ])
     },
-
     // 人员、网格排行
     getRanking() {
-      this.instance.post('/app/appintegraluser/userAndGirdIntegralSortByApplet',null,{
+      return this.instance.post('/app/appintegraluser/userAndGirdIntegralSortByApplet', null, {
         params: {
           type: this.type,
           girdId: this.girdId,
@@ -235,19 +272,21 @@ export default {
           endTime: this.endTime
         }
       }).then((res) => {
-        if(res?.data) {
-          this.userSortListX = res.data.userSortList.map(e=> e.userName).reverse()
-          this.userSortListY = res.data.userSortList.map(e=> e.changeIntegral).reverse()
-          this.girdSortListX = res.data.girdSortList.map(e=> e.girdName).reverse()
-          this.girdSortListY = res.data.girdSortList.map(e=> e.changeIntegral).reverse()
-          this.getColEcherts1(this.userSortListX,this.userSortListY)
-          this.getColEcherts2(this.girdSortListX,this.girdSortListY)
+        if (res?.data) {
+          this.userSortListX = res.data.userSortList.map(e => e.userName).reverse()
+          this.userSortListY = res.data.userSortList.map(e => e.changeIntegral).reverse()
+          this.girdSortListX = res.data.girdSortList.map(e => e.girdName).reverse()
+          this.girdSortListY = res.data.girdSortList.map(e => e.changeIntegral).reverse()
+          return 1;
         }
+      }).then(() => {
+        this.getColEcherts1(this.userSortListX, this.userSortListY)
+        this.getColEcherts2(this.girdSortListX, this.girdSortListY)
       })
     },
     // 积分明细
     getTableData() {
-      this.instance.post('/app/appintegraluser/girdIntegralDetailByApplet',null,{
+      this.instance.post('/app/appintegraluser/girdIntegralDetailByApplet', null, {
         params: {
           ...this.search,
           current: this.current,
@@ -255,7 +294,7 @@ export default {
           total: this.total,
         }
       }).then(res => {
-        if(res?.data) {
+        if (res?.data) {
           this.tableData = res.data.records
           this.total = res.data.total
         }
@@ -269,7 +308,7 @@ export default {
       this.getTableData()
     },
 
-    getColEcherts1(xData,yData) {
+    getColEcherts1(xData, yData) {
       let chartDom1 = document.getElementById('chart1');
       chartDom1.style.width = (window.innerWidth - 435) / 2 + "px";
       this.myChart1 = echarts.init(chartDom1);
@@ -301,7 +340,6 @@ export default {
             show: false,
           },
         },
-
         series: [
           {
             data: yData,
@@ -324,9 +362,8 @@ export default {
           }
         ]
       }, true);
-      window.addEventListener("resize", this.onResize)
     },
-    getColEcherts2(xData,yData) {
+    getColEcherts2(xData, yData) {
       let chartDom2 = document.getElementById('chart2');
       chartDom2.style.width = (window.innerWidth - 435) / 2 + "px";
       this.myChart2 = echarts.init(chartDom2);
@@ -358,16 +395,16 @@ export default {
             show: false,
           },
           triggerEvent: true,
-            //设置文本过长超出隐藏...表示
-            axisLabel:{
-              margin: 8,
-              formatter: function(params){
-                var val=""
-                if(params.length > 8) {
-                  val = params.substr(0,8)+'...'
-                  return val
-                } else {
-                  return params;
+          //设置文本过长超出隐藏...表示
+          axisLabel: {
+            margin: 8,
+            formatter: function (params) {
+              var val = ""
+              if (params.length > 8) {
+                val = params.substr(0, 8) + '...'
+                return val
+              } else {
+                return params;
               }
             }
           },
@@ -394,14 +431,11 @@ export default {
           }
         ]
       }, true);
-      window.addEventListener("resize", this.onResize2)
-      // this.extension(this.myChart2)
     },
-    onResize1() {
-      this.myChart1.resize()
-    },
-    onResize2() {
-      this.myChart2.resize()
+    onResize() {
+      this.myChart1?.resize()
+      this.myChart2?.resize()
+      this.sta.map(e => e.chart?.resize())
     },
     gridChange(val) {
       this.girdArr = val
@@ -441,12 +475,13 @@ export default {
     },
 
     timeChange(index) {
-      if(index == 3) {
-        this.dialogDate = true
-      }
       this.type = index
-      this.getStatistics()
-      this.getRanking()
+      if (index == 3) {
+        this.dialogDate = true
+      } else {
+        this.getStatistics()
+        this.getRanking()
+      }
     },
 
     open(id) {
@@ -461,13 +496,13 @@ export default {
     },
 
     getDetail(id) {
-      this.instance.post(`/app/appintegraldetail/queryDetailById?id=${id}`).then(res=> {
-        if(res?.data) {
+      this.instance.post(`/app/appintegraldetail/queryDetailById?id=${id}`).then(res => {
+        if (res?.data) {
           this.details = res.data
-          if(res.data.enclosure) {
+          if (res.data.enclosure) {
             let str = res.data.enclosure.split('/')
             this.fileDownLoad = [{
-              url:res.data.enclosure,
+              url: res.data.enclosure,
               name: str?.[str.length - 1]
             }]
           }
@@ -476,7 +511,7 @@ export default {
     },
 
     selectDete() {
-      if(!this.timeList || !this.timeList.length) {
+      if (!this.timeList || !this.timeList.length) {
         return this.$message.error('请选择自定义时间');
       }
       this.startTime = this.timeList?.[0]
@@ -485,29 +520,42 @@ export default {
       this.getStatistics()
       this.getRanking()
     },
-
+    renderChart(item = {}) {
+      if (!item.chart) {
+        const el = document.getElementById(item.id)
+        el.style.width = (window.innerWidth - 435) / 3 + "px";
+        item.chart = echarts.init(el)
+      }
+      item.chart.setOption({
+        xAxis: {minInterval: 1},
+        tooltip: {},
+        legend: {},
+        yAxis: {type: 'category'},
+        dataset: {dimensions: ['username', 'count', 'integral'], source: item.sta},
+        series: [
+          {name: "次数", barWidth: 10, barGap: '20%', type: 'bar'},
+          {name: "积分", barWidth: 10, barGap: '20%', type: 'bar'}
+        ]
+      }, true)
+    }
   },
-
   filters: {
     formatTime(num) {
-      if(num > 0) {
+      if (num > 0) {
         return '+' + num
       } else {
         return num
       }
     }
   },
-
   mounted() {
-    this.getColEcherts1()
-    this.getColEcherts2()
+    window.addEventListener('resize', this.onResize)
+    this.getRanking()
+    this.getStatistics()
   },
-
-  destroyed () {
-    window.removeEventListener('resize', this.onResize1)
-    window.removeEventListener('resize', this.onResize2)
+  destroyed() {
+    window.removeEventListener('resize', this.onResize)
   },
-
 }
 </script>
 
@@ -515,133 +563,90 @@ export default {
 .AppIntegralStatistics {
   height: 100%;
   box-sizing: border-box;
-  padding-top: 20px;
-  overflow-y: scroll;
-  .overallStatistics {
-    width: 100%;
-    margin-bottom: 16px;
-    padding: 20px;
-    box-sizing: border-box;
-    background: #FFF;
 
-    .title {
+  .shortcut {
+    display: inline-block;
+    width: 70px;
+    height: 32px;
+    line-height: 32px;
+    border-radius: 2px;
+    border: 1px solid #D0D4DC;
+    margin-right: 8px;
+    text-align: center;
+    cursor: pointer;
+
+    &.active {
+      color: #2266FF;
+      border: 1px solid #2266FF;
+    }
+  }
+
+  .chartBox {
+    background: #F9F9F9;
+    box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.1500);
+    border-radius: 4px;
+    padding: 16px;
+    box-sizing: border-box;
+
+    .chart {
       width: 100%;
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 16px;
-      p {
+      height: 300px;
+    }
+  }
+
+  .card_list {
+    display: flex;
+
+    .card {
+      flex: 1;
+      height: 96px;
+      background: #F9F9F9;
+      border-radius: 2px;
+      margin-right: 20px;
+      padding: 16px 24px;
+      box-sizing: border-box;
+
+      h2 {
+        color: #888888;
+        font-weight: 600;
         font-size: 16px;
-        font-family: MicrosoftYaHeiSemibold;
-        color: #222222;
+      }
+
+      p {
+        margin-top: 8px;
+        font-size: 24px;
         font-weight: 600;
       }
 
-      .title_right {
-        display: flex;
-        align-items: center;
-        span {
-          display: inline-block;
-          width: 70px;
-          height: 32px;
-          line-height: 32px;
-          border-radius: 2px;
-          border: 1px solid #D0D4DC;
-          margin-right: 8px;
-          text-align: center;
-          cursor: pointer;
-        }
-        .active {
-          color: #2266FF;
-          border: 1px solid #2266FF;
-        }
+      .color1 {
+        color: #2891FF;
+      }
+
+      .color2 {
+        color: #22AA99;
+      }
+
+      .color3 {
+        color: #F8B425;
       }
     }
 
-    .card_list {
-      display: flex;
-      .card {
-        flex: 1;
-        height: 96px;
-        background: #F9F9F9;
-        border-radius: 2px;
-        margin-right: 20px;
-        padding: 16px 24px;
-        box-sizing: border-box;
-        h2 {
-          color: #888888;
-          font-weight: 600;
-          font-size: 16px;
-        }
-        p {
-          margin-top: 8px;
-          font-size: 24px;
-          font-weight: 600;
-        }
-        .color1 {
-          color: #2891FF;
-        }
-        .color2 {
-          color: #22AA99;
-        }
-        .color3 {
-          color: #F8B425;
-        }
-      }
-      .card:last-child {
-        margin-right: 0;
-      }
-    }
-    .echertsBox {
-      width: 100%;
-      margin-top: 20px;
-      background: #FFF;
-      display: flex;
-      .left_Box {
-        margin-right: 16px;
-        flex: 1;
-      }
-      .right_Box {
-        width: 100%;
-        flex: 1;
-      }
-
-      .left_Box,
-      .right_Box {
-        background: #F9F9F9;
-        box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
-        border-radius: 4px;
-        padding: 16px;
-        box-sizing: border-box;
-        #chart1,
-        #chart2 {
-          width: 100%;
-          height: 300px;
-        }
-        p {
-          font-weight: 600;
-        }
-      }
+    .card:last-child {
+      margin-right: 0;
     }
   }
 
-  // .chartCss {
-  //   position: absolute;
-  //   color: black;
-  //   background:white;
-  //   font-family: Aril;
-  //   font-size: 12px;
-  //   padding: 5px;
-  //   display: inline;
-  // }
 
-  :deep( .el-dialog__footer ){
+  :deep( .el-dialog__footer ) {
     text-align: center;
   }
-  :deep( .el-dialog__header ){
+
+  :deep( .el-dialog__header ) {
     border-bottom: 1px solid #DDD;
   }
-  :deep( .ai-detail ){
+
+  :deep( .ai-detail ) {
     background: #FFF;
   }
- }
+}
 </style>