tnc-fe/src/views/statistics/SmsCheckStatistics.vue

<template>

  <div>

    <a-row :gutter="16" style="height: 1000px">
      <a-col :span="5" style="height: 100%;">
        <a-card title="任务选择" :bordered="false" style="height: 100%">
          <a-directory-tree
            style="height: auto"
            v-model:expandedKeys="expandedKeys"
            v-model:selectedKeys="selectedKeys"
            multiple
            :tree-data="treeData"
            @expand="onExpand"
            @select="onTreeNodeSelect"
          ></a-directory-tree>
        </a-card>
      </a-col>




      <!-- 查询区域 -->
      <a-col :span="19">
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="客户编号">
                  <j-input placeholder="请输入客户编号" v-model:value="customerNo"></j-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="客户名称">
                  <j-input placeholder="客户名称" v-model:value="customerName" ></j-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="任务名称">
                  <j-input placeholder="任务名称" v-model:value="taskName" ></j-input>
                </a-form-item>
              </a-col>

              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="任务状态">
                  <j-dict-select-tag placeholder="请选择任务状态" v-model:value="taskState"  dictCode="sms_check_task_state" />
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="稽核类型">
                  <j-dict-select-tag placeholder="请选择稽核类型" v-model:value="taskType"  dictCode="sms_check_task_type" />
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="稽核状态">
                  <j-dict-select-tag placeholder="请选择稽核状态" v-model:value="checkState"  dictCode="sms_check_check_state" />
                </a-form-item>
              </a-col>
              <template v-if="toggleSearchStatus">


                <a-col :xl="10" :lg="11" :md="12" :sm="24">
                  <a-form-item label="开始时间">
                    <j-date :show-time="true" date-format="YYYY-MM-DD" placeholder="请选择开始时间" class="query-group-cust" v-model:value="startDate"></j-date>

                  </a-form-item>
                  <a-form-item label="结束时间">
                    <j-date :show-time="true" date-format="YYYY-MM-DD" placeholder="请选择结束时间" class="query-group-cust" v-model:value="endDate"></j-date>
                  </a-form-item>
                </a-col>
              </template>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"></span>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-col>
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" icon="download" @click="handleExportXls('稽核统计')">导出</a-button>
        <!-- 高级查询区域 -->
         <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
        </a-dropdown>

        <a-button type="primary" @click="searchQuery()" icon="search" >查询</a-button>
        <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
        <a @click="handleToggleSearch" style="margin-left: 8px">
          {{ toggleSearchStatus ? '收起' : '展开' }}
          <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
        </a>

      </div>
      <!-- 查询区域-END -->

      <a-col :span="5" style="padding-top: 10px" v-if="this.viewIs === '' ">
        <a-card>
          <a-statistic
            title="行短稽核"
            :value="lineNum"
            :precision="0"
            suffix="个"
            :value-style="{ color: '#fa073f' }"
            style="margin-right: 10px"
          >
            <template #prefix>
            </template>
          </a-statistic>
        </a-card>
      </a-col>

      <a-col :span="5" style="padding-top: 10px" v-if="this.viewIs === ''">
        <a-card>
          <a-statistic
            title="物联网业务稽核"
            :value="businessNum"
            :precision="0"
            suffix="个"
            :value-style="{ color: '#810320' }"
            style="margin-right: 50px"
          >
            <template #prefix>

            </template>
          </a-statistic>
        </a-card>
      </a-col>

      <a-col :span="5" style="padding-top: 10px" v-if="this.viewIs === ''">
        <a-card>
          <a-statistic
            title="复开审批"
            :value="reopeningNum"
            :precision="0"
            suffix="个"
            :value-style="{ color: '#0a0a09' }"
            style="margin-right: 50px"
          >
            <template #prefix>

            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="4" style="padding-top: 10px" v-if="this.viewIs === ''">
        <a-card>
          <a-statistic
            title="中继线稽核"
            :value="trunkLineAuditNum"
            :precision="0"
            suffix="个"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <template #prefix>

            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="4" style="padding-top: 10px">
        <a-card>
          <a-statistic
            title="新增稽核数量"
            :value="sumCount"
            :precision="0"
            suffix="个"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <template #prefix>

            </template>
          </a-statistic>
        </a-card>
      </a-col>

      <!--稽核状态 -->
      <a-col :span="5" style="padding-top: 10px"  v-if="this.viewIs !== '' ">
        <a-card>
          <a-statistic
            title="未开始"
            :value="notStart"
            :precision="0"
            suffix="个"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <template #prefix>

            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5" style="padding-top: 10px" v-if="this.viewIs !== '' ">
        <a-card>
          <a-statistic
            title="进行中"
            :value="inProgress"
            :precision="0"
            suffix="个"
            :value-style="{ color: '#810320' }"
            style="margin-right: 50px"
          >
            <template #prefix>

            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5" style="padding-top: 10px" v-if="this.viewIs !== '' ">
        <a-card>
          <a-statistic
            title="已结束"
            :value="completed"
            :precision="0"
            suffix="个"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <template #prefix>

            </template>
          </a-statistic>
        </a-card>
      </a-col>

      <!--稽核状态 -->


      <a-col :span="19" style="top: 10px">
        <a-card title="稽核概况统计" :bordered="false">
          <!-- table区域-begin -->
          <div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
              <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
              <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            </div>

            <a-table
              ref="table"
              size="middle"
              :scroll="{x:true}"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
              class="j-table-force-nowrap"
              @change="handleTableChange">


              <template slot="action" slot-scope="text, record">
<!--            <span v-has="'task:check:list:improve'" v-if="record.checkState == 1 || record.checkState == 0-->
<!--            || record.checkState == 3 || record.checkState == 4" >-->
<!--              <a @click="showImprove(record)">完善</a>-->
<!--              <a-divider type="vertical"/>-->
<!--            </span>-->

<!--                <span v-has="'task:check:list:upload'" v-if="record.checkState == 1 || record.checkState == 0-->
<!--            || record.checkState == 3 || record.checkState == 4">-->
<!--              <a @click="showUpload(record)">上传</a>-->
<!--              <a-divider type="vertical"/>-->
<!--            </span>-->

<!--                <span v-has="'task:check:list:submit'" v-if="record.checkState == 1 || record.checkState == 4">-->
<!--              <a @click="handSubmit(record)">提交</a>-->
<!--              <a-divider type="vertical"/>-->
<!--            </span>-->

<!--                <span v-has="'task:check:list:check'" v-if="record.checkState === 2 || record.checkState === 3">-->
<!--              <a @click="showCheckCheck(record)">稽核</a>-->
<!--              <a-divider type="vertical" />-->
<!--            </span>-->

<!--                <span v-has="'task:check:list:history'" v-if="record.checkState >= 4">-->
<!--              <a @click="showCheckLog(record)">历史</a>-->
<!--              <a-divider type="vertical" />-->
<!--            </span>-->

                <span v-has="'task:check:list:notice'"  >
              <a @click="showCheckList(record)">详情</a>
              <a-divider type="vertical" />
            </span>


                <a-dropdown>
                  <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                  <a-menu slot="overlay">

                    <a-menu-item v-has="'task:check:list:delete'">
                      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                    <a-menu-item v-has="'task:check:list:clear'">
                      <a-popconfirm title="确定清空吗?" @confirm="() => dataDelete(record.id)">
                        <a>清空</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>

              <template v-slot:customerName="text, record">
                <a @click="showCheckDetail(record)">{{text}}</a>
              </template>
                            <template v-slot:checkState="status">
                              <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
                            </template>
              <template v-slot:rowIndex="text,records,index">
                {{ (ipagination.current - 1) * ipagination.pageSize + Number(index)+1 }}
              </template>

            </a-table>

          </div>
          <!-- table区域 end -->
        </a-card>
      </a-col>
    </a-row>
  </div>
  <!-- 查询区域 -->
</template>

<script>


import moment from 'moment';
import {getAction} from "@api/manage";
import * as echarts from 'echarts';
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin';
import { mixinDevice } from '@/utils/mixin'
export default {
  name: 'SmsCheckWorkLogList',
  mixins:[JeecgListMixin,mixinDevice],
  data() {
    return {
      description: '稽核工作日志管理页面',
      startDate: '',
      endDate:'',
      superFieldList:[],
      taskDate:'',
      customerNo:'',
      customerName:'',
      url: {
        "statusRefuse": "/smsCheck/customerInfo/status/refuse",
        "taskList": "/smsCheck/task/list",
        "dateList": "/smsCheck/task/year/list",
        //基本信息 规范信息  附件资料 异常稽核统计
        "checkStateCount": "/smsCheck/workLog/check/state/count",
        //各个稽核点状态
        statusToCount:"/smsCheck/statistics/statusToCount",
        //各个稽核点个数
        "statisticsCount": "/smsCheck/statistics/count",
        //用户工作量接口
        "findStaffNoCount" : "/smsCheck/workLog/find/staff/no/count",
        queryTask: "/smsCheck/task/queryById",
        list: "/smsCheck/statistics/list",
        count: "/smsCheck/customerInfo/count",
        delete: "/smsCheck/customerInfo/delete",
        edit: "/smsCheck/customerInfo/edit",
        notice: "/smsCheck/customerInfo/notice",
        editCheck: "/smsCheck/customerInfo/edit/check/state",
        dataDelete: "/smsCheck/customerData/clear",
        deleteBatch:"/smsCheck/statistics/deleteBatch",
        exportXlsUrl: "/smsCheck/statistics/exportXls",
        importExcelUrl:""
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          scopedSlots: { customRender: 'rowIndex' }
        },{
          title:'任务状态',
          align:"left",
          sorter: true,
          dataIndex: 'taskState',
          customRender:function (text,record,index) {
            if (text === '0') {
              return '未开始';
            } else if (text === '1') {
              return '进行中';
            }else if (text === '2') {
              return '已结束';
            }
            return text;
          }
        },{
          title:'任务名称',
          align:"left",
          sorter: true,
          dataIndex: 'taskName'

        },
        {
          title:'客户名称',
          align:"left",
          sorter: true,
          dataIndex: 'customerName',
          scopedSlots: { customRender: 'customerName' }
        },
        {
          title:'客户编号',
          align:"center",
          sorter: true,
          dataIndex: 'customerNo'
        },
        {
          title:'服务号码（全）',
          align:"center",
          dataIndex: 'smsNumber'
        },
        {
          title:'用户编号',
          align:"center",
          dataIndex: 'userNo'
        },
        {
          title:'入网时间',
          align:"center",
          sorter: true,
          dataIndex: 'networkAccessTime'
        },
        {
          title:'用户状态',
          align:"center",
          dataIndex: 'userState',
          customRender:function (text,record,index) {
            if (text === '1') {
              return '在用';
            } else if (text === '2') {
              return '拆机';
            }
            return text;
          }
        },
        {
          title:'员工姓名',
          align:"center",
          dataIndex: 'staffName'
        },
        {
          title:'员工工号',
          align:"center",
          sorter: true,
          dataIndex: 'staffNo'
        },
        {
          title:'稽核状态',
          align:"center",
          sorter: true,
          dataIndex: 'checkState',
          scopedSlots: {customRender: 'checkState'},
        //  scopedSlots: { customRender: 'checkState' },
        //   customRender:function (text,record,index) {
        //     if (text === 0) {
        //       return '未处理';
        //     } else if (text === 1) {
        //       return '未完善';
        //     }else if (text === 2) {
        //       return '待稽核';
        //     }else if (text === 3) {
        //       return '已整改';
        //     }else if (text === 4) {
        //       return '待整改';
        //     }else if (text === 5) {
        //       return '稽核通过';
        //     }
        //     return text;
        //   }
        },
        {
            title:'稽核类型',
            align:"center",
            sorter: true,
            dataIndex: 'type',
            customRender:function (text,record,index) {
              if (text === '1') {
                return '行短稽核';
              }else if (text === '2') {
                return '物联网业务稽核';
              }else if (text === '3') {
                return '复开审批';
              }else if (text === '4') {
                return '中继线稽核';
            }
         }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          scopedSlots: { customRender: 'action' }
        }
      ],
      isorter:{
        column: 'checkState',
        order: 'asc',
      },

      $abnormalCheckPie: "",
      $abnormalCheckHistogram: "",
      $abnormalCreateTimeTrend: "",
      lineNum: 0,
      latestDate: '180',
      reopeningNum: 0,
      businessNum: 0,
      trunkLineAuditNum: 0,
      sumCount:0,
      treeData: [],
      expandedKeys: ['2022', '2022-10'],
      selectedKeys: {},
      statusAuditPieData: [],
      canvas: {},
      taskId:'',
      taskName:'',
      taskState:'',
      taskType:'',
      completed:'',
      inProgress:'',
      notStart:'',
      viewIs:'',
      checkState:''
    }
  },

  created() {

    const waterMarkText = '北区稽核平台';
    this.canvas = document.createElement('canvas');
    const ctx = this.canvas.getContext('2d');
    this.canvas.width = this.canvas.height = 100;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.globalAlpha = 0.08;
    ctx.font = '20px Microsoft Yahei';
    ctx.translate(50, 50);
    ctx.rotate(-Math.PI / 4);
    ctx.fillText(waterMarkText, 0, 0);
    //初始化日期 默认最近180天
    //this.taskDate = [this.getRecentDay(parseInt(this.latestDate)), this.getRecentDay(0)]
    //稽核任务列表（树）
    this.taskList();
    //this.queryParam.taskState = this.$route.query.state;

    this.searchQuery();

   // this.getSuperFieldList();

  },

  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },

  filters: {
    statusTypeFilter(type) {
      const statusTypeMap = {
        '0': 'error',
        '1': 'error',
        '2': 'warning',
        '3': 'warning',
        '4': 'processing',
        '5': 'success'
      }
      return statusTypeMap[type]
    },
    statusFilter(status) {
      const statusMap = {
        '0': '未完善',
        '1': '未完善',
        '2': '待稽核',
        '3': '待稽核',
        '4': '待整改',
        '5': '通过'
      }
      return statusMap[status]
    }
  },

  methods: {


    showCheckList(record) {
      //this.$router.push({path: '/specialApply/task/checkStatisticsDetails', query: {id: record.id,customerNo: record.customerNo}});
      if (record.type==='3'){
        //特审复开审批 /specialApply/modules/TaskCheckDetails  /sms/check/task/check/detail
        this.$router.push({ path: '/specialApply/modules/TaskCheckDetails', query:{id:record.id}});
      }
      if (record.type==='4'){

        // 中断线稽核详情
        this.$router.push({ path: '/truckCheck/modules/TaskCheckDetails', query:{id:record.id}});
      }
      if (record.type==='2'){

        // 物联网稽核
        this.$router.push({ path: '/lotCheck/modules/TaskCheckDetails', query:{id:record.id}});
      }

      if (record.type==='1'){
        // 行短稽核
        this.$router.push({ path: '/sms/check/task/check/detail', query:{id:record.id}});
      }
    },
    searchReset(){
      this.taskType='',
        this.taskState='',
        this.customerName='',
        this.startDate='',
        this.endDate='',
        this.taskName='',
        this.checkState='',
        this.customerNo='';
        let queryParam = {
        "customerName":this.customerName,
        "startDate": this.startDate,
        "endDate":  this.endDate,
        "infoId":this.taskId,
        "taskName":this.taskName,
        "customerNo":this.customerNo,
        "taskType":this.taskType,
        "taskState":this.taskState,
          "checkState":this.checkState
      }
        this.statisticsCount(queryParam);
        this.selectList(queryParam);
    },

    searchQuery(){
      //直接加载urT. ist接口数据
      let queryParam = {
        "customerName":this.customerName,
        "startDate": this.startDate,
        "endDate":  this.endDate,
        "infoId":this.taskId,
        "taskName":this.taskName,
        "customerNo":this.customerNo,
        "taskType":this.taskType,
        "taskState":this.taskState,
        "checkState":this.checkState
      }

      this.statisticsCount(queryParam);
      this.selectList(queryParam);
    },

    getSuperFieldList(){
      let fieldList=[];
      fieldList.push({type:'string',value:'taskName',text:'任务名称',dictCode:''})
      fieldList.push({type:'string',value:'taskState',text:'任务状态',dictCode:'sms_check_task_state'})
      fieldList.push({type:'datetime',value:'taskStartTime',text:'任务开始时间'})
      fieldList.push({type:'datetime',value:'taskEndTime',text:'任务结束时间'})
      fieldList.push({type:'string',value:'description',text:'描述',dictCode:''})
      fieldList.push({type:'string',value:'fileUrl',text:'文件路径',dictCode:''})
      fieldList.push({type:'string',value:'customerCount',text:'客户总数',dictCode:''})
      fieldList.push({type:'string',value:'checkCount',text:'稽核数',dictCode:''})
      this.superFieldList = fieldList
    },
    selectList(queryParam){
      this.viewIs=this.taskType;
      this.loadData(null,queryParam);
    },



    // 显示上传页面
    handSubmit(record) {
      let that = this;
      let model = {
        id: record.id,
      }
      postAction(this.url.editCheck, model)
        .then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.loadData(that.ipagination.current);
          } else {
            that.$message.warning(res.message)
          }
        }).finally(() => {

      })
    },
    changeReportDate(a, event){
      this.taskDate = [this.getRecentDay(parseInt(this.latestDate)), this.getRecentDay(0)]
      this.statisticsCount(this.taskId);
    },

    //选择日期 读取数据
    handleChange(value,model){
      this.statisticsCount(this.taskId);

    },

    statisticsCount(queryParam) {
      if (this.taskType===''){
        getAction(this.url.statisticsCount, queryParam).then(res => {
          if (res.success) {
            this.lineNum = res.result["lineNum"] ;
            this.businessNum = res.result["businessNum"];
            this.reopeningNum = res.result["reopeningNum"];
            this.trunkLineAuditNum = res.result["trunkLineAuditNum"];
            this.sumCount =  res.result["totalNum"];
          }
        }).finally(() => {

        })
      }else {
        getAction(this.url.statusToCount, queryParam).then(res => {
          if (res.success) {
            this.notStart = res.result["0"] ;
            this.inProgress  = res.result["1"];
            this.completed  = res.result["2"];
            this.sumCount =  res.result["num"]  ;
          }
        }).finally(() => {

        })
      }

    },

    //树点击事件
    onTreeNodeSelect(id) {
      if (id && id.length > 0) {
        if (id == "all") {
          this.taskId = null;
          this.searchQuery();
          return;
        }
        let split = id[0].split("key-");
        if (split.length == 2) {
          let taskId = split[1];
          this.taskId = taskId;
          //更新豆腐块 更新列表
          this.searchQuery();
        }
      }
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
    },

    taskDateList(taskData) {
      getAction(this.url["dateList"]).then(res => {
          if (res.success) {
            let result = res.result;
            let years = result[0];
            let months = result[1];
            let YearLevel = {}
            let monthLevel = {}

            for (var i in years) {
              let year = years[i].yearTime;
              let children = {
                "title": year,
                "key": year,
                "children": []
              }
              YearLevel[year] = children
            }

            for (var j in months) {
              let month = months[j].monthTime;
              let splitElement = month.split("-")[0];
              let children = {
                "title": month,
                "key": month,
                "children": []
              }
              YearLevel[splitElement].children.push(children)
            }

            for (var k in taskData) {
              let taskDatum = taskData[k];
              let taskStartTime = taskDatum.taskStartTime;

              let taskDatumType = taskDatum.type;
              let typeName ='';
              if (taskDatumType === 1) {
                typeName= '行短稽核';
              }else if (taskDatumType === 2) {
                typeName=  '物联网稽核';
              }else if (taskDatumType === 3) {
                typeName=  '复开审批';
              }else if (taskDatumType === 4) {
                typeName=  '中继线稽核';
              }


              if (taskStartTime != null && taskStartTime != undefined) {
                let children = {
                  "title": taskDatum.taskName + "[" + taskDatum.customerCount + "]"+ typeName,
                  "key": "key" + "-" + taskDatum.id,
                  "isLeaf": true,
                }
                let strings = taskStartTime.split("-");
                let year = strings[0];
                let month = strings[0] + "-" + strings[1];
                for (var z in YearLevel[year].children) {
                  let title = YearLevel[year].children[z].title;
                  if (title == month) {
                    YearLevel[year].children[z].children.push(children);
                    break;
                  }
                }
              }
            }

            let allChildren = {
              "title": "全部任务",
              "key": "all",
              "children": []
            }

            for (var u in YearLevel) {
              this.treeData.push(YearLevel[u])
            }
            this.treeData.push(allChildren)
            this.treeData = this.treeData.reverse();


          }
        }
      )
    },

    //任务列表数据
    taskList() {
      let queryParam = {
        pageNo: 1,
        pageSize: 1000000,

      }
      getAction(this.url["taskList"], queryParam).then(res => {
        if (res.success) {
          let records = res.result.records;
          //稽核任务菜单
          this.taskDateList(records);
        }
      })
    },
    getRecentDay: function (n) {
      let day = moment(new Date())
        .subtract(n, "days")
        .format("YYYY-MM-DD");
      return day;
    },

  }
}
</script>
<style scoped>

</style>