样式调整

黄何裕

2024-07-16 bfb10b42c5fb6bc9f751f88f9351bfc19c6380a4

 src/views/system/check/rule/index.vue

@@ -1,23 +1,51 @@
<template>
  <div>

    <div class="container">
      <el-row type="flex" justify="start">
        <el-col :span="24">
          <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">视频考核规则</h3>
          <h3
            style="
              color: rgb(104, 104, 103);
              padding-top: 20px;
              padding-bottom: 20px;
            "
          >
            视频考核规则
          </h3>
        </el-col>
      </el-row>

      <el-row type="flex" justify="start" v-for="(items, index) in groupData(videoData)">
        <el-col :span="4" v-for="item in items" :key="item.id">
            <el-card style="width:150px;height: 150px;text-align: center;border-bottom-width: 3px;">
              <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
              <div style="font-size:12px; text-align: center; height: 25px;">{{ item.ruleName }} </div>
              <div class="bottom clearfix">
                <el-button type="text" class="button" @click="handleUpdate(item)">修改</el-button>
              </div>
            </el-card>
          <br/>
      <el-row :gutter="20">
        <el-col
          :xl="4"
          :lg="4"
          :md="6"
          :sm="6"
          :xs="12"
          v-for="item in videoData"
          :key="item.id"
          class="col-margin"
        >
          <el-card
            style="
              min-width: 150px;
              width: 100%;
              height: 150px;
              text-align: center;
              border-bottom-width: 3px;
            "
          >
            <i style="font-size: 40px; padding: 15px" :class="item.icon"></i>
            <div style="font-size: 12px; text-align: center; height: 25px">
              {{ item.ruleName }}
            </div>
            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="handleUpdate(item)"
                >修改</el-button
              >
            </div>
          </el-card>
          <br />
        </el-col>
      </el-row>
    </div>
@@ -25,20 +53,49 @@
    <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>
          <h3
            style="
              color: rgb(104, 104, 103);
              padding-top: 20px;
              padding-bottom: 20px;
            "
          >
            车辆考核规则
          </h3>
        </el-col>
      </el-row>

      <el-row type="flex" justify="start" v-for="(items, index) in groupData(carData)">
        <el-col :span="4" v-for="item in items" :key="item.id">
          <el-card style="width:150px;height: 150px;text-align: center;border-bottom-width: 3px;">
            <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
            <div style="font-size:12px; text-align: center; height: 25px;">{{ item.ruleName }} </div>
      <el-row :gutter="20">
        <el-col
          :xl="4"
          :lg="4"
          :md="6"
          :sm="6"
          :xs="12"
          v-for="item in carData"
          :key="item.id"
          class="col-margin"
        >
          <el-card
            style="
              min-width: 150px;
              width: 100%;
              height: 150px;
              text-align: center;
              border-bottom-width: 3px;
            "
          >
            <i style="font-size: 40px; padding: 15px" :class="item.icon"></i>
            <div style="font-size: 12px; text-align: center; height: 25px">
              {{ item.ruleName }}
            </div>
            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="handleUpdate(item)">修改</el-button>
              <el-button type="text" class="button" @click="handleUpdate(item)"
                >修改</el-button
              >
            </div>
          </el-card>
          <br/>
          <br />
        </el-col>
      </el-row>
    </div>
@@ -46,30 +103,58 @@
    <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>
          <h3
            style="
              color: rgb(104, 104, 103);
              padding-top: 20px;
              padding-bottom: 20px;
            "
          >
            人脸考核规则
          </h3>
        </el-col>
      </el-row>

      <el-row type="flex" justify="start" v-for="(items, index) in groupData(faceData)">
        <el-col :span="4" v-for="item in items" :key="item.id">
          <el-card style="width:150px;height: 150px;text-align: center;border-bottom-width: 3px;">
            <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
            <div style="font-size:12px; text-align: center; height: 25px;">{{ item.ruleName }} </div>
      <el-row :gutter="20">
        <el-col
          :xl="4"
          :lg="4"
          :md="6"
          :sm="6"
          :xs="12"
          v-for="item in faceData"
          :key="item.id"
          class="col-margin"
        >
          <el-card
            style="
              min-width: 150px;
              width: 100%;
              height: 150px;
              text-align: center;
              border-bottom-width: 3px;
            "
          >
            <i style="font-size: 40px; padding: 15px" :class="item.icon"></i>
            <div style="font-size: 12px; text-align: center; height: 25px">
              {{ item.ruleName }}
            </div>
            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="handleUpdate(item)">修改</el-button>
              <el-button type="text" class="button" @click="handleUpdate(item)"
                >修改</el-button
              >
            </div>
          </el-card>
          <br/>
          <br />
        </el-col>
      </el-row>
    </div>
    <br/><br/><br/><br/>
    <br /><br /><br /><br />

    <!-- 添加或修改考核规则对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="规则名称" prop="ruleName">
          <el-input v-model="form.ruleName" placeholder="请输入规则名称"/>
          <el-input v-model="form.ruleName" placeholder="请输入规则名称" />
        </el-form-item>
        <el-form-item label="规则类型" prop="ruleCategory">
          <el-select v-model="form.ruleCategory" placeholder="规则类型">
@@ -82,7 +167,12 @@
          </el-select>
        </el-form-item>
        <el-form-item label="规则描述" prop="ruleDescription">
          <el-input v-model="form.ruleDescription" type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入规则名称"/>
          <el-input
            v-model="form.ruleDescription"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            placeholder="请输入规则名称"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
@@ -91,62 +181,92 @@
      </div>
    </el-dialog>


  <!-- 审核考核规则对话框 -->
  <el-dialog :title="title" :visible.sync="auditOpen" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="规则名称" prop="ruleName">
        <el-input v-model="form.ruleName" placeholder="请输入规则名称" disabled/>
      </el-form-item>
      <el-form-item label="考核类型" prop="examineCategory">
        <el-select v-model="form.examineCategory" placeholder="考核类型" disabled>
          <el-option
            v-for="dict in dict.type.platform_examine_category"
            :key="dict.value"
            :label="dict.label"
            :value="parseInt(dict.value)"
    <!-- 审核考核规则对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="auditOpen"
      width="600px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="规则名称" prop="ruleName">
          <el-input
            v-model="form.ruleName"
            placeholder="请输入规则名称"
            disabled
          />
        </el-select>
      </el-form-item>
      <el-form-item label="规则类型" prop="ruleCategory">
        <el-select v-model="form.ruleCategory" placeholder="考核类型" disabled>
          <el-option
            v-for="dict in dict.type.platform_rule_category"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
        </el-form-item>
        <el-form-item label="考核类型" prop="examineCategory">
          <el-select
            v-model="form.examineCategory"
            placeholder="考核类型"
            disabled
          >
            <el-option
              v-for="dict in dict.type.platform_examine_category"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="规则类型" prop="ruleCategory">
          <el-select
            v-model="form.ruleCategory"
            placeholder="考核类型"
            disabled
          >
            <el-option
              v-for="dict in dict.type.platform_rule_category"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="规则描述" prop="ruleDescription">
          <el-input
            v-model="form.ruleDescription"
            type="textarea"
            placeholder="请输入规则名称"
            disabled
          />
        </el-select>
      </el-form-item>
      <el-form-item label="规则描述" prop="ruleDescription">
        <el-input v-model="form.ruleDescription" type="textarea" placeholder="请输入规则名称" disabled/>
      </el-form-item>
        </el-form-item>


      <el-form-item label="审核结果" prop="auditState" >
        <el-radio-group v-model="form.auditState">
        <el-radio :label="1">通过</el-radio>
        <el-radio :label="2">驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审核说明" prop="auditDescription" >
        <el-input v-model="form.auditDescription" type="textarea" show-word-limit maxlength="100" />
      </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-form-item label="审核结果" prop="auditState">
          <el-radio-group v-model="form.auditState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核说明" prop="auditDescription">
          <el-input
            v-model="form.auditDescription"
            type="textarea"
            show-word-limit
            maxlength="100"
          />
        </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 { listCheckRule, getCheckRule, delCheckRule, addCheckRule, updateCheckRule } from "@/api/platform/check-rule";
import {
  listCheckRule,
  getCheckRule,
  delCheckRule,
  addCheckRule,
  updateCheckRule,
} from "@/api/platform/check-rule";
export default {
  name: "CheckRule",
  dicts: ['platform_audit_state','platform_rule_category'],
  dicts: ["platform_audit_state", "platform_rule_category"],
  data() {
    return {
      // 遮罩层
@@ -161,7 +281,7 @@
      showSearch: true,
      // 总条数
      total: 0,
      templateList:[],
      templateList: [],
      // 考核规则表格数据
      checkRuleList: [],
      daterangeCreateTime: [],
@@ -183,38 +303,30 @@
      videoData: [],
      carData: [],
      faceData: [],
      activeIndex: '0',
      activeIndex: "0",
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        ruleName: [
          { required: true, message: "规则名称不能为空", trigger: "blur" }
          { required: true, message: "规则名称不能为空", trigger: "blur" },
        ],
      }
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    groupData(data) {
      // 将数据按每六个一组进行分组
      const groupedData = [];
      for (let i = 0; i < data.length; i += 6) {
        groupedData.push(data.slice(i, i + 6));
      }
      return groupedData;
    },

    /** 查询考核规则列表 */
    getList() {
      this.loading = true;
      if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
      if (null != this.daterangeCreateTime && "" != this.daterangeCreateTime) {
        this.queryParams["start"] = this.daterangeCreateTime[0];
        this.queryParams["end"] = this.daterangeCreateTime[1];
      }
      listCheckRule(this.queryParams).then(response => {
      listCheckRule(this.queryParams).then((response) => {
        this.videoData = response.data.videoRules;
        this.faceData = response.data.faceRules;
        this.carData = response.data.carRules;
@@ -239,7 +351,7 @@
        faceCheckpointNum: null,
        createTime: null,
        updateTime: null,
        deleted: null
        deleted: null,
      };
      this.resetForm("form");
    },
@@ -248,22 +360,22 @@
    },
    getStatusColor(status) {
      switch (status) {
        case 'pending':
          return '#ffffff'; // '#00a1d6'蓝色，表示待审核
        case 'approved':
          return '#ffffff'; // '#00e297'绿色，表示已审核
        case 'rejected':
          return '#f56c6c'; // 红色，表示审核未通过
        case "pending":
          return "#ffffff"; // '#00a1d6'蓝色，表示待审核
        case "approved":
          return "#ffffff"; // '#00e297'绿色，表示已审核
        case "rejected":
          return "#f56c6c"; // 红色，表示审核未通过
        default:
          return '#ffffff'; // 白色，默认状态
          return "#ffffff"; // 白色，默认状态
      }
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
@@ -274,7 +386,7 @@
    /** 修改按钮操作 */
    handleUpdate(item) {
      this.reset();
      const id = item.id || this.ids
      const id = item.id || this.ids;
      this.form = item;
      this.open = true;
      this.title = "修改考核规则";
@@ -282,8 +394,8 @@
    /** 审核按钮操作 */
    handleAudit(row) {
      this.reset();
      const id = row.id || this.ids
      getCheckRule(id).then(response => {
      const id = row.id || this.ids;
      getCheckRule(id).then((response) => {
        this.form = response.data;
        this.auditOpen = true;
        this.title = "审核考核规则";
@@ -291,17 +403,17 @@
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateCheckRule(this.form).then(response => {
            updateCheckRule(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.auditOpen = false;
              this.getList();
            });
          } else {
            addCheckRule(this.form).then(response => {
            addCheckRule(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.auditOpen = false;
@@ -314,21 +426,29 @@
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除考核规则编号为"' + ids + '"的数据项？').then(function() {
        return delCheckRule(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
      this.$modal
        .confirm('是否确认删除考核规则编号为"' + ids + '"的数据项？')
        .then(function () {
          return delCheckRule(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('system/checkRule/export', {
        ...this.queryParams
      }, `checkRule_${new Date().getTime()}.xlsx`)
    }
  }
      this.download(
        "system/checkRule/export",
        {
          ...this.queryParams,
        },
        `checkRule_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

@@ -337,8 +457,10 @@
  width: 90%;
  margin: 10px auto;
}
.el-menu{
.el-menu {
  margin: 10px auto;
}

.col-margin {
  padding-right: 20px;
}
</style>