fuliqi
2024-09-06 9e8d1bd0b6fb495920921214775b84d490e032a3
src/views/system/data-manage/data-detail/index.vue
@@ -1,14 +1,19 @@
<template>
  <div class="app-container">
    <div style="display: flex;flex-direction: row;min-width: 158px;max-width: 158px;margin-bottom: 5px;border-radius: 1px; user-select: none">
      <div @click="clickTab(0)" class="tab" :class="{tabActive: 0 === queryParams.dataType, tabInactive: 0 !== queryParams.dataType}">全部</div>
      <div @click="clickTab(1)" class="tab" :class="{tabActive: 1 === queryParams.dataType, tabInactive: 1 !== queryParams.dataType}">省厅考核</div>
    </div>
    <el-card class="box-card" v-show="index !== 'image_resource_security'">
      <el-row style="display: flex; flex-direction: row; align-items: center" justify="space-between">
        <div v-for="card in cardList" style="display: flex;flex-direction: row; margin-right: 50px" :key="card.label">
        <div style="font-size: 18px;min-width: 200px;height: 80px;display: flex;align-items: center">{{ruleName}}</div>
        <div v-if="cardList && cardList.length > 0" v-for="card in cardList" style="display: flex;flex-direction: row; margin-right: 50px;margin-left: 20px;align-items: center" :key="card.label">
          <div>
            <div class="icon-container">
              <i :class="card.icon"></i>
            </div>
          </div>
          <div v-if="card.dataList && card.dataList.length > 0">
          <div v-if="card.dataList && card.dataList.length > 0" style="display: flex; flex-direction: row">
            <div v-if="data" v-for="(data, index) in card.dataList" class="dashboard-item" :key="data.label">
              <div style="color: #5C9BF8;margin-bottom: 20px;font-size: 20px">{{ tableData.count[index] }}</div>
              <div>{{ data.label }}</div>
@@ -25,25 +30,28 @@
      </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">
        <el-input v-model="queryParams.keyword" placeholder="关键词搜索" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="时间范围" prop="timeRange">
        <el-date-picker
          v-model="queryParams.timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flex;position: relative">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
        <el-form-item label="关键词" prop="bayonetNumber">
          <el-input v-model="queryParams.keyword" placeholder="关键词搜索" clearable @input="handleQuery"/>
        </el-form-item>
        <el-form-item label="时间范围" prop="timeRange">
          <el-date-picker
            v-model="queryParams.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <right-toolbar style="position: absolute;right: 0px" v-show="index !== 'image_resource_security'" :showSearch.sync="showSearch" @queryTable="handleQuery" :columns="showList"></right-toolbar>
    </div>
    <el-row :gutter="10" class="mb8" v-show="index === 'image_resource_security'">
      <el-container>
@@ -64,7 +72,7 @@
                  </el-button>
                </div>
                <div style="font-size: 14px;height: 50px; font-weight: bold;">{{ item.deptName }}</div>
                <div style="font-size: 14px;">资源:{{ item.imageResourceSecurity }}</div>
                <div style="font-size: 14px;">得分:{{ item.imageResourceSecurity }}</div>
                <!-- <div style="font-size: 14px;">视频传输网资产准确率:{{ item.propertyAccuracy }}</div>
                <div style="font-size: 14px;">弱口令得分:{{ item.weakPassword }}</div>
                <div style="font-size: 14px;">视频传输网危险资产比例:{{ item.riskProperty }}</div>
@@ -79,15 +87,14 @@
          v-hasPermi="['platform:platform:export']">导入
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      <right-toolbar  :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <div v-if="tableData.list && tableData.list.length >0">
    <div>
      <el-table v-loading="loading" :data="tableData.list">
        <el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="(item, index) in tableHead" :key="index" v-if="item"/>
        <el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="(item, index) in tableHead" :key="index" v-if="showListPD(item)"/>
      </el-table>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
@@ -99,20 +106,23 @@
          <el-input v-model="resourceForm.deptName" disabled />
        </el-form-item>
        <el-form-item label="平台运行率" prop="platformOnline">
          <el-input-number v-model="resourceForm.platformOnline" />
          <el-input-number v-model="resourceForm.platformOnline" :precision="2" :step="0.1" :min="0" :max="1"/>
        </el-form-item>
        <el-form-item label="视频传输网资产准确率" prop="propertyAccuracy">
          <el-input-number v-model="resourceForm.propertyAccuracy" />
          <el-input-number v-model="resourceForm.propertyAccuracy" :precision="2" :step="0.1" :min="0" :max="1"/>
        </el-form-item>
        <el-form-item label="弱口令得分" prop="weakPassword">
          <el-input-number v-model="resourceForm.weakPassword" />
          <el-input-number v-model="resourceForm.weakPassword" :precision="2" :step="0.1" :min="0" :max="1"/>
        </el-form-item>
        <el-form-item label="视频传输网危险资产比例" prop="riskProperty">
          <el-input-number v-model="resourceForm.riskProperty" />
          <el-input-number v-model="resourceForm.riskProperty" :precision="2" :step="0.1" :min="0" :max="1"/>
        </el-form-item>
        <el-form-item label="视频传输网边界完整性检测扣分项" prop="boundaryIntegrity">
          <el-input-number v-model="resourceForm.boundaryIntegrity" />
        </el-form-item>
        <el-tooltip class="item" effect="dark" content="违规连接互联网扣减20个百分点/次,违规无线AP接入、随身wifi接入、共享网络各扣减5个百分点/次,直至此项指标扣完为止。" placement="top-start">
          <el-form-item label="视频传输网边界完整性检测扣分项" prop="boundaryIntegrity">
            <el-input-number v-model="resourceForm.boundaryIntegrity" :precision="2" :step="0.1" :min="0" :max="1"/>
          </el-form-item>
        </el-tooltip>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelR">取 消</el-button>
@@ -149,27 +159,13 @@
import { getToken } from "@/utils/auth";
export default {
  name: "Platform",
  // watch: {
  //   tableData: {
  //     immediate: true,
  //     deep: true,
  //     handler(newVal) {
  //       if(newVal && newVal.list) {
  //         this.list = newVal.detail;
  //       }
  //     }
  //   }
  // },
  // computed: {
  //   startTime() {
  //     var date = new Date();
  //     var s1 = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate()-1);
  //     return s1;
  //   }
  // },
  computed: {
    ruleName() {
      return this.$route.query.ruleName
    }
  },
  data() {
    return {
      list: [],
      // 导入参数
      upload: {
        // 是否显示弹出层
@@ -215,6 +211,7 @@
        pageSize: 10,
        keyword: '',
        timeRange: [],
        dataType: 0,
      },
      // 表单参数
      form: {},
@@ -238,6 +235,7 @@
        ],
      },
      showList: [],
      tableHead: [],
      cardList: [],
      index: null
@@ -261,29 +259,47 @@
    this.index = this.$route.query.index;
    if (this.$route.query.type === '1') {
      let data = videoData.table.filter(item => item.index === this.$route.query.index)[0]
      this.tableHead = data.columns;
      this.cardList = data.card;
      console.log(this.cardList, "wcnm")
      this.showList = data.showList;
    }
    if (this.$route.query.type === '2') {
      let data = carData.table.filter(item => item.index === this.$route.query.index)[0]
      this.tableHead = data.columns;
      this.cardList = data.card;
      this.showList = data.showList;
    }
    if (this.$route.query.type === '3') {
      let data = faceData.table.filter(item => item.index === this.$route.query.index)[0]
      this.tableHead = data.columns;
      this.cardList = data.card;
      this.showList = data.showList;
    }
    if (this.$route.query.type === '4') {
      let data = equipment.table.filter(item => item.index === this.$route.query.index)[0]
      this.tableHead = data.columns;
      this.cardList = data.card;
      this.showList = data.showList;
    }
    this.getList();
  },
  methods: {
    clickTab(active) {
      this.queryParams.dataType = active
      this.getList()
    },
    showListPD(item) {
      if (!this.showList) {
        return true
      }
      let arr = this.showList.filter(d => d.label === item.label)
      if (item && (!arr || arr.length <1)) {
        return true;
      } else {
        return item && arr && arr.length > 0 && arr[0].visible
      }
    },
    /** 修改按钮操作 */
    handleResourceUpdate(row) {
      this.reset("resourceForm");
@@ -394,6 +410,26 @@
};
</script>
<style scoped>
.tab {
  padding: 5px 15px;
}
.tab:hover {
  cursor: pointer;
  user-select: none;
}
.tabActive {
  color: white;
  background-color: #409eff;
  border: none;
  border-radius: 1px;
}
.tabInactive {
  background-color: #edf2f6;
  color: #409eff;
}
.tabInactive:hover {
  background-color: #edf2f6;
}
.box-card {
  background-color: #F5F9FE;
  width: 100%;
@@ -427,5 +463,6 @@
  justify-content: center;
  align-items: center;
  width: 150px;
  margin: 0 30px;
}
</style>