From e80067335467ca48cb94f03de3794ad93a45ad5d Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期五, 13 九月 2024 16:42:38 +0800 Subject: [PATCH] 运行监控 --- src/views/system/data-manage/data-detail/index.vue | 140 ++++++++++++++++++++++++++-------------------- 1 files changed, 80 insertions(+), 60 deletions(-) diff --git a/src/views/system/data-manage/data-detail/index.vue b/src/views/system/data-manage/data-detail/index.vue index f5cb7d6..7a28b97 100644 --- a/src/views/system/data-manage/data-detail/index.vue +++ b/src/views/system/data-manage/data-detail/index.vue @@ -1,13 +1,22 @@ <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 + style="display: flex;flex-direction: row;min-width: 158px;max-width: 158px;margin-bottom: 5px;border-radius: 1px; user-select: none" + v-show="index !== 'image_resource_security'"> + <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 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 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> @@ -29,37 +38,15 @@ <el-col :span="8"></el-col> </el-row> </el-card> - - <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> <el-main> <h2>瑙嗛鍥惧儚璧勬簮瀹夊叏绠$悊</h2> <el-row :gutter="20"> - <el-col :xl="3" :lg="3" :md="6" :sm="6" :xs="12" v-if="imageResourceSecurity && imageResourceSecurity.length > 0" v-for="(item, index) in imageResourceSecurity" :key="index" - class="col-margin"> + <el-col :xl="3" :lg="3" :md="6" :sm="6" :xs="12" + v-if="imageResourceSecurity && imageResourceSecurity.length > 0" + v-for="(item, index) in imageResourceSecurity" :key="index" + class="col-margin"> <el-card style=" min-width: 150px; width: 100%; @@ -82,28 +69,53 @@ </el-row> </el-main> </el-container> - <el-col :span="1.5"> - <el-button type="primary" plain icon="el-icon-upload" size="mini" @click="handleExport" - v-hasPermi="['platform:platform:export']">瀵煎叆 - </el-button> - </el-col> - <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> + </el-row> + <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> + + <div v-show="index === 'image_resource_security'" style="margin-bottom: 5px"> + <el-button type="primary" plain icon="el-icon-upload" size="mini" @click="handleExport" + v-hasPermi="['platform:platform:export']">瀵煎叆 + </el-button> + <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> + </div> <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="showListPD(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> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" - @pagination="getList" /> + @pagination="getList"/> <!-- 淇敼瑙嗛鍥惧儚璧勬簮瀹夊叏绠$悊瀵硅瘽妗� --> <el-dialog title="淇敼瑙嗛鍥惧儚璧勬簮瀹夊叏绠$悊" :visible.sync="resourceOpen" width="600px" append-to-body> <el-form ref="form" :model="resourceForm" :rules="rules" label-width="250px"> <el-form-item label="閮ㄩ棬鍚嶇О" prop="deptName"> - <el-input v-model="resourceForm.deptName" disabled /> + <el-input v-model="resourceForm.deptName" disabled/> </el-form-item> <el-form-item label="骞冲彴杩愯鐜�" prop="platformOnline"> <el-input-number v-model="resourceForm.platformOnline" :precision="2" :step="0.1" :min="0" :max="1"/> @@ -117,7 +129,8 @@ <el-form-item label="瑙嗛浼犺緭缃戝嵄闄╄祫浜ф瘮渚�" prop="riskProperty"> <el-input-number v-model="resourceForm.riskProperty" :precision="2" :step="0.1" :min="0" :max="1"/> </el-form-item> - <el-tooltip class="item" effect="dark" content="杩濊杩炴帴浜掕仈缃戞墸鍑�20涓櫨鍒嗙偣/娆★紝杩濊鏃犵嚎AP鎺ュ叆銆侀殢韬玾ifi鎺ュ叆銆佸叡浜綉缁滃悇鎵e噺5涓櫨鍒嗙偣/娆★紝鐩磋嚦姝ら」鎸囨爣鎵e畬涓烘銆�" placement="top-start"> + <el-tooltip class="item" effect="dark" content="杩濊杩炴帴浜掕仈缃戞墸鍑�20涓櫨鍒嗙偣/娆★紝杩濊鏃犵嚎AP鎺ュ叆銆侀殢韬玾ifi鎺ュ叆銆佸叡浜綉缁滃悇鎵e噺5涓櫨鍒嗙偣/娆★紝鐩磋嚦姝ら」鎸囨爣鎵e畬涓烘銆�" + 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> @@ -133,14 +146,15 @@ <!-- 瀵煎叆瀵硅瘽妗� --> <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" - :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" - :auto-upload="false" drag> + :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" + :auto-upload="false" drag> <i class="el-icon-upload"></i> <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div> <div class="el-upload__tip text-center" slot="tip"> <span>浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢銆�</span> <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" - @click="importTemplate">涓嬭浇妯℃澘</el-link> + @click="importTemplate">涓嬭浇妯℃澘 + </el-link> </div> </el-upload> <div slot="footer" class="dialog-footer"> @@ -153,10 +167,11 @@ </template> <script> -import { dataCenter } from "@/api/platform/data-center"; -import { videoData, carData, faceData, equipment } from "./list"; -import { listSecurity, updateSecurity } from '@/api/platform/resource-security'; -import { getToken } from "@/utils/auth"; +import {dataCenter} from "@/api/platform/data-center"; +import {videoData, carData, faceData, equipment} from "./list"; +import {listSecurity, updateSecurity} from '@/api/platform/resource-security'; +import {getToken} from "@/utils/auth"; + export default { name: "Platform", computed: { @@ -175,7 +190,7 @@ // 鏄惁绂佺敤涓婁紶 isUploading: false, // 璁剧疆涓婁紶鐨勮姹傚ご閮� - headers: { Authorization: "Bearer " + getToken() }, + headers: {Authorization: "Bearer " + getToken()}, // 涓婁紶鐨勫湴鍧� url: process.env.VUE_APP_BASE_API + "/platform/resourceSecurity/importData" }, @@ -218,20 +233,20 @@ // 琛ㄥ崟鏍¢獙 rules: { platformOnline: [ - { required: true, message: "璇疯緭鍏ュ钩鍙拌繍琛岀巼", trigger: "blur" }, - { type: "number", message: "骞冲彴杩愯鐜囧繀椤讳负鏁板瓧", trigger: "blur" } + {required: true, message: "璇疯緭鍏ュ钩鍙拌繍琛岀巼", trigger: "blur"}, + {type: "number", message: "骞冲彴杩愯鐜囧繀椤讳负鏁板瓧", trigger: "blur"} ], propertyAccuracy: [ - { required: true, message: "璇疯緭鍏ヨ棰戜紶杈撶綉璧勪骇鍑嗙‘鐜�", trigger: "blur" }, - { type: "number", message: "瑙嗛浼犺緭缃戣祫浜у噯纭巼蹇呴』涓烘暟瀛�", trigger: "blur" } + {required: true, message: "璇疯緭鍏ヨ棰戜紶杈撶綉璧勪骇鍑嗙‘鐜�", trigger: "blur"}, + {type: "number", message: "瑙嗛浼犺緭缃戣祫浜у噯纭巼蹇呴』涓烘暟瀛�", trigger: "blur"} ], riskProperty: [ - { required: true, message: "璇疯緭鍏ュ急鍙d护寰楀垎", trigger: "blur" }, - { type: "number", message: "寮卞彛浠ゅ緱鍒嗗繀椤讳负鏁板瓧", trigger: "blur" } + {required: true, message: "璇疯緭鍏ュ急鍙d护寰楀垎", trigger: "blur"}, + {type: "number", message: "寮卞彛浠ゅ緱鍒嗗繀椤讳负鏁板瓧", trigger: "blur"} ], boundaryIntegrity: [ - { required: true, message: "璇疯緭鍏ヨ棰戜紶杈撶綉鍗遍櫓璧勪骇姣斾緥", trigger: "blur" }, - { type: "number", message: "瑙嗛浼犺緭缃戝嵄闄╄祫浜ф瘮渚嬪繀椤讳负鏁板瓧", trigger: "blur" } + {required: true, message: "璇疯緭鍏ヨ棰戜紶杈撶綉鍗遍櫓璧勪骇姣斾緥", trigger: "blur"}, + {type: "number", message: "瑙嗛浼犺緭缃戝嵄闄╄祫浜ф瘮渚嬪繀椤讳负鏁板瓧", trigger: "blur"} ], }, @@ -254,7 +269,7 @@ let day = yesterday.getDate().toString().padStart(2, '0'); // 鎷兼帴鎴� yyyy-MM-dd 鏍煎紡 - let yesterday1 = `${year}-${month}-${day}`; + let yesterday1 = `${year}-${month}-${day}`; this.queryParams.timeRange = [yesterday1, yesterday1] this.index = this.$route.query.index; if (this.$route.query.type === '1') { @@ -293,7 +308,7 @@ return true } let arr = this.showList.filter(d => d.label === item.label) - if (item && (!arr || arr.length <1)) { + if (item && (!arr || arr.length < 1)) { return true; } else { return item && arr && arr.length > 0 && arr[0].visible @@ -343,7 +358,7 @@ this.queryParams.endTime = this.queryParams.timeRange[1] } dataCenter(url, this.queryParams).then(response => { - response.data.list = response.data.list && response.data.list.length >0 ? response.data.list : [] + response.data.list = response.data.list && response.data.list.length > 0 ? response.data.list : [] this.tableData = response.data; this.total = response.total; this.loading = false; @@ -413,23 +428,28 @@ .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%; -- Gitblit v1.8.0