From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整
---
src/views/equipmentManagement/equipmentList/components/FormList.vue | 864 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 498 insertions(+), 366 deletions(-)
diff --git a/src/views/equipmentManagement/equipmentList/components/FormList.vue b/src/views/equipmentManagement/equipmentList/components/FormList.vue
index 347be27..0e97e60 100644
--- a/src/views/equipmentManagement/equipmentList/components/FormList.vue
+++ b/src/views/equipmentManagement/equipmentList/components/FormList.vue
@@ -3,6 +3,54 @@
<div class="search">
<div class="left">
<div class="id">
+ <div class="left-txt">璁惧鍚嶇О/ID</div>
+ <el-input class="id-input" v-model="inputText" placeholder="璇疯緭鍏ヨ澶囧悕绉�/ID"></el-input>
+ </div>
+
+ <div class="time">
+ <div class="left-txt">璁惧瀹夎鏃堕棿</div>
+
+ <el-date-picker
+ style="width: 380px"
+ v-model="searchTime"
+ @change="searchingBtn"
+ type="datetimerange"
+ size="small"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ :default-time="['00:00:00', '23:59:59']"
+ ></el-date-picker>
+ </div>
+
+ <div class="cluster">
+ <div class="left-txt">鎵�灞為泦缇�</div>
+ <div class="cluster-select">
+ <el-select style="width: 200px" v-model="cluster" placeholder="璇烽�夋嫨鎵�灞為泦缇�">
+ <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </div>
+ </div>
+ </div>
+ <div class="right">
+ <div class="button searchBtn" @click="searchingBtn">鎼滅储</div>
+ <div class="button resetBtn" @click="clearSearch">閲嶇疆</div>
+ </div>
+ </div>
+ <div class="line"></div>
+ <div class="btns">
+ <div class="button add" @click="isShowAdd = true">
+ <img src="@/assets/img/add.png" alt="" />
+ <div class="button-txt">娣诲姞璁惧</div>
+ </div>
+ <div class="button export" @click="exportFile">
+ <div class="iconfont"></div>
+ <div class="button-txt">瀵煎嚭</div>
+ </div>
+ </div>
+
+ <!-- <div class="left">
+ <div class="id">
璁惧鍚嶇О/ID
<el-input v-model="inputText" placeholder="璇疯緭鍏�"></el-input>
</div>
@@ -23,35 +71,28 @@
<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>
- </div>
+ </div> -->
- <div class="right">
- <div class="button searchBtn" @click="searchingBtn">鎼滅储</div>
- <div class="button resetBtn" @click="clearSearch">閲嶇疆</div>
- </div>
- </div>
+ <!-- <el-table-column label="棣栨浣跨敤鏃堕棿" min-width="159">
+ <template slot-scope="scope">
+ <div v-if="scope.row.firstUseTime.length > 1">
+ <div>{{ scope.row.firstUseTime[0] }}</div>
+ <div>{{ scope.row.firstUseTime[1] }}</div>
+ </div>
+ <div v-else>--</div>
+ </template>
+ </el-table-column> -->
- <div class="btns">
- <div class="button add" @click="isShowAdd = true">
- <span>+</span>娣诲姞璁惧
- </div>
- <div class="button export">
- <span class="iconfont"></span>瀵煎嚭
- </div>
- </div>
-
+ <!-- height="50"
+ -->
<div class="table-area">
<el-table
id="multipleTable"
+ :header-cell-style="{ height: '50px' }"
ref="multipleTable"
tooltip-effect="dark"
:data="dataList"
@@ -59,28 +100,12 @@
:default-sort="{ prop: 'createTime', order: 'descending' }"
:stripe="true"
>
- <el-table-column label="搴忓彿" width="48" class-name="index">
- <template slot-scope="scope">{{
- scope.$index + 1 + (page - 1) * size
- }}</template>
+ <el-table-column label="搴忓彿" width="80" class-name="index">
+ <template slot-scope="scope">{{ scope.$index + 1 + (page - 1) * size }}</template>
</el-table-column>
- <el-table-column
- prop="devId"
- label="璁惧ID"
- min-width="180"
- 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="210" 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">
@@ -90,18 +115,9 @@
<div v-else>--</div>
</template>
</el-table-column>
- <el-table-column label="棣栨浣跨敤鏃堕棿" min-width="159">
- <template slot-scope="scope">
- <div v-if="scope.row.firstUseTime.length > 1">
- <div>{{ scope.row.firstUseTime[0] }}</div>
- <div>{{ scope.row.firstUseTime[1] }}</div>
- </div>
- <div v-else>--</div>
- </template>
- </el-table-column>
<el-table-column label="鎵�灞為泦缇�" show-overflow-tooltip min-width="154">
- <template> -- </template>
+ <template slot-scope="scope"> {{ scope.row.clusterName }} </template>
</el-table-column>
<el-table-column label="鐘舵��" min-width="70">
@@ -113,34 +129,52 @@
<el-table-column label="鎿嶄綔" min-width="180">
<template slot-scope="scope">
- <!-- 鍔犲叆 -->
- <span class="iconfont option" @click="joinCluster(scope.row)"
- ></span
- >
- <!-- 閫�鍑� -->
- <span
- class="iconfont option"
- @click="quitCluster(scope.row)"
- v-if="false"
- ></span
- >
- <!-- 绠楁硶璇︽儏 -->
- <span class="iconfont option" @click="algorithmDetail(scope.row)"
- ></span
- >
- <!-- 璁惧璇︽儏 -->
- <span class="iconfont option" @click="checkDetail(scope.row)"
- ></span
- >
- <!-- 瑙ｇ粦 -->
- <span class="iconfont option" @click="Untying(scope.row)"
- ></span
- >
+ <el-tooltip content="鍔犲叆闆嗙兢" placement="top" v-if="!scope.row.clusterId">
+ <span
+ class="iconfont option"
+ @click="joinCluster(scope.row)"
+ :class="{ disable: scope.row.isOnline != 1 }"
+ ></span
+ >
+ </el-tooltip>
+
+ <el-tooltip content="閫�鍑洪泦缇�" placement="top" v-else>
+ <span
+ class="iconfont option"
+ @click="quitCluster(scope.row)"
+ :class="{ disable: scope.row.isOnline != 1 }"
+ ></span
+ >
+ </el-tooltip>
+
+ <el-tooltip content="搴旂敤璇︽儏" placement="top">
+ <span
+ class="iconfont option"
+ :class="{ disable: scope.row.isOnline != 1 }"
+ @click="algorithmDetail(scope.row)"
+ ></span
+ >
+ </el-tooltip>
+
+ <el-tooltip content="璁惧璇︽儏" placement="top">
+ <span
+ class="iconfont option"
+ :class="{ disable: scope.row.isOnline != 1 }"
+ @click="checkDetail(scope.row)"
+ ></span
+ >
+ </el-tooltip>
+
+ <el-tooltip content="瑙ｉ櫎缁戝畾" placement="top">
+ <span class="iconfont option" @click="Untying(scope.row)" :class="{ disable: scope.row.isOnline != 1 }"
+ ></span
+ >
+ </el-tooltip>
</template>
</el-table-column>
</el-table>
<div>
- <el-pagination
+ <!-- <el-pagination
@current-change="refrash"
@size-change="handleSizeChange"
:current-page="page"
@@ -149,56 +183,47 @@
:page-sizes="[5, 10, 15, 20, 25]"
:total="total"
background
- ></el-pagination>
+ ></el-pagination> -->
</div>
</div>
<!-- 瑙ｇ粦寮圭獥 -->
- <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 } 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 add from "@/assets/img/add.png"
+import bus from "@/plugin/bus"
+import "./FormList.scss"
export default {
components: {
AddBox,
UnbindBox,
QuitClusterBox,
- JoinClusterBox,
+ JoinClusterBox
+ },
+ created() {
+ this.getCluster()
},
data() {
return {
- searchTime: [
- this.$moment().format("YYYY-MM-DD 00:00:00"),
- this.$moment().format("YYYY-MM-DD HH:mm:ss"),
- ], //鎼滅储鏃堕棿
+ add,
+ searchTime: [], //鎼滅储鏃堕棿
page: 1,
size: 10, //鍒嗛〉鐩稿叧
inputText: "", //杈撳叆妗嗗唴瀹�
@@ -207,346 +232,438 @@
isShowAdd: false, //鏄惁灞曠ず鏂板寮圭獥
isShowUnbind: false, //鏄惁灞曠ず瑙ｇ粦寮圭獥
unbindId: "",
- clusterArr: [
- {
- value: 0,
- label: "闆嗙兢1",
- },
- {
- value: 1,
- label: "闆嗙兢2",
- },
- ], //鎵�灞為泦缇や笅鎷夋
+ clusterArr: [], //鎵�灞為泦缇や笅鎷夋
cluster: null, //閫変腑鐨勯泦缇ょ被鍨�
showQuit: false, //灞曠ず閫�鍑洪泦缇ょ殑寮圭獥
showJoin: false, //灞曠ず鍔犲叆闆嗙兢鐨勫脊绐�
- activeEquipment: null, //澶勭悊涓殑璁惧
- };
+ activeEquipment: null //澶勭悊涓殑璁惧
+ }
},
methods: {
+ async getCluster() {
+ const res = await findClustersBySearch({
+ InputText: "",
+ Page: 1,
+ Size: 10000,
+ 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
+ })
+ })
+ }
+ },
+
// 璺冲埌璁惧璇︽儏
checkDetail(row) {
+ if (row.isOnline != 1) {
+ return
+ }
this.$router.push({
path: "/equipmentDetail",
query: {
- id: row.devId,
- ip: row.devIp,
- port: row.serverPort,
- ndid: row.id,
- },
- });
+ id: row.devId
+ }
+ })
},
// 璺冲埌绠楁硶璇︽儏
algorithmDetail(row) {
+ if (row.isOnline != 1) {
+ return
+ }
this.$router.push({
path: "/algorithmDetail",
query: {
- id: row.devId,
- ip: row.devIp,
- port: row.serverPort,
- },
- });
+ id: row.devId
+ }
+ })
},
// 鏌ヨ鍒楄〃
searchingBtn() {
- let param = {
- page: this.page,
- size: this.size,
- // startTime: this.searchTime[0],
- // endTime: this.searchTime[1],
- inputText: this.inputText,
- };
+ let param = {}
+
+ if (!this.searchTime) {
+ param = {
+ page: this.page,
+ size: this.size,
+ startTime: "",
+ endTime: "",
+ clusterId: this.cluster,
+ inputText: this.inputText
+ }
+ } else {
+ param = {
+ page: this.page,
+ size: this.size,
+ startTime: this.searchTime[0],
+ endTime: this.searchTime[1],
+ clusterId: this.cluster,
+ 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)
})
.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()
},
//瑙ｇ粦鎸夐挳
Untying(row) {
- console.log(row);
- this.unbindId = row.id;
- this.isShowUnbind = true;
- /* this.$confirm(
- "瑙ｇ粦鍚庤璁惧灏嗕粠璁惧鍒楄〃涓Щ闄わ紝鏄惁纭鎿嶄綔?",
- "瑙ｇ粦鎻愮ず",
- {
- type: "warning",
- center: true,
- }
- )
- .then(() => {
- unbind({ ids: [row.id] })
- .then(() => {
- this.$notify({
- type: "success",
- message: "瑙ｇ粦鎴愬姛",
- duration: 2500,
- offset: 57,
- });
- this.searchingBtn();
- })
- .catch(() => {
- this.$notify({
- type: "error",
- message: "瑙ｇ粦澶辫触锛岃鑱旂郴瀹㈡湇",
- duration: 2500,
- offset: 57,
- });
- });
- })
- .catch((e) => {
- console.log(e);
- }); */
+ if (row.isOnline != 1) {
+ return
+ }
+ 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.isShowAdd = false
+ this.searchingBtn()
},
// 鍏抽棴瑙ｇ粦寮圭獥
closeUnbindBox() {
- this.isShowUnbind = false;
+ this.isShowUnbind = false
},
//瑙ｇ粦鎴愬姛鍥炶皟
reflash() {
- this.isShowUnbind = false;
- this.searchingBtn();
+ this.isShowUnbind = false
+ this.searchingBtn()
},
clearSearch() {
- this.searchTime = this.getDateInit();
- this.inputText = "";
- this.searchingBtn();
+ this.searchTime = this.getDateInit()
+ this.inputText = ""
+ this.cluster = ""
+ this.searchingBtn()
},
//閫�鍑洪泦缇�
quitCluster(equipment) {
- this.activeEquipment = equipment;
- this.showQuit = true;
+ if (equipment.isOnline != 1) {
+ return
+ }
+ this.activeEquipment = equipment
+ this.showQuit = true
},
//鍔犲叆闆嗙兢
joinCluster(equipment) {
- this.activeEquipment = equipment;
- this.showJoin = true;
+ if (equipment.isOnline != 1) {
+ return
+ }
+ this.activeEquipment = equipment
+ this.showJoin = true
},
+
+ //瀵煎嚭鍒楄〃鏂囦欢
+ async exportFile() {
+ let param = {}
+
+ if (!this.searchTime) {
+ param = {
+ page: this.page,
+ size: this.size,
+ startTime: "",
+ endTime: "",
+ clusterId: this.cluster,
+ inputText: this.inputText
+ }
+ } else {
+ param = {
+ page: this.page,
+ size: this.size,
+ startTime: this.searchTime[0],
+ endTime: this.searchTime[1],
+ clusterId: this.cluster,
+ inputText: this.inputText
+ }
+ }
+ const result = await exportDevListExcel(param)
+
+ var blob = new Blob([result.body.data], {
+ type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
+ }),
+ Temp = document.createElement("a")
+
+ Temp.href = window.URL.createObjectURL(blob)
+ Temp.download = window.decodeURI(result.fileName)
+
+ Temp.setAttribute("download", result.fileName)
+
+ document.body.appendChild(Temp)
+
+ Temp.click()
+
+ document.body.removeChild(Temp)
+
+ window.URL.revokeObjectURL(Temp)
+ }
},
mounted() {
- this.searchTime = this.getDateInit();
- this.searchingBtn();
- },
-};
+ this.searchingBtn()
+ }
+}
</script>
<style scoped lang="scss">
.FormList {
+ // width: 100%;
+ min-width: 1280px;
+ // padding: 0 24px;
+ // background: #36b24a;
+ background-color: #1f2a3e;
+ border-radius: 18px;
+ // background: #34405a;
.search {
+ // margin-bottom: ;
display: flex;
justify-content: space-between;
- padding: 60px 0 30px 0;
- font-size: 14px;
- border-bottom: 1px solid #e9ebee;
-
- .left,
- .right,
- .id,
- .time,
- .cluster {
+ padding: 24px;
+ .left {
display: flex;
align-items: center;
- }
+ .left-txt {
+ // height: 20px;
+ white-space: nowrap;
+ font-family: PingFang SC Regular;
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 20px;
+ letter-spacing: 0px;
+ color: #ffffff;
+ margin-right: 16px;
+ }
+ .id,
+ .time,
+ .cluster {
+ display: flex;
+ align-items: center;
+ padding-right: 24px;
+ }
+ .id ::v-deep .el-input .el-input__inner {
+ width: 150px;
+ height: 32px;
+ border-radius: 3px;
+ background: rgb(0, 0, 0, 0.2) !important;
+ }
+ .cluster::v-deep .el-input {
+ width: 250px;
+ height: 32px;
+ // margin-left: 10px;
+ // margin-right: 20px;
- .id .el-input ::v-deep {
- width: 180px;
- }
+ input {
+ border-radius: 1px;
+ &::-webkit-input-placeholder {
+ color: #999;
+ }
- .cluster::v-deep .el-input {
- width: 156px;
- height: 40px;
- margin-left: 10px;
- margin-right: 20px;
-
- input {
- border-radius: 0;
- &::-webkit-input-placeholder {
- color: #999;
+ // &:focus {
+ // border-color: #0065ff;
+ // }
}
+ }
+ .cluster {
+ // .cluster-select {
+ // width: 150px;
+ // }
+ .el-select {
+ width: 150px;
+ .el-input .el-input--suffix {
+ width: 150px !important;
+ // border-radius: 3px;
+ }
+ // height: 32px;
+ // line-height: 32px;
- &:focus {
- border-color: #0065ff;
+ // ::v-deep input {
+ // height: 32px;
+ // }
+ // el-select__caret el-input__icon el-icon-arrow-up
+ ::v-deep .el-input__icon {
+ line-height: 28px !important;
+ }
}
}
}
-
- .el-input ::v-deep {
- width: 280px;
- height: 40px;
- margin-left: 10px;
- margin-right: 20px;
-
- input {
- border-radius: 0;
- &::-webkit-input-placeholder {
- color: #999;
- }
-
- &:focus {
- border-color: #0065ff;
- }
+ .right {
+ display: flex;
+ align-items: center;
+ .button {
+ font-family: PingFang SC Regular;
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 32px;
+ letter-spacing: 0px;
+ padding: 0 16px;
+ border-radius: 3px;
+ margin: 0 4px;
}
- }
-
- .el-date-editor {
- width: 318px;
- height: 40px;
- margin-left: 10px;
- margin-right: 20px;
- border-radius: 0;
-
- &::-webkit-input-placeholder {
- color: #999;
+ .searchBtn {
+ background: #0082bc;
+ color: #ffffff;
}
-
- &.is-active {
- border-color: #0065ff;
+ .resetBtn {
+ border: 1px solid #0082bc;
+ color: #0082bc;
}
- }
-
- .searchBtn {
- width: 120px;
- height: 40px;
- line-height: 40px;
- text-align: center;
- color: #fff;
- background: #0065ff;
- margin-right: 20px;
- }
-
- .resetBtn {
- width: 120px;
- height: 40px;
- line-height: 40px;
- text-align: center;
- color: #0065ff;
- border: 1px solid #0065ff;
}
}
-
+ .line {
+ border: 1px solid #ffffff;
+ opacity: 0.2;
+ margin: 0 24px;
+ }
.btns {
+ padding: 24px 24px;
display: flex;
- margin: 30px 0;
- text-align: center;
- line-height: 40px;
+ justify-content: flex-start;
+ .button {
+ padding: 0 16px;
+ margin: 0 4px;
- .add {
- margin-right: 20px;
- width: 140px;
- height: 40px;
- background: #0065ff;
- color: #fff;
- span {
- margin-right: 10px;
- font-weight: 700;
- font-size: 18px;
+ border-radius: 3px;
+ font-family: PingFang SC Regular;
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 32px;
+ letter-spacing: 0px;
+ display: flex;
+ align-items: center;
+ .button-txt {
+ margin-left: 10px;
+ }
+ .iconfont {
+ // width: 12px;
+ // height: 12px;
+ // line-height: 12px;
+ font-size: 16px;
}
}
-
+ .add {
+ background: #0082bc;
+ color: #ffffff;
+ }
.export {
- width: 140px;
- height: 40px;
- border: 1px solid #0065ff;
- color: #0065ff;
-
- span {
- margin-right: 10px;
- font-size: 18px;
- }
+ border: 1px solid #0082bc;
+ color: #0082bc;
}
}
+ .table-area {
+ // min-height: 600px;
+ padding: 0 24px 24px;
+ }
+ .table-area >>> .el-table__row > td {
+ border: none !important;
+ }
+ .el-table::before {
+ height: 0; //琛ㄦ牸鐨勭嚎
+ }
+ // .el-table,
.el-table ::v-deep {
- background-color: rgb(233, 235, 238);
+ // background-color: rgb(233, 235, 238);
padding: 1px;
+ // .el-table__expanded-cell {
+ // background-color: transparent !important;
+ // }
+ // .el-table__header {
+ // background: rgba(255, 255, 255, 0.18) !important;
+ // }
- &::after {
- display: none;
- }
+ // .el-table th,
+ // .el-table tr {
+ // background-color: transparent !important;
+ // }
- td.index .cell {
- padding-left: 16px;
- padding-right: 4px;
- }
+ // .el-table tr
+ // &::after {
+ // display: none;
+ // }
+
+ // td.index .cell {
+ // padding-left: 16px;
+ // padding-right: 4px;
+ // }
.has-gutter tr th {
- background: #f0f3f5;
+ // background: #f0f3f5;
font-size: 16px;
- color: #3d3d3d;
+ color: #ffffff;
font-weight: 700;
+
+ font-family: PingFangSC-Bold;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 20px;
+ letter-spacing: 0px;
}
- td .cell {
- color: #3d3d3d;
- }
+ // td .cell {
+ // color: #3d3d3d;
+ // }
tr:hover > td.el-table__cell {
- background-color: #fff;
+ background: rgba(255, 255, 255, 0.08) !important;
}
- .el-table__row--striped .el-table__cell {
- background-color: #f0f5fa !important;
+ .el-table__row .el-table__cell {
+ background-color: transparent !important;
}
- tr:hover > td.el-table__cell {
- background-color: #fff;
- }
+ // tr:hover > td.el-table__cell {
+ // // background-color: #fff;
+ // }
.el-table__row--striped .el-table__cell {
- background-color: #f0f5fa !important;
+ background-color: transparent !important;
}
.status {
@@ -560,55 +677,70 @@
.option {
margin-right: 10px;
font-size: 24px;
- color: rgb(0, 101, 255);
+ color: #0082bc;
cursor: pointer;
- }
- }
- .el-pagination ::v-deep {
- margin-top: 30px;
- text-align: center;
- height: 24px;
- .el-pagination__sizes {
- margin-right: 0;
- }
-
- button {
- margin: 0;
- background-color: #fff;
- border: 1px solid #c0c5cc;
- border-radius: 2px;
- }
-
- .number {
- background-color: #fff;
-
- &:not(.disabled):hover {
- color: #0065ff;
- }
-
- &:not(.disabled).active {
- background-color: #0065ff;
- color: #fff;
- }
- }
-
- .el-input .el-input__inner {
- padding-left: 0;
-
- &:hover,
- &:focus {
- border-color: #0065ff;
+ &.disable {
+ color: #666;
+ cursor: default;
}
}
}
+
+ // .el-pagination ::v-deep {
+ // margin-top: 30px;
+ // text-align: right;
+ // height: 24px;
+ // .el-pagination__sizes {
+ // margin-right: 0;
+ // }
+
+ // button {
+ // margin: 0;
+ // // background-color: #fff;
+ // border: 1px solid #c0c5cc;
+ // border-radius: 2px;
+ // }
+
+ // .number {
+ // // background-color: #fff;
+
+ // &:not(.disabled):hover {
+ // color: #0065ff;
+ // }
+
+ // &:not(.disabled).active {
+ // // background-color: #0065ff;
+ // color: #fff;
+ // }
+ // }
+
+ // .el-input .el-input__inner {
+ // padding-left: 0;
+
+ // &:hover,
+ // &:focus {
+ // border-color: #0065ff;
+ // }
+ // }
+
+ // .el-pagination__jump {
+ // margin-left: 12px;
+ // .el-pagination__editor {
+ // width: 37px;
+ // input {
+ // width: 32px;
+ // }
+ // }
+ // }
+ // }
}
</style>
-<style >
+<style>
.el-date-table td.start-date span,
.el-date-table td.end-date span {
- background-color: #0065ff;
+ /* background-color: #0065ff; */
}
.el-button--text span {
@@ -620,4 +752,4 @@
color: #0065ff;
border-color: #0065ff;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0