From bfb10b42c5fb6bc9f751f88f9351bfc19c6380a4 Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期二, 16 七月 2024 14:57:50 +0800
Subject: [PATCH] 样式调整
---
src/views/system/check/rule/index.vue | 368 +++++++++++++++++++++++++++++++++++-----------------
1 files changed, 245 insertions(+), 123 deletions(-)
diff --git a/src/views/system/check/rule/index.vue b/src/views/system/check/rule/index.vue
index 1e09d0c..ca39460 100644
--- a/src/views/system/check/rule/index.vue
+++ b/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>
--
Gitblit v1.8.0