Merge remote-tracking branch 'origin/master'

xiangpei

2024-03-20 a59da005567ed5eed92f1fa8ed27391192b4063d

Merge remote-tracking branch 'origin/master'

 src/main.js

@@ -42,6 +42,9 @@
import VScaleScreen from 'v-scale-screen'
import dataV from '@jiaminghi/data-view'

import gsap from 'gsap';
import { formatNumber } from './utils/format';



// 全局方法挂载
@@ -87,6 +90,41 @@

Vue.config.productionTip = true


// 全局指令
Vue.directive('roll', {
  inserted: (el, binding) => {
    let target = {
      count: 0
    };
    let finalNumber = el.innerText;
    gsap.to(target, {
      count: finalNumber,
      duration: 1,
      ease: "power2.out",
      onUpdate: () => {
        el.innerText = formatNumber(target.count.toFixed(0));
      }
    })

  },
  update: (el, binding) => {
    let target = {
      count: el.innerText
    };
    let finalNumber = el.getAttribute('value');
    gsap.to(target, {
      count: finalNumber,
      duration: 1,
      ease: "power2.out",
      onUpdate: () => {
        el.innerText = formatNumber(target.count.toFixed(0));
      }
    })
  }
})


new Vue({
  el: '#app',
  router,

 src/permission.js

@@ -8,7 +8,7 @@

NProgress.configure({ showSpinner: false })

const whiteList = ['/login', '/register', '/screen']
const whiteList = ['/login', '/register']

router.beforeEach((to, from, next) => {
  NProgress.start()

 src/router/index.js

@@ -47,6 +47,19 @@
    hidden: true
  },
  {
    path: '/car/vehicle-data-monitor',
    component: Layout,
    hidden: true,
    children: [
    {
      path: 'index',
      name: 'vehicle-data-monitor',
      component: () => import('@/views/system/vehicle-data-monitor/index'),
      meta: { title: '车辆过卡口数据一致性', activeMenu: '/system/vehicle-data-monitor' }
    }
  ]
  },
  {
    path: '/register',
    component: () => import('@/views/register'),
    hidden: true
@@ -76,11 +89,8 @@
  },
  {
    path: '/screen',
    component: Layout,
    hidden: true,
    component: () => import('@/views/screen/index'),
    name: 'Profile',
    meta: { title: '大屏信息', icon: 'user' }
  },
  {
    path: '/user',

 src/utils/format.js

New file
@@ -0,0 +1,3 @@
export const formatNumber = (value) => {
  return new Intl.NumberFormat('en-US').format(value);
}

 src/views/screen/components/screen-car/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="car-container">
    <wrapper-title :title="'车辆设备数据'"></wrapper-title>
    <wrapper-title :title="'车辆设备数据'" :path="'/monitorServe/car'"></wrapper-title>

    <div class="car-content">
      <div class="data-plane">
@@ -11,7 +11,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备总数</div>
              <div class="data-num">{{ formatNumber(1123) }}</div>
              <div class="data-num type1" v-roll>{{ 1123 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -23,7 +23,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备正常数</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
              <div class="data-num type2" v-roll>{{ 2000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -35,7 +35,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备异常数</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
              <div class="data-num type3" v-roll>{{ 1000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -63,9 +63,6 @@
  },

  methods: {
    formatNumber(value) {
      return new Intl.NumberFormat('en-US').format(value);
    }
  },

  mounted() {
@@ -114,6 +111,16 @@
          font-size: 24px;
          color: #fff;
        }

        .type1 {
          color: #287cfa;
        }
        .type2 {
          color: #0cd81d;
        }
        .type3 {
          color: #e20c0c
        }
      }
    }
  }

 src/views/screen/components/screen-detection/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="detection-container">
    <wrapper-title :title="'运行监控数据'"></wrapper-title>
    <wrapper-title :title="'运行监控数据'" :path="'/dataManage'"></wrapper-title>

    <div class="detection-content">
      <div class="water-item">

 src/views/screen/components/screen-examine/components/examine-chart.vue

@@ -26,7 +26,7 @@
        {id: 4,name: '点位在线率', value: 40},
        {id: 5,name: '录像可用率', value: 80},
        {id: 6,name: '重点点位录像可用率', value: 20},
        {id: 7,name: '一机一档合格率', value: 60},
        {id: 7,name: '信息采集准确率', value: 60},
        {id: 8,name: '卡门过车数据一致性', value: 40},
        
      ]

 src/views/screen/components/screen-examine/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="examine-container">
    <wrapper-title :title="'考核数据'"></wrapper-title>
    <wrapper-title :title="'考核数据'" :path="'/examine/check-rule'"></wrapper-title>
    <div class="examine-content">
      <div class="examine-wrapper">
        <examine-chart class="wrapper-item"></examine-chart>

 src/views/screen/components/screen-face/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="face-container">
    <wrapper-title :title="'人脸设备数据'"></wrapper-title>
    <wrapper-title :title="'人脸设备数据'" :path="'/monitorServe/face'"></wrapper-title>

    <div class="face-content">
      <div class="data-plane">
@@ -11,7 +11,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备总数</div>
              <div class="data-num">{{ formatNumber(1123) }}</div>
              <div class="data-num type1" v-roll>{{ 1123 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -23,7 +23,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备正常数</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
              <div class="data-num type2" v-roll>{{ 2000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -35,7 +35,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备异常数</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
              <div class="data-num type3" v-roll>{{ 1000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -62,10 +62,6 @@
  },

  methods: {

    formatNumber(value) {
      return new Intl.NumberFormat('en-US').format(value);
    }
  },

  mounted() {
@@ -113,6 +109,16 @@
          font-size: 24px;
          color: #fff;
        }

        .type1 {
          color: #287cfa;
        }
        .type2 {
          color: #0cd81d;
        }
        .type3 {
          color: #e20c0c
        }
      }
    }
  }

 src/views/screen/components/screen-title/index.vue

@@ -5,7 +5,7 @@
        <img src="@/assets/images/screen/header_bg.png" class="width-img" alt="">
      </div>
      <div class="header-text">
        自贡运维考核可视化大屏
        自贡市运维考核可视化
      </div>
    </div>
  </div>

 src/views/screen/components/screen-video/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="video-container">
    <wrapper-title :title="'视频设备数据'"></wrapper-title>
    <wrapper-title :title="'视频设备数据'" :path="'/monitorServe/video'"></wrapper-title>

    <div class="video-content">
      <div class="data-plane">
@@ -11,7 +11,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备总数</div>
              <div class="data-num">{{ formatNumber(1123) }}</div>
              <div class="data-num type1" v-roll>{{ 1123 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -23,7 +23,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备正常数</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
              <div class="data-num type2" v-roll>{{ 2000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -35,7 +35,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备异常数</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
              <div class="data-num type3" v-roll>{{ 1000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -54,18 +54,10 @@
  },
  data() {
    return {
      dataList: {
        state: { '01:00': 1000, '02:00': 2131, '03:00': 1233, '04:00': 2132, '05:00': 3211, '06:00': 213, '07:00': 123, '08:00': 566 },
        state2: { '01:00': 900, '02:00': 1131, '03:00': 1533, '04:00': 2132, '05:00': 3011, '06:00': 13, '07:00': 113, '08:00': 566 },
      },
    }
  },

  methods: {

    formatNumber(value) {
      return new Intl.NumberFormat('en-US').format(value);
    }
  },

  mounted() {
@@ -113,6 +105,16 @@
          font-size: 24px;
          color: #fff;
        }

        .type1 {
          color: #287cfa;
        }
        .type2 {
          color: #0cd81d;
        }
        .type3 {
          color: #e20c0c
        }
      }
    }
  }

 src/views/screen/components/screen-wrapper/index.vue

@@ -1,6 +1,9 @@
<template>
  <div class="wrapper-container">

    <select-item></select-item>
    <div class="return-button">
      <el-button type="primary" @click="returnPath">返回</el-button>
    </div>
    <div class="wrapper-content">
      <div class="left-container wrapper">
        <screen-face></screen-face>
@@ -20,6 +23,7 @@
</template>

<script>
import SelectItem from '../select-item/index';
import ScreenFace from '../screen-face/index';
import ScreenDetection from '../screen-detection/index';
import ScreenExamine from '../screen-examine/index';
@@ -29,6 +33,7 @@
export default {
  name: 'ScreenWrapper',
  components: {
    SelectItem,
    ScreenFace,
    ScreenDetection,
    ScreenExamine,
@@ -36,10 +41,20 @@
    ScreenCar,
    ScreenMap
  },
  methods: {
    returnPath() {
      this.$router.go(-1);
    }
  }
}
</script>

<style lang="scss" scoped>
.return-button {
  position: absolute;
  right: 20px;
  top: 40px;
}
.wrapper-container {
  width: 100%;
  height: 100%;

 src/views/screen/components/select-item/index.vue

@@ -1,15 +1,92 @@
<template>
  <div class="select-container">
    
    <div class="type-select">
      <div class="select-label">数据源</div>
      <el-select v-model="typeValue" popper-class="type-select" class="select-style" @change="setConfig">
        <el-option v-for="item in testData1" :key="item.name" :label="item.name" :value="item.value" />
      </el-select>
    </div>

    <div class="date-select">
      <div class="select-label">日期</div>
      <el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="setConfig" />
    </div>

  </div>
</template>

<script>
  export default {
    
export default {
  data() {
    return {
      typeValue: 1,
      dateValue: new Date(),
      testData1: [
        {
          name: '省厅',
          value: 1
        },
        {
          name: '市厅',
          value: 2
        },
        {
          name: '公安部',
          value: 3
        }
      ]
    }
  },
  methods: {
    setConfig() {

    }
  }
}
</script>

<style lang="scss" scoped>
.select-container {
  position: absolute;
  top: 40px;
  left: 20px;
  display: flex;
  align-items: center;

  .select-label {
    font-size: 20px;
    margin-right: 10px;
    color: #2375f0;
    flex-shrink: 0;
  }

  .type-select {
    display: flex;
    align-items: center;
    margin-right: 20px;
    width: 240px;
  }

  .date-select {
    display: flex;
    align-items: center;
    width: 320px;
  }
}
::v-deep .el-input__inner {
  background: rgba(67, 102, 155, 0.4) !important;
  color: #4481DD;
  border-color: #4481DD !important;
}

::v-deep .date-select .el-range-input {
  background-color: transparent !important;
  color: #4481DD;
}
::v-deep .date-select .el-date-editor .el-range-separator {
  color: #4481DD !important;
}


</style>

 src/views/screen/components/wrapper-title/index.vue

@@ -2,7 +2,7 @@
  <div class="title-container">
    <span class="title">{{ title }}</span>

    <div class="more-button">
    <div class="more-button" v-if="path" @click="toPath">
      <dv-border-box-12>
        <div class="button-text">
          详情
@@ -22,6 +22,12 @@
    },
    path: {
      type: String,
      default: ''
    }
  },
  methods: {
    toPath () {
      this.$router.push(this.path);
    }
  }
}

 src/views/screen/index.vue

@@ -1,5 +1,6 @@
<template>
  <div class="screen-container">
    
    <screen-title></screen-title>
    <v-scale-screen width="1920" height="1080" :autoScale="true" :delay="0" class="screen">
      <screen-wrapper></screen-wrapper>
@@ -35,4 +36,5 @@
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

</style>

 src/views/system/check-result/index.vue

@@ -90,8 +90,7 @@
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleDetail(item)">详情</el-button>
      </div>
      <div class="text item">考核<span class="time">{{ item.examineName }}</span></div>
      <div class="text item">考核范围<span class="time">{{ item.examineRange }}</span></div>
      <div class="text item">考核频率<span class="time">{{ item.frequency }}</span></div>
      <div class="text item">考核频率<span class="time">{{ "季度考核" }}</span></div>
      <div class="text item">考核分数<span class="time">{{ item.checkScore }}</span></div>
      <div class="text item">考核时间
        <span class="time">{{ item.checkTime }}</span>
@@ -184,32 +183,30 @@
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-medal"></i>
            系统分数
            综合分数
          </template>
          <el-tag type="danger" size="small">{{detail.checkScore}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-medal"></i>
            人工分数
          </template>
          <el-tag type="danger" size="small">{{detail.manualScore}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-medal"></i>
            车辆点位在线率
          </template>
          <el-tag type="danger" size="small">{{detail.carOnlineRate}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-medal"></i>
            综合分数
          </template>
          <el-tag type="danger" size="small">{{detail.systemScore}}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
        <el-table
          :data="tableData"
          show-summary
          style="width: 100%">
          <el-table-column
            prop="name"
            label="规则名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="content"
            label="指标"
            width="180">
          </el-table-column>
          <el-table-column
            prop="score"
            label="得分">
          </el-table-column>
        </el-table>
    </el-dialog>

    <!-- 添加或修改考核结果对话框 -->
@@ -233,9 +230,26 @@
    return {
      detailTitle: '',
      detailOpen: false,
      detail: {
      detail:{

      },
      tableData: [{
        name: '视频平均在线率',
        content: '97%',
        score: '-5'
      }, {
        name: '一机一档24小时未修复',
        content: '5个',
        score: '-0.5'
      }, {
        name: '存储故障',
        content: '5小时',
        score: '-0.5'
      }, {
        name: '时钟不同步24小时未修复',
        content: '3个',
        score: '-0.3'
      }],
      manualScoreOpen: false,
      manualScoreForm: {},
      manualScoreTitle: '',

 src/views/system/check-template/index.vue

@@ -9,10 +9,10 @@
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="公司名" prop="unitName">
      <el-form-item label="考核对象" prop="unitName">
        <el-input
          v-model="queryParams.status"
          placeholder="请输入公司名"
          placeholder="请输入考核对象"
          clearable
          @keyup.enter.native="handleQuery"
        />
@@ -79,7 +79,7 @@
    <el-table v-loading="loading" :data="checkTemplateList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="模板名称" align="center" prop="templateName" />
      <el-table-column label="公司名" align="center" prop="unitName" />
      <el-table-column label="考核对象" align="center" prop="unitName" />
      <el-table-column label="调整系数" align="center" prop="adjustCoefficient" />
      <el-table-column label="调整系数计算方式" align="center" prop="adjustWay" />
      <el-table-column label="状态" align="center" prop="status" />
@@ -115,7 +115,7 @@
        <el-form-item label="模板名称" prop="templateName">
          <el-input v-model="form.templateName" placeholder="请输入模板名称" />
        </el-form-item>
        <el-form-item label="公司名" prop="unitName">
        <el-form-item label="考核对象" prop="unitName">
          <el-select v-model="form.unitName" placeholder="请选择">
            <el-option
              v-for="item in unitList"

 src/views/system/data-manage/index.vue

@@ -1,55 +1,79 @@
<template>
  <div>
    <div class="container">
        <el-row type="flex" justify="center">
            <el-col :span="24">
                <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">人脸数据异常检测</h3>
            </el-col>
        </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">人脸数据异常检测</h3>
        </el-col>
      </el-row>

        <el-row type="flex" justify="center">
            <el-col :span="6" v-for="(item, index) in faceData" :key="index">
                <el-link @click="handleDetail(item)">
                    <el-card style="width:150px;height: 150px;text-align: center;">
                        <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
                        <div>{{ item.name }}</div>
                    </el-card>
                </el-link>
            </el-col>
        </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6" v-for="(item, index) in faceData" :key="index">
          <el-link @click="handleDetail(item)">
            <el-card style="width:150px;height: 150px;text-align: center;">
              <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
              <div>{{ item.name }}</div>
            </el-card>
          </el-link>
        </el-col>
      </el-row>
    </div>

    <div class="container">
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">车俩数据异常检测</h3>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="6" v-for="(item, index) in carData" :key="index">
          <el-link @click="handleDetail(item)">
            <el-card style="width:150px;height: 150px;text-align: center;">
              <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
              <div>{{ item.name }}</div>
            </el-card>
          </el-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            faceData: [
                { name: '人脸识别时钟准确性', icon: 'el-icon-alarm-clock', description: '描述信息', routerUrl: 'vehicle-data-monitor' },
                { name: '人脸抓拍数据监测', icon: 'el-icon-user', description: '描述信息', routerUrl: '/face/faceClock' },
                { name: '人脸数据趋势分析', icon: 'el-icon-data-line', description: '描述信息', routerUrl: '/face/faceClock' },
                { name: '人脸抓拍设备活跃性', icon: 'el-icon-timer', description: '描述信息', routerUrl: '/face/faceClock' },
                { name: '人脸抓拍上传及时性', icon: 'el-icon-money', description: '描述信息', routerUrl: '/face/faceClock' },
                { name: '人脸抓拍大图可用性', icon: 'el-icon-data-analysis', description: '描述信息', routerUrl: '/face/faceClock' },
            ]
        }
    },
    methods: {
        handleDetail(item) {
            this.$router.push({
                name: item.routerUrl,
                params: {
                    id: item.id
                }
            })
        }
  data() {
    return {
      faceData: [
        { name: '人脸识别时钟准确性', icon: 'el-icon-alarm-clock', description: '描述信息', routerUrl: '/car/vehicle-data-monitor/index' },
        { name: '人脸抓拍数据监测', icon: 'el-icon-user', description: '描述信息', routerUrl: '/car/vehicle-data-monitor/index' },
        { name: '人脸数据趋势分析', icon: 'el-icon-data-line', description: '描述信息', routerUrl: '/car/vehicle-data-monitor/index' },
        { name: '人脸抓拍设备活跃性', icon: 'el-icon-timer', description: '描述信息', routerUrl: '/car/vehicle-data-monitor/index' },
        { name: '人脸抓拍上传及时性', icon: 'el-icon-money', description: '描述信息', routerUrl: '/car/vehicle-data-monitor/index' },
        { name: '人脸抓拍大图可用性', icon: 'el-icon-data-analysis', description: '描述信息', routerUrl: '/car/vehicle-data-monitor/index' },
      ],
      carData: [
        { name: '卡口过车数据一致性', icon: 'el-icon-truck', description: '描述信息', routerUrl: '/car/vehicle-data-monitor/index' }
      ]
    }
  },
  methods: {
    handleDetail(item) {
      this.$router.push({
        path: item.routerUrl,
        params: {
          id: item.id
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 10px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 10px;
}
</style>
</style>

 src/views/system/score/index.vue

@@ -76,9 +76,9 @@
    <el-table v-loading="loading" :data="scoreList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="考核名" align="center" prop="examineName" />
      <el-table-column label="单位名" align="center" prop="unitName" />
      <el-table-column label=考核对象" align="center" prop="unitName" />
      <el-table-column label="分值" align="center" prop="score" />
      <el-table-column label="积分类型" align="center" prop="scoreCategory">
      <el-table-column label="考核规则" align="center" prop="scoreCategory">
      <template slot-scope="scope">
        <div v-if="scope.row.scoreCategory === 1">视频在线率</div>
        <div v-else-if="scope.row.scoreCategory === 2">存储故障</div>

 src/views/system/vehicle-data-monitor/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="app-container">
    <div class="top">
    <!-- <div class="top">
      <el-row type="flex" justify="space-between" style="width: 60%;">
        <el-col :span="6">
          <el-card class="card">
@@ -37,7 +37,43 @@
        </el-col>
      </el-row>

    </div>
    </div> -->


    <el-card class="box-card">
      <el-row type="flex" align="middle" justify="space-between">
        <el-col :xl="8" :lg="8" :md="10" :sm="8" :xs="6">
          <div class="icon-container" style="background-color: #5599F7;font-size: 50px;color: #FFF;">
            <i class="el-icon-wind-power"></i>
          </div>
        </el-col>
        <el-col :xl="14" :lg="14" :md="12" :sm="14" :xs="16">
          <div class="dashboard">
            <div class="dashboard-item">
              <h3 style="color: #5C9BF8">{{ totalKiosks }}</h3>
              <p>卡口总数</p>
            </div>
            <div class="dashboard-item">
              <h3>{{ uniqueKiosks }}</h3>
              <p>不唯一卡口数</p>
            </div>
            <div class="dashboard-item">
              <div style="width: 1px;height: 55px;border: 1px solid #D7EBFA;"></div>
            </div>
            <div class="dashboard-item">
              <h3 style="color: #5C9BF8">{{ totalCarData }}</h3>
              <p>过车数据总量</p>
            </div>
            <div class="dashboard-item">
              <h3>{{ uniqueCarData }}</h3>
              <p>不唯一数据量</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>



    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="卡口编号" prop="bayonetNumber">
@@ -276,41 +312,36 @@
};
</script>
<style scoped>
.top {
  height: 150px;
.box-card {
  background-color: #F5F9FE;
  width: 100%;
  margin-bottom: 20px;
  background-color: #F2F9FF;
  border: 1px solid #77befd;
  height: 120px
}

.container {
  max-width: 1000px;
  margin: auto;
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  width: 20%;
  height: 80px;
  margin-left: 5%;
}

.number {
  font-size: 36px;
  font-weight: bold;
  color: #00A5FE;
.el-icon-refresh-left {
  font-size: 50px;
  color: #FFFFFF;
}

.numberTwo {
  font-size: 36px;
  font-weight: bold;
  color: #505051;
.dashboard {
  display: flex;
  gap: 10%;
  align-items: center;
  margin-left: -50%;
}

.card {
  width: 100px;
  height: 100px;
.dashboard-item {
  text-align: center;
  background-color: #00A5FE;
  color: aliceblue;
  border-radius: 10%;
  margin: 25px;
}

.mod {
  margin-top: 40px;
}
</style>

 vue.config.js

@@ -35,7 +35,7 @@
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        target: `http://192.168.3.88:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''