From 3c25b2f6c67577c69ae34cd3da710103d2106580 Mon Sep 17 00:00:00 2001
From: chenJinxu <2183691628@qq.com>
Date: Thu, 18 Jan 2024 16:49:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E6=88=B3=E8=BD=AC=E6=8D=A2=E9=94=99=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/models.js                          |   2 +-
 .../gps-card-frontend/device-power/index.vue  | 711 ++++++++++--------
 2 files changed, 394 insertions(+), 319 deletions(-)

diff --git a/src/config/models.js b/src/config/models.js
index 260c59b..99029a1 100644
--- a/src/config/models.js
+++ b/src/config/models.js
@@ -5,7 +5,7 @@
  * @FilePath: \TelpoH5FrontendWeb\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.113F'; //版本号
+export const VERSION_MODEL = '1.0.114F'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',
diff --git a/src/views/gps-card-frontend/device-power/index.vue b/src/views/gps-card-frontend/device-power/index.vue
index 268ee75..d1483a2 100644
--- a/src/views/gps-card-frontend/device-power/index.vue
+++ b/src/views/gps-card-frontend/device-power/index.vue
@@ -6,362 +6,437 @@
  * @description:
 -->
 <template>
-    <div class="device-power">
-        <van-nav-bar :left-arrow="true" @click-left="onNavBack">
-            <template #left>
-                <van-icon name="arrow-left" size="24" style="padding: 0"/>
-                <span>返回</span>
-            </template>
-        </van-nav-bar>
-        <div class="top">
-            <p>查看数据</p>
-        </div>
-        <div class="action">
-            <div class="left">
-                <van-dropdown-menu>
-                    <van-dropdown-item style="min-width: 150px" v-model="dayValue" :options="dayOption" @change="onChange" />
-                </van-dropdown-menu>
-            </div>
-            <div class="right">
-                <div class="btn-container">
-                    <van-button :class="['btn', {active: btnActive === item.index }]" @click="onClickBtn(item.index)" v-for="(item, index) in btnList" :key="index">{{ item.text }}</van-button>
-                </div>
-            </div>
-        </div>
-        <div class="details-container" v-if="btnActive === 0 && data.length > 0 || tableData.length > 0 && btnActive === 1">
-            <p class="last-time" v-show="btnActive === 0 && params.title === 'Offline'">最近一次离线时间：{{ lastTime }}</p>
-            <Echart :option="chartOption" v-show="btnActive === 0"/>
-            <Table :columns="titleList" :data="tableData" v-show="btnActive === 1"/>
-        </div>
-        <div class="details-container no-data" v-else>
-            <van-empty image="error" description="暂无数据" />
+  <div class="device-power">
+    <van-nav-bar :left-arrow="true" @click-left="onNavBack">
+      <template #left>
+        <van-icon name="arrow-left" size="24" style="padding: 0" />
+        <span>返回</span>
+      </template>
+    </van-nav-bar>
+    <div class="top">
+      <p>查看数据</p>
+    </div>
+    <div class="action">
+      <div class="left">
+        <van-dropdown-menu>
+          <van-dropdown-item
+            style="min-width: 150px"
+            v-model="dayValue"
+            :options="dayOption"
+            @change="onChange"
+          />
+        </van-dropdown-menu>
+      </div>
+      <div class="right">
+        <div class="btn-container">
+          <van-button
+            :class="['btn', { active: btnActive === item.index }]"
+            @click="onClickBtn(item.index)"
+            v-for="(item, index) in btnList"
+            :key="index"
+            >{{ item.text }}</van-button
+          >
         </div>
+      </div>
+    </div>
+    <div
+      class="details-container"
+      v-if="
+        (btnActive === 0 && data.length > 0) ||
+        (tableData.length > 0 && btnActive === 1)
+      "
+    >
+      <p
+        class="last-time"
+        v-show="btnActive === 0 && params.title === 'Offline'"
+      >
+        最近一次离线时间：{{ lastTime }}
+      </p>
+      <Echart :option="chartOption" v-show="btnActive === 0" />
+      <Table :columns="titleList" :data="tableData" v-show="btnActive === 1" />
     </div>
+    <div class="details-container no-data" v-else>
+      <van-empty image="error" description="暂无数据" />
+    </div>
+  </div>
 </template>
 
 <script>
-import Echart from '@/components/echarts';
-import Table from '@/components/tables';
-import APIIot from '@/api/iot';
+import Echart from "@/components/echarts";
+import Table from "@/components/tables";
+import APIIot from "@/api/iot";
 import { DEVICE_POWER } from "@/config/models";
-import axios from 'axios';
+import axios from "axios";
 export default {
-  name:'',
-  components: { Echart,Table },
-  data(){
-   return {
-       dayValue: 7,
-       dayOption: [
-           { text: '7天', value: 7 },
-           { text: '30天', value: 30 },
-       ],
-       btnList: [
-           { text: '图表', index: 0 },
-           { text: '表格', index: 1 },
-       ],
-       btnActive: 0,
-       chartOption: {},
-       titleList: [
-           { title: '时间', width: '40%', key: 'time'},
-           { title: '原始值', width: '60%', key: 'value' },
-       ],
-       tableData: [],
-       echarts: {
-           title: '',
-           type: '',
-       },
-       data: [],
-       xAxisData: [],
-       filterData: [],
-       yAxisObject: {},
-       lastTime: '',
-       params: {}
-   }
+  name: "",
+  components: { Echart, Table },
+  data() {
+    return {
+      dayValue: 7,
+      dayOption: [
+        { text: "7天", value: 7 },
+        { text: "30天", value: 30 },
+      ],
+      btnList: [
+        { text: "图表", index: 0 },
+        { text: "表格", index: 1 },
+      ],
+      btnActive: 0,
+      chartOption: {},
+      titleList: [
+        { title: "时间", width: "40%", key: "time" },
+        { title: "原始值", width: "60%", key: "value" },
+      ],
+      tableData: [],
+      echarts: {
+        title: "",
+        type: "",
+      },
+      data: [],
+      xAxisData: [],
+      filterData: [],
+      yAxisObject: {},
+      lastTime: "",
+      params: {},
+    };
   },
   created() {
     this.loadParams();
   },
-  mounted() {
-  },
+  mounted() {},
   methods: {
     loadParams() {
-        let params = this.$route.query;
-        this.params = {...params};
-        if(params) {
-            this.echarts.title = DEVICE_POWER[params.title].title;
-            this.echarts.type = DEVICE_POWER[params.title].value;
-            // 获取接口数据
-            this.getData();
-        } else {
-            // todo跳转404页面
-        }
+      let params = this.$route.query;
+      this.params = { ...params };
+      if (params) {
+        this.echarts.title = DEVICE_POWER[params.title].title;
+        this.echarts.type = DEVICE_POWER[params.title].value;
+        // 获取接口数据
+        this.getData();
+      } else {
+        // todo跳转404页面
+      }
     },
     getData() {
-        this.$toast.loading();
-        let reqBody = {
-            days: String(this.dayValue),
-            identifier: this.echarts.type,
-            imei: /* '861281060086216' *//* '862838050029479' */this.$store.getters.imei
-        };
-        // 线上地址
-       let baseUrl = process.env.VUE_APP_BASE_API;
-       let reqUrl = `${baseUrl}iotservice/getdeviceinfo`;
-        // 开启代理如下
-       /* let reqUrl = `/api/id/getdeviceinfo`; */
-        axios.post(`${reqUrl}`, reqBody).then(res => {
-            let data = res.data;
-            if(data.code === 200) {
-                if(this.echarts.type === 'BatteryLevel' || this.echarts.type === 'status') {
-                    this.filterData = data[this.echarts.type].data/* .list.propertyInfo */;
-                } else if(this.echarts.type === 'offline') {
-                    this.filterData = data.Offline.data;
-                }
-                if(this.echarts.type === 'status') {
-                    // 信号强度
-                    this.yAxisObject = {
-                        type: "value",
-                        /* max: 4,
+      this.$toast.loading();
+      let reqBody = {
+        days: String(this.dayValue),
+        identifier: this.echarts.type,
+        imei: /* '861281060086216' */ /* '862838050029479' */ this.$store
+          .getters.imei,
+      };
+      // 线上地址
+      let baseUrl = process.env.VUE_APP_BASE_API;
+      let reqUrl = `${baseUrl}iotservice/getdeviceinfo`;
+      // 开启代理如下
+      /* let reqUrl = `/api/id/getdeviceinfo`; */
+      axios
+        .post(`${reqUrl}`, reqBody)
+        .then((res) => {
+          let data = res.data;
+          if (data.code === 200) {
+            if (
+              this.echarts.type === "BatteryLevel" ||
+              this.echarts.type === "status"
+            ) {
+              this.filterData =
+                data[this.echarts.type].data /* .list.propertyInfo */;
+            } else if (this.echarts.type === "offline") {
+              this.filterData = data.Offline.data;
+            }
+            if (this.echarts.type === "status") {
+              // 信号强度
+              this.yAxisObject = {
+                type: "value",
+                /* max: 4,
                         min: 0,
                         interval: 1,
                         splitNumber : 1,
                         boundaryGap : [ '5%', '5%' ], */
-                    }
-                    this.titleList = [
-                        { title: '时间', width: '40%', key: 'time'},
-                        { title: '原始值', width: '60%', key: 'value' },
-                    ];
-                    let propertyInfo = this.filterData.map(item => {
-                        return item.list.propertyInfo;
-                    });
-                    let result = [];
-                    for (let i = 0; i < propertyInfo.length; i++) {
-                        // 循环对象中的数组
-                        result = [].concat(...propertyInfo)
-                    }
-                    // 表格则要显示全部数据
-                    this.tableData = result.map(item => {
-                        return {
-                            value: item.value,
-                            time: this.$dayjs(this.$dayjs(Number(item.time))).format("YYYY/MM/DD hh:mm")
-                        }
-                    }).reverse();
-                    // 图表筛选过滤只显示 rssi <= 2的数据
-                    this.data = result.map(item => {
-                        // 序列化json
-                        let json = JSON.parse(item.value);
-                        return {
-                            value: json.rssi,
-                            time: this.$dayjs(this.$dayjs(Number(item.time))).format("YYYY/MM/DD hh:mm"),
-                            type: 'status'
-                        }
-                    }).filter(f => {
-                        return f.value  <=2;
-                    })
-                } else if (this.echarts.type === 'offline') {
-                    // 设备离线次数
-                    this.titleList = [
-                        { title: '时间', width: '40%', key: 'time'},
-                        { title: '最近离线时间', width: '60%', key: 'lastTime' },
-                        { title: '离线次数', width: '40%', key: 'value' },
-                    ],
-                    this.yAxisObject = {
-                        type: "value",
-                      /*   max: 10,
+              };
+              this.titleList = [
+                { title: "时间", width: "40%", key: "time" },
+                { title: "原始值", width: "60%", key: "value" },
+              ];
+              let propertyInfo = this.filterData.map((item) => {
+                return item.list.propertyInfo;
+              });
+              let result = [];
+              for (let i = 0; i < propertyInfo.length; i++) {
+                // 循环对象中的数组
+                result = [].concat(...propertyInfo);
+              }
+              // 表格则要显示全部数据
+              this.tableData = result
+                .map((item) => {
+                  return {
+                    value: item.value,
+                    time: this.$dayjs(this.$dayjs(Number(item.time))).format(
+                      "YYYY/MM/DD HH:mm"
+                    ),
+                  };
+                })
+                .reverse();
+              // 图表筛选过滤只显示 rssi <= 2的数据
+              this.data = result
+                .map((item) => {
+                  // 序列化json
+                  let json = JSON.parse(item.value);
+                  return {
+                    value: json.rssi,
+                    time: this.$dayjs(this.$dayjs(Number(item.time))).format(
+                      "YYYY/MM/DD HH:mm"
+                    ),
+                    type: "status",
+                  };
+                })
+                .filter((f) => {
+                  return f.value <= 2;
+                });
+            } else if (this.echarts.type === "offline") {
+              // 设备离线次数
+              (this.titleList = [
+                { title: "时间", width: "40%", key: "time" },
+                { title: "最近离线时间", width: "60%", key: "lastTime" },
+                { title: "离线次数", width: "40%", key: "value" },
+              ]),
+                (this.yAxisObject = {
+                  type: "value",
+                  /*   max: 10,
                         min: 0,
                         interval: 1,
                         splitNumber : 1,
                         boundaryGap : [ '5%', '5%' ], */
-                    };
-                    
-                    this.data = this.filterData.sort((date1, date2) => {
-                        // 日期升序排序
-                        return date2.time < date1.time ? 1 : -1
-                    }).map(item => {
-                        return {
-                            /* value: item.value, */
-                            time: item.createTime.slice(0,10),
-                            day: item.createTime.slice(0,10),
-                            type: 'offline',
-                            lastTime: item.createTime.replace('T', ' ')
-                        }
-                    }).reduce((accumulator, currentValue) => {
-                        if (accumulator.find(obj => obj.day === currentValue.day)) {
-                            accumulator.find(obj => obj.day === currentValue.day).value++;
-                        } else {
-                            accumulator.push({ day: currentValue.day, time: currentValue.time, value: 1, type: 'offline', lastTime: currentValue.lastTime });
-                        }
-                        return accumulator;
-                    }, []).sort(function(date1, date2) {
-                        // 日期升序排序
-                        return date2.time < date1.time ? 1 : -1
+                });
+
+              this.data = this.filterData
+                .sort((date1, date2) => {
+                  // 日期升序排序
+                  return date2.time < date1.time ? 1 : -1;
+                })
+                .map((item) => {
+                  return {
+                    /* value: item.value, */
+                    time: item.createTime.slice(0, 10),
+                    day: item.createTime.slice(0, 10),
+                    type: "offline",
+                    lastTime: item.createTime.replace("T", " "),
+                  };
+                })
+                .reduce((accumulator, currentValue) => {
+                  if (accumulator.find((obj) => obj.day === currentValue.day)) {
+                    accumulator.find((obj) => obj.day === currentValue.day)
+                      .value++;
+                  } else {
+                    accumulator.push({
+                      day: currentValue.day,
+                      time: currentValue.time,
+                      value: 1,
+                      type: "offline",
+                      lastTime: currentValue.lastTime,
                     });
-                    console.log("data", this.data);
-                    console.log(this.data);
-                    this.lastTime = this.data && this.data[this.data.length  - 1].lastTime || '';
+                  }
+                  return accumulator;
+                }, [])
+                .sort(function (date1, date2) {
+                  // 日期升序排序
+                  return date2.time < date1.time ? 1 : -1;
+                });
+              console.log("data", this.data);
+              console.log(this.data);
+              this.lastTime =
+                (this.data && this.data[this.data.length - 1].lastTime) || "";
 
-                    this.tableData = this.filterData/* .sort((date1, date2) => {
+              this.tableData = this.filterData /* .sort((date1, date2) => {
                         // 日期升序排序
                         return date2.time > date1.time ? 1 : -1
-                    }). */.map(item => {
-                        return {
-                            /* value: item.value, */
-                            time: item.createTime.slice(0,10),
-                            day: item.createTime.slice(0,10),
-                            lastTime: item.createTime.replace('T', ' ')
-                        }
-                    }).reduce((accumulator, currentValue) => {
-                        // 筛选遍历数据，获取相同日期的数据，计算出现的次数后重新累加组合到一个新的数组里面
-                        if (accumulator.find(obj => obj.day === currentValue.day)) {
-                            accumulator.find(obj => obj.day === currentValue.day).value++;
-                        } else {
-                            accumulator.push({ day: currentValue.day, time: currentValue.time, value: 1, lastTime: currentValue.lastTime });
-                        }
-                        return accumulator;
-                    }, []).sort(function(date1, date2) {
-                        // 日期升序排序
-                        return date2.time < date1.time ? 1 : -1
-                    }).reverse();
-                } else {
-                    this.titleList = [
-                        { title: '时间', width: '40%', key: 'time'},
-                        { title: '电量', width: '60%', key: 'value' },
-                    ],
-                    this.yAxisObject = {
-                        type: "value",
-                        max: 100,
-                        min: 0,
-                        interval: 20,
-                        splitNumber : 1,
-                        boundaryGap : [ '5%', '5%' ],
-                    }
-                    let propertyInfo = this.filterData.map(item => {
-                        return item.list.propertyInfo;
-                    });
-                    let result = [];
-                    for (let i = 0; i < propertyInfo.length; i++) {
-                        // 循环对象中的数组
-                        result = [].concat(...propertyInfo)
-                    }
-                    this.data = result.map(item => {
-                        return {
-                            value: item.value,
-                            time: this.$dayjs(this.$dayjs(Number(item.time))).format("YYYY/MM/DD hh:mm"),
-                        }
-                    }).sort((date1, date2) => {
-                        // 日期升序排序
-                        return date2.time < date1.time ? 1 : -1
+                    }). */
+                .map((item) => {
+                  return {
+                    /* value: item.value, */
+                    time: item.createTime.slice(0, 10),
+                    day: item.createTime.slice(0, 10),
+                    lastTime: item.createTime.replace("T", " "),
+                  };
+                })
+                .reduce((accumulator, currentValue) => {
+                  // 筛选遍历数据，获取相同日期的数据，计算出现的次数后重新累加组合到一个新的数组里面
+                  if (accumulator.find((obj) => obj.day === currentValue.day)) {
+                    accumulator.find((obj) => obj.day === currentValue.day)
+                      .value++;
+                  } else {
+                    accumulator.push({
+                      day: currentValue.day,
+                      time: currentValue.time,
+                      value: 1,
+                      lastTime: currentValue.lastTime,
                     });
-                    this.tableData = result.map(item => {
-                        return {
-                            value: item.value,
-                            time: this.$dayjs(this.$dayjs(Number(item.time))).format("YYYY/MM/DD hh:mm")
-                        }
-                    }).sort((date1, date2) => {
-                        // 日期升序排序
-                        return date2.time < date1.time ? 1 : -1
-                    }).reverse();
-                }
-                this.xAxisData = this.data.map(item => {
-                    return this.$dayjs(item.time).format("MM/DD");
+                  }
+                  return accumulator;
+                }, [])
+                .sort(function (date1, date2) {
+                  // 日期升序排序
+                  return date2.time < date1.time ? 1 : -1;
+                })
+                .reverse();
+            } else {
+              (this.titleList = [
+                { title: "时间", width: "40%", key: "time" },
+                { title: "电量", width: "60%", key: "value" },
+              ]),
+                (this.yAxisObject = {
+                  type: "value",
+                  max: 100,
+                  min: 0,
+                  interval: 20,
+                  splitNumber: 1,
+                  boundaryGap: ["5%", "5%"],
+                });
+              let propertyInfo = this.filterData.map((item) => {
+                return item.list.propertyInfo;
+              });
+              let result = [];
+              for (let i = 0; i < propertyInfo.length; i++) {
+                // 循环对象中的数组
+                result = [].concat(...propertyInfo);
+              }
+              this.data = result
+                .map((item) => {
+                  return {
+                    value: item.value,
+                    time: this.$dayjs(this.$dayjs(Number(item.time))).format(
+                      "YYYY/MM/DD HH:mm"
+                    ),
+                  };
                 })
-                this.chartOption = {
-                    title: {
-                        text: this.echarts.title,
-                        textStyle: {
-                            fontSize: 16
-                        },
-                    },
-                    xAxis: {
-                        type: "category",
-                        axisLine: {
-                            show: false
-                        },
-                        textStyle: {
-                            fontSize: 10
-                        },
-                        axisTick: {
-                            show: false
-                        },
-                        splitLine: {
-                            show: false,
-                            lineStyle: {
-                                color: "#ddd",
-                                width: 2
-                            }
-                        },
-                        nameLocation: 'center',
-                        axisLabel: {
-                            show: true,
-                            fontSize: 12,
-                            showMinLabel: true, //显示最小值
-                            showMaxLabel: true, //显示最大值
-                        },
-                        data: this.xAxisData
-                    },
-                    yAxis: this.yAxisObject,
-                    series: [
-                        {
-                            type: "line",
-                            data: this.data,
-                            /* areaStyle: {}, */
-                        },
-                    ],
-                    dataZoom: [
-                        {
-                            start: 0,
-                            end: 100,
-                            textStyle: {
-                                color: "#FFF",
-                                fontSize: 14
-                            },
-                            show: true,
-                            height: 20,
-                            bottom: 5,
-                            handleStyle: {
-                                borderWidth: 1,
-                                borderCap: "square"
-                            }
-                        }
-                    ],
-                    tooltip: {
-                        trigger: "axis",
-                        textStyle: {
-                            fontSize: 14,
-                            align: "center"
-                        },
-                        formatter: function(params) {
-                            return `${params[0].marker}${params[0].data.time}</br>
-                            ${ params[0].data.type === 'offline' ? '最近离线时间:' + params[0].data.lastTime : ''}</br>
-                            ${ params[0].data.type === 'offline' ? '离线次数:' + params[0].data.value + '次' :
-                            params[0].data.type === 'status' ? 'rssi值:' +  params[0].data.value :
-                            '电量:' + params[0].data.value}`
-                        }
-                    },
-                }
+                .sort((date1, date2) => {
+                  // 日期升序排序
+                  return date2.time < date1.time ? 1 : -1;
+                });
+              this.tableData = result
+                .map((item) => {
+                  return {
+                    value: item.value,
+                    time: this.$dayjs(this.$dayjs(Number(item.time))).format(
+                      "YYYY/MM/DD HH:mm"
+                    ),
+                  };
+                })
+                .sort((date1, date2) => {
+                  // 日期升序排序
+                  return date2.time < date1.time ? 1 : -1;
+                })
+                .reverse();
             }
-        }).catch(() => {
-
-        }).finally(() => {
-            this.$toast.clear();
+            this.xAxisData = this.data.map((item) => {
+              return this.$dayjs(item.time).format("MM/DD");
+            });
+            this.chartOption = {
+              title: {
+                text: this.echarts.title,
+                textStyle: {
+                  fontSize: 16,
+                },
+              },
+              xAxis: {
+                type: "category",
+                axisLine: {
+                  show: false,
+                },
+                textStyle: {
+                  fontSize: 10,
+                },
+                axisTick: {
+                  show: false,
+                },
+                splitLine: {
+                  show: false,
+                  lineStyle: {
+                    color: "#ddd",
+                    width: 2,
+                  },
+                },
+                nameLocation: "center",
+                axisLabel: {
+                  show: true,
+                  fontSize: 12,
+                  showMinLabel: true, //显示最小值
+                  showMaxLabel: true, //显示最大值
+                },
+                data: this.xAxisData,
+              },
+              yAxis: this.yAxisObject,
+              series: [
+                {
+                  type: "line",
+                  data: this.data,
+                  /* areaStyle: {}, */
+                },
+              ],
+              dataZoom: [
+                {
+                  start: 0,
+                  end: 100,
+                  textStyle: {
+                    color: "#FFF",
+                    fontSize: 14,
+                  },
+                  show: true,
+                  height: 20,
+                  bottom: 5,
+                  handleStyle: {
+                    borderWidth: 1,
+                    borderCap: "square",
+                  },
+                },
+              ],
+              tooltip: {
+                trigger: "axis",
+                textStyle: {
+                  fontSize: 14,
+                  align: "center",
+                },
+                formatter: function (params) {
+                  return `${params[0].marker}${params[0].data.time}</br>
+                            ${
+                              params[0].data.type === "offline"
+                                ? "最近离线时间:" + params[0].data.lastTime
+                                : ""
+                            }</br>
+                            ${
+                              params[0].data.type === "offline"
+                                ? "离线次数:" + params[0].data.value + "次"
+                                : params[0].data.type === "status"
+                                ? "rssi值:" + params[0].data.value
+                                : "电量:" + params[0].data.value
+                            }`;
+                },
+              },
+            };
+          }
         })
+        .catch(() => {})
+        .finally(() => {
+          this.$toast.clear();
+        });
     },
     onClickBtn(value) {
-        this.btnActive = value;
-        this.getData();
+      this.btnActive = value;
+      this.getData();
     },
     onChange(value) {
-        this.dayValue = value;
-        this.getData();
+      this.dayValue = value;
+      this.getData();
     },
     onNavBack() {
-        this.$router.push({
-            name: 'deviceSetting'
-        })
-    }
-  }
-}
+      this.$router.push({
+        name: "deviceSetting",
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-    @import "./index.scss";
+@import "./index.scss";
 </style>