修改

src/router/modules/serviceSettlement.js

@@ -71,6 +71,29 @@ export default {
           ]
         }
       ]
+    },
+    {
+      path: 'settlement',
+      name: 'Settlement',
+      meta: { title: '服务商任务', icon: 'component' },
+      redirect: '/service/settlement/task',
+      component: () => import('@/views/index'),
+      children: [
+        {
+          path: 'list',
+          hidden: true,
+          component: () => import('@/views/serviceSettlement/list/index.vue'),
+          name: 'SettlementList',
+          meta: { title: '任务列表', activeMenu: '/service/settlement' }
+        },
+        {
+          path: 'edit',
+          hidden: true,
+          component: () => import('@/views/serviceSettlement/list/edit.vue'),
+          name: 'SettlementEdit',
+          meta: { title: '编辑列表', noCache: true, activeMenu: '/service/settlement' }
+        }
+      ]
     }
   ]
 }

src/views/serviceSettlement/task/index.vue

@@ -0,0 +1,322 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>服务商名称:</span>
+        <el-input
+          v-model="listQuery.name"
+          placeholder="关键词"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>服务商级别:</span>
+        <el-select v-model="listQuery.serviceLevel" placeholder="请选择服务商级别" @change="getList">
+          <el-option
+            v-for="(i, index) in serviceLevel"
+            :key="index"
+            :label="i.value"
+            :value="i.id"
+          />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>服务商类型:</span>
+        <el-select v-model="listQuery.serviceCategory" placeholder="服务商类型" @change="getList">
+          <el-option
+            v-for="(i, index) in serviceCategoryList"
+            :key="index"
+            :label="i.value"
+            :value="i.id"
+            @change="getList"
+          />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>资格证书编号:</span>
+        <el-input
+          v-model="listQuery.qualificationId"
+          placeholder="关键词"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>授权起止日期:</span>
+        <el-date-picker
+          v-model="time"
+          type="daterange"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          @change="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList">查询</el-button>
+        <el-button type="primary" @click="$router.push('/service/settlement/edit')">添加</el-button>
+        <el-button type="primary" @click="batchOffline(3)">下线</el-button>
+        <el-button type="primary" @click="batchOffline(1)">下载资格证书</el-button>
+        <el-button type="primary" @click="batchOffline(2)">下载二维码</el-button>
+      </div>
+    </div>
+
+    <el-table
+      ref="table"
+      v-loading="isLoading"
+      :data="list"
+      border
+      :default-sort="{ prop: 'frequency', order: 'descending' }"
+      @selection-change="handleSelectionChange"
+    >
+      <!--<el-table-column type="selection" width="55" align="center" />-->
+      <el-table-column
+        label="序号"
+        type="index"
+        sortable="custom"
+        align="center"
+        width="50"
+      />
+      <el-table-column prop="name" label="服务商名称" align="center" />
+      <el-table-column prop="serviceLevel" label="服务商级别" align="center">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.serviceLevel === 1" type="success" effect="dark" size="mini">一级</el-tag>
+          <el-tag v-if="row.serviceLevel === 2" type="success" effect="dark" size="mini">二级</el-tag>
+          <el-tag v-if="row.serviceLevel === 3" type="success" effect="dark" size="mini">三级</el-tag>
+          <el-tag v-if="row.serviceLevel === 4" type="success" effect="dark" size="mini">品牌特约</el-tag>
+          <el-tag v-if="row.serviceLevel === 5" type="success" effect="dark" size="mini">品牌指定</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="serviceCategory" label="服务商类型" align="center">
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.serviceCategory == "1" ? "个人" : "企业" }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="serviceCategory" label="服务商分账号" align="center">
+        <template slot-scope="{ row }">
+          <div>
+            {{ row.splitCode ? row.splitCode : "--" }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="contractStartDate" label="授权起始日期" align="center" />
+      <el-table-column prop="contractEndDate" label="授权截止日期" align="center" />
+      <el-table-column prop="status" label="状态" align="center" width="100">
+        <template slot-scope="scope">
+          <div>
+            已{{ scope.row.status === 90 ? "上线" : "下线" }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="updateTime" label="添加时间" align="center" />
+      <el-table-column prop="createBy" label="创建人" align="center" />
+      <el-table-column label="操作" align="center" width="200">
+        <template slot-scope="{ row }">
+          <div class="labelCenter">
+            <el-button
+              type="primary"
+              size="mini"
+              @click="handleStatus({ userIds: row.userId, status: row.status })"
+            >{{ row.status === 91 ? "上线" : "下线" }}</el-button>
+            <el-button
+              type="primary"
+              size="mini"
+              @click="$router.push('/service/settlement/edit?id=' + row.id)"
+            >编辑</el-button>
+            <el-button type="primary" size="mini" @click="showQrCode(row)">二维码</el-button>
+            <el-button
+              type="primary"
+              size="mini"
+              @click="
+                $router.push('/service/settlement/contract/list?providersId=' + row.id)
+              "
+            >合同管理</el-button>
+            <el-button
+              type="primary"
+              size="mini"
+              @click="
+                $router.push('/service/settlement/goods/list?providersId=' + row.id)
+              "
+            >商品管理</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <qr-code
+      ref="qrCode"
+      :item-obj="providerItem"
+      :show-qr-code="showQrImag"
+      @showQrCode="showQrCode"
+    />
+
+    <el-dialog title="选择服务商" :visible.sync="exportDialogVisible" width="70%">
+      <service-list-selector
+        v-if="exportDialogVisible"
+        @cancel="onSelectorCancel"
+        @confirm="onSelectorConfirm"
+      />
+    </el-dialog>
+
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import QrCode from '../components/CmQrcode/index.vue'
+import ServiceListSelector from '../components/ServiceListSelector.vue'
+import { getProviderList, updatedStatus } from '@/api/serviceSettlement/service'
+import serviceMixin from '../mixin/index'
+
+export default {
+  components: {
+    QrCode,
+    ServiceListSelector
+  },
+  mixins: [serviceMixin],
+  data() {
+    return {
+      listQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        serviceCategory: '',
+        serviceLevel: ''
+      },
+      time: '',
+      showQrImag: false,
+      isLoading: false,
+      exportDialogVisible: false,
+      list: [],
+      indexMethod: 1,
+      total: 0,
+      selectType: 0,
+      providerItem: {}
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    async getList(obj) {
+      const form = Object.assign(this.listQuery, {
+        contractStartDate: obj ? obj[0] : '',
+        contractEndDate: obj ? obj[1] : '',
+        providersId: this.providersId || ''
+      })
+      const { data } = await getProviderList(form)
+      this.list = data.results
+      this.total = data.totalRecord
+    },
+    showQrCode($event) {
+      if ($event) {
+        this.providerItem = $event
+      }
+      this.showQrImag = !this.showQrImag
+    },
+    // 批量下线
+    batchOffline(type) {
+      this.selectType = type
+      this.exportDialogVisible = true
+    },
+    handleSelectionChange() {},
+    async handleStatus($event) {
+      this.$confirm(`是否${$event.status === 91 ? '上线' : '下线'}该服务商?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        try {
+          const data = await updatedStatus({
+            userIds: $event.userIds,
+            status: $event.status === 91 ? 90 : 91
+          })
+          if (data.code === 0) {
+            this.$message({
+              message: '更新成功',
+              type: 'success'
+            })
+            this.getList()
+          }
+        } catch (error) {
+          console.log(error)
+        }
+      })
+    },
+    onSelectorCancel() {
+      this.exportDialogVisible = false
+    },
+    downLoadImage(options) {
+      try {
+        this.$confirm('是否下载所选的内容?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(async() => {
+          this.isLoading = true
+          // 使用a链接下载
+          const downUrl = `${process.env.VUE_APP_BASE_API}/providers/download/image?ids=${options.ids}&type=${options.type}`
+          const confirmText = options.type === 1 ? '服务商资格证书' : '服务商二维码'
+          this.downloadWithUrl(downUrl, confirmText)
+            .catch((err) => {
+              console.log(err)
+              this.$message.error(`下载${confirmText}失败`)
+            })
+            .finally(() => {
+              this.isLoading = false
+            })
+        })
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    onSelectorConfirm($event) {
+      this.exportDialogVisible = false
+      const toSelect = {
+        3: () =>
+          this.handleStatus({
+            userIds: $event.map((e) => e.userId).join(','),
+            status: 90
+          }),
+        1: () =>
+          this.downLoadImage({
+            ids: $event.map((e) => e.id).join(','),
+            type: this.selectType
+          }),
+        2: () =>
+          this.downLoadImage({
+            ids: $event.map((e) => e.id).join(','),
+            type: this.selectType
+          })
+      }
+      toSelect[this.selectType]()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.labelCenter {
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 10px;
+  .el-button {
+    width: 80px;
+    margin-left: 0;
+  }
+}
+</style>

src/views/sys/error/404.vue

@@ -2,10 +2,10 @@
   <div class="wscn-http404-container">
     <div class="wscn-http404">
       <div class="pic-404">
-        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
-        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404" />
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404" />
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404" />
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404" />
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>

src/views/sys/icons/index.vue

@@ -28,7 +28,7 @@
                 {{ generateElementIconCode(item) }}
               </div>
               <div class="icon-item">
-                <i :class="'el-icon-' + item" />
+                <i :class="'el-icon-' + item"></i>
                 <span>{{ item }}</span>
               </div>
             </el-tooltip>

src/views/sys/menus/form.vue

@@ -5,7 +5,7 @@
       <el-form ref="menuFrom" :model="menu" :rules="rules" label-width="150px">
         <el-form-item label="上级菜单:" prop="parentId">
           <el-input v-model="parentTitle" readonly />
-          <input v-model="menu.parentId" type="hidden">
+          <input v-model="menu.parentId" type="hidden" />
         </el-form-item>
         <el-form-item label="菜单名称:" prop="title">
           <el-input v-model="menu.title" />
@@ -22,7 +22,7 @@
         <el-form-item label="前端图标:" prop="icon">
           <el-input v-model="menu.icon" style="width: 80%" placeholder="系统图标里拷贝Class" />
           <template>
-            <i v-if="isElementIcon(menu.icon)" :class="menu.icon" />
+            <i v-if="isElementIcon(menu.icon)" :class="menu.icon"></i>
             <svg-icon v-else-if="menu.icon" :icon-class="menu.icon" />
           </template>
         </el-form-item>

src/views/user/club-portrait/components/bar-echarts.vue

@@ -5,160 +5,160 @@
 </template>
 
 <script>
-import echarts from "echarts";
+import echarts from 'echarts'
 export default {
   props: {
     title: {
       type: String,
-      default: () => "myEcharts",
+      default: () => 'myEcharts'
     },
     optionData: {
       type: Object,
-      default: () => ({}),
-    },
+      default: () => ({})
+    }
   },
   data() {
     return {
       timeTicket: null,
       chart: null,
-      optionData1: {},
-    };
+      optionData1: {}
+    }
   },
   watch: {
     optionData: {
       handler(val) {
         if (val) {
-          clearInterval(this.timeTicket);
-          this.timeTicket = null;
-          this.optionData1 = val;
-          console.log("option-data888888888", this.optionData1);
+          clearInterval(this.timeTicket)
+          this.timeTicket = null
+          this.optionData1 = val
+          console.log('option-data888888888', this.optionData1)
           this.initChart()
         }
       },
       deep: true,
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   mounted() {
     // 初始化图表
-    this.chart = echarts.init(this.$refs["echarts"]);
+    this.chart = echarts.init(this.$refs['echarts'])
     // 初始设置和配置...
-    this.initChart(); // 调用函数设置初始图表
+    this.initChart() // 调用函数设置初始图表
+  },
+  beforeDestroy() {
+    // 组件销毁前，销毁图表实例
+    if (this.chart) {
+      this.chart.dispose()
+    }
   },
   methods: {
     initChart() {
       // 如果图表实例存在，先清空数据和配置项（可选）
       if (this.chart) {
-        this.chart.clear(); // 清空当前图表
+        this.chart.clear() // 清空当前图表
       }
       const option = {
         title: {
-          text: this.optionData1.name,
+          text: this.optionData1.name
         },
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
           axisPointer: {
-            type: "shadow",
-          },
+            type: 'shadow'
+          }
         },
         legend: {
-          show: false,
+          show: false
         },
         grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
         },
         xAxis: {
-          type: "value",
+          type: 'value',
           splitLine: {
             show: true,
             lineStyle: {
               opacity: 0.2,
-              color: "#DCDCDC",
-            },
+              color: '#DCDCDC'
+            }
           },
           boundaryGap: [0, 0.01],
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#DCDCDC", //更改坐标轴文字颜色
-              fontSize: 12, //更改坐标轴文字大小
-            },
+              color: '#DCDCDC', // 更改坐标轴文字颜色
+              fontSize: 12 // 更改坐标轴文字大小
+            }
           },
           axisTick: {
-            //轴网格,在xAxis或yAxis根下
+            // 轴网格,在xAxis或yAxis根下
             lineStyle: {
               width: 1,
-              color: "#3333333",
-              type: "solid",
-            },
-          },
+              color: '#3333333',
+              type: 'solid'
+            }
+          }
         },
         yAxis: {
-          type: "category",
+          type: 'category',
           splitLine: {
-            show: false,
+            show: false
           },
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#333333", //更改坐标轴文字颜色
-              fontSize: 12, //更改坐标轴文字大小
+              color: '#333333', // 更改坐标轴文字颜色
+              fontSize: 12 // 更改坐标轴文字大小
             },
             margin: 8,
-            formatter: function (params) {
-              var val = "";
+            formatter: function(params) {
+              var val = ''
               if (params.length > 6) {
-                val = params.substr(0, 6) + "...";
-                return val;
+                val = params.substr(0, 6) + '...'
+                return val
               } else {
-                return params;
+                return params
               }
-            },
+            }
           },
           axisTick: {
-            //轴网格,在xAxis或yAxis根下
+            // 轴网格,在xAxis或yAxis根下
             show: false,
             lineStyle: {
               width: 1,
-              color: "#333333",
-              type: "solid",
-            },
+              color: '#333333',
+              type: 'solid'
+            }
           },
-          data: this.optionData1.yAxisData,
+          data: this.optionData1.yAxisData
         },
         series: [
           {
-            type: "bar",
+            type: 'bar',
             name: this.optionData1.name,
             data: this.optionData1.xAxisData,
             barBorderRadius: [10, 0, 0, 0],
             itemStyle: {
               fontSize: 14,
               color: this.optionData1.color,
-              barBorderRadius: 20, // 鼠标悬停时的圆角大小
-            },
-          },
-        ],
-      };
+              barBorderRadius: 20 // 鼠标悬停时的圆角大小
+            }
+          }
+        ]
+      }
       // 使用刚指定的配置项和数据显示图表。
       if (this.chart) {
-        this.chart.setOption(option);
+        this.chart.setOption(option)
       }
-    },
-  },
-  beforeDestroy() {
-    // 组件销毁前，销毁图表实例
-    if (this.chart) {
-      this.chart.dispose();
     }
-  },
-};
+  }
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .echarts-content {
   width: 100%;
   height: 400px;

src/views/user/club-portrait/components/club-dialog.vue

@@ -116,7 +116,7 @@
           <div class="main-row">
             <span>门头照：</span>
             <a href="https://img.caimei365.com/group1/M00/00/42/rB-lGGHEEDCAHRaLAAL6r7YS4OA918.jpg" target="_blank">
-              <img src="https://img.caimei365.com/group1/M00/00/42/rB-lGGHEEDCAHRaLAAL6r7YS4OA918.jpg" alt="">
+              <img src="https://img.caimei365.com/group1/M00/00/42/rB-lGGHEEDCAHRaLAAL6r7YS4OA918.jpg" alt="" />
             </a>
           </div>
         </div>
@@ -149,7 +149,7 @@
           <div class="main-row">
             <span>营业执照：</span>
             <a href="https://img.caimei365.com/group1/M00/00/42/rB-lGGHEEDCAHRaLAAL6r7YS4OA918.jpg" target="_blank">
-              <img src="https://img.caimei365.com/group1/M00/00/42/rB-lGGHEEDCAHRaLAAL6r7YS4OA918.jpg" alt="">
+              <img src="https://img.caimei365.com/group1/M00/00/42/rB-lGGHEEDCAHRaLAAL6r7YS4OA918.jpg" alt="" />
             </a>
           </div>
         </div>
@@ -173,28 +173,28 @@ export default {
     }
   },
   props: {
-    dialogType:{
-        type:Number,
-        default:1
+    dialogType: {
+      type: Number,
+      default: 1
     }
   },
   data() {
     return {
       visible: true,
-      title:'机构活跃信息',
-      form:{
-        name:'测试的热季卡',
-        linkMan:'ASDASD',
-        contractMobile:'13565444444',
-        address:'吉林省延边朝鲜族自治州延吉市',
-        businessLicenseImage:'https://img.caimei365.com/group1/M00/00/C9/rB-lF2YfnY2AImFYAAWYX3X0D6Q546.jpg',
-        medicalPracticeLicenseImg:'https://img.caimei365.com/group1/M00/00/C9/rB-lF2YfnY2AImFYAAWYX3X0D6Q546.jpg',
+      title: '机构活跃信息',
+      form: {
+        name: '测试的热季卡',
+        linkMan: 'ASDASD',
+        contractMobile: '13565444444',
+        address: '吉林省延边朝鲜族自治州延吉市',
+        businessLicenseImage: 'https://img.caimei365.com/group1/M00/00/C9/rB-lF2YfnY2AImFYAAWYX3X0D6Q546.jpg',
+        medicalPracticeLicenseImg: 'https://img.caimei365.com/group1/M00/00/C9/rB-lF2YfnY2AImFYAAWYX3X0D6Q546.jpg'
       }
     }
   },
   computed: {},
   created() {
-    if(this.dialogType === 2){
+    if (this.dialogType === 2) {
       this.title = '机构资料'
     }
   },
@@ -213,7 +213,7 @@ export default {
     handleCanle() {
       // 取消弹窗
       this.$emit('cancel')
-    },
+    }
   }
 }
 </script>

src/views/user/club-portrait/components/hot-tips.vue

@@ -15,37 +15,36 @@ export default {
       type: Array,
       default: () => [
         {
-          logo: "https://baidu.jpg",
-          bandName:
-            "百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度",
-          top: 1,
-        },
-      ],
-    },
+          logo: 'https://baidu.jpg',
+          bandName: '百度百度百度百度百度百度百度百度百度',
+          top: 1
+        }
+      ]
+    }
   },
   computed: {
     reloadData() {
-      const d = this.keywordData;
+      const d = this.keywordData
       return d.map((e) => {
         if (e) {
-          return e;
-        } else return {};
-      });
-    },
+          return e
+        } else return {}
+      })
+    }
   },
   methods: {
     isObj(str) {
-      return typeof str === "object";
+      return typeof str === 'object'
     },
     is_picture(str) {
-      const r = new RegExp(/\.(png|jpe?g|gif|svg|JPEG)(\?.*)?$/);
-      return r.test(str);
-    },
-  },
-};
+      const r = new RegExp(/\.(png|jpe?g|gif|svg|JPEG)(\?.*)?$/)
+      return r.test(str)
+    }
+  }
+}
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 .hot-container {
   border-radius: 12px;
   overflow: hidden;

src/views/user/club-portrait/components/pei-echarts.vue

@@ -5,24 +5,24 @@
 </template>
 
 <script>
-import echarts from "echarts";
+import echarts from 'echarts'
 export default {
   props: {
     title: {
       type: String,
-      default: () => "myEcharts",
+      default: () => 'myEcharts'
     },
     optionData: {
       type: Object,
-      default: () => ({}),
-    },
+      default: () => ({})
+    }
   },
   data() {
     return {
       timeTicket: null,
       chart: null,
-      optionData1: {},
-    };
+      optionData1: {}
+    }
   },
   watch: {
     optionData: {
@@ -31,20 +31,26 @@ export default {
           clearInterval(this.timeTicket)
           this.timeTicket = null
           this.optionData1 = val
-          console.log("option-data111111111", this.optionData1)
+          console.log('option-data111111111', this.optionData1)
           this.initChart()
         }
       },
       deep: true,
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   mounted() {
     // 初始化图表
-    this.chart = echarts.init(this.$refs["echarts"])
+    this.chart = echarts.init(this.$refs['echarts'])
     // 初始设置和配置...
     this.initChart() // 调用函数设置初始图表
   },
+  beforeDestroy() {
+    // 组件销毁前，销毁图表实例
+    if (this.chart) {
+      this.chart.dispose()
+    }
+  },
   methods: {
     initChart() {
       // 如果图表实例存在，先清空数据和配置项（可选）
@@ -53,59 +59,53 @@ export default {
       }
       const option = {
         title: {
-          text: this.optionData1.name,
+          text: this.optionData1.name
         },
         tooltip: {
-          trigger: "item",
+          trigger: 'item'
         },
         legend: {
-          orient: "vertical",
-          right: "2%",
-          top: "20%",
+          orient: 'vertical',
+          right: '2%',
+          top: '20%',
           textStyle: {
             fontSize: 14,
-            color: "#333333",
-          },
+            color: '#333333'
+          }
         },
         color: this.optionData1.color,
         series: [
           {
             name: this.optionData1.name,
-            type: "pie",
-            radius: "55%",
-            center: ["25%", "50%"],
+            type: 'pie',
+            radius: '55%',
+            center: ['25%', '50%'],
             avoidLabelOverlap: false,
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
             },
             label: {
               show: false,
-              position: "center",
+              position: 'center'
             },
-            data: this.optionData1.seriesData,
-          },
-        ],
-      };
+            data: this.optionData1.seriesData
+          }
+        ]
+      }
       // 使用刚指定的配置项和数据显示图表。
       if (this.chart) {
         this.chart.setOption(option)
       }
-    },
-  },
-  beforeDestroy() {
-    // 组件销毁前，销毁图表实例
-    if (this.chart) {
-      this.chart.dispose()
     }
   }
-};
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .echarts-content {
   width: 100%;
   height: 400px;