自定义列显隐控制

xiangpei

2024-09-03 16eb67ab6b103663d30cad9ba74360f982e131cb

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

@@ -14,7 +14,6 @@
          </h3>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col
          :xl="4"
@@ -24,15 +23,15 @@
          :xs="12"
          v-for="(item, index) in videoData"
          :key="index"
          :style="item.name == '' ? 'display:none' : ''"
          :style="item.ruleName == '' ? 'display:none' : ''"
          class="col-margin"
        >
          <el-link @click="handleDetail(item, index)" style="width: 100%">
          <el-link @click="handleDetail(item, item.ruleIndex, item.apiUrl)" style="width: 100%">
            <el-card
              style="min-width: 150px;width:100%; height: 150px; text-align: center"
            >
              <i style="font-size: 40px; padding: 15px" :class="item.icon"></i>
              <div>{{ item.name }}</div>
              <div>{{ item.ruleName }}</div>
            </el-card>
          </el-link>
        </el-col>
@@ -63,13 +62,13 @@
          :xs="12"
          v-for="(item, index) in carData"
          :key="index"
          :style="item.name == '' ? 'display:none' : ''"
          :style="item.ruleName == '' ? 'display:none' : ''"
          class="col-margin"
        >
          <el-link @click="handleDetail(item, index)" style="width: 100%">
          <el-link @click="handleDetail(item, item.ruleIndex, item.apiUrl)" style="width: 100%">
            <el-card style="min-width: 150px;width:100%; height: 150px; text-align: center">
              <i style="font-size: 40px; padding: 15px" :class="item.icon"></i>
              <div>{{ item.name }}</div>
              <div>{{ item.ruleName }}</div>
            </el-card>
          </el-link>
        </el-col>
@@ -100,13 +99,13 @@
          :xs="12"
          v-for="(item, index) in faceData"
          :key="index"
          :style="item.name == '' ? 'display:none' : ''"
          :style="item.ruleName == '' ? 'display:none' : ''"
          class="col-margin"
        >
          <el-link @click="handleDetail(item, index)" style="width: 100%">
          <el-link @click="handleDetail(item, item.ruleIndex, item.apiUrl)" style="width: 100%">
            <el-card style="min-width: 150px;width:100%; height: 150px; text-align: center">
              <i style="font-size: 40px; padding: 15px" :class="item.icon"></i>
              <div>{{ item.name }}</div>
              <div>{{ item.ruleName }}</div>
            </el-card>
          </el-link>
        </el-col>
@@ -137,13 +136,13 @@
          :xs="12"
          v-for="(item, index) in equipment"
          :key="index"
          :style="item.name == '' ? 'display:none' : ''"
          :style="item.ruleName == '' ? 'display:none' : ''"
          class="col-margin"
        >
          <el-link @click="handleDetail(item, index)" style="width: 100%">
          <el-link @click="jumpToEquipment" style="width: 100%">
            <el-card style="min-width: 150px;width:100%; height: 150px; text-align: center">
              <i style="font-size: 40px; padding: 15px" :class="item.icon"></i>
              <div>{{ item.name }}</div>
              <div>{{ item.ruleName }}</div>
            </el-card>
          </el-link>
        </el-col>
@@ -155,6 +154,7 @@
</template>

<script>
import { listCheckRule } from "@/api/platform/check-rule";
export default {
  data() {
    return {
@@ -362,38 +362,36 @@
      ],
      equipment: [
        {
          name: "资产管理",
          ruleName: "资产管理",
          ruleIndex: 'assetManagement',
          icon: "el-icon-wallet",
          description: "描述信息",
          type: "4",
        },
        {
          name: "",
          icon: "el-icon-pie-chart",
          description: "描述信息",
          type: "4",
        },
        {
          name: "",
          icon: "el-icon-data-line",
          description: "描述信息",
          type: "4",
        },
        { name: "", icon: "el-icon-timer", description: "描述信息", type: "4" },
        { name: "", icon: "el-icon-money", description: "描述信息", type: "4" },
        {
          name: "",
          icon: "el-icon-data-analysis",
          description: "描述信息",
          type: "4",
        },
          ruleCategory: "4",
          apiUrl: 'assetManagement'
        }
      ],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleDetail(item, index) {
    getList() {
      listCheckRule().then((response) => {
        this.videoData = response.data.videoRules;
        this.faceData = response.data.faceRules;
        this.carData = response.data.carRules;
        this.loading = false;
      });
    },
    jumpToEquipment() {
      this.$router.push({
        path: `/data-manage/data-detail/index/1/1?type=${item.type}&index=${index}`,
        path: '/equipment'
      });
    },
    handleDetail(item, index, url) {
      this.$router.push({
        path: `/data-manage/data-detail/index/1/1?type=${item.ruleCategory}&index=${index}&url=${url}`,
      });
    },
  },