From d67d79c396bd29ff9b8b17322928ae8a8325156b Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期二, 26 三月 2024 09:57:36 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/system/threshold/index.vue | 327 +++++++++++++++++++++++++ src/views/system/video/index.vue | 32 + src/api/platform/threshold.js | 44 +++ src/views/screen/components/screen-examine/components/examine-chart.vue | 25 - src/views/screen/components/screen-title/index.vue | 8 src/views/screen/components/screen-wrapper/index.vue | 9 src/views/screen/components/screen-map/index.vue | 8 src/views/screen/components/select-item/index.vue | 54 ++++ src/views/screen/components/screen-table/index.vue | 156 ++++++++++++ src/views/screen/components/screen-examine/index.vue | 71 +++++ src/views/system/report/index.vue | 10 11 files changed, 708 insertions(+), 36 deletions(-) diff --git a/src/api/platform/threshold.js b/src/api/platform/threshold.js new file mode 100644 index 0000000..f11bf24 --- /dev/null +++ b/src/api/platform/threshold.js @@ -0,0 +1,44 @@ +import request from '@/utils/request' + +// 鏌ヨ杩愮淮闃堝�煎垪琛� +export function listThreshold(query) { + return request({ + url: '/ycl/threshold/list', + method: 'get', + params: query + }) +} + +// 鏌ヨ杩愮淮闃堝�艰缁� +export function getThreshold(id) { + return request({ + url: '/ycl/threshold/' + id, + method: 'get' + }) +} + +// 鏂板杩愮淮闃堝�� +export function addThreshold(data) { + return request({ + url: '/ycl/threshold', + method: 'post', + data: data + }) +} + +// 淇敼杩愮淮闃堝�� +export function updateThreshold(data) { + return request({ + url: '/ycl/threshold', + method: 'put', + data: data + }) +} + +// 鍒犻櫎杩愮淮闃堝�� +export function delThreshold(id) { + return request({ + url: '/ycl/threshold/' + id, + method: 'delete' + }) +} diff --git a/src/views/screen/components/screen-examine/components/examine-chart.vue b/src/views/screen/components/screen-examine/components/examine-chart.vue index 74c3413..172eebf 100644 --- a/src/views/screen/components/screen-examine/components/examine-chart.vue +++ b/src/views/screen/components/screen-examine/components/examine-chart.vue @@ -2,8 +2,8 @@ <div class="chart-container"> <div class="rank-chart"> <div class="hola-item" v-for="item in dataList" :key="item.id"> - <examine-hola :startColor="'#02C77E'" :endColor="'#017770'" :centerValue="item.value" - :bottomTitle="item.name" :routerPath="item.routerUrl" ></examine-hola> + <examine-hola :startColor="'#02C77E'" :endColor="'#017770'" :centerValue="item.value" :bottomTitle="item.name" + :routerPath="item.routerUrl"></examine-hola> </div> </div> </div> @@ -20,14 +20,14 @@ data() { return { dataList: [ - {id: 1,name: '骞冲彴鍦ㄧ嚎鐜�', value: 60,routerUrl: '/car/vehicle-data-monitor/index'}, - {id: 2,name: '涓�鏈轰竴妗e悎鏍肩巼', value: 20,routerUrl: '/car/vehicle-data-monitor/index'}, - {id: 3,name: '妗f鑰冩牳姣�', value: 60,routerUrl: '/car/vehicle-data-monitor/index'}, - {id: 4,name: '鐐逛綅鍦ㄧ嚎鐜�', value: 40,routerUrl: '/car/vehicle-data-monitor/index'}, - {id: 5,name: '褰曞儚鍙敤鐜�', value: 80,routerUrl: '/car/vehicle-data-monitor/index'}, - {id: 6,name: '閲嶇偣鐐逛綅褰曞儚鍙敤鐜�', value: 20,routerUrl: '/car/vehicle-data-monitor/index'}, - {id: 7,name: '淇℃伅閲囬泦鍑嗙‘鐜�', value: 60,routerUrl: '/car/vehicle-data-monitor/index'}, - {id: 8,name: '杞﹁締杩囧崱鍙f暟鎹竴鑷存��', value: 40,routerUrl: '/car/vehicle-data-monitor/index'}, + { id: 1, name: '骞冲彴鍦ㄧ嚎鐜�', value: 60, routerUrl: '/car/vehicle-data-monitor/index' }, + { id: 2, name: '涓�鏈轰竴妗e悎鏍肩巼', value: 20, routerUrl: '/car/vehicle-data-monitor/index' }, + { id: 3, name: '妗f鑰冩牳姣�', value: 60, routerUrl: '/car/vehicle-data-monitor/index' }, + { id: 4, name: '鐐逛綅鍦ㄧ嚎鐜�', value: 40, routerUrl: '/car/vehicle-data-monitor/index' }, + { id: 5, name: '褰曞儚鍙敤鐜�', value: 80, routerUrl: '/car/vehicle-data-monitor/index' }, + { id: 6, name: '閲嶇偣鐐逛綅褰曞儚鍙敤鐜�', value: 20, routerUrl: '/car/vehicle-data-monitor/index' }, + { id: 7, name: '淇℃伅閲囬泦鍑嗙‘鐜�', value: 60, routerUrl: '/car/vehicle-data-monitor/index' }, + { id: 8, name: '杞﹁締杩囧崱鍙f暟鎹竴鑷存��', value: 40, routerUrl: '/car/vehicle-data-monitor/index' }, ] } @@ -59,9 +59,8 @@ .hola-item { flex-shrink: 0; - width: 240px; - height: 200px; - color: #008000 + width: 220px; + height: 180px; } } } diff --git a/src/views/screen/components/screen-examine/index.vue b/src/views/screen/components/screen-examine/index.vue index f48d208..161dbfe 100644 --- a/src/views/screen/components/screen-examine/index.vue +++ b/src/views/screen/components/screen-examine/index.vue @@ -2,7 +2,42 @@ <div class="examine-container"> <wrapper-title :title="'鑰冩牳鏁版嵁'" :path="'/examine/check-rule'"></wrapper-title> <div class="examine-content"> + <div class="examine-wrapper"> + <div class="select-container"> + <div class="select-item" :class="{'active-item' : activeIndex === 0}" @click="clickItem(0)"> + <div class="icon-container"> + <svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <path fill="#ffffff" + d="M772.016477 696.022177c-39.228443-39.229466-85.763292-68.49807-136.530536-86.546122 26.774807-13.283538 51.500954-30.976502 73.254398-52.729945 52.55189-52.550867 81.494059-122.422214 81.494059-196.74085s-28.941146-144.189983-81.494059-196.741873c-52.550867-52.550867-122.422214-81.493036-196.74085-81.493036s-144.189983 28.942169-196.741873 81.493036c-52.55189 52.550867-81.494059 122.422214-81.494059 196.741873s28.941146 144.189983 81.494059 196.74085c21.753443 21.753443 46.480614 39.446407 73.256444 52.729945-50.76929 18.049075-97.303116 47.316655-136.532583 86.546122-66.188468 66.187445-104.009865 153.166425-107.422591 246.208495l48.730864 0c3.387144-80.028685 36.140105-154.783249 93.129051-211.770148 55.771211-55.771211 128.557958-88.326675 206.650547-92.867084 6.27389 0.418532 12.582573 0.645706 18.929118 0.645706 6.345522 0 12.656251-0.227174 18.929118-0.645706 78.091566 4.54041 150.880359 37.095873 206.650547 92.867084 56.987922 56.986899 89.741907 131.741463 93.129051 211.770148l48.730864 0C876.027365 849.188602 838.204945 762.209622 772.016477 696.022177zM282.466792 360.004237c0-126.564557 102.96814-229.53372 229.53372-229.53372 126.564557 0 229.53372 102.969163 229.53372 229.53372 0 120.304993-93.040023 219.280192-210.942293 228.77545-6.170536-0.304945-12.369725-0.460488-18.591427-0.460488-6.222725 0-12.420891 0.155543-18.59245 0.460488C375.505791 579.284429 282.466792 480.30923 282.466792 360.004237z" /> + </svg> + </div> + <div class="label">浜鸿劯鑰冩牳</div> + </div> + <div class="select-item" :class="{'active-item' : activeIndex === 1}" @click="clickItem(1)"> + <div class="icon-container"> + <svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <path fill="#ffffff" + d="M845.590658 851.92083c-27.77253 0-49.455365-11.378142-62.705134-32.905434-10.428513-16.942881-15.715937-40.441061-15.715937-69.841671l0-42.915415L285.710161 706.258309l0 42.915415c0 29.153994-5.809309 52.780087-17.266245 70.223365-13.976316 21.277606-36.027541 32.523741-63.770396 32.523741-51.880601 0-84.10963-39.370683-84.10963-102.747105l0-42.915415L73.560366 706.258309c-16.765849 0-29.899984-13.148461-29.899984-29.93273L43.660382 501.529531c0-31.397081 12.18553-60.870346 34.311457-82.992179 22.127973-22.122857 51.610448-34.305317 83.017762-34.305317l0.741897 0 44.89142-179.101097c15.750729-63.952544 77.541027-112.224967 143.713123-112.224967l349.591073 0c66.172095 0 127.962393 48.272423 143.728472 112.286366l44.875047 179.039699 0.74292 0c31.407314 0 60.890812 12.183484 83.017762 34.305317 22.12695 22.121833 34.31248 51.595099 34.31248 82.992179l0 174.795025c0 16.784268-13.134135 29.93273-29.899984 29.93273l-50.664913 0 0 42.915415C926.038898 814.470893 896.717082 851.92083 845.590658 851.92083zM255.010975 675.5581l542.856775 0 0 73.614601c0 72.04792 34.670637 72.04792 47.722908 72.04792 17.308201 0 29.66053-6.082532 37.762045-18.59552 7.841595-12.109806 11.987009-30.592762 11.987009-53.452399l0-73.614601 80.563874 0 0.001023-174.028569c0-47.750537-38.863123-86.59831-86.631056-86.59831l-24.696472 0L813.863049 212.594933c-12.502755-50.759057-61.477166-88.989777-113.935935-88.989777L350.33604 123.605156c-52.458769 0-101.43318 38.23072-113.919563 88.928379l-50.730405 202.397686L160.990624 414.931221c-47.768957 0-86.631056 38.847773-86.631056 86.59831l0 174.028569 76.902484 0 0 73.614601c0 26.907836 6.939039 72.04792 53.410444 72.04792 33.401738 0 50.337455-24.240077 50.337455-72.04792L255.009951 675.5581zM847.566662 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.923454 0 103.234199 46.293349 103.234199 103.195314C950.799838 623.520933 904.490116 669.813259 847.566662 669.813259zM847.566662 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.995923 0 72.535013-32.521694 72.535013-72.496128C920.100652 526.643512 887.562585 494.121817 847.566662 494.121817zM198.5081 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.924477 0 103.236246 46.293349 103.236246 103.195314C301.744345 623.520933 255.432577 669.813259 198.5081 669.813259zM198.5081 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.996946 0 72.53706-32.521694 72.53706-72.496128C271.045159 526.643512 238.505046 494.121817 198.5081 494.121817zM815.368332 389.497968 218.155579 389.497968l53.717436-215.46019c3.551896-12.935614 20.717857-26.114774 34.012651-26.114774l421.751556 0c13.295817 0 30.461779 13.180184 34.012651 26.115797l0.092098 0.350994L815.368332 389.497968zM257.447467 358.798782l518.628978 0-43.823088-175.785585c-1.12973-1.475608-3.938706-3.681856-5.594415-4.39203L306.863946 178.621167c-1.656733 0.709151-4.464685 2.916423-5.594415 4.39203L257.447467 358.798782z" /> + </svg> + </div> + <div class="label">杞﹁締鑰冩牳</div> + </div> + <div class="select-item" :class="{'active-item' : activeIndex === 2}" @click="clickItem(2)"> + <div class="icon-container"> + <svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <path fill="#ffffff" + d="M49.770667 199.104H658.773333c19.925333 5.674667 33.493333 14.336 42.24 25.024 8.448 10.24 11.157333 20.117333 11.157334 25.066667v214.250666l262.357333-168.682666v414.826666l-262.357333-168.661333v148.096a24.896 24.896 0 1 0 49.770666 0v-62.442667l262.378667 174.186667V203.605333L761.92 372.266667v-123.093334c0-15.488-5.696-36.266667-22.464-56.661333-16-19.477333-39.573333-34.133333-71.104-42.368L665.258667 149.333333H0v608.96l0.768 3.029334c2.986667 11.669333 9.173333 27.989333 19.690667 44.629333 18.730667 29.653333 44.906667 48.725333 79.146666 49.066667h637.44a24.896 24.896 0 0 0 0-49.770667H99.84c-14.4-0.149333-26.752-9.130667-37.333333-25.877333a120.213333 120.213333 0 0 1-12.757334-27.690667V199.104z" /> + <path fill="#ffffff" + d="M205.909333 324.48a46.506667 46.506667 0 1 1-92.992-0.042667 46.506667 46.506667 0 0 1 92.992 0.021334z" /> + </svg> + </div> + <div class="label">瑙嗛鑰冩牳</div> + </div> + </div> <examine-chart class="wrapper-item"></examine-chart> <!-- <examine-table class="wrapper-item"></examine-table> --> </div> @@ -20,6 +55,16 @@ WrapperTitle, ExamineChart, ExamineTable + }, + data() { + return { + activeIndex: 0 + } + }, + methods: { + clickItem(index) { + this.activeIndex = index; + } } } @@ -51,8 +96,34 @@ background: rgba(67, 102, 155, 0.3); border: 1px solid rgba(47, 91, 157, 0.8); margin-bottom: 20px; + &:last-of-type { margin-bottom: 0; } } + +.select-container { + width: 100%; + display: flex; + background: rgba(67, 102, 155, 0.3); + border: 1px solid rgba(47, 91, 157, 0.8); + border-bottom: 0; + + .select-item { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 10px 0; + color: #fff; + cursor: pointer; + &:hover { + background-color: rgba(38, 86, 158, 0.6); + } + } + .active-item { + background-color: rgba(38, 86, 158, 0.6); + } +} </style> \ No newline at end of file diff --git a/src/views/screen/components/screen-map/index.vue b/src/views/screen/components/screen-map/index.vue index e1b84bc..0d3d162 100644 --- a/src/views/screen/components/screen-map/index.vue +++ b/src/views/screen/components/screen-map/index.vue @@ -45,7 +45,7 @@ viewControl: { beta: -30, alpha: 50, - distance: 105, + distance: 85, maxBeta: 180, panSensitivity: 0, zoomSensitivity: 1, @@ -93,7 +93,7 @@ viewControl: { beta: -30, alpha: 50, - distance: 105, + distance: 85, maxBeta: 180, panSensitivity: 0, zoomSensitivity: 1, @@ -236,8 +236,8 @@ .map-content { flex: 1; - background: rgba(67, 102, 155, 0.3); - border: 1px solid rgba(47, 91, 157, 0.8); + // background: rgba(67, 102, 155, 0.3); + // border: 1px solid rgba(47, 91, 157, 0.8); } .map-style { diff --git a/src/views/screen/components/screen-table/index.vue b/src/views/screen/components/screen-table/index.vue new file mode 100644 index 0000000..d1a90d1 --- /dev/null +++ b/src/views/screen/components/screen-table/index.vue @@ -0,0 +1,156 @@ +<template> + <div class="table-container"> + <div class="table-content" ref="tabContent"> + <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table"> + <el-table-column prop="name" label="鍦板尯" align="center" width="100"> + </el-table-column> + <el-table-column prop="data1" label="浜鸿劯璁惧鎬绘暟" align="center"> + </el-table-column> + <el-table-column prop="data2" label="杞﹁締璁惧鎬绘暟" align="center"> + </el-table-column> + <el-table-column prop="data3" label="瑙嗛璁惧鎬绘暟" align="center"> + </el-table-column> + </el-table> + </div> + + </div> +</template> + +<script> +export default { + data() { + return { + tableHeight: 40, + tableData: [ + { + name: '瀵岄『鍘�', + data1: 1123, + data2: 1123, + data3: 1123 + }, + { + name: '鑽e幙', + data1: 1123, + data2: 1123, + data3: 1123 + }, + { + name: '楂樻柊鍖�', + data1: 1123, + data2: 1123, + data3: 1123 + }, + { + name: '鑷祦浜曞尯', + data1: 1123, + data2: 1123, + data3: 1123 + }, + { + name: '璐′簳鍖�', + data1: 1123, + data2: 1123, + data3: 1123 + }, + { + name: '澶у畨鍖�', + data1: 1123, + data2: 1123, + data3: 1123 + }, + { + name: '娌挎哗鍖�', + data1: 1123, + data2: 1123, + data3: 1123 + }, + ] + } + }, + methods: { + computedHeight() { + this.$nextTick(() => { + setTimeout(() => { + const content = this.$refs.tabContent; + this.tableHeight = content.offsetHeight; + }) + }) + } + }, + mounted() { + this.computedHeight(); + } +} +</script> + +<style lang="scss" scoped> +.table-container { + width: 100%; + // flex: 1; + height: 355px; + position: relative; + background: rgba(67, 102, 155, 0.3); + border: 1px solid rgba(47, 91, 157, 0.8); + + .table-content { + position: absolute; + width: 100%; + top: 0; + bottom: 0; + } +} + + + +.rank-table { + background-color: transparent !important; + color: #fff !important; + + //婊氬姩鏉$殑鑳屾櫙鑹� + ::-webkit-scrollbar-track { + background-color: transparent; + } +} + +::v-deep .el-table tr { + background-color: transparent !important; +} + +::v-deep .el-table .el-table__header-wrapper th, +.el-table .el-table__fixed-header-wrapper th { + background-color: transparent !important; + +} + +::v-deep .el-table--group, +.el-table--border { + border: 0; +} + +::v-deep .el-table th.el-table__cell.is-leaf, +.el-table td.el-table__cell { + border-color: #56739e99 !important; +} + +::v-deep .el-table--border .el-table__cell { + border-color: #56739e99 !important; +} + +::v-deep .el-table th.el-table__cell>.cell { + color: #447ED6; +} + +::v-deep .el-scrollbar__bar.is-vertical { + display: none !important; +} + +::v-deep .el-table::before, +.el-table--group::after, +.el-table--border::after { + background-color: transparent !important; +} + +::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { + background-color: #447ed648; +} +</style> \ No newline at end of file diff --git a/src/views/screen/components/screen-title/index.vue b/src/views/screen/components/screen-title/index.vue index 7dd1f76..53aa4f5 100644 --- a/src/views/screen/components/screen-title/index.vue +++ b/src/views/screen/components/screen-title/index.vue @@ -5,7 +5,7 @@ <img src="@/assets/images/screen/header_bg.png" class="width-img" alt=""> </div> <div class="header-text"> - 鑷础甯傝繍缁磋�冩牳鍙鍖� + 澶у睆 </div> </div> </div> @@ -19,7 +19,7 @@ <style lang="scss" scoped> .header-container { - width: 1000px; + width: 600px; position: absolute; top: 0; left: 50%; @@ -33,9 +33,9 @@ .header-text { position: absolute; left: 49%; - top: 15px; + top: 5px; transform: translateX(-50%); color: #fff; - font-size: 30px; + font-size: 24px; } </style> \ No newline at end of file diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue index 35e0763..0f67a02 100644 --- a/src/views/screen/components/screen-wrapper/index.vue +++ b/src/views/screen/components/screen-wrapper/index.vue @@ -12,7 +12,8 @@ </div> <div class="center-container center-wrapper"> <screen-map></screen-map> - <screen-detection></screen-detection> + <screen-table></screen-table> + <!-- <screen-detection></screen-detection> --> </div> <div class="right-container wrapper"> @@ -25,21 +26,21 @@ <script> import SelectItem from '../select-item/index'; import ScreenFace from '../screen-face/index'; -import ScreenDetection from '../screen-detection/index'; import ScreenExamine from '../screen-examine/index'; import ScreenVideo from '../screen-video/index'; import ScreenCar from '../screen-car/index'; import ScreenMap from '../screen-map/index'; +import ScreenTable from '../screen-table/index'; export default { name: 'ScreenWrapper', components: { SelectItem, ScreenFace, - ScreenDetection, ScreenExamine, ScreenVideo, ScreenCar, - ScreenMap + ScreenMap, + ScreenTable }, methods: { returnPath() { diff --git a/src/views/screen/components/select-item/index.vue b/src/views/screen/components/select-item/index.vue index 168db2c..53a40cd 100644 --- a/src/views/screen/components/select-item/index.vue +++ b/src/views/screen/components/select-item/index.vue @@ -7,6 +7,13 @@ </el-select> </div> + <div class="local-select"> + <div class="select-label">鍦板尯</div> + <el-select v-model="localValue" popper-class="type-select" class="select-style" @change="setConfig"> + <el-option v-for="item in testData2" :key="item.name" :label="item.name" :value="item.value" /> + </el-select> + </div> + <div class="date-select"> <div class="select-label">鏃ユ湡</div> <el-date-picker v-model="dateValue" type="daterange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" @@ -21,6 +28,7 @@ data() { return { typeValue: 1, + localValue: 1, dateValue: new Date(), testData1: [ { @@ -35,6 +43,36 @@ name: '鍏畨閮ㄦ暟鎹�', value: 3 } + ], + testData2: [ + { + name: '瀵岄『鍘�', + value: 1, + }, + { + name: '鑽e幙', + value: 2, + }, + { + name: '楂樻柊鍖�', + value: 3, + }, + { + name: '鑷祦浜曞尯', + value: 4, + }, + { + name: '璐′簳鍖�', + value: 5, + }, + { + name: '澶у畨鍖�', + value: 6, + }, + { + name: '娌挎哗鍖�', + value: 7, + }, ] } }, @@ -61,11 +99,25 @@ flex-shrink: 0; } + .local-label { + font-size: 20px; + margin-right: 10px; + color: #2375f0; + flex-shrink: 0; + } + .type-select { display: flex; align-items: center; margin-right: 20px; - width: 240px; + width: 200px; + } + + .local-select { + display: flex; + align-items: center; + margin-right: 20px; + width: 200px; } .date-select { diff --git a/src/views/system/report/index.vue b/src/views/system/report/index.vue index 458bf4d..6f360b9 100644 --- a/src/views/system/report/index.vue +++ b/src/views/system/report/index.vue @@ -17,6 +17,16 @@ @keyup.enter.native="handleQuery" /> </el-form-item> + <el-form-item label="鎶ュ绫诲瀷" prop="reportType"> + <el-select + v-model="queryParams.reportType" + placeholder="鎶ュ绫诲瀷" + clearable + > + <el-option label="浜嬪墠鎶ュ" value="浜嬪墠鎶ュ" /> + <el-option label="浜嬪悗鎶ュ" value="浜嬪悗鎶ュ" /> + </el-select> + </el-form-item> <el-form-item label="鎶ュ鏃堕棿"> <el-date-picker v-model="daterangeCreateTime" diff --git a/src/views/system/threshold/index.vue b/src/views/system/threshold/index.vue new file mode 100644 index 0000000..a334492 --- /dev/null +++ b/src/views/system/threshold/index.vue @@ -0,0 +1,327 @@ +<template> + <div class="app-container"> + <el-row :gutter="10" class="mb8"> + <el-col :span="1.5"> + <el-button + type="primary" + plain + icon="el-icon-plus" + size="mini" + @click="handleAdd" + v-hasPermi="['ycl:threshold:add']" + >鏂板 + </el-button> + </el-col> + </el-row> + + <el-table v-loading="loading" :data="thresholdList" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" align="center"/> + <el-table-column label="璁惧绫诲瀷" align="center" prop="monitorType"> + <template slot-scope="scope"> + <span v-show="scope.row['monitorType'] === '1'">浜鸿劯</span> + <span v-show="scope.row['monitorType'] === '2'">杞﹁締</span> + <span v-show="scope.row['monitorType'] === '3'">瑙嗛</span> + </template> + </el-table-column> + <el-table-column label="瓒呮椂澶╂暟" align="center" prop="timeout"/> + <el-table-column label="鎸囨爣" align="center" prop="indicator"> + <template slot-scope="scope"> + <div v-for="item in JSON.parse(scope.row.indicator)" :key="item"> + {{ item.label }}锛歿{ item.value }} + </div> + </template> + </el-table-column> + <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="['ycl:threshold:edit']" + >淇敼 + </el-button> + <el-button + size="mini" + type="text" + icon="el-icon-delete" + @click="handleDelete(scope.row)" + v-hasPermi="['ycl:threshold:remove']" + >鍒犻櫎 + </el-button> + </template> + </el-table-column> + </el-table> + + <pagination + v-show="total>0" + :total="total" + :page.sync="queryParams.pageNum" + :limit.sync="queryParams.pageSize" + @pagination="getList" + /> + + <!-- 娣诲姞鎴栦慨鏀硅繍缁撮槇鍊煎璇濇 --> + <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body> + <el-form ref="form" :model="form" :rules="rules" label-width="150px"> + <el-form-item label="璁惧绫诲瀷" prop="monitorType"> + <el-select v-model="form.monitorType" placeholder="璇烽�夋嫨璁惧绫诲瀷" @change="handleModeNameChange"> + <el-option label="浜鸿劯" value="1"/> + <el-option label="杞﹁締" value="2"/> + <el-option label="瑙嗛" value="3"/> + </el-select> + </el-form-item> + <el-form-item label="瓒呮椂澶╂暟" prop="timeout" label-width="150px"> + <el-input type="number" min="0" max="1000" v-model="form.timeout" placeholder="璇疯緭鍏ヨ秴鏃跺ぉ鏁�"/> + </el-form-item> + <el-form-item :label="indicator.label" prop="indexOneValue" v-for="indicator in indicators" label-width="150px"> + <el-input class="el-input-width" v-model="indicator.value" :placeholder="'璇疯緭鍏�' + indicator.label"/> + </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 { listThreshold, getThreshold, delThreshold, addThreshold, updateThreshold } from '@/api/platform/threshold' + +export default { + name: 'Threshold', + data() { + return { + indicators: [], + // 閬僵灞� + loading: true, + // 閫変腑鏁扮粍 + ids: [], + // 闈炲崟涓鐢� + single: true, + // 闈炲涓鐢� + multiple: true, + // 鏄剧ず鎼滅储鏉′欢 + showSearch: true, + // 鎬绘潯鏁� + total: 0, + // 杩愮淮闃堝�艰〃鏍兼暟鎹� + thresholdList: [], + // 寮瑰嚭灞傛爣棰� + title: '', + // 鏄惁鏄剧ず寮瑰嚭灞� + open: false, + // 鏌ヨ鍙傛暟 + queryParams: { + pageNum: 1, + pageSize: 10, + monitorType: null + }, + // 琛ㄥ崟鍙傛暟 + form: {}, + // 琛ㄥ崟鏍¢獙 + rules: { + monitorType: [ + { required: true, message: '璁惧绫诲瀷锛�1浜鸿劯 2杞﹁締 3瑙嗛涓嶈兘涓虹┖', trigger: 'change' } + ], + timeout: [ + { required: true, message: '瓒呮椂澶╂暟涓嶈兘涓虹┖', trigger: 'blur' } + ] + } + } + }, + created() { + this.getList() + }, + methods: { + /** 鏌ヨ杩愮淮闃堝�煎垪琛� */ + getList() { + this.loading = true + listThreshold(this.queryParams).then(response => { + this.thresholdList = response.rows + this.total = response.total + this.loading = false + }) + }, + // 鍙栨秷鎸夐挳 + cancel() { + this.open = false + this.reset() + }, + // 琛ㄥ崟閲嶇疆 + reset() { + this.form = { + id: null, + monitorType: null, + timeout: null, + indicator: 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.handleModeNameChange() + }, + /** 淇敼鎸夐挳鎿嶄綔 */ + handleUpdate(row) { + this.reset() + const id = row.id || this.ids + getThreshold(id).then(response => { + this.form = response.data + this.indicators = JSON.parse(this.form.indicator) + this.open = true + this.title = '淇敼杩愮淮闃堝��' + }) + }, + /** 鎻愪氦鎸夐挳 */ + submitForm() { + this.$refs['form'].validate(valid => { + if (valid) { + // 灏唅ndicators杞负json璧嬪�煎埌form + this.form.indicator = JSON.stringify(this.indicators) + if (this.form.id != null) { + updateThreshold(this.form).then(response => { + this.$modal.msgSuccess('淇敼鎴愬姛') + this.open = false + this.getList() + }) + } else { + addThreshold(this.form).then(response => { + this.$modal.msgSuccess('鏂板鎴愬姛') + this.open = false + this.getList() + }) + } + } + }) + }, + /** 鍒犻櫎鎸夐挳鎿嶄綔 */ + handleDelete(row) { + const ids = row.id || this.ids + this.$modal.confirm('鏄惁纭鍒犻櫎杩愮淮闃堝�肩紪鍙蜂负"' + ids + '"鐨勬暟鎹」锛�').then(function() { + return delThreshold(ids) + }).then(() => { + this.getList() + this.$modal.msgSuccess('鍒犻櫎鎴愬姛') + }).catch(() => { + }) + }, + /** 鍒囨崲涓嶅悓鎸囨爣 */ + handleModeNameChange() { + if (this.form.monitorType === '1' || this.form.monitorType === null) { + this.indicators = [ + { + label: '鎶撴媿閲�', + value: null + }, + { + label: '鍙婃椂鐜�', + value: null + }, + { + label: '寤惰繜閲�', + value: null + }, + { + label: '鎶芥閲�', + value: null + }, + { + label: '璁惧娲昏穬鐜�', + value: null + }, + { + label: '鎶撴媿鍙婃椂鐜�', + value: null + }, + { + label: '鏃堕挓鍑嗙‘鐜�', + value: null + }, + { + label: '鏃堕挓涓嶅噯纭巼', + value: null + } + ] + } else if (this.form.monitorType === '2') { + this.indicators = [ + { + label: '杩囪溅鏁版嵁閲�', + value: null + }, + { + label: '杩囪溅缂哄け鐜�', + value: null + }, + { + label: '鏈夋晥杩囪溅鏁版嵁閲�', + value: null + }, + { + label: '鎶芥閲�', + value: null + }, + { + label: '璁惧娲昏穬鐜�', + value: null + }, + { + label: '鎶撴媿鍙婃椂鐜�', + value: null + }, + { + label: '鏃堕挓鍑嗙‘鐜�', + value: null + }, + { + label: '鏃堕挓涓嶅噯纭巼', + value: null + } + ] + } else if (this.form.monitorType === '3') { + this.indicators = [ + { + label: '閲囬泦璁惧鎬绘暟', + value: null + }, + { + label: '鐩戞祴姝e父璁惧鏁�', + value: null + }, + { + label: '缂栫爜寮傚父璁惧鏁�', + value: null + }, + { + label: '缁忕含搴﹀紓甯歌澶囨暟', + value: null + } + ] + } + } + } +} +</script> diff --git a/src/views/system/video/index.vue b/src/views/system/video/index.vue index d144ed1..8df8e43 100644 --- a/src/views/system/video/index.vue +++ b/src/views/system/video/index.vue @@ -116,30 +116,30 @@ @click="handleExport" >瀵煎嚭</el-button> </el-col> - <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> + <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> </el-row> <el-table v-loading="loading" :data="monitorList" @selection-change="handleSelectionChange"> <el-table-column type="selection" align="center" /> <el-table-column label="璁惧鍚嶇О" align="center" prop="name" width="280" fixed/> <el-table-column label="璁惧缂栫爜" align="center" prop="serialNumber" width="180"/> - <el-table-column label="鏍囩" align="center" prop="tag" width="180"/> - <el-table-column label="鍖哄煙" align="center" prop="region" width="180"/> - <el-table-column label="璁惧鐘舵��" align="center" prop="onState"> + <el-table-column label="鏍囩" align="center" prop="tag" width="180" v-if="columns[0].visible"/> + <el-table-column label="鍖哄煙" align="center" prop="region" width="180" v-if="columns[1].visible"/> + <el-table-column label="璁惧鐘舵��" align="center" prop="onState" v-if="columns[2].visible"> <template slot-scope="scope"> <dict-tag :options="dict.type.camera_state" :value="scope.row.onState"/> </template> </el-table-column> - <el-table-column label="鏄惁鐢熸垚寮傚父宸ュ崟" align="center" prop="defaultOrder" width="180"> + <el-table-column label="鏄惁鐢熸垚寮傚父宸ュ崟" align="center" prop="defaultOrder" width="180" v-if="columns[3].visible"> <template slot-scope="scope"> <dict-tag :options="dict.type.platform_yes_no" :value="scope.row.defaultOrder"/> </template> </el-table-column> - <el-table-column label="鏁版嵁鏃堕棿" align="center" prop="installedTime" width="180"/> - <el-table-column label="绠$悊鍗曚綅" align="center" prop="managementUnit" width="180"/> - <el-table-column label="淇′护鏃跺欢(ms)" align="center" prop="sipDelay" width="180"/> - <el-table-column label="瑙嗛鏃跺欢(ms)" align="center" prop="videoDelay" width="180"/> - <el-table-column label="鍏抽敭甯ф椂寤�(ms)" align="center" prop="iframeDelay" width="180"/> + <el-table-column label="鏁版嵁鏃堕棿" align="center" prop="installedTime" width="180" v-if="columns[4].visible"/> + <el-table-column label="绠$悊鍗曚綅" align="center" prop="managementUnit" width="180" v-if="columns[5].visible"/> + <el-table-column label="淇′护鏃跺欢(ms)" align="center" prop="sipDelay" width="180" v-if="columns[6].visible"/> + <el-table-column label="瑙嗛鏃跺欢(ms)" align="center" prop="videoDelay" width="180" v-if="columns[7].visible"/> + <el-table-column label="鍏抽敭甯ф椂寤�(ms)" align="center" prop="iframeDelay" width="180" v-if="columns[8].visible"/> <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width" fixed="right"> <template slot-scope="scope"> <el-button @@ -215,6 +215,18 @@ dicts: ['sys_normal_disable', 'platform_yes_no','camera_state'], data() { return { + // 鍒椾俊鎭� + columns: [ + { key: 0, label: `鏍囩`, visible: true }, + { key: 1, label: `鍖哄煙`, visible: true }, + { key: 2, label: `璁惧鐘舵�乣, visible: true }, + { key: 3, label: `鏄惁鐢熸垚寮傚父宸ュ崟`, visible: true }, + { key: 4, label: `鏁版嵁鏃堕棿`, visible: true }, + { key: 5, label: `绠$悊鍗曚綅`, visible: true }, + { key: 6, label: `淇′护鏃跺欢`, visible: true }, + { key: 7, label: `瑙嗛鏃跺欢`, visible: true }, + { key: 8, label: `鍏抽敭甯ф椂寤禶, visible: true } + ], totalPosts: 6250, totalMembers: 6008, postsPercentage: 51, -- Gitblit v1.8.0