20230714

src/api/modules/editApi.js

@@ -1,6 +1,16 @@
 import service from '@/utils/axios';
 import { baseURL4 } from '../../constant';
 
+
+//等比缩小
+export const Taskzoom = (data) => {
+  return service.request({
+    method: 'POST',
+    url: '/TaskData/DataGeometricScale',
+    data,
+    baseURL: baseURL4,
+  });
+};
 //复制到
 export const TaskCopy = (data) => {
   return service.request({
@@ -50,6 +60,15 @@ export const TaskUpdateRand = (data) => {
   });
 };
 
+//偏移区间
+export const TaskUpdateaSke = (data) => {
+  return service.request({
+    method: 'POST',
+    url: '/TaskData/DataSkewingInterval',
+    data,
+    baseURL: baseURL4,
+  });
+};
 //偏移固定
 export const TaskUpdateFix = (data) => {
   return service.request({

src/components/highcharts-h.vue

@@ -3,6 +3,29 @@
         <input type="text" @focus="focusFun" @blur="blurFun">
         <div id="container" style="min-height:500px;"></div>
         <div style="text-align: center;margin-top: 20px;">{{ computedData }}</div>
+        <n-modal v-model:show="showModal">
+            <n-card style="width: 600px" title="超标数据">
+                <template #header-extra>
+                    <div style="cursor: pointer;" @click="showModal = false">关闭</div>
+                </template>
+                <n-table :bordered="false" :single-line="false">
+                    <thead>
+                        <tr>
+                            <th>编号</th>
+                            <th>时间</th>
+                            <th>备注</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(item,index) in tableData" :key="index">
+                            <td>{{item.ids}}</td>
+                            <td>{{item.times}}</td>
+                            <td>当前湿度：{{item.t}}</td>
+                        </tr>
+                    </tbody>
+                </n-table>
+            </n-card>
+        </n-modal>
     </div>
 </template>
 
@@ -37,7 +60,7 @@ const dataObj = reactive({
     data: []
 })
 
-
+const showModal = ref(false)
 const higFun = () => {
     dataObj.chartOptions = new Highcharts.stockChart('container', {
         chart: {
@@ -166,12 +189,66 @@ emitter.on("onFormData", (val) => {
 });
 //设置就展示
 emitter.on("onMessage", (val) => {
+    console.log('触发155')
     plotLinesData.hTop = val.hTop!=''?val.hTop:null
     plotLinesData.hBottom = val.hBottom!=''?val.hBottom:null
+    standardFun()   
     nextTick(() => {
         higFun()
     })
 });
+const tableData = ref([])
+//整理超标列表
+const standardFun = ()=>{
+    tableData.value = []
+    for (const iterator of popData.dataList) {
+        console.log('******',iterator)
+        if(plotLinesData.hBottom==null && plotLinesData.hTop!=null){//设置了上限
+            
+            const b = iterator.data.find(item => plotLinesData.hTop<=item[1])
+           
+            if(b!=undefined){
+                var obj = {
+                    ids:b[4],
+                    times:TimeData(b[0]),
+                    t:b[1]
+                }
+                tableData.value.push(obj)
+            }
+            console.log('设置了上限',tableData.value)
+            if(tableData.value.length!=0) showModal.value = true
+        }else if(plotLinesData.hBottom!=null && plotLinesData.hTop==null){//只设置了下限
+            
+            const b = iterator.data.find(item => plotLinesData.hBottom>=item[1])
+            if(b!=undefined){
+                var obj = {
+                    ids:b[4],
+                    times:TimeData(b[0]),
+                    t:b[1]
+                }
+                tableData.value.push(obj)
+            }
+            if(tableData.value.length!=0) showModal.value = true
+        }else if(plotLinesData.hBottom!=null && plotLinesData.hTop!=null){//上下限都有
+           
+            const b = iterator.data.find(item => plotLinesData.hBottom>=item[1] || plotLinesData.hTop<=item[1])
+            if(b!=undefined){
+                var obj = {
+                    ids:b[4],
+                    times:TimeData(b[0]),
+                    t:b[1]
+                }
+                tableData.value.push(obj)
+            }
+            if(tableData.value.length!=0) showModal.value = true
+            console.log('====',b)
+            
+        }else{//没有设置
+            showModal.value = false
+        }
+    }
+}
+
 //关闭
 onBeforeUnmount(() => {
     emitter.off("onMessage");
@@ -247,6 +324,9 @@ const chartOptions1 = reactive({
     tooltip: {
         formatter: function () {
             var s = TimeData(this.points[0].x) + '<br/>';
+            const arr = this.points.sort((a, b) => {
+                    return b.y - a.y // 从小到大 -> a.age - b.age
+                })
             for (let i in this.points) {
                 s += '<br/>' + `<div style='color:${this.points[i].series.color}'>` + this.points[i].series.name + ': ' + (this.points[i].y).toFixed(1) + 'Rh</div>';
             }

src/components/highcharts-t.vue

@@ -3,6 +3,29 @@
         <input type="text" @focus="focusFun" @blur="blurFun">
         <div id="container" style="min-height:500px;"></div>
         <div style="text-align: center;margin-top: 20px;">{{ computedData }}</div>
+        <n-modal v-model:show="showModal">
+            <n-card style="width: 600px" title="超标数据">
+                <template #header-extra>
+                    <div style="cursor: pointer;" @click="showModal = false">关闭</div>
+                </template>
+                <n-table :bordered="false" :single-line="false">
+                    <thead>
+                        <tr>
+                            <th>编号</th>
+                            <th>时间</th>
+                            <th>备注</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(item,index) in tableData" :key="index">
+                            <td>{{item.ids}}</td>
+                            <td>{{item.times}}</td>
+                            <td>当前温度：{{item.t}}</td>
+                        </tr>
+                    </tbody>
+                </n-table>
+            </n-card>
+        </n-modal>
     </div>
 </template>
 
@@ -16,7 +39,7 @@ import { computed, onBeforeUnmount, reactive, watch, ref, nextTick } from "vue";
 import { useMessage } from "naive-ui";
 import { useStore } from 'vuex'
 const message = useMessage()
-
+const showModal = ref(false)
 const popData = defineProps({
     dataList: {
         type: Array,
@@ -25,8 +48,8 @@ const popData = defineProps({
 })
 
 const plotLinesData = reactive({
-    tBottom: null,
-    tTop: null
+    tBottom: 2,
+    tTop: 8
 })
 const store = useStore()
 const plot = computed(() => store.state.plotLineList)
@@ -77,6 +100,9 @@ const higFun = () => {
         tooltip: {
             formatter: function () {
                 var s = TimeData(this.points[0].x) + '<br/>';
+                const arr = this.points.sort((a, b) => {
+                    return b.y - a.y // 从小到大 -> a.age - b.age
+                })
                 for (let i in this.points) {
                     s += '<br/>' + `<div style='color:${this.points[i].series.color}'>` + this.points[i].series.name + ': ' + (this.points[i].y).toFixed(1) + '°C</div>';
                 }
@@ -166,13 +192,60 @@ emitter.on("onFormData", (val) => {
 });
 //设置就展示
 emitter.on("onMessage", (val) => {
-    console.log('初值',val)
-    plotLinesData.tTop = val.tTop!=''?val.tTop:null
-    plotLinesData.tBottom = val.tBottom!=''?val.tBottom:null
-    nextTick(() => {
+    console.log('初值1111', val,popData.dataList)
+    plotLinesData.tTop = val.tTop != '' ? val.tTop : null
+    plotLinesData.tBottom = val.tBottom != '' ? val.tBottom : null  
+    standardFun()   
+    nextTick(() => {        
         higFun()
     })
 });
+const tableData = ref([])
+//整理超标列表
+const standardFun = ()=>{
+    tableData.value = []
+    for (const iterator of popData.dataList) {
+        if(plotLinesData.tBottom==null && plotLinesData.tTop!=null){//设置了上限
+            const b = iterator.data.find(item => plotLinesData.tTop<=item[1])
+            if(b!=undefined){
+                var obj = {
+                    ids:b[4],
+                    times:TimeData(b[0]),
+                    t:b[1]
+                }
+                tableData.value.push(obj)
+            }
+            if(tableData.value.length!=0) showModal.value = true
+        }else if(plotLinesData.tBottom!=null && plotLinesData.tTop==null){//只设置了下限
+            
+            const b = iterator.data.find(item => plotLinesData.tBottom>=item[1])
+            if(b!=undefined){
+                var obj = {
+                    ids:b[4],
+                    times:TimeData(b[0]),
+                    t:b[1]
+                }
+                tableData.value.push(obj)
+            }
+            if(tableData.value.length!=0) showModal.value = true
+        }else if(plotLinesData.tBottom!=null && plotLinesData.tTop!=null){//上下限都有
+            
+            const b = iterator.data.find(item => plotLinesData.tBottom>=item[1] || plotLinesData.tTop<=item[1])
+            if(b!=undefined){
+                var obj = {
+                    ids:b[4],
+                    times:TimeData(b[0]),
+                    t:b[1]
+                }
+                tableData.value.push(obj)
+            }
+            if(tableData.value.length!=0) showModal.value = true
+            
+        }else{//没有设置
+            showModal.value = false
+        }
+    }
+}
 //关闭
 onBeforeUnmount(() => {
     emitter.off("onMessage");
@@ -219,7 +292,7 @@ watch(() => store.state.focuDatas, (newValue) => {
     }
 })
 watch(() => popData.dataList, (newValue) => {
-    console.log('123456',newValue)
+    console.log('123456', newValue)
     dataObj.data = newValue
     nextTick(() => {
         higFun()

src/views/data/edit/AddVue.vue

@@ -36,7 +36,7 @@
         <div style="height: 350px;overflow-y: auto;">
           <n-checkbox-group v-model:value="cheData.cities">
             <n-space style="display: flex;flex-direction: column;">
-              <n-checkbox :value="item" :label="item.T_sn" v-for="item, index in cheData.chechboxVal" :key="item.Id" />
+              <n-checkbox :value="item" :label="item.T_layout_no" v-for="item, index in cheData.chechboxVal" :key="item.Id" />
             </n-space>
           </n-checkbox-group>
         </div>

src/views/data/edit/SetVue.vue

@@ -48,14 +48,14 @@ const showModal = ref(false);
 
 // 表单数据
 const formValue = reactive({
-  tTop: 8,
-  tBottom: 2,
+  tTop: null,
+  tBottom: null,
   hTop: null,
   hBottom: null,
 });
-onMounted(()=>{
-  emitter.emit("onMessage",formValue);
-})
+// onMounted(()=>{
+//   emitter.emit("onMessage",formValue);
+// })
 // 显示设置
 const showSetModal = () => {
   showModal.value = true;

src/views/data/edit/index.vue

@@ -15,15 +15,17 @@
                       :time-picker-props="{ format: 'HH:mm' }" @update:formatted-value="setTimeFuns" @focus="focusFun(1)" @blur="blurFun" type="datetimerange" clearable />
                     <n-button type="primary" @click="renderFun(1)" style="margin-left: 10px;">渲染</n-button>
                   </div>
-                  <div>
+                  <div style="display: flex;align-items: center;justify-content: space-between;">
                     <n-checkbox v-model:checked="checked" @update:checked="handleSelectAll" style="flex-shrink: 0;">
                       全选
                     </n-checkbox>
+                    <div @click="alldeleteFun" style="text-decoration: underline;color: #2d8cf0;cursor: pointer;">批量删除</div>
                   </div>
 
                 </div>
               </template>
-              <n-scrollbar :style="{ maxHeight: `${height - 310}px` }" trigger="none">
+              <!-- <n-scrollbar :style="{ maxHeight: `${height - 310}px` }" trigger="none"> -->
+              <div  :style="{ height: (height - 400)+'px'}" style="overflow-y: auto">
                 <n-checkbox-group v-model:value="checkValues" @update:value="handleCheckValues">
                   <template v-for="item of classList" :key="item.T_id">
                     <n-list-item class="mr-5">
@@ -44,7 +46,8 @@
                     </n-list-item>
                   </template>
                 </n-checkbox-group>
-              </n-scrollbar>
+              </div>
+              <!-- </n-scrollbar> -->
               <template #footer>
                 <n-gradient-text type="info">
                   传感器总数：{{ classList.length }}
@@ -56,6 +59,9 @@
             <FormList :task="task" ref="formRef" :class-list="classList" :time="time"
               :temporal-interval="temporalInterval" />
           </n-tab-pane>
+          <n-tab-pane name="3" tab="存档">
+            存档
+          </n-tab-pane>
         </n-tabs>
       </n-card>
       <n-card style="flex: 1;">
@@ -72,6 +78,9 @@
               <ImportPlatform :task=" task " />
               <AddVue :class-list=" classList" @addFuns="addFuns" :task=" task " />
               <SetVue />
+
+              <ratioZoom @ratioZoomFun="renderFun(1)" :queryObj=" queryData " :pickleveTime=" pickTimes.pickleveTime " :checkData=" checkValues "></ratioZoom>
+
               <editCopy :queryObj=" queryData " :pickleveTime=" pickTimes.pickleveTime " :checkData=" checkValues " :classList=" classList " />
               <AverageCopy :queryObj=" queryData " :pickleveTime=" pickTimes.pickleveTime " :checkData=" checkValues " :classList=" classList "></AverageCopy>
               <editLeak :queryObj=" queryData " :pickleveTime=" pickTimes.pickleveTime " :checkData=" checkValues " />
@@ -79,6 +88,9 @@
 
               <editMath :queryObj=" queryData " :pickleveTime=" pickTimes.pickleveTime " :checkData=" checkValues " />
               <editFixation :queryObj=" queryData " :pickleveTime=" pickTimes.pickleveTime " :checkData=" checkValues " />
+              <skewSection :queryObj=" queryData " :pickleveTime=" pickTimes.pickleveTime " :checkData=" checkValues " />
+
+              
               <editSmooth :queryObj=" queryData " :pickleveTime=" pickTimes.pickleveTime " :checkData=" checkValues " />
               <BesselCurve :queryObj=" queryData " :pickleveTime=" pickTimes.pickleveTime " :checkData=" checkValues " ></BesselCurve>
             </n-space>
@@ -122,7 +134,7 @@
   <n-modal v-model:show=" showModal " preset="dialog" positive-text="确认" negative-text="取消" :show-icon=" false "
     @positive-click=" handleEdit ">
     <n-form :model=" formDatas " label-width="auto" show-require-mark>
-      <n-form-item label="ID" path="T_id">
+      <n-form-item label="编号" path="T_id">
         <n-input v-model:value=" formDatas.T_id " />
       </n-form-item>
       <n-form-item label="SN" path="T_sn">
@@ -143,7 +155,8 @@ import {
   editTaskData,
   getTaskDataClassList,
   getTaskDataList,
-  editTaskDataClass
+  editTaskDataClass,
+  deleteTaskDataClass
 } from '@/api';
 import AddVue from './AddVue.vue';
 import ImportVue from './ImportVue.vue';
@@ -151,6 +164,7 @@ import ImportPlatform from './ImportPlatform.vue';
 import SetVue from './SetVue.vue';
 import ExportVue from './ExportVue.vue';
 import FormList from './FormList.vue';
+import ratioZoom from './ratioZoom.vue';
 
 //数据编辑移动的功能
 import editCopy from './editCopy.vue';
@@ -161,6 +175,9 @@ import editLeak from './editLeak.vue';
 import editTendency from './editTendency.vue';
 import editMath from './editMath.vue';
 import editFixation from './editFixation.vue';
+import skewSection from './skewSection.vue';
+
+
 import editSmooth from './editSmooth.vue';
 import BesselCurve from './BesselCurve.vue';
 
@@ -171,12 +188,11 @@ import { useNow, useDateFormat } from '@vueuse/core';
 import DeleteClass from './DeleteTaskClass.vue';
 import { dateFormat } from 'highcharts';
 import { TimeDate } from '@/plugin/timeFun';
-import { useMessage } from "naive-ui";
+import { useMessage,useDialog} from "naive-ui";
 import { reactive, ref, watch } from 'vue';
 import { useStore } from "vuex"
 const store = useStore()
 
-
 const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
 
 const notification = useNotification();
@@ -201,6 +217,7 @@ const setTimeFuns = (e) => {
   }
 }
 
+
 const addFuns = (e)=>{
   console.log('父亲',e)
   getClassList();
@@ -226,8 +243,51 @@ const modal = reactive({
 // 列表
 
 
+const dialogs = useDialog();
+const alldeleteFun = ()=>{
+  console.log('checkValues.value',checkValues.value)
 
-
+  // return
+  if(!checkValues.value){
+    message.error('请选择至少一项在进行批量操作')
+    return
+  }else{
+    if (checkValues.value.length) {
+       dialogs.warning({
+        title: '提示',
+        content: `批量删除操作，是否继续？`,
+        positiveText: '确认',
+        negativeText: '取消',
+        onPositiveClick: () => {
+          alldeleteApi()
+        },
+        onNegativeClick: () => {
+          message.warning('已取消批量删除')
+        }
+      })
+    } else {
+      message.error('请选择至少一项在进行批量操作')
+      return
+    }
+   
+  }
+  
+}
+const alldeleteApi = async()=>{
+  var num = 0
+  for (const key of checkValues.value) {
+    const { data: res } = await deleteTaskDataClass({
+      T_task_id: queryData.T_task_id,
+      T_sn:key.T_sn,
+    });
+    num +=1
+    if(num==checkValues.value.length){
+      getClassList();  
+      message.success('批量删除完成')
+    } 
+  }
+  
+}
 
 const dataList = ref([]);
 

src/views/data/edit/ratioZoom.vue

@@ -0,0 +1,122 @@
+<template>
+  <n-button type="primary" @click="showSetModal">等比缩放</n-button>
+  <n-modal v-model:show="showModal" :style="{ width: '400px'}" :show-icon="false" preset="card" title="等比缩放">
+    <n-form :model="model" label-width="auto" show-require-mark>
+      <!-- <n-divider title-placement="center">  </n-divider> -->
+      <n-form-item label="温度比列" path="value">
+        <n-input v-model:value="model.Temperature" />
+      </n-form-item>
+
+      <!-- <n-divider title-placement="center">  </n-divider> -->
+
+      <n-form-item label="湿度比列" path="value">
+        <n-input v-model:value="model.Humidity" />
+      </n-form-item>
+    </n-form>
+    <template #footer>
+      <n-button type="primary" @click="submitCallback">
+        立即提交
+      </n-button>
+      <n-button @click="showModal = false" style="margin-left:10px">取消</n-button>
+    
+    
+      
+    </template>
+  </n-modal>
+</template>
+
+<script setup>
+
+import {Taskzoom} from '@/api';
+import { useStore } from 'vuex';
+const emit = defineEmits(['ratioZoomFun']);
+import { useMessage } from 'naive-ui';
+import {TimeData} from '@/plugin/timeFun.js'
+const message = useMessage();
+const props = defineProps({
+  queryObj: {
+    type: Object,
+    default: () => ({}),
+  },
+  pickleveTime: {
+    type: Array,
+    default: () => ([])
+  },
+  checkData: {
+    type: Array,
+    default: () => ([])
+  }
+})
+const store = useStore()
+
+//提交
+const submitCallback = async() => {
+  var reg = /^([1-9]\d*(\.\d*[1-9][0-9])?)|(0\.\d*[1-9][0-9])|(0\.\d*[1-9])$/;
+  
+  if(!reg.test(model.Temperature)){
+    message.error('温度比列格式为大于0【必填】')
+    return
+  }
+  if(!reg.test(model.Humidity)) {
+    message.error('湿度比列格式为大于0【必填】')
+    return
+  }
+  
+  await dataFun()
+  TaskzoomApi()
+  console.log('sss',model)
+  
+};
+const TaskzoomApi = async()=>{
+  Taskzoom(model).then(res=>{
+    if(res.data.Code==200){
+      message.success(res.data.Msg)
+      showModal.value = false
+      emit('ratioZoomFun');
+    }
+  })
+}
+const dataFun = ()=>{  
+  return new Promise(resolve=>{
+    model.StartTime = TimeData(model.StartTime)
+    model.EndTime = TimeData(model.EndTime)
+
+    // //处理sn List
+    let snList = [...props.checkData]
+    const arr1 = snList.map(item => item.T_sn + ',' +item.T_id)
+    model.SN_List = arr1.join('|')+'|'
+    resolve()
+  })
+}
+// 是否展示 Modal
+const showModal = ref(false);
+
+
+
+const model = reactive({
+  Temperature: 1,
+  Humidity: 1,
+  T_task_id: '',
+  SN_List: '',
+  StartTime: null,
+  EndTime: null,
+})
+
+// 显示设置
+const showSetModal = () => {
+  if (props.checkData == null || props.checkData.length == 0) {
+    message.error('请选择需要设置等比缩放的设备')
+    return
+  } else if (props.pickleveTime == null) {
+    message.error('请选择等比缩放时间')
+    return
+  } else {
+    model.T_task_id = props.queryObj.T_task_id
+    model.StartTime = new Date(props.pickleveTime[0]).getTime()
+    model.EndTime = new Date(props.pickleveTime[1]).getTime()
+    showModal.value = true
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/data/edit/skewSection.vue

@@ -0,0 +1,123 @@
+<template>
+  <!-- 偏移随机 -->
+  <n-button @click="showImportModal">偏移（区间）</n-button>
+  <n-modal v-model:show="showModal" title="偏移（区间）" :mask-closable="false" :show-icon="false" preset="dialog">
+    <n-form label-placement="left" label-width="auto" style="margin-top: 20px;">
+      <n-form-item label="最小温度">
+        <n-input-number v-model:value="data.TemperatureMin" style="width: 100%;">
+          <template #suffix>
+            °C
+          </template>
+        </n-input-number>
+      </n-form-item>
+      
+      <n-form-item label="最大温度">
+        <n-input-number v-model:value="data.TemperatureMax" style="width: 100%;">
+          <template #suffix>
+            °C
+          </template>
+        </n-input-number>
+      </n-form-item>
+      <div style="display: flex; justify-content: flex-end">
+        <n-button @click="showModal = false" style="margin-right: 10px;">取消</n-button>
+        <n-button type="primary" @click="handleValidateButtonClick">立即提交</n-button>
+      </div>
+    </n-form>
+  </n-modal>
+</template>
+
+<script setup>
+import {TaskUpdateaSke } from '@/api';
+
+import { reactive, ref, watch } from 'vue'
+import { useMessage} from 'naive-ui';
+import {TimeDate} from '@/plugin/timeFun.js'
+const message = useMessage();
+const value = ref(0)
+const props = defineProps({
+  queryObj: {
+    type: Object,
+    default: () => ({}),
+  },
+  pickleveTime:{
+    type:Array,
+    default: () => ([])
+  },
+  checkData:{
+    type:Array,
+    default: () => ([])
+  }
+})
+
+
+const data = reactive({
+  TemperatureMin: 0,
+  TemperatureMax: 0,
+  T_task_id: '',
+  SN_List: ''
+
+})
+const model = reactive({
+    StartTime:null,
+    EndTime:null, 
+})
+
+
+
+const showModal = ref(false)
+
+const showImportModal = () => {
+  Object.keys(model).forEach(item=>{
+    console.log(item)
+    model[item] = null
+  })
+  if( props.checkData==null || props.checkData.length==0){
+    message.error('请选择需要设置区间偏移的设备')
+    return
+  }else if(props.pickleveTime==null){
+    message.error('请选择区间偏移时间')
+    return
+  }else{
+    data.T_task_id = props.queryObj.T_task_id
+    model.StartTime = new Date(props.pickleveTime[0]).getTime()
+    model.EndTime = new Date(props.pickleveTime[1]).getTime()
+    
+    showModal.value = true
+  }
+}
+
+
+
+//提交
+const handleValidateButtonClick = ()=>{
+  TaskCopyApi()
+}
+const TaskCopyApi = async()=>{
+  let resIt = await dataFun()  
+  TaskUpdateaSke(resIt).then(res=>{
+    if(res.data.Code==200){
+      message.success(res.data.Msg)
+      showModal.value = false
+    }
+  })
+}
+const dataFun = ()=>{  
+  return new Promise(resolve=>{
+    let models = {...model}
+    let snList = [...props.checkData]
+    //处理时间戳转时间格式补零
+    Object.keys(models).forEach(item=>{
+      models[item] = TimeDate(models[item])+':00'
+    })
+
+    //处理sn List
+    const arr1 = snList.map(item => item.T_sn + ',' +item.T_id)
+    data.SN_List = arr1.join('|')+'|'
+    resolve({
+      ...data,...models
+    })
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>