From 2e4133d2bbb0f4626cf336f3e456783b9fb7867e Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期四, 04 八月 2022 02:40:08 +0800 Subject: [PATCH] 优化部分样式 --- src/views/equipmentManagement/equipmentList/components/FormList.vue | 260 ++++++++++++++++++++------------------------------- 1 files changed, 104 insertions(+), 156 deletions(-) diff --git a/src/views/equipmentManagement/equipmentList/components/FormList.vue b/src/views/equipmentManagement/equipmentList/components/FormList.vue index f46981c..84f9ee9 100644 --- a/src/views/equipmentManagement/equipmentList/components/FormList.vue +++ b/src/views/equipmentManagement/equipmentList/components/FormList.vue @@ -23,12 +23,7 @@ <div class="cluster"> 鎵�灞為泦缇� <el-select v-model="cluster" placeholder="璇烽�夋嫨"> - <el-option - v-for="item in clusterArr" - :key="item.value" - :label="item.label" - :value="item.value" - > + <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> @@ -41,12 +36,8 @@ </div> <div class="btns"> - <div class="button add" @click="isShowAdd = true"> - <span>+</span>娣诲姞璁惧 - </div> - <div class="button export" @click="exportFile"> - <span class="iconfont"></span>瀵煎嚭 - </div> + <div class="button add" @click="isShowAdd = true"><span>+</span>娣诲姞璁惧</div> + <div class="button export" @click="exportFile"><span class="iconfont"></span>瀵煎嚭</div> </div> <div class="table-area"> @@ -60,27 +51,11 @@ :stripe="true" > <el-table-column label="搴忓彿" width="80" class-name="index"> - <template slot-scope="scope">{{ - scope.$index + 1 + (page - 1) * size - }}</template> + <template slot-scope="scope">{{ scope.$index + 1 + (page - 1) * size }}</template> </el-table-column> - <el-table-column - prop="devId" - label="璁惧ID" - min-width="140" - show-overflow-tooltip - ></el-table-column> - <el-table-column - prop="devName" - label="璁惧鍚嶇О" - min-width="140" - show-overflow-tooltip - ></el-table-column> - <el-table-column - prop="devIp" - label="IP鍦板潃" - min-width="150" - ></el-table-column> + <el-table-column prop="devId" label="璁惧ID" min-width="185" show-overflow-tooltip></el-table-column> + <el-table-column prop="devName" label="璁惧鍚嶇О" min-width="140" show-overflow-tooltip></el-table-column> + <el-table-column prop="devIp" label="IP鍦板潃" min-width="150"></el-table-column> <el-table-column label="瀹夎鏃堕棿" min-width="159"> <template slot-scope="scope"> <div v-if="scope.row.installTime.length > 1"> @@ -114,11 +89,7 @@ <el-table-column label="鎿嶄綔" min-width="180"> <template slot-scope="scope"> <!-- 鍔犲叆 --> - <el-tooltip - content="鍔犲叆闆嗙兢" - placement="top" - v-if="!scope.row.clusterId" - > + <el-tooltip content="鍔犲叆闆嗙兢" placement="top" v-if="!scope.row.clusterId"> <span class="iconfont option" @click="joinCluster(scope.row)" @@ -155,10 +126,7 @@ </el-tooltip> <!-- 瑙g粦 --> <el-tooltip content="瑙i櫎缁戝畾" placement="top"> - <span - class="iconfont option" - @click="Untying(scope.row)" - :class="{ disable: scope.row.isOnline != 1 }" + <span class="iconfont option" @click="Untying(scope.row)" :class="{ disable: scope.row.isOnline != 1 }" ></span > </el-tooltip> @@ -180,54 +148,37 @@ </div> <!-- 瑙g粦寮圭獥 --> - <UnbindBox - @close="closeUnbindBox" - v-if="isShowUnbind" - :id="unbindId" - @reflash="reflash" - ></UnbindBox> + <UnbindBox @close="closeUnbindBox" v-if="isShowUnbind" :id="unbindId" @reflash="reflash"></UnbindBox> <!-- 娣诲姞璁惧寮圭獥 --> <AddBox @close="closeAddBox" v-if="isShowAdd"></AddBox> <!-- 閫�鍑洪泦缇ゅ脊绐� --> - <QuitClusterBox - :equipment="activeEquipment" - v-if="showQuit" - @close="showQuit = false" - ></QuitClusterBox> + <QuitClusterBox :equipment="activeEquipment" v-if="showQuit" @close="showQuit = false"></QuitClusterBox> <!-- 鍔犲叆闆嗙兢寮圭獥 --> - <JoinClusterBox - :equipment="activeEquipment" - v-if="showJoin" - @close="showJoin = false" - ></JoinClusterBox> + <JoinClusterBox :equipment="activeEquipment" v-if="showJoin" @close="showJoin = false"></JoinClusterBox> </div> </template> <script> -import { - findDevList, - findClustersBySearch, - exportDevListExcel, -} from "@/api/device"; -import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox"; -import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox"; -import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox"; -import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox"; +import { findDevList, findClustersBySearch, exportDevListExcel } from "@/api/device" +import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox" +import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox" +import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox" +import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox" -import bus from "@/plugin/bus"; +import bus from "@/plugin/bus" export default { components: { AddBox, UnbindBox, QuitClusterBox, - JoinClusterBox, + JoinClusterBox }, created() { - this.getCluster(); + this.getCluster() }, data() { return { @@ -244,8 +195,8 @@ cluster: null, //閫変腑鐨勯泦缇ょ被鍨� showQuit: false, //灞曠ず閫�鍑洪泦缇ょ殑寮圭獥 showJoin: false, //灞曠ず鍔犲叆闆嗙兢鐨勫脊绐� - activeEquipment: null, //澶勭悊涓殑璁惧 - }; + activeEquipment: null //澶勭悊涓殑璁惧 + } }, methods: { async getCluster() { @@ -253,47 +204,47 @@ InputText: "", Page: 1, Size: 10000, - userId: JSON.parse(sessionStorage.getItem("userInfo")).id, - }); + userId: JSON.parse(sessionStorage.getItem("userInfo")).id + }) if (res && res.success) { res.data.list.forEach((item) => { this.clusterArr.push({ label: item.clusterName, - value: item.clusterId, - }); - }); + value: item.clusterId + }) + }) } }, // 璺冲埌璁惧璇︽儏 checkDetail(row) { if (row.isOnline != 1) { - return; + return } this.$router.push({ path: "/equipmentDetail", query: { - id: row.devId, - }, - }); + id: row.devId + } + }) }, // 璺冲埌绠楁硶璇︽儏 algorithmDetail(row) { if (row.isOnline != 1) { - return; + return } this.$router.push({ path: "/algorithmDetail", query: { - id: row.devId, - }, - }); + id: row.devId + } + }) }, // 鏌ヨ鍒楄〃 searchingBtn() { - let param = {}; + let param = {} if (!this.searchTime) { param = { @@ -302,8 +253,8 @@ startTime: "", endTime: "", clusterId: this.cluster, - inputText: this.inputText, - }; + inputText: this.inputText + } } else { param = { page: this.page, @@ -311,112 +262,109 @@ startTime: this.searchTime[0], endTime: this.searchTime[1], clusterId: this.cluster, - inputText: this.inputText, - }; + inputText: this.inputText + } } findDevList(param) .then((res) => { - this.dataList = res.data.list; + this.dataList = res.data.list //鏃堕棿鍒嗚鏄剧ず this.dataList.forEach((item) => { - item.installTime = item.installTime.split(" "); - item.firstUseTime = item.firstUseTime.split(" "); - }); - this.total = res.data.total; + item.installTime = item.installTime.split(" ") + item.firstUseTime = item.firstUseTime.split(" ") + }) + this.total = res.data.total if (res.data.total <= this.size) { - this.page = 1; + this.page = 1 } - bus.$emit("refleshNode", this.dataList); + bus.$emit("refleshNode", this.dataList) }) .catch((err) => { - console.log(err); - }); + console.log(err) + }) }, //鍒嗛〉鍔熻兘 handleSizeChange(size) { - this.size = size; - this.searchingBtn(); + this.size = size + this.searchingBtn() }, //鍒嗛〉鍔熻兘 refrash(page) { - this.page = page; - this.searchingBtn(); + this.page = page + this.searchingBtn() }, //瑙g粦鎸夐挳 Untying(row) { if (row.isOnline != 1) { - return; + return } - this.unbindId = row.devId; - this.isShowUnbind = true; + this.unbindId = row.devId + this.isShowUnbind = true }, //鑾峰緱榛樿鏃堕棿 getDateInit() { // 瑕佹眰 榛樿涓�涓湀 - const end = new Date(); - const start = new Date(); - const nowDate = new Date(); - nowDate.setHours(0); - nowDate.setMinutes(0); - nowDate.setSeconds(0); - nowDate.setMilliseconds(0); - start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30); - end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1); - return [ - this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), - this.$moment(end).format("YYYY-MM-DD HH:mm:ss"), - ]; + const end = new Date() + const start = new Date() + const nowDate = new Date() + nowDate.setHours(0) + nowDate.setMinutes(0) + nowDate.setSeconds(0) + nowDate.setMilliseconds(0) + start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30) + end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1) + return [this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss")] }, //鍏抽棴鏂板寮圭獥 closeAddBox() { - this.isShowAdd = false; - this.searchingBtn(); + this.isShowAdd = false + this.searchingBtn() }, // 鍏抽棴瑙g粦寮圭獥 closeUnbindBox() { - this.isShowUnbind = false; + this.isShowUnbind = false }, //瑙g粦鎴愬姛鍥炶皟 reflash() { - this.isShowUnbind = false; - this.searchingBtn(); + this.isShowUnbind = false + this.searchingBtn() }, clearSearch() { - this.searchTime = this.getDateInit(); - this.inputText = ""; - this.cluster = ""; - this.searchingBtn(); + this.searchTime = this.getDateInit() + this.inputText = "" + this.cluster = "" + this.searchingBtn() }, //閫�鍑洪泦缇� quitCluster(equipment) { if (equipment.isOnline != 1) { - return; + return } - this.activeEquipment = equipment; - this.showQuit = true; + this.activeEquipment = equipment + this.showQuit = true }, //鍔犲叆闆嗙兢 joinCluster(equipment) { if (equipment.isOnline != 1) { - return; + return } - this.activeEquipment = equipment; - this.showJoin = true; + this.activeEquipment = equipment + this.showJoin = true }, //瀵煎嚭鍒楄〃鏂囦欢 async exportFile() { - let param = {}; + let param = {} if (!this.searchTime) { param = { @@ -425,8 +373,8 @@ startTime: "", endTime: "", clusterId: this.cluster, - inputText: this.inputText, - }; + inputText: this.inputText + } } else { param = { page: this.page, @@ -434,38 +382,38 @@ startTime: this.searchTime[0], endTime: this.searchTime[1], clusterId: this.cluster, - inputText: this.inputText, - }; + inputText: this.inputText + } } - const result = await exportDevListExcel(param); + const result = await exportDevListExcel(param) var blob = new Blob([result.body.data], { - type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8", + type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" }), - Temp = document.createElement("a"); + Temp = document.createElement("a") - Temp.href = window.URL.createObjectURL(blob); + Temp.href = window.URL.createObjectURL(blob) - console.log(result); - console.log(result.fileName); + console.log(result) + console.log(result.fileName) - Temp.download = window.decodeURI(result.fileName); + Temp.download = window.decodeURI(result.fileName) - Temp.setAttribute("download", result.fileName); + Temp.setAttribute("download", result.fileName) - document.body.appendChild(Temp); + document.body.appendChild(Temp) - Temp.click(); + Temp.click() - document.body.removeChild(Temp); + document.body.removeChild(Temp) - window.URL.revokeObjectURL(Temp); - }, + window.URL.revokeObjectURL(Temp) + } }, mounted() { - this.searchingBtn(); - }, -}; + this.searchingBtn() + } +} </script> <style scoped lang="scss"> @@ -725,7 +673,7 @@ } </style> -<style > +<style> .el-date-table td.start-date span, .el-date-table td.end-date span { background-color: #0065ff; @@ -740,4 +688,4 @@ color: #0065ff; border-color: #0065ff; } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0