Merge remote-tracking branch 'origin/master'

fuliqi

2024-04-11 3b84bfca833d90ad48702c2a22c010f6ca953f9c

Merge remote-tracking branch 'origin/master'

 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/views/screen/components/screen-data/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="data-container">
    <wrapper-title :title="'工单数据'" :path="'/monitorServe/car'"></wrapper-title>
    <wrapper-title :title="'工单数据'" :path="'/work-order-center/maintenance/work-order/work-order'"></wrapper-title>

    <div class="data-content">
      <div class="data-panel">
@@ -14,13 +14,13 @@
        </div>
        <div class="panel-container">
          <div class="panel-item">
            <data-hola :holaTitle="`工单总数`" :centerValue="1111" :holaColor="`#4ea8ff`"></data-hola>
            <data-hola :holaTitle="`工单总数`" :centerValue="3000" :holaColor="`#4ea8ff`"></data-hola>
          </div>
          <div class="panel-item">
            <data-hola :holaTitle="`已处理工单数`" :centerValue="1111" :holaColor="`#4ea8ff`"></data-hola>
            <data-hola :holaTitle="`已处理工单数`" :centerValue="1600" :holaColor="`#5dec24`"></data-hola>
          </div>
          <div class="panel-item">
            <data-hola :holaTitle="`未处理工单数`" :centerValue="1111" :holaColor="`#4ea8ff`"></data-hola>
            <data-hola :holaTitle="`未处理工单数`" :centerValue="200" :holaColor="`#dfc639`"></data-hola>
          </div>
        </div>
      </div>
@@ -124,7 +124,7 @@
<style lang="scss" scoped>
.data-container {
  width: 100%;
  height: 470px;
  height: 500px;
  display: flex;
  flex-direction: column;

@@ -167,10 +167,11 @@
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin: 10px 0;

  .panel-item {
    width: 100px;
    height: 100px;
    width: 120px;
    height: 120px;
  }
}
</style>

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

@@ -56,7 +56,7 @@

    .hola-item {
      flex-shrink: 0;
      width: 120px;
      width: 150px;
      height: 120px;
    }
  }

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

@@ -151,7 +151,9 @@
.progressChart {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  .chart {
    width: 100%;
    height: 75%;
@@ -166,4 +168,5 @@
    margin-top: 10px;
  }
}

</style>

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

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

      <div class="examine-wrapper">

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

@@ -1,6 +1,6 @@
<template>
  <div class="table-container">
    <wrapper-title :title="'区域设备数据'" :path="'/monitorServe/face'"></wrapper-title>
    <wrapper-title :title="'区域设备数据'" :path="'/monitorServe/recovery'"></wrapper-title>
    <div class="table-content" ref="tabContent">
      <div class="table-wrapper">
        <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">

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

@@ -6,19 +6,19 @@
    </div>
    <div class="wrapper-content">
      <div class="left-container wrapper">
        <screen-face class="animate-enter-x enter-left"></screen-face>
        <screen-car class="animate-enter-x enter-left animate-delay-1"></screen-car>
        <screen-video class="animate-enter-x enter-left animate-delay-2"></screen-video>
        <screen-face class="enter-left" :class="{ 'animate-enter-x': isEnd }"></screen-face>
        <screen-car class="enter-left animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-car>
        <screen-video class="enter-left animate-delay-2" :class="{ 'animate-enter-x': isEnd }"></screen-video>
      </div>
      <div class="center-container center-wrapper">
        <screen-map></screen-map>
        <screen-table class="animate-enter-y enter-top"></screen-table>
        <screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table>
        <!-- <screen-detection></screen-detection> -->

      </div>
      <div class="right-container wrapper">
        <screen-examine class="animate-enter-x enter-right"></screen-examine>
        <screen-data></screen-data>
        <screen-examine class="enter-right" :class="{ 'animate-enter-x': isEnd }"></screen-examine>
        <screen-data class="enter-right animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-data>
      </div>
    </div>
  </div>
@@ -45,10 +45,29 @@
    ScreenCar,
    ScreenData
  },
  data() {
    return {
      isEnd: false
    }
  },
  methods: {
    returnPath() {
      this.$router.push('/index');
    },
    checkAnimationEnd(event) {
      if (this.isEnd) return;
      if (event.propertyName === 'transform') {
        this.isEnd = true;
      }
    }
  },
  mounted() {
    const container = document.querySelector('.screen-wrapper');
    container.addEventListener('transitionend', this.checkAnimationEnd);
  },
  destroyed() {
    const container = document.querySelector('.screen-wrapper');
    container.removeEventListener('transitionend', this.checkAnimationEnd);
  }
}
</script>

 src/views/system/result/detail/detail.vue

New file
@@ -0,0 +1,841 @@
<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="详情页面">
    </el-page-header>
    <el-container>
      <el-main style="padding-top: 0px">
        <h2>考核分数明细</h2>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<!--          <el-form-item label="考核对象" prop="ruleName">-->
<!--            <el-select-->
<!--              v-model="queryParams.address"-->
<!--              placeholder="请选择区域"-->
<!--              clearable-->
<!--            >-->
<!--              <el-option label="自贡市" value="自贡市"/>-->
<!--              <el-option label="沿滩区" value="沿滩区"/>-->
<!--              <el-option label="大安区" value="大安区"/>-->
<!--              <el-option label="贡井区" value="贡井区"/>-->
<!--              <el-option label="自流井区" value="自流井区"/>-->
<!--              <el-option label="高新区" value="高新区"/>-->
<!--              <el-option label="荣县" value="荣县"/>-->
<!--              <el-option label="富顺县" value="富顺县"/>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="考核日期" prop="createTime">
            <div class="block">
              <el-date-picker
                v-model="value2"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleScoreUpdate"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
            >删除</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getScoreList"></right-toolbar>
        </el-row>

        <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="ruleId">
            <template slot-scope="scope">
              <div v-if="scope.row.ruleId == 5">一机一档注册率</div>
              <div v-else-if="scope.row.ruleId == 4">一机一档合格率</div>
              <div v-else-if="scope.row.ruleId == 3">平台在线率</div>
            </template>
          </el-table-column>
          <el-table-column label="考核对象" align="center" prop="unitName">
            <template slot-scope="scope">
              <div v-if="scope.row.unitName ==='成都x运维' ">成都x运维</div>
              <div v-else>自流井区</div>
            </template>
          </el-table-column>
          <el-table-column label="分值" align="center" prop="score" />
          <el-table-column label="考核时间" align="center" prop="createTime" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleScoreUpdate(scope.row)"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleScoreDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="scoreTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getRuleList"
        />
      </el-main>
    </el-container>
    <el-container>
      <el-main>
        <h2>考核规则</h2>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleRuleUpdate"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
            >删除</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getRuleList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="ruleList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="规则名称" align="center" prop="ruleName" />
          <el-table-column label="规则权重" align="center" prop="ruleWeight" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleRuleUpdate(scope.row)"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getRuleList"
        />
      </el-main>
    </el-container>

    <el-container>
      <el-main>
        <h2>考核成绩</h2>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<!--          <el-form-item label="考核对象" prop="ruleName">-->
<!--            <el-select-->
<!--              v-model="queryParams.address"-->
<!--              placeholder="请选择区域"-->
<!--              clearable-->
<!--            >-->
<!--              <el-option label="自贡市" value="自贡市"/>-->
<!--              <el-option label="沿滩区" value="沿滩区"/>-->
<!--              <el-option label="大安区" value="大安区"/>-->
<!--              <el-option label="贡井区" value="贡井区"/>-->
<!--              <el-option label="自流井区" value="自流井区"/>-->
<!--              <el-option label="高新区" value="高新区"/>-->
<!--              <el-option label="荣县" value="荣县"/>-->
<!--              <el-option label="富顺县" value="富顺县"/>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="考核日期" prop="createTime">
            <div class="block">
              <el-date-picker
                v-model="value2"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['system:checkRule:export']"
            >导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getRuleList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="checkResultList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="考核日期" align="center" prop="date" width="120px"/>
          <el-table-column label="考核对象" align="center" prop="target" width="120px"/>
          <el-table-column label="平台在线率(权重：0.5)" align="center" prop="platformOnline" width="120px"/>
          <el-table-column label="一机一档合格率(权重：0.5)" align="center" prop="monitorQualification" width="120px"/>
          <el-table-column label="一机一档注册率(权重：0.5)" align="center" prop="monitorRegistration" width="120px"/>
          <el-table-column label="档案考核比(权重：0.5)" align="center" prop="archivesRate" width="120px"/>
          <el-table-column label="点位在线率(权重：1)" align="center" prop="siteOnline" width="120px"/>
          <el-table-column label="录像可用率(权重：1)" align="center" prop="videoAvailable" width="120px"/>
          <el-table-column label="标注正确率(权重：0.5)" align="center" prop="annotationAccuracy" width="120px"/>
          <el-table-column label="校时正确率(权重：0.5)" align="center" prop="timingAccuracy" width="120px"/>
          <el-table-column label="重点点位在线率(权重：0.5)" align="center" prop="keySiteOnline" width="120px"/>
          <el-table-column label="重点点位录像可用率(权重：0.5)" align="center" prop="keyVideoAvailable" width="120px"/>
          <el-table-column label="重点点位标注正确率(权重：0.5)" align="center" prop="keyAnnotationAccuracy" width="120px"/>
          <el-table-column label="重点点位按时正确率(权重：0.5)" align="center" prop="keyTimingAccuracy" width="120px"/>
          <el-table-column label="重点指挥图像公安部巡检结果(权重：0.2)" align="center" prop="keyCommandImageInspection" width="120px"/>
          <el-table-column label="重点指挥图像目录树(权重：0.8)" align="center" prop="keyCommandImageDirectoryTree" width="120px"/>
          <el-table-column label="在线检查平台部署及运行率(权重：0.075)" align="center" prop="onlineInspectionPlatform" width="120px"/>
          <el-table-column label="视频传输网资产准确率(权重：0.075)" align="center" prop="videoTransmissionAssetsAccuracy" width="120px"/>
          <el-table-column label="视频传输网资产弱口令得分比例(权重：0.075)" align="center" prop="videoTransmissionAssetsWeakPasswordScore" width="120px"/>
          <el-table-column label="视频传输网危险资产得分比重(权重：0.075)" align="center" prop="videoTransmissionDangerousAssetsScore" width="120px"/>
          <el-table-column label="视频传输网边界完整性检测扣分项(权重：0.2)" align="center" prop="videoTransmissionBoundaryIntegrityDetection" width="120px"/>
          <el-table-column label="月运行率" align="center" prop="operatingRate"/>
        </el-table>
      </el-main>
    </el-container>

    <!-- 添加或修改考核规则对话框 -->
    <el-dialog :title="title" :visible.sync="ruleOpen" width="600px" append-to-body>
      <el-form ref="form" :model="ruleForm" :rules="rules" label-width="80px">
        <el-form-item label="规则名称" prop="ruleName">
          <el-input v-model="ruleForm.ruleName" placeholder="请输入规则名称" />
        </el-form-item>
        <el-form-item label="规则类型" prop="category">
          <el-select v-model="ruleForm.category" placeholder="规则类型">
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规则描述" prop="ruleDetail">
          <el-input v-model="ruleForm.ruleDetail" type="textarea" show-word-limit maxlength="150" placeholder="请输入规则描述"/>
        </el-form-item>
        <el-form-item label="参数配置" prop="ruleDetail">
          <div class="row-warp">
            <div class="row">
              <div class="row-left">参数名</div>
              <div class="row-right">条件</div>
            </div>
            <div class="row">
              <div class="row-left">天网视频点位数</div>
              <div class="row-right">
                <div>不少于</div>
                <div>
                  <el-input class="input-w" type="number" v-model="ruleForm.videoPointNum"/>{{" %"}}
                </div>
              </div>
            </div>
            <div class="row">
              <div class="row-left">车辆卡口点位数</div>
              <div class="row-right">
                <div>不少于</div>
                <div><el-input class="input-w" type="number" v-model="ruleForm.vehicleCheckpointNum"/></div>{{" %"}}
              </div>
            </div>
            <div class="row">
              <div class="row-left">人脸卡口点位数</div>
              <div class="row-right">
                <div>不少于</div>
                <div>
                  <el-input class="input-w" type="number" v-model="ruleForm.faceChceckpointNum" /></div>{{" %"}}
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 规则详情 -->
    <el-dialog title="规则详情" :visible.sync="ruleDetailOpen" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="规则名称" prop="ruleName">
          <el-input class="input" disabled v-model="form.ruleName" placeholder="请输入规则名称" />
        </el-form-item>
        <el-form-item label="运维公司" prop="companyName">
          <el-input class="input" disabled :value ="companyName" placeholder="请输入运维公司名称"></el-input>
        </el-form-item>
        <el-form-item label="规则描述" prop="ruleDesc">
          <el-input class="input" disabled v-model="form.ruleDesc" placeholder="请输入规则描述" />
        </el-form-item>
        <el-form-item label="规则设置">
          <div >
            <div class="line">
              <div class="line-left">时钟同步（超过±3秒为不合格）24小时内未修复的：扣除相关镜头数量*</div>
              <div class="line-right"><el-input disabled v-model="jsonRule.overTime" type="text"/></div>分
            </div>
            <div class="line">
              <div class="line-left">OSD标识不满足《GAT 751-2008 视频图像文字标注规范》，24小时内未修复的：标扣除相关镜头数量*</div>
              <div class="line-right"><el-input disabled v-model="jsonRule.failNum" type="text"/></div>分
            </div>
            <div class="line">
              <div class="line-left">用户抽检，一机一档数据项不合格（提供虚假数据或错误数据为不合格），24小时内未修复的：扣除相关镜头数量*</div>
              <div class="line-right"><el-input disabled v-model="jsonRule.failNum" type="text"/></div>分
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改考核计分对话框 -->
    <el-dialog :title="title" :visible.sync="scoreOpen" width="500px" append-to-body>
      <el-form ref="form" :model="scoreForm" :rules="rules" label-width="80px">
        <el-form-item label="分值" prop="score">
          <el-input v-model="scoreForm.score" placeholder="请输入分值" />
        </el-form-item>
        <el-form-item label="考核名" prop="examineId">
          <el-select v-model="scoreForm.examineId" placeholder="请选择">
            <el-option
              v-for="item in examineList"
              :key="item.id"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核对象" prop="unitId">
          <el-select v-model="scoreForm.unitId" placeholder="请选择">
            <el-option
              v-for="item in unitList"
              :key="item.id"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核规则" prop="ruleCategory">
          <el-select v-model="scoreForm.ruleCategory" placeholder="请选择">
            <el-option
              v-for="item in ruleCategoryList"
              :key="item.id"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCheckResult, getCheckResult, delCheckResult, addCheckResult, updateCheckResult,manualScore, publishCheckResult } from "@/api/platform/check-result";
import { listCheckRule, getCheckRule, delCheckRule, addCheckRule, updateCheckRule } from "@/api/platform/check-rule";
import { listScore, getScore, delScore, addScore, updateScore } from "@/api/platform/check-score";
import {unitSelect} from "@/api/platform/unit";
import {publishSelect} from "@/api/platform/check-publish";

export default {
  name: "CheckResult",
  dicts: ['platform_audit_state'],
  data() {
    return {
      activeNames: ['1'],
      companyName: "成都x运维公司",
      detailTitle: '',
      detailOpen: false,
      detail:{
      },
      examineList: [],
      unitList: [
        {id:2,value: '成都x运维'},
        {id:3,value: '自流井区'},
      ],
      ruleCategoryList: [
        { id: 1, value: '视频在线率' },
        { id: 2, value: '存储故障' },
        { id: 3, value: '视图库对接稳定性' },
        { id: 4, value: '一机一档24小时未修复' },
        { id: 5, value: '时钟不同步24小时未修复' },
      ],
      tableData: [{
        name: '视频平均在线率',
        content: '97%',
        score: '-5'
      }, {
        name: '一机一档24小时未修复',
        content: '5个',
        score: '-0.5'
      }, {
        name: '存储故障',
        content: '5小时',
        score: '-0.3'
      }, {
        name: '时钟不同步24小时未修复',
        content: '3个',
        score: '-0.5'
      }],
      // 运维类型
      categoryList: [
        { id: 1, value: '视频监控' },
        { id: 2, value: '车辆识别' },
        { id: 3, value: '人脸识别' },
      ],
      manualScoreOpen: false,
      manualScoreForm: {},
      manualScoreTitle: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 考核结果表格数据
      checkResultList: [
        {
          date: '2024-04-02',
          target: '自流井区',
          platformOnline: '97%',
          monitorQualification: '97%',
          monitorRegistration: '97%',
          archivesRate: '97%',
          siteOnline: '97%',
          videoAvailable: '97%',
          annotationAccuracy: '97%',
          timingAccuracy: '97%',
          keySiteOnline: '97%',
          keyVideoAvailable: '97%',
          keyAnnotationAccuracy: '97%',
          keyTimingAccuracy: '97%',
          keyCommandImageInspection: '97%',
          keyCommandImageDirectoryTree: '97%',
          onlineInspectionPlatform: '97%',
          videoTransmissionAssetsAccuracy: '97%',
          videoTransmissionAssetsWeakPasswordScore: '97%',
          videoTransmissionDangerousAssetsScore: '97%',
          videoTransmissionBoundaryIntegrityDetection: '97%',
          operatingRate: '97%',
        },
        {
          date: '2024-04-03',
          target: '自流井区',
          platformOnline: '97%',
          monitorQualification: '97%',
          monitorRegistration: '97%',
          archivesRate: '97%',
          siteOnline: '97%',
          videoAvailable: '97%',
          annotationAccuracy: '97%',
          timingAccuracy: '97%',
          keySiteOnline: '97%',
          keyVideoAvailable: '97%',
          keyAnnotationAccuracy: '97%',
          keyTimingAccuracy: '97%',
          keyCommandImageInspection: '97%',
          keyCommandImageDirectoryTree: '97%',
          onlineInspectionPlatform: '97%',
          videoTransmissionAssetsAccuracy: '97%',
          videoTransmissionAssetsWeakPasswordScore: '97%',
          videoTransmissionDangerousAssetsScore: '97%',
          videoTransmissionBoundaryIntegrityDetection: '97%',
          operatingRate: '97%',
        }

      ],
      scoreTotal: 3,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      scoreOpen: false,
      ruleOpen: false,
      ruleDetailOpen: false,
      // 逻辑删除时间范围
      daterangeCheckTime: [],

      // 表单参数
      form: {},
      scoreForm: {},
      ruleForm: {},
      jsonRule: {},
      // 考核规则列表
      ruleList: [
        {ruleName: '平台在线率',ruleWeight: 0.5},
        {ruleName: '一机一档合格率',ruleWeight: 0.5},
        {ruleName: '一机一档在线率',ruleWeight: 0.5},
      ],
      // 考核计分表格数据
      scoreList: [],
      //违约规则请求参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ruleName: null,
        ruleStatus: null,
        createTime: null,
      },
      //考核分数请求参数
      scoreQueryParams: {
        pageNum: 1,
        pageSize: 10,
        examineCategory: 2,
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
      value2: '',
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    //考核成绩详情跳转参数接收
    if(this.$route.query.detail){
      this.detail = this.$route.query.detail
      console.log(this.$route.query.detail,"detail------------")
    }
    // 考核规则列表
    // this.getRuleList();
    // 考核积分列表
    this.getScoreList();
    // this.selectUnit();
    this.selectExamine();
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    // 运维公司下拉数据
    // selectUnit() {
    //   unitSelect().then(res => {
    //     this.unitList = res.data;
    //   })
    // },
    // 考核下拉数据
    selectExamine() {
      publishSelect().then(res => {
        this.examineList = res.data;
      })
    },
    /** 查询考核计分列表 */
    getScoreList() {
      this.loading = true;
      listScore(this.scoreQueryParams).then(response => {
        this.scoreList = response.rows;
        this.loading = false;
      });
    },
    /** 查询违约规则列表 */
    getRuleList() {
      this.loading = true;
      if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
        this.queryParams["start"] = this.daterangeCreateTime[0];
        this.queryParams["end"] = this.daterangeCreateTime[1];
      }
      listCheckRule(this.queryParams).then(response => {
        this.ruleList = response.data;
        this.total = response.total;
        this.loading = false;
      });
    },
    frequencyFormatter(row) {
      if (row.frequency === "1") {
        return "月度考核"
      }
      if (row.frequency === "2") {
        return "季度考核"
      }
    },
    examineRangeFormatter(row) {
      if (row.examineRange === "1") {
        return "分局考核"
      }
      if (row.examineRange === "2") {
        return "市局考核"
      }
    },
    /** 查询考核结果列表 */
    getCheckResult() {
      this.loading = true;
      getCheckResult(id).then(response => {
        this.detail = response.data;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.scoreOpen = false;
      this.ruleOpen = false;
      this.ruleDetailOpen = false;
      this.ruleDetailOpen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        checkUnitId: null,
        checkPublishId: null,
        checkScore: null,
        systemScore: null,
        manualScore: null,
        checkTime: null,
        createTime: null,
        updateTime: null,
        deleted: null
      };
      this.resetForm("form");
    },
    cancelManualScore() {
      this.manualScoreForm = {};
      this.manualScoreTitle = "";
      this.manualScoreOpen = false;
    },
    submitManualScore() {
      if (! this.manualScoreForm.manualScore) {
        this.$modal.msgWarning("请填写分数");
        return
      }
      manualScore(this.manualScoreForm).then(res => {
        this.$modal.msgSuccess("操作成功");
        this.cancelManualScore();
        this.getList();
      })
    },
    handleSetManualScore(row) {
      this.manualScoreForm.id = row.id;
      this.manualScoreForm.manualScore = parseInt(row.manualScore);
      this.manualScoreTitle = row.checkUnitName + '人工打分'
      this.manualScoreOpen = true;
    },

    handlePublish(row) {
      let text = row.publish == 1 ? '取消发布' : '发布';
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认' + text + '考核结果编号为"' + ids + '"的数据项？').then(function() {
        return publishCheckResult(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess(text + "成功");
      }).catch(() => {});

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCheckTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加考核结果";
    },
    /** 修改积分按钮操作 */
    handleScoreUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getScore(id).then(response => {
        this.scoreForm = response.data;
        this.scoreOpen = true;
        this.title = "修改考核计分";
      });
    },
    /** 修改按钮操作 */
    handleRuleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCheckRule(id).then(response => {
        this.ruleForm = response.data;
        this.ruleOpen = true;
        this.title = "修改考核规则";

      });
    },
    // 详情按钮
    handleRuleDetail(row) {
      this.ruleDetailOpen = true;
      this.form = row;
      this.jsonRule = JSON.parse(this.form.ruleDetail);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCheckResult(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCheckResult(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除考核结果编号为"' + ids + '"的数据项？').then(function() {
        return delCheckResult(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/checkResult/export', {
        ...this.queryParams
      }, `checkResult_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style scoped>

.line {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.line-right {
  width: 50px;
}
.input{
  width: 200px;
}

.input-w {
  margin-left: 5px;
  width: 70px;
}
.row-warp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border: solid 1px gray;
  /*padding: 3px;*/
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-bottom: solid 1px gray;
  padding: 3px;
}
.row:last-of-type {
  border-bottom: none;
}
.row-left {
  flex: 2;
  border-right: solid 1px gray;
}
.row-right {
  flex: 4;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>

 src/views/system/result/detail/index1.vue

New file
@@ -0,0 +1,185 @@
<template>
  <div style="padding: 15px">
    <div style="display: flex;flex-direction: row;">
      <div class="now-item">
        <div class="box now">
          <div class="title">
            视频
          </div>
          <div>
            98
          </div>
        </div>
      </div>
      <div class="now-item">
        <div class="box now">
          <div class="title">
            人脸
          </div>
          <div>
            98
          </div>
        </div>
      </div>
      <div class="now-item">
        <div class="box now">
          <div class="title">
            监控
          </div>
          <div>
            98
          </div>
        </div>
      </div>
      <div style="justify-content: center;align-items: center;display: flex;width: 80px">
        <i class="el-icon-caret-left">本月</i>
      </div>
    </div>

    <div style="margin-top: 35px">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="月份"
          prop="month">
        </el-table-column>
        <el-table-column
          label="人脸"
          prop="renlian">
        </el-table-column>
        <el-table-column
          label="视频"
          prop="shipin">
        </el-table-column>
        <el-table-column
          label="车辆"
          prop="cheliang">
        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header" slot-scope="scope">
            <el-date-picker
              size="mini"
              style="width: 100%"
              v-model="searchForm.time"
              type="monthrange"
              range-separator="~"
              start-placeholder="开始月"
              end-placeholder="结束月">
            </el-date-picker>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleDetail(scope.$index, scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="text-align: right; margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="5">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      tableData: [
        {
          renlian: 94,
          shipin: 89.5,
          cheliang: 92,
          month: "2024年3月"
        },
        {
          renlian: 94,
          shipin: 89.5,
          cheliang: 92,
          month: "2024年2月"
        },
        {
          renlian: 94,
          shipin: 89.5,
          cheliang: 92,
          month: "2024年1月"
        },
        {
          renlian: 94,
          shipin: 89.5,
          cheliang: 92,
          month: "2023年12月"
        },
        ,
        {
          renlian: 94,
          shipin: 89.5,
          cheliang: 92,
          month: "2023年11月"
        },
      ],
      searchForm: {
        time: null,
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleDetail(index, row) {
      console.log(index, row);
      this.$router.push("/examine/detail/detail")
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
}
</script>

<style scoped>
.now-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.now {
  /*background-color: #42b983;*/
  height: 80px !important;
}
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px hsla(0, 0%, 7%, .1);
  border-radius: 10px;
  width: 240px;
  height: 50px;
}
.box:hover{
  cursor: pointer;
}

.title {
  font-size: larger;
}
</style>