From 0863323c8d89742f90c10fc6ea0c1435fd69f58f Mon Sep 17 00:00:00 2001 From: odc.xiaohui <xiaohui@Q1> Date: 星期三, 11 一月 2023 15:12:52 +0800 Subject: [PATCH] 2023/1/11 肖辉 首页图标修改 UI样式修改 --- src/views/operate/disposal/casepool/dispatch/index.vue | 191 +++++++++++++++++++++++++++-------------------- 1 files changed, 108 insertions(+), 83 deletions(-) diff --git a/src/views/operate/disposal/casepool/dispatch/index.vue b/src/views/operate/disposal/casepool/dispatch/index.vue index 2984444..13ef881 100644 --- a/src/views/operate/disposal/casepool/dispatch/index.vue +++ b/src/views/operate/disposal/casepool/dispatch/index.vue @@ -5,8 +5,8 @@ <div class="search"> <span>绛涢�夋潯浠�:</span> <div class="option"> - <el-select v-model="mystatus" placeholder="杩濊" @change="setMystatus"> - <el-option v-for="item in typeList" :key="item.label" :label="item.name" + <el-select v-model="resource" placeholder="璇烽�夋嫨"> + <el-option v-for="item in resourceOptions" :key="item.label" :label="item.label" :value="item.value"> </el-option> </el-select> @@ -20,53 +20,60 @@ <main> <div class="mainContent"> <div class="type-nav"> - <div @click="changeTypeChecked(index)" v-for="(item,index) in typeList" :key="item.name" - :class="[item.checked ? 'is-active':'','type-item']">{{item.name}}</div> + <div @click="changeTypeChecked(index)" v-for="(item, index) in typeList" :key="item.name" + :class="[item.checked ? 'is-active' : '', 'type-item']">{{ item.name }}</div> </div> <!-- 鏁版嵁灞曠ず --> - <el-table ref="multipleTable" - :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}" - :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" + <el-table + border + stripe + ref="multipleTable" :header-cell-style="{ + // background:'#06122c', + 'background':'#F5F5F5', + 'font-weight': '650', 'line-height': '45px' + }" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="tableChange"> <el-table-column type="selection" min-width="5"> </el-table-column> <el-table-column prop="code" label="浜嬩欢缂栧彿" min-width="18"> <template slot-scope="scope"> - <el-link @click="JumpView(scope.row)">{{scope.row.code}}</el-link> + <el-link @click="JumpView(scope.row)">{{ scope.row.code }}</el-link> </template> </el-table-column> <el-table-column prop="eventSource" label="闂鏉ユ簮" min-width="8"> <template slot-scope="scope"> - <span>{{scope.row.eventSource === 2 ? '浜哄伐涓婃姤' : '瑙嗛涓婁紶'}}</span> + <span>{{ scope.row.eventSource === 2 ? '浜哄伐涓婃姤' : '瑙嗛宸℃煡' }}</span> </template> </el-table-column> - <el-table-column :prop="mystatus === 1 ? 'category' :'category'" - :label="mystatus===1 ? '澶х被鍚嶇О' : '杩濆缓绫诲埆'" :min-width="mystatus===1?'10':'20'"> + <el-table-column :prop="mystatus === 1 ? 'category' : 'category'" + :label="mystatus === 1 ? '澶х被鍚嶇О' : '杩濆缓绫诲埆'" :min-width="mystatus === 1 ? '10' : '20'"> </el-table-column> - <el-table-column :prop="mystatus === 1 ? 'type' :'site'" :label="mystatus===1 ? '灏忕被鍚嶇О' : '杩濆缓鍦扮偣'" + <el-table-column :prop="mystatus === 1 ? 'type' : 'site'" :label="mystatus === 1 ? '灏忕被鍚嶇О' : '杩濆缓鍦扮偣'" min-width="10"> </el-table-column> - <el-table-column :prop="mystatus === 1 ? 'actionCause' :'communityId'" - :label="mystatus===1 ? '妗堢敱' : '鎵�灞炵ぞ鍖�'" min-width="10"> + <el-table-column :prop="mystatus === 1 ? 'actionCause' : 'communityId'" + :label="mystatus === 1 ? '妗堢敱' : '鎵�灞炵ぞ鍖�'" min-width="10"> </el-table-column> - <el-table-column :prop="mystatus === 1 ? 'site' :''" :label="mystatus===1 ? '鎶ヨ鐐逛綅' : '杩濇硶寤虹瓚闀裤�佸銆侀珮'" - :min-width="mystatus===1?'10' :'20' "> + <el-table-column :prop="mystatus === 1 ? 'site' : ''" :label="mystatus === 1 ? '鎶ヨ鐐逛綅' : '杩濇硶寤虹瓚闀裤�佸銆侀珮'" + :min-width="mystatus === 1 ? '10' : '20'"> <template slot-scope="scope"> - <div v-if="mystatus ===2"><span>{{scope.row.buildingLength+'绫�'+'銆�'+ - scope.row.buildingWidth+'绫�'+'銆�'+scope.row.buildingHigh+'绫�'}}</span></div> - <div v-else>{{scope.row.site}}</div> + <div v-if="mystatus === 2"><span>{{ + scope.row.buildingLength + '绫�' + '銆�' + + scope.row.buildingWidth + '绫�' + '銆�' + scope.row.buildingHigh + '绫�' + }}</span></div> + <div v-else>{{ scope.row.site }}</div> </template> </el-table-column> - <el-table-column :prop="mystatus === 1 ? 'street' :'buildingArea'" - :label="mystatus===1 ? '鎵�灞炲尯鍩�' : '杩濇硶寤虹瓚闈㈢Н'" min-width="12"> + <el-table-column :prop="mystatus === 1 ? 'street' : 'buildingArea'" + :label="mystatus === 1 ? '鎵�灞炲尯鍩�' : '杩濇硶寤虹瓚闈㈢Н'" min-width="12"> </el-table-column> - <el-table-column prop="alarmTime" label="鎶ヨ鏃堕棿" min-width="15" v-if="mystatus===1"> + <el-table-column prop="alarmTime" label="鎶ヨ鏃堕棿" min-width="15" v-if="mystatus === 1"> <template slot-scope="scope"> - <span>{{filterTime(scope.row.alarmTime)}}</span> + <span>{{ filterTime(scope.row.alarmTime) }}</span> </template> </el-table-column> - <el-table-column :prop="mystatus === 1 ? 'continueTime' :'materials'" - :label="mystatus===1 ? '鎸佺画鏃堕棿' : '杩濇硶寤虹瓚鏉愭枡'" min-width="12"> + <el-table-column :prop="mystatus === 1 ? 'continueTime' : 'materials'" + :label="mystatus === 1 ? '鎸佺画鏃堕棿' : '杩濇硶寤虹瓚鏉愭枡'" min-width="12"> </el-table-column> <el-table-column prop="operation" label="鎿嶄綔" min-width="15"> <template slot-scope="scope"> @@ -79,16 +86,16 @@ </el-table-column> </el-table> <!-- 璇︽儏椤靛睍绀� --> - <el-dialog :visible.sync="dialogView" width="80%" title="鍩虹淇℃伅(浜哄伐)" v-if="dialogView" - :before-close="handleClose"> - <MyDetail :info=info v-if="mystatus===1"></MyDetail> + <el-dialog :visible.sync="dialogView" title="鍩虹淇℃伅(浜哄伐)" v-if="dialogView" :before-close="handleClose"> + <MyDetail :info=info v-if="mystatus === 1"></MyDetail> <MyIllDetail :info=info v-else></MyIllDetail> </el-dialog> <!-- 涓婁紶椤甸潰 --> - <el-dialog :visible.sync="dialogUpload" width="80%" title="涓婁紶澶勭疆缁撴灉" v-if="dialogUpload" - :before-close="handleClose"> - <uploadVio v-if="mystatus === 1" :imageResourceId="imageResourceId" :caseId="caseId" :mycode="caseCode" :vioData="vioData" @closeDialog="closeDialog"></uploadVio> - <uploadIll v-else :caseId="caseId" :mycode="caseCode" @closeDialog="closeDialog" :illData="illData"></uploadIll> + <el-dialog :visible.sync="dialogUpload" title="涓婁紶澶勭疆缁撴灉" v-if="dialogUpload" :before-close="handleClose"> + <uploadVio v-if="mystatus === 1" :imageResourceId="imageResourceId" :caseId="caseId" + :mycode="caseCode" :vioData="vioData" @closeDialog="closeDialog"></uploadVio> + <uploadIll v-else :caseId="caseId" :mycode="caseCode" @closeDialog="closeDialog" :illData="illData"> + </uploadIll> </el-dialog> <!-- tools --> <div class="tools"> @@ -100,7 +107,7 @@ <el-checkbox v-model="unsame" @change="disSame(tableData)">鍙嶉��</el-checkbox> </div> <div class="funsItem"> - <el-select v-model="myIdx" placeholder="鎵归噺鎿嶄綔" @change="selectChange" disabled> + <el-select v-model="myIdx" placeholder="鎵归噺鎿嶄綔" @change="selectChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"> </el-option> @@ -124,9 +131,12 @@ import MyIllDetail from '@/components/illdetail' import casequery from "@/api/operate/basecase"; import helper from '@/utils/mydate' +import basecase from "@/api/operate/basecase"; +import { RESOURCE_OPTIONS } from "@/utils/helper"; + export default { components: { - uploadVio, uploadIll, MyDetail,MyIllDetail + uploadVio, uploadIll, MyDetail, MyIllDetail }, data() { return { @@ -149,14 +159,14 @@ label: '鎵归噺鎿嶄綔', disabled: true, }, - { - value: 1, - label: '鎵归噺鍚敤', - }, - { - value: 2, - label: '鎵归噺绂佺敤', - }, + // { + // value: 1, + // label: '鎵归噺鍚敤', + // }, + // { + // value: 2, + // label: '鎵归噺绂佺敤', + // }, { value: 3, label: '鎵归噺鍒犻櫎', @@ -180,7 +190,9 @@ caseId: '', caseCode: null, vioData: null, - illData: null + illData: null, + resource: null, + resourceOptions: RESOURCE_OPTIONS } }, created() { @@ -195,15 +207,14 @@ methods: { // 椤堕儴涓嬫媺妗� setMystatus(value) { - this.statusArr[1] = value; - this.changeTypeChecked(value - 1); + this.resource = value; this.getUserList(); }, // 鎵归噺鍒犻櫎 mulDelete(idArr) { this.$axios({ method: 'delete', - url: 'sccg/violations/batch_delete?ids=' + idArr, + url: 'sccg/base_case/batch_case_delete?ids=' + idArr, }).then(res => { this.getUserList(); this.$message({ @@ -231,7 +242,7 @@ tableChange(list) { this.tempList = []; list.forEach(item => { - this.tempList.push(item.code); + this.tempList.push(item.id); }) this.all = list.length === this.tableData.length; }, @@ -262,18 +273,23 @@ this.getUserList(); }) }) - .catch(_ => { }); + .catch(_ => { }); }, // 鑾峰彇鐢ㄦ埛鍒楄〃 getUserList() { - const { currentPage, pageSize, context, statusArr } = this; - this.$axios({ - method: 'get', - url: `sccg/base_case/query?state=${statusArr[0]}¤t=${currentPage}&size=${pageSize}&resource=2&type=${statusArr[1]}` - }).then(res => { - this.totalNum = res.data.total; - this.tableData = res.data.records; - }) + const params = { + current: this.currentPage, + state: this.statusArr[0] ?? null, + size: this.pageSize, + resource: this.resource, + type: this.statusArr[1] ?? null + } + basecase.baseCasePoolList(params) + .then(({ records, total }) => { + this.tableData = records; + this.totalNum = total; + }) + .catch(err => this.$message.error(err)) }, // 鏇存敼杩濊/杩濆缓 changeTypeChecked(idx) { @@ -322,19 +338,19 @@ async openDialog(data) { await casequery.getBaseCaseDetail(data.code) .then(({ baseCase, currentSitVo, filesPictureVo, handlePassVo }) => { - this.vioData = currentSitVo; - this.illData = currentSitVo; - this.imageResourceId = filesPictureVo.imageResources[0]?.id; + this.vioData = currentSitVo; + this.illData = currentSitVo; + this.imageResourceId = filesPictureVo.imageResources[0]?.id; }) .catch(err => this.$message.error(err)) - this.dialogUpload = true; - this.caseId = data.id; - this.caseCode = data.code; + this.dialogUpload = true; + this.caseId = data.id; + this.caseCode = data.code; }, // 鍏抽棴涓婁紶鐣岄潰 closeDialog() { - this.dialogUpload = false; - this.getUserList(); + this.dialogUpload = false; + this.getUserList(); }, // 澶勭悊鏃堕棿 filterTime(time) { @@ -346,14 +362,14 @@ <style lang="scss" scoped> .userList { text-align: left; - margin: 10px 20px; + padding: 10px 20px; color: #4b9bb7; - + border: 1px solid #ccc; header { - background-color: #09152f; + // background-color: #09152f; .headerContent { - padding: 0 40px; + padding: 0; display: flex; line-height: 100px; justify-content: space-between; @@ -372,8 +388,8 @@ color: #1d3f57; &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; + background-color: #fff; + //border: 1px solid #17324c; } } @@ -388,7 +404,7 @@ .el-button { padding: 12px 25px; - border-radius: 20px; + //border-radius: 20px; } } @@ -402,12 +418,12 @@ } &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; + // background-color: #09152f; + // border: 1px solid #17324c; } main { - background-color: #09152f; + // background-color: #09152f; margin-top: 20px; padding-bottom: 50px; @@ -432,9 +448,10 @@ } .is-active { - background-color: #070f22; + // background-color: #070f22; border-radius: 4px; - color: #fff; + color: #333; + font-size: 500; } } @@ -442,10 +459,12 @@ display: flex; justify-content: space-between; align-items: center; - padding: 0 20px; - .funs-sp{ - border: 1px solid #17324c; + //padding: 0 20px; + + .funs-sp { + border: 1px solid #DCDFE6; } + .funs { display: flex; @@ -465,6 +484,7 @@ .el-select { width: 120px; } + &:hover { border: 1px solid #4b9bb7; } @@ -487,7 +507,7 @@ &::v-deep li, &::v-deep .btn-prev, &::v-deep .btn-next { - background-color: #071f39; + // background-color: #071f39; color: #4b9bb7; } @@ -500,13 +520,18 @@ } .el-table { - color: #4b9bb7; - font-size: 10px; + // color: #4b9bb7; + // font-size: 10px; &::v-deep .cell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; + + .el-checkbox { + // display: none; + } + } @@ -528,4 +553,4 @@ padding: 0 5px; } } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0