East 3 سال پیش
والد
کامیت
7806cafc75

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 16116 - 21
package-lock.json


+ 26 - 0
src/router/ChildrenRouters.js

@@ -113,6 +113,16 @@ const childrenRouters = [
       parentName: '环境监测'
     }
   },
+  {
+    path: '/salePig',
+    name: 'salePig',
+    component: () => import('../views/Env/SalePig.vue'),
+    meta: {
+      title: '电子秤',
+      permission: 'salePig',
+      parentName: '生产数据'
+    }
+  },
 
   /**
    *
@@ -295,6 +305,22 @@ const childrenRouters = [
 
   /*
   *
+  * 设备管理
+  * 
+  * */
+ {
+  path: '/device',
+  name: 'device',
+  component: () => import('../views/DeviceMana/Device.vue'),
+  meta: {
+    title: '设备详情',
+    permission: 'device',
+    parentName: '设备管理'
+  }
+ },
+
+  /*
+  *
   * 系统管理
   *
   * */

+ 35 - 1
src/utils/chenApi.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-11-18 13:40:39
- * @LastEditTime: 2021-12-06 14:34:27
+ * @LastEditTime: 2021-12-07 16:01:35
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \hyyfClient\src\utils\chenApi.js
@@ -152,6 +152,40 @@ export function getTheSales(params) {
   })
 }
 
+/* 电子秤 */
+// 重量详情
+export function getDayWeight(params) {
+  return axios({
+    url: '/produce/weight/getWeightOnPage',
+    method: 'get',
+    params: params
+  })
+}
+// 近七次
+export function getDaysQuery(params) {
+  return axios({
+    url: '/produce/weight/getWeightLastNtimes',
+    method: 'get',
+    params: params
+  })
+}
+// 本月
+export function getMonthQuery(params) {
+  return axios({
+    url: '/produce/weight/getWeightInOneMonth',
+    method: 'get',
+    params: params
+  })
+}
+// 指定时间
+export function getQuery(params) {
+  return axios({
+    url: '/produce/weight/getWeight',
+    method: 'get',
+    params: params
+  })
+}
+
 /** 违规报警 */
 /* 报警阈值设置 */
 // 常规设置 - list

+ 2 - 1
src/views/Alarm/AlarmWarn.vue

@@ -54,7 +54,8 @@
       :size="pageSize"
       @sizeChange="sizeChange"
       @pageChange="pageChange"
-    ></table-footer>
+    >
+    </table-footer>
     <el-dialog
       :title="digType ? '处理' : '批量处理'"
       :visible.sync="dialogVisible"

+ 1 - 1
src/views/BioSafety/CarAdmin.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-13 17:52:31
- * @LastEditTime: 2021-12-06 13:46:38
+ * @LastEditTime: 2021-12-07 09:51:29
  * @LastEditors: Please set LastEditors
  * @Description: 生物安全 - 车辆管理
  * @FilePath: \hyyfClient\src\views\BioSafety\CarAdmin.vue

+ 116 - 4
src/views/BioSafety/DeadPig.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-16 11:27:35
- * @LastEditTime: 2021-11-28 17:20:31
+ * @LastEditTime: 2021-12-07 13:38:02
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\BioSafety\DeadPig.vue
@@ -28,10 +28,17 @@
         <img
           :src="slotProps.row.alarmPicture"
           @click="clickImg(slotProps.row.alarmPicture)"
-          alt="车辆通行"
+          alt="死猪图片"
           width="380"
         />
       </template>
+
+      <!-- 回放按钮 -->
+      <template v-slot:handler="slotProps">
+        <el-button size="mini" @click="clickEvent(slotProps.row)">
+          查看回放
+        </el-button>
+      </template>
     </new-table>
     <table-footer
       :totals="total"
@@ -49,6 +56,23 @@
         >
       </span>
     </el-dialog>
+    <el-dialog title="回放视频" :visible.sync="videoVisible" width="50%">
+      <div style="width: 100%; height: 600px">
+        <iframe
+          v-if="videoVisible"
+          :src="'static/dahua/index.html?' + rtsp"
+          frameborder="0"
+          style="width: 100%; height: 100%"
+        >
+        </iframe>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="videoVisible = false">取 消</el-button>
+        <el-button type="primary" @click="videoVisible = false">
+          确 定
+        </el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -60,7 +84,11 @@ import TableFooter from "../../components/TableFooter";
 import { formItems, propFormData } from "./deadPig/queryCondition.config";
 import { title, tableItems, tableShows } from "./deadPig/table.config";
 
-import { getCarWash, getCarWashTotal } from "../../utils/chenApi";
+import {
+  getCarWash,
+  getCarWashTotal,
+  getCarWashVideo,
+} from "../../utils/chenApi";
 import { getFaceToken } from "../../utils/api";
 
 export default {
@@ -86,6 +114,8 @@ export default {
       params: {},
       dialogVisible: false,
       imgUrl: "",
+      rtsp: "",
+      videoVisible: false,
     };
   },
   mounted() {
@@ -102,6 +132,7 @@ export default {
     handleQuery(params) {
       console.log(params);
       this.params = params;
+      this.pageNum = 1;
       this.pigManage();
       this.pigTotal();
     },
@@ -109,6 +140,7 @@ export default {
     sizeChange(val) {
       this.size = val;
       // this.init();
+      this.pageNum = 1;
       this.pigManage();
     },
     // 修改页数
@@ -217,7 +249,72 @@ export default {
     pigTotal() {
       let queryParams = {
         orgCodeList: [],
-        nodeCodeList: ["1002871$1$0$0", "1002872$1$0$0", "1002873$1$0$0"],
+        nodeCodeList: [
+          "1002874$1$0$0",
+          "1002875$1$0$0",
+          "1002876$1$0$0",
+          "1002877$1$0$0",
+          "1002878$1$0$0",
+          "1002879$1$0$0",
+          "1002880$1$0$0",
+          "1002881$1$0$0",
+          "1002882$1$0$0",
+          "1002883$1$0$0",
+          "1002884$1$0$0",
+          "1002885$1$0$0",
+          "1002886$1$0$0",
+          "1002887$1$0$0",
+          "1002888$1$0$0",
+          "1002889$1$0$0",
+          "1002890$1$0$0",
+          "1002891$1$0$0",
+          "1002892$1$0$0",
+          "1002893$1$0$0",
+          "1002894$1$0$0",
+          "1002895$1$0$0",
+          "1002896$1$0$0",
+          "1002897$1$0$0",
+          "1002898$1$0$0",
+          "1002899$1$0$0",
+          "1002900$1$0$0",
+          "1002901$1$0$0",
+          "1002902$1$0$0",
+          "1002903$1$0$0",
+          "1002904$1$0$0",
+          "1002905$1$0$0",
+          "1002906$1$0$0",
+          "1002907$1$0$0",
+          "1002908$1$0$0",
+          "1002909$1$0$0",
+          "1002910$1$0$0",
+          "1002911$1$0$0",
+          "1002912$1$0$0",
+          "1002913$1$0$0",
+          "1002939$1$0$0",
+          "1002939$1$0$1",
+          "1002939$1$0$2",
+          "1002939$1$0$3",
+          "1002939$1$0$4",
+          "1002939$1$0$5",
+          "1002939$1$0$6",
+          "1002939$1$0$7",
+          "1002939$1$0$8",
+          "1002939$1$0$9",
+          "1002940$1$0$0",
+          "1002940$1$0$1",
+          "1002940$1$0$2",
+          "1002940$1$0$3",
+          "1002940$1$0$4",
+          "1002940$1$0$5",
+          "1002940$1$0$6",
+          "1002940$1$0$7",
+          "1002939$1$0$10",
+          "1002939$1$0$11",
+          "1002939$1$0$12",
+          "1002939$1$0$13",
+          "1002939$1$0$14",
+          "1002939$1$0$15",
+        ],
         deviceCategory: 1,
         alarmStartDateString: this.params.time[0] + " 00:00:00",
         alarmEndDateString: this.params.time[1] + " 23:59:59",
@@ -233,6 +330,21 @@ export default {
       this.dialogVisible = true;
       this.imgUrl = url;
     },
+    // 死猪回放
+    // 车辆洗消 - 按钮
+    clickEvent(row) {
+      getCarWashVideo({
+        happendTime: row.alarmDate,
+        channelName: row.alarmPosition,
+      }).then((res) => {
+        if (res.code === 0) {
+          this.rtsp = res.URL;
+          this.videoVisible = true;
+        } else {
+          this.$message.error("视频获取失败");
+        }
+      });
+    },
   },
 };
 </script>

+ 6 - 1
src/views/BioSafety/deadPig/table.config.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-18 16:06:51
- * @LastEditTime: 2021-12-06 13:47:24
+ * @LastEditTime: 2021-12-07 09:53:05
  * @LastEditors: Please set LastEditors
  * @Description: 表格的配置
  * @FilePath: \hyyfClient\src\views\BioSafety\personAdmin\table.config.js
@@ -27,6 +27,11 @@ export const tableItems = [
     minWidth: '150',
     slotName: 'alarmPosition'
   },
+  {
+    label: '操作',
+    minWidth: '100',
+    slotName: 'handler'
+  }
 ]
 
 export const tableShows = {

+ 15 - 0
src/views/DeviceMana/Device.vue

@@ -0,0 +1,15 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-12-07 14:27:28
+ * @LastEditTime: 2021-12-07 14:50:34
+ * @LastEditors: Please set LastEditors
+ * @Description: 设备管理页面
+ * @FilePath: \hyyfClient\src\views\DeviceMana\Device.vue
+-->
+<template>
+  <div class="device"></div>
+</template>
+<script>
+export default {};
+</script>
+<style scoped></style>

+ 298 - 0
src/views/Env/SalePig.vue

@@ -0,0 +1,298 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-12-07 10:07:56
+ * @LastEditTime: 2021-12-07 16:16:22
+ * @LastEditors: Please set LastEditors
+ * @Description: 电子秤
+ * @FilePath: \hyyfClient\src\views\Env\SalePig.vue
+-->
+<template>
+  <div class="sale-pig">
+    <div class="reply" :style="{ color: color }">卖猪重量计量</div>
+    <x-form
+      :formItems="formItems"
+      :day="day"
+      @setDay="setDay"
+      @onClickType="onClickType"
+    >
+    </x-form>
+    <div class="echarts">
+      <div class="echarts-l">
+        <chart-sale-pig :starkCount="elecAllCount"></chart-sale-pig>
+      </div>
+      <div class="echarts-r">
+        <!-- <chart-stark-bar :starkList="starkAllList"></chart-stark-bar> -->
+        <chart-elec-lines :data="elecData"></chart-elec-lines>
+      </div>
+    </div>
+    <br />
+    <div class="reply" :style="{ color: color }">重量详情</div>
+    <table-content
+      :listData="elecDataList"
+      :tableItems="tableItems"
+      :shows="shows"
+    >
+    </table-content>
+    <table-footer
+      :totals="total"
+      :size="pageSize"
+      @sizeChange="sizeChange"
+      @pageChange="pageChange"
+    >
+    </table-footer>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import XForm from "@/components/XForm";
+import ChartSalePig from "./chart/ChartSalePig.vue";
+import ChartElecLines from "./chart/ChartElecLines.vue";
+import TableContent from "@/components/newTable/TableContent";
+import TableFooter from "@/components/TableFooter";
+
+import {
+  getDayWeight,
+  getDaysQuery,
+  getMonthQuery,
+  getQuery,
+} from "@/utils/chenApi.js";
+
+export default {
+  components: {
+    XForm,
+    ChartSalePig,
+    ChartElecLines,
+    TableContent,
+    TableFooter,
+  },
+  computed: {
+    ...mapState(["color"]),
+  },
+  data() {
+    return {
+      formItems: [
+        {
+          id: 2,
+          type: "text",
+          text: "近七次",
+          value: 1,
+          col: 1.5,
+        },
+        {
+          id: 3,
+          type: "text",
+          text: "本月",
+          value: 2,
+          col: 1,
+        },
+        {
+          id: 4,
+          type: "datepicker",
+          placeholder: [],
+          field: "value1",
+          col: 6,
+        },
+        {
+          id: 8,
+          type: "button",
+          text: "查询",
+          col: 2,
+          click: "search",
+        },
+      ],
+      day: 1,
+      elecAllCount: "123.1",
+      elecData: {
+        month: [
+          "07-01周六",
+          "07-02周日",
+          "07-03周一",
+          "07-04周二",
+          "07-05周三",
+          "07-06周四",
+          "07-07周五",
+        ],
+        elecList: [36.5, 37.8, 38.5, 37.7, 37.9, 37.4, 36.4],
+      },
+      elecDataList: [],
+      tableItems: [
+        {
+          prop: "addTime",
+          label: "时间",
+          minWidth: "100",
+          slotName: "addTime",
+        },
+        {
+          prop: "grossWeight",
+          label: "毛重",
+          minWidth: "100",
+          slotName: "grossWeight",
+        },
+        {
+          prop: "tareWeight",
+          label: "去皮",
+          minWidth: "100",
+          slotName: "tareWeight",
+        },
+        {
+          prop: "netWeight",
+          label: "净重",
+          minWidth: "100",
+          slotName: "netWeight",
+        },
+      ],
+      shows: {
+        showIndex: false,
+        showSelect: false,
+      },
+      total: 0,
+      pageNum: 1,
+      pageSize: 20,
+      params: {},
+    };
+  },
+  mounted() {
+    this.initDayWeight();
+    this.initDaysQuery();
+  },
+  methods: {
+    setDay(data) {
+      this.day = data.type;
+      if (this.day === 1) {
+        this.initDaysQuery();
+      } else if (this.day === 2) {
+        this.initMonthQuery();
+      }
+    },
+    onClickType(data) {
+      this.day = 3; // 让 近七次 和 本月 不选中
+      this.params.time = data.data.value1;
+      if (!this.params.time) {
+        this.$message.info("请选择时间");
+        return;
+      }
+      this.initQuery();
+    },
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+      this.pageNum = 1;
+      this.initDayWeight();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum = val;
+      this.initDayWeight();
+    },
+    // 重量详情
+    initDayWeight() {
+      getDayWeight({
+        pageNo: this.pageNum,
+        pageSize: this.pageSize,
+      }).then((res) => {
+        if (res.code === 10000) {
+          this.elecDataList = res.data.content;
+          this.elecDataList.forEach((item) => {
+            item.addTime = item.addTime.split("T")[0];
+            item.grossWeight += " kg";
+            item.tareWeight += " kg";
+            item.netWeight += " kg";
+          });
+          this.total = res.data.totalElements;
+        }
+      });
+    },
+    // 近七次
+    initDaysQuery() {
+      getDaysQuery({
+        days: 7,
+      }).then((res) => {
+        if (res.code === 10000) {
+          this.elecAllCount = res.data.total;
+          const list = res.data.weight;
+          this.elecData = {
+            month: [],
+            elecList: [],
+          };
+          list.forEach((item) => {
+            this.elecData.month.push(item.addTime.split("T")[0]);
+            this.elecData.elecList.push(item.netWeight);
+          });
+        }
+      });
+    },
+    // 本月
+    initMonthQuery() {
+      getMonthQuery({}).then((res) => {
+        if (res.code === 10000) {
+          this.elecAllCount = res.data.total;
+          const list = res.data.weight;
+          this.elecData = {
+            month: [],
+            elecList: [],
+          };
+          list.forEach((item) => {
+            this.elecData.month.push(item.addTime.split("T")[0]);
+            this.elecData.elecList.push(item.netWeight);
+          });
+        }
+      });
+    },
+    // 指定日期
+    initQuery() {
+      getQuery({
+        startDate: this.params.time[0],
+        endDate: this.params.time[1],
+      }).then((res) => {
+        if (res.code === 10000) {
+          this.elecAllCount = res.data.total;
+          const list = res.data.weight;
+          this.elecData = {
+            month: [],
+            elecList: [],
+          };
+          list.forEach((item) => {
+            this.elecData.month.push(item.addTime.split("T")[0]);
+            this.elecData.elecList.push(item.netWeight);
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+.sale-pig {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px 20px 0 20px;
+}
+.reply {
+  width: 100%;
+  border: 1px solid #ddd;
+  border-bottom: 0;
+  height: 50px;
+  background-color: #f3f3f3;
+  line-height: 50px;
+  font-size: 18px;
+  box-sizing: border-box;
+  padding-left: 20px;
+}
+.echarts {
+  width: 100%;
+  height: 401px;
+  box-sizing: border-box;
+  border: 1px solid #ddd;
+  border-top: 0;
+  display: flex;
+}
+.echarts-l {
+  width: 30%;
+  height: 100%;
+}
+.echarts-r {
+  width: 70%;
+  height: 100%;
+}
+</style>

+ 169 - 0
src/views/Env/chart/ChartElecLines.vue

@@ -0,0 +1,169 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 17:24:29
+ * @LastEditTime: 2021-12-07 13:19:19
+ * @LastEditors: Please set LastEditors
+ * @Description: 存栏结构 - 存栏变动折线图
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\ChartInventoryLines.vue
+-->
+<template>
+  <div class="chart-inventory-lines">
+    <div id="chartElecLines"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    init() {
+      let flag = "";
+      if (this.data.month.length === 0) {
+        flag = "暂无数据";
+      }
+      let options = {
+        title: {
+          text: "近七日重量统计",
+          x: 30,
+          y: 15,
+          subtext: flag,
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        // legend: {
+        //   data: ['头']
+        // },
+        color: ["#3aa0ff", "#4dcb73", "#fad337", "#f2637b", "#975fe4"],
+        grid: {
+          top: "20%",
+          left: "10%",
+          bottom: "10%",
+          right: "10%",
+        },
+        xAxis: [
+          {
+            type: "category",
+            // name: "月",
+            data: this.data.month,
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#6e7079",
+              },
+            },
+            axisTick: {
+              show: true,
+            },
+          },
+        ],
+        //[
+        yAxis: {
+          type: "value",
+          name: "kg",
+          // axisLabel: {
+          //   formatter: '{value} °C'
+          // },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#6e7079",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        // {
+        //   type: 'value',
+        //   name: '湿度',
+        //   axisLabel: {
+        //     formatter: '{value} RH'
+        //   },
+        //   axisLine: {
+        //     show: false,
+        //     lineStyle: {
+        //       color: '#6e7079',
+        //     }
+        //   },
+        //   axisTick:{
+        //     show:false
+        //   },
+        //   // splitLine:{
+        //   //   show:false
+        //   // }
+        // }
+        //],
+        series: [
+          {
+            name: "用电",
+            type: "line",
+            smooth: false,
+            data: this.data.elecList,
+            itemStyle: {
+              normal: {
+                color: "#3aa0ff",
+                lineStyle: {
+                  color: "#3aa0ff",
+                },
+              },
+            },
+          },
+          // {
+          //   name: '湿度',
+          //   type: 'line',
+          //   smooth: false,
+          //   yAxisIndex: 1,
+          //   data: [20, 22, 33, 45, 63, 102, 23, 24, 23, 65, 50, 62]
+          // }
+        ],
+      };
+      this.myChart.setOption(options);
+    },
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(
+      document.getElementById("chartElecLines")
+    );
+    this.init();
+  },
+  watch: {
+    data: {
+      handler(newValue) {
+        console.log(newValue);
+        this.init();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.chart-inventory-lines {
+  /* display: inline-block; */
+  width: 100%;
+  height: 100%;
+}
+#chartElecLines {
+  width: 100%;
+  height: 100%;
+}
+</style>

+ 148 - 0
src/views/Env/chart/ChartSalePig.vue

@@ -0,0 +1,148 @@
+<template>
+  <div :id="'chart-sale-pie-' + id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "ChartStark",
+  computed: {
+    ...mapState(["color"]),
+  },
+  props: {
+    id: {
+      type: String,
+      default: () => "0",
+    },
+    starkCount: {
+      type: String,
+      default: () => "0",
+    },
+  },
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  watch: {
+    color(newVal) {
+      if (newVal) {
+        this.myChart.clear();
+        this.init();
+      }
+    },
+    starkCount(newVal) {
+      if (newVal) {
+        this.myChart.clear();
+        this.init();
+      }
+    },
+  },
+  methods: {
+    init() {
+      let data = [{ name: "总重量", value: this.starkCount.toString() }];
+      let formatNumber = function(num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = data.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let options = {
+        color: [this.color],
+        title: [
+          {
+            text:
+              "{name|" +
+              "总重量" +
+              "}\n{val|" +
+              formatNumber(total) +
+              "千克" +
+              "}",
+            top: "center",
+            left: "center",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: 14,
+                  fontWeight: "normal",
+                  color: "#666666",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: 32,
+                  fontWeight: "bold",
+                  color: "#333333",
+                },
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "pie",
+            radius: ["45%", "60%"],
+            center: ["50%", "50%"],
+            data: data,
+            hoverAnimation: false,
+            itemStyle: {
+              normal: {
+                borderColor: "#fff",
+                borderWidth: 2,
+              },
+            },
+            labelLine: {
+              normal: {
+                length: 20,
+                length2: 120,
+                lineStyle: {
+                  color: "#e6e6e6",
+                },
+              },
+            },
+            label: {
+              // normal: {
+              //   formatter: (params) => {
+              //     return (
+              //       "{icon|●}{name|" +
+              //       params.name +
+              //       "}{value|" +
+              //       formatNumber(params.value) +
+              //       "}"
+              //     );
+              //   },
+              //   padding: [0, -100, 25, -100],
+              //   rich: {
+              //     icon: {
+              //       fontSize: 16,
+              //     },
+              //     name: {
+              //       fontSize: 14,
+              //       padding: [0, 10, 0, 4],
+              //       color: "#666666",
+              //     },
+              //     value: {
+              //       fontSize: 18,
+              //       fontWeight: "bold",
+              //       color: "#333333",
+              //     },
+              //   },
+              // },
+              show: false,
+            },
+          },
+        ],
+      };
+      this.myChart.setOption(options);
+    },
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(
+      document.getElementById("chart-sale-pie-" + this.id)
+    );
+    this.init();
+  },
+};
+</script>
+
+<style scoped></style>