From 09f0861e61e69e2d818eafc7b9edbd17cf0822d4 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期四, 06 十一月 2025 17:20:02 +0800
Subject: [PATCH] 页面优化以及扣分详情导出
---
src/views/system/platform/index.vue | 593 +++++++++++++++++++++++++---------------------------------
1 files changed, 256 insertions(+), 337 deletions(-)
diff --git a/src/views/system/platform/index.vue b/src/views/system/platform/index.vue
index 3bbe042..ce8240e 100644
--- a/src/views/system/platform/index.vue
+++ b/src/views/system/platform/index.vue
@@ -1,389 +1,308 @@
<template>
<div class="app-container">
- <el-card class="box-card" >
- <el-row type="flex" align="middle" justify="space-between">
- <el-col :xl="8" :lg="8" :md="10" :sm="8" :xs="6">
- <div class="icon-container" style="background-color: #5599F7">
- <i class="el-icon-connection"></i>
- </div>
- </el-col>
- <el-col :xl="14" :lg="14" :md="12" :sm="14" :xs="16">
- <div class="dashboard">
- <div class="dashboard-item">
- <h3 style="color: #5C9BF8">{{ count.totalPosts }}</h3>
- <p>璁惧鎬绘暟</p >
- </div>
- <div class="dashboard-item">
- <h3 style="color: #3eba45">{{ count.totalMembers }}</h3>
- <p>姝ｅ父鏁�</p >
- </div>
- <div class="dashboard-item">
- <h3 style="color: #fe640d">{{ count.postsPercentage }}</h3>
- <p>寮傚父鏁�</p >
- </div>
- </div>
- </el-col>
- </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="platformCode">
- <el-input
- v-model="queryParams.platformCode"
- placeholder="璇疯緭鍏ュ钩鍙扮紪鐮�"
- clearable
- @keyup.enter.native="handleQuery"
- />
+ <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
+ <el-form-item label="骞冲彴鍚嶇О" prop="workOrderNo">
+ <el-input v-model="queryParams.keyword" placeholder="璇疯緭鍏ュ钩鍙板悕绉�" @clear="handleQuery" clearable @keyup.enter.native="handleQuery" size="small" ></el-input>
</el-form-item>
- <el-form-item label="骞冲彴鍚嶇О" prop="platformName">
- <el-input
- v-model="queryParams.platformName"
- placeholder="璇疯緭鍏ュ钩鍙板悕绉�"
- clearable
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="璁惧鐘舵��" prop="onState">
- <el-select
- v-model="queryParams.status"
- placeholder="璁惧鐘舵��"
- clearable
- style="width: 100px"
- >
- <el-option
- v-for="dict in dict.type.camera_state"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </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-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>
<el-row :gutter="10" class="mb8">
- <!-- <el-col :span="1.5">
+ <el-col :span="1.5">
<el-button
type="primary"
plain
- icon="el-icon-plus"
size="mini"
@click="handleAdd"
- v-hasPermi="['platform:platform:add']"
- >鏂板</el-button>
+ v-hasPermi="['platform:add']"
+ >娣诲姞
+ </el-button>
</el-col>
- <el-col :span="1.5">
- <el-button
- type="success"
- plain
- icon="el-icon-edit"
- size="mini"
- :disabled="single"
- @click="handleUpdate"
- v-hasPermi="['platform:platform:edit']"
- >淇敼</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button
- type="danger"
- plain
- icon="el-icon-delete"
- size="mini"
- :disabled="multiple"
- @click="handleDelete"
- v-hasPermi="['platform:platform:remove']"
- >鍒犻櫎</el-button>
- </el-col> -->
- <el-col :span="1.5">
- <el-button
- type="warning"
- plain
- icon="el-icon-download"
- size="mini"
- @click="handleExport"
- v-hasPermi="['platform:platform:export']"
- >瀵煎嚭</el-button>
- </el-col>
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
- <el-table v-loading="loading" :data="platformList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
- <el-table-column label="骞冲彴缂栫爜" align="center" prop="platformCode" />
- <el-table-column label="骞冲彴鍚嶇О" align="center" prop="platformName" />
- <!-- <el-table-column label="骞冲彴鑱旂郴浜�" align="center" prop="platformContact" />
- <el-table-column label="骞冲彴鑱旂郴浜虹數璇�" align="center" prop="platformContactPhone" /> -->
- <el-table-column label="鐘舵��" align="center" prop="status">
- <template slot-scope="scope">
- <dict-tag :options="dict.type.camera_state" :value="scope.row.status"/>
- </template>
- </el-table-column>
- <!-- <el-table-column label="澶囨敞" align="center" prop="remark" /> -->
- <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="handleUpdate(scope.row)"
- v-hasPermi="['platform:platform:edit']"
- >淇敼</el-button>
- <el-button
- size="mini"
- type="text"
- icon="el-icon-delete"
- @click="handleDelete(scope.row)"
- v-hasPermi="['platform:platform:remove']"
- >鍒犻櫎</el-button>
- </template>
- </el-table-column>
- </el-table>
+ <div>
+ <el-table
+ :data="tableData"
+ :span-method="spanMethod"
+ border
+ style="width: 100%; margin-top: 20px">
+ <el-table-column
+ prop="platformName"
+ label="骞冲彴鍚嶇О">
+ </el-table-column>
+ <el-table-column
+ prop="platformIP"
+ label="骞冲彴IP">
+ </el-table-column>
+ <el-table-column
+ prop="area"
+ label="琛屾斂鍖哄煙">
+ </el-table-column>
+ <el-table-column
+ prop="remark"
+ label="澶囨敞">
+ </el-table-column>
+<!-- <el-table-column-->
+<!-- prop="monthOutLine"-->
+<!-- label="鏈湀绂荤嚎鏃堕暱">-->
+<!-- </el-table-column>-->
+ <el-table-column
+ label="鎿嶄綔"
+ width="100">
+ <template slot-scope="scope">
+ <el-button @click="handleEdit(scope.row)" type="text" size="small" style="margin-right: 5px">缂栬緫</el-button>
+ <el-popconfirm
+ @confirm="delPlatForm(scope.row.id)"
+ title="纭畾瑕佸垹闄よ骞冲彴鍚楋紵"
+ >
+ <el-button slot="reference" type="text" size="small">鍒犻櫎</el-button>
+ </el-popconfirm>
+ </template>
+ </el-table-column>
+ </el-table>
- <pagination
- v-show="total>0"
- :total="total"
- :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize"
- @pagination="getList"
- />
+ <pagination
+ v-show="total>0"
+ :total="total"
+ :page.sync="queryParams.pageNum"
+ :limit.sync="queryParams.pageSize"
+ @pagination="handleQuery"
+ />
+ </div>
- <!-- 娣诲姞鎴栦慨鏀瑰钩鍙拌繍琛岀洃鎺у璇濇 -->
- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
- <el-form-item label="骞冲彴缂栫爜" prop="platformCode">
- <el-input v-model="form.platformCode" placeholder="璇疯緭鍏ュ钩鍙扮紪鐮�" />
- </el-form-item>
- <el-form-item label="骞冲彴鍚嶇О" prop="platformName">
- <el-input v-model="form.platformName" placeholder="璇疯緭鍏ュ钩鍙板悕绉�" />
- </el-form-item>
- <el-form-item label="骞冲彴鑱旂郴浜�" prop="platformContact">
- <el-input v-model="form.platformContact" placeholder="璇疯緭鍏ュ钩鍙拌仈绯讳汉" />
- </el-form-item>
- <el-form-item label="骞冲彴鑱旂郴浜虹數璇�" prop="platformContactPhone">
- <el-input v-model="form.platformContactPhone" placeholder="璇疯緭鍏ュ钩鍙拌仈绯讳汉鐢佃瘽" />
- </el-form-item>
- <el-form-item label="澶囨敞" prop="remark">
- <el-input v-model="form.remark" placeholder="璇疯緭鍏ュ娉�" />
- </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
+ :title="opTitle"
+ :visible.sync="addShow"
+ width="500px"
+ :close-on-click-modal="false"
+ :before-close="addClose">
+ <div>
+ <el-form :model="addForm" label-position="top" :rules="addFormRules" ref="addForm" size="small">
+ <el-form-item label="骞冲彴鍚嶇О" prop="platformName">
+ <el-input v-model="addForm.platformName"></el-input>
+ </el-form-item>
+ <el-form-item label="骞冲彴IP" prop="platformIP">
+ <el-input v-model="addForm.platformIP"></el-input>
+ </el-form-item>
+ <el-form-item label="琛屾斂鍖哄煙" prop="areaList">
+ <el-select v-model="addForm.areaList" multiple clearable placeholder="璇烽�夋嫨琛屾斂鍖哄煙">
+ <el-option
+ v-for="dict in dict.type.area_code"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="澶囨敞淇℃伅" prop="mark">
+ <el-input v-model="addForm.remark"></el-input>
+ </el-form-item>
+ </el-form>
+ </div>
+<!-- <div style="flex: 4; padding-left: 20px;border-left: 1px solid #b2b2b2; min-height: 400px">-->
+<!-- <div>-->
+<!-- <h3>閮ㄧ讲淇℃伅锛�</h3>-->
+<!-- </div>-->
+<!-- <div v-for="(deploy, index) in addForm.deployList" :key="index" style="margin-bottom: 20px">-->
+<!-- <el-form size="small" ref="deployForm" :inline="true">-->
+<!-- <el-form-item label="骞冲彴鍚嶇О" prop="platformName">-->
+<!-- <el-input v-model="deploy.subPlatformName"></el-input>-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="骞冲彴IP" prop="platformIP">-->
+<!-- <el-input v-model="deploy.platformIP"></el-input>-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="琛屾斂鍖哄煙" prop="area">-->
+<!-- <el-input v-model="deploy.area"></el-input>-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="澶囨敞淇℃伅" prop="remark">-->
+<!-- <el-input v-model="deploy.remark"></el-input>-->
+<!-- </el-form-item>-->
+<!-- </el-form>-->
+<!-- </div>-->
+<!-- <el-button style="float: right" size="small" type="primary" @click="next">缁х画娣诲姞</el-button>-->
+<!-- </div>-->
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="addClose">鍙� 娑�</el-button>
+ <el-button type="primary" @click="addPlatform">淇濆瓨</el-button>
+ </span>
</el-dialog>
+
</div>
</template>
<script>
-import { listPlatform, getPlatform, delPlatform, addPlatform, updatePlatform } from "@/api/platform/platform";
-import { videoCount } from "@/api/platform/monitor";
+import { getPlatforms, addPlatform, editPlatform, deletePlatformById} from '@/api/platform/platform'
export default {
- name: "Platform",
- dicts: ['sys_normal_disable', 'platform_yes_no','camera_state'],
+ name: 'index',
+ dicts: ['area_code'],
data() {
return {
- count: {
- totalPosts: 0,
- totalMembers: 0,
- postsPercentage: 0,
- totalViews: 0,
- noStore: 0,
- partStore: 0,
- viewsPercentage: 0
- },
- // 閬僵灞�
- loading: true,
- // 閫変腑鏁扮粍
- ids: [],
- // 闈炲崟涓鐢�
- single: true,
- // 闈炲涓鐢�
- multiple: true,
- // 鏄剧ず鎼滅储鏉′欢
- showSearch: true,
- // 鎬绘潯鏁�
- total: 0,
- // 骞冲彴杩愯鐩戞帶琛ㄦ牸鏁版嵁
- platformList: [],
- // 寮瑰嚭灞傛爣棰�
- title: "",
- // 鏄惁鏄剧ず寮瑰嚭灞�
- open: false,
- // 鏌ヨ鍙傛暟
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- platformCode: null,
- platformName: null,
- platformContact: null,
- platformContactPhone: null,
- status: null,
- remark: null,
- },
- // 琛ㄥ崟鍙傛暟
- form: {},
- // 琛ㄥ崟鏍￠獙
- rules: {
- platformCode: [
- { required: true, message: "骞冲彴缂栫爜涓嶈兘涓虹┖", trigger: "blur" }
- ],
+ deployRules: {
platformName: [
- { required: true, message: "骞冲彴鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }
+ { required: true, message: '骞冲彴鍚嶇О涓嶈兘涓虹┖', trigger: 'blur' }
],
- platformContact: [
- { required: true, message: "骞冲彴鑱旂郴浜轰笉鑳戒负绌�", trigger: "blur" }
+ platformIP: [
+ { required: true, message: '骞冲彴IP涓嶈兘涓虹┖', trigger: 'blur' }
],
- platformContactPhone: [
- { required: true, message: "骞冲彴鑱旂郴浜虹數璇濅笉鑳戒负绌�", trigger: "blur" }
+ area: [
+ { required: true, message: '琛屾斂鍖哄煙涓嶈兘涓虹┖', trigger: 'blur' }
+ ]
+ },
+ addFormRules: {
+ platformName: [
+ { required: true, message: '骞冲彴鍚嶇О涓嶈兘涓虹┖', trigger: 'blur' }
],
- }
- };
+ platformIP: [
+ { required: true, message: '骞冲彴IP涓嶈兘涓虹┖', trigger: 'blur' }
+ ],
+ areaList: [
+ { required: true, message: '璇烽�夋嫨鍖哄煙', trigger: 'change' }
+ ]
+ },
+ addForm: {
+ id: null,
+ platformName: '',
+ remark: '',
+ platformIp: '',
+ areaList: [],
+ area: '',
+ deployList: [
+ {
+ subPlatformName: '',
+ platformIp: '',
+ remark: '',
+ area: ''
+ }
+ ] // 閮ㄧ讲鍦ㄤ簡鍝簺鍦版柟
+ },
+ addShow: false,
+ timeRange: [],
+ queryParams: {
+ keyword: ''
+ },
+ tableData: [],
+ total: 0,
+ currentRowNum: 0,
+ opTitle: '鏂板骞冲彴'
+ }
},
- created() {
+ mounted() {
this.getList();
- this.getVideoCount();
},
methods: {
- /** 鏌ヨ骞冲彴杩愯鐩戞帶鍒楄〃 */
- getList() {
- this.loading = true;
- listPlatform(this.queryParams).then(response => {
- this.platformList = response.rows;
- this.total = response.total;
- this.loading = false;
- });
+ delPlatForm(id) {
+ deletePlatformById(id).then(res => {
+ this.$message.success("鍒犻櫎鎴愬姛")
+ this.getList()
+ })
},
- /** 鏌ヨ璁惧璧勪骇缁熻鏁� */
- getVideoCount() {
- videoCount('1').then(response => {
- this.count = response.data;
- });
+ handleEdit(row) {
+ this.addForm = row;
+ this.opTitle = "淇敼骞冲彴"
+ this.addShow = true;
},
- // 鍙栨秷鎸夐挳
- cancel() {
- this.open = false;
- this.reset();
+ next() {
+ this.addForm.deployList.push({
+ platformName: '',
+ platformIp: '',
+ remark: '',
+ area: ''
+ })
},
- // 琛ㄥ崟閲嶇疆
- reset() {
- this.form = {
- id: null,
- platformCode: null,
- platformName: null,
- platformContact: null,
- platformContactPhone: null,
- status: null,
- remark: null,
- createTime: null,
- updateTime: null,
- deleted: null
- };
- this.resetForm("form");
- },
- /** 鎼滅储鎸夐挳鎿嶄綔 */
- handleQuery() {
- this.queryParams.pageNum = 1;
- this.getList();
- },
- /** 閲嶇疆鎸夐挳鎿嶄綔 */
- resetQuery() {
- 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 = "娣诲姞骞冲彴杩愯鐩戞帶";
+ this.addShow = true
+ this.addForm = {
+ id: null,
+ platformName: '',
+ remark: '',
+ platformIp: '',
+ areaList: [],
+ }
},
- /** 淇敼鎸夐挳鎿嶄綔 */
- handleUpdate(row) {
- this.reset();
- const id = row.id || this.ids
- getPlatform(id).then(response => {
- this.form = response.data;
- this.open = true;
- this.title = "淇敼骞冲彴杩愯鐩戞帶";
- });
+ checkDeployList() {
+ if (this.addForm.deployList) {
+ this.addForm.deployList = this.addForm.deployList.filter(item => {
+ return item.platformName || item.platformIp || item.remark || item.area;
+ })
+ }
},
- /** 鎻愪氦鎸夐挳 */
- submitForm() {
- this.$refs["form"].validate(valid => {
+ addPlatform() {
+ this.$refs['addForm'].validate((valid) => {
if (valid) {
- if (this.form.id != null) {
- updatePlatform(this.form).then(response => {
- this.$modal.msgSuccess("淇敼鎴愬姛");
- this.open = false;
- this.getList();
- });
+ // this.checkDeployList()
+ // if (this.addForm.deployList) {
+ // console.log(this.addForm.deployList)
+ // if (this.addForm.deployList.some(item => !item.platformName || !item.platformIP || !item.area)) {
+ // this.$message.error("璇锋鏌ュ钩鍙伴儴缃蹭俊鎭槸鍚﹀～鍐欏畬鏁�");
+ // return; // 閫�鍑� validate 鍥炶皟
+ // }
+ // }
+ if (this.addForm.id) {
+ editPlatform(this.addForm).then(res => {
+ this.$message.success("淇敼鎴愬姛")
+ this.addShow = false
+ this.getList()
+ })
} else {
- addPlatform(this.form).then(response => {
- this.$modal.msgSuccess("鏂板鎴愬姛");
- this.open = false;
- this.getList();
- });
+ addPlatform(this.addForm).then(res => {
+ this.$message.success("娣诲姞鎴愬姛")
+ this.addShow = false
+ this.getList()
+ })
}
}
- });
+ })
},
- /** 鍒犻櫎鎸夐挳鎿嶄綔 */
- handleDelete(row) {
- const ids = row.id || this.ids;
- this.$modal.confirm('鏄惁纭鍒犻櫎骞冲彴杩愯鐩戞帶缂栧彿涓�"' + ids + '"鐨勬暟鎹」锛�').then(function() {
- return delPlatform(ids);
- }).then(() => {
- this.getList();
- this.$modal.msgSuccess("鍒犻櫎鎴愬姛");
- }).catch(() => {});
+ addClose() {
+ this.addShow = false
+ // this.addForm = {
+ // platformName: '',
+ // remark: '',
+ // platformIp: '',
+ // deployList: []
+ // }
},
- /** 瀵煎嚭鎸夐挳鎿嶄綔 */
- handleExport() {
- this.download('platform/platform/export', {
- ...this.queryParams
- }, `platform_${new Date().getTime()}.xlsx`)
+ getList() {
+ this.loading = true
+ this.queryParams['start'] = this.timeRange ? this.timeRange[0] : null
+ this.queryParams['end'] = this.timeRange ? this.timeRange[1] : null
+ getPlatforms(this.queryParams).then(res => {
+ this.tableData = res.data
+ this.total = res.total
+ this.loading = false
+ })
+ },
+ resetQuery() {
+ this.resetForm('queryForm')
+ this.handleQuery()
+ },
+ handleQuery() {
+ this.queryParams.pageNum = 1
+ this.getList()
+ },
+ spanMethod({ row, column, rowIndex, columnIndex }) {
+ if (columnIndex === 0) {
+ if (row.parentId === 0) {
+ return {
+ rowspan: row.childNum + 1,
+ colspan: 1 // 鍙悎骞剁涓�鍒�
+ };
+ } else {
+ return {
+ rowspan: 0,
+ colspan: 0
+ };
+ }
+ }
+
}
}
-};
+}
</script>
-<style lang="scss" scoped>
-.box-card {
- background-color: #F5F9FE;
- width: 100%;
- margin-bottom: 20px;
- height: 120px
-}
-.icon-container {
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 20px;
- width: 20%;
- height: 80px;
- margin-left: 5%;
-}
-.el-icon-connection {
- font-size: 50px;
- color: #FFFFFF;
-}
+<style scoped>
-.dashboard {
- display: flex;
- gap: 10%;
- align-items: center;
- margin-left: -50%;
-}
-
-.dashboard-item {
- text-align: center;
-}
</style>
--
Gitblit v1.8.0