From 182aed85616f7ac60d0ffb02e4feac5661b80e0c Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 08 六月 2022 10:40:21 +0800
Subject: [PATCH] 修复初始化页面
---
src/pages/library/components/baseList.vue | 462 +++++++++++++++++++++++++--------------------------------
1 files changed, 204 insertions(+), 258 deletions(-)
diff --git a/src/pages/library/components/baseList.vue b/src/pages/library/components/baseList.vue
index d714f17..ef99051 100644
--- a/src/pages/library/components/baseList.vue
+++ b/src/pages/library/components/baseList.vue
@@ -1,140 +1,121 @@
<template>
- <div :style="listWidth?`width:${listWidth};`:''" class="out-div el-menu-vertical-demo">
+ <div :style="listWidth ? `width:${listWidth};` : ''" class="out-div el-menu-vertical-demo">
<el-collapse v-model="activeNames">
<el-collapse-item name="1" class="el-collapse-item__wrap">
<template slot="title">
- <span
- :class="title==='鍚屾搴�'?'iconfont iconshuaxintongbu':'iconfont iconwenjianjia'"
- style="font-size:18px;"
- ></span>
- <span class="ml5 f14">{{title}}</span>
- <i
- class="el-icon-circle-plus-outline ml10"
- style="font-size:20px;color:#3D68E1;"
- @click.stop="add('sync')"
- v-if="isShow('videoTable:edit')"
- ></i>
- <span
- class="ml5"
- style="font-size:14px;color:#3D68E1;"
- @click.stop="add('sync')"
- v-if="isShow('videoTable:edit')"
- >鏂板</span>
+ <img v-if="title === '鍚屾搴�'" src="/images/library/鍚屾搴�2.png" alt="" srcset="" />
+ <img v-else src="/images/library/鏈湴搴�2.png" alt="" srcset="" />
+ <span class="m5">{{ title }}</span>
+ <el-tooltip content="娣诲姞鍚屾搴�" placement="top">
+ <!-- popper-class="atooltip" -->
+ <span
+ class="iconfont icontianjiaku-09"
+ style="
+ font-size: 22px;
+ color: #666666;
+ position: absolute;
+ right: 10px;
+ "
+ @click.stop="add('sync')"
+ v-if="isShow('library:set')"
+ ></span>
+ </el-tooltip>
</template>
<div class="max-height">
<el-row
- class="p10 cursor-pointer"
- v-for="(item, index) in data"
+ class="p5 cursor-pointer"
+ v-for="(item, index) in syncTableList"
:key="item.id"
- @click.native="clickCategory(index, 'sync' ,item)"
- :class="{activeRow:categoryIndex=='sync' + index}"
+ @click.native="clickCategory(index, 'sync', item)"
+ :class="{ activeRow: categoryIndex == 'sync' + index }"
>
- <el-col :span="12" :class="item.bwType === '1'?'c-red':'c-green'">
- <p
- style="text-align:left;margin-left:10px"
- class="name-ellipsis"
- :title="item.tableName"
- >{{item.tableName}}</p>
+ <el-col :span="12" :class="item.bwType === '1' ? 'c-red' : 'c-green'">
+ <p style="text-align: left; margin-left: 5px" class="name-ellipsis" :title="item.tableName">
+ <span class="iconfont iconrenyuanku-09" v-if="item.tableType == 'person'"></span>
+ <span class="iconfont iconcheliangku-09" v-if="item.tableType == 'car'"></span>
+ <span style="font-size: 14px; font-weight: bold"> {{ item.tableName }}</span>
+ </p>
</el-col>
<el-col :span="10" :offset="1">
- <el-switch
- :active-value="1"
- :inactive-value="0"
- v-model="item.enable"
- size="small"
- style="margin-top:-7px"
- :disabled="isDisabled(item)"
- @change="enable(item)"
- >
- <!-- :disabled="isDisa(item)" -->
- </el-switch>
- <el-tooltip content="缂栬緫" placement="top" popper-class="atooltip">
- <span
- class="iconfont iconbianji iconStyle1"
- @click.stop="edit(item,'sync')"
- v-if="isShow('videoTable:edit')"
- ></span>
- </el-tooltip>
- <el-tooltip content="鍒犻櫎" placement="top" popper-class="atooltip">
- <span
- class="iconfont iconshanchu iconStyle1"
- style="color:#E74C3C;"
- v-if="isShow('videoTable:edit')"
- @click.stop="deleteBase(item.id)"
- ></span>
- </el-tooltip>
+ <div
+ class="status-dot"
+ :class="item.enable == 1 ? 'status-dot-active' : ''"
+ :style="item.enable == 1 ? { background: '#4E94FF' } : {}"
+ ></div>
</el-col>
<el-col
:span="24"
- class="tl ml10 f12"
- style="color:#888888"
- >{{item.startTime}}~{{item.endTime?item.endTime:'姘镐箙鏈夋晥'}}</el-col>
+ style="
+ text-align: left;
+ margin-left: 5px;
+ color: #888888;
+ font-size: 12px;
+ line-height: 17px;
+ "
+ >
+ <div class="time-start">{{ item.startTime }}~</div>
+ <div class="time-end">
+ {{ item.endTime ? item.endTime : "姘镐箙鏈夋晥" }}
+ </div>
+ </el-col>
</el-row>
</div>
</el-collapse-item>
<el-collapse-item name="2" class="el-collapse-item__wrap">
<template slot="title">
- <span class="iconfont iconwenjianjia" style="font-size:18px;"></span>
- <span class="ml5 f14">{{titleB}}</span>
- <i
- class="el-icon-circle-plus-outline ml10"
- style="font-size:20px;color:#3D68E1;"
- @click.stop="add('local')"
- v-if="isShow('videoTable:edit')"
- ></i>
- <span
- class="ml5"
- style="font-size:14px;color:#3D68E1;"
- @click.stop="add('local')"
- v-if="isShow('videoTable:edit')"
- >鏂板</span>
+ <img src="/images/library/鏈湴搴�2.png" alt="" srcset="" />
+ <span class="m5">{{ titleB }}</span>
+ <el-tooltip content="娣诲姞鍚屾搴�" placement="top">
+ <span
+ class="iconfont icontianjiaku-09"
+ style="
+ font-size: 22px;
+ color: #666666;
+ position: absolute;
+ right: 10px;
+ "
+ @click.stop="add('local')"
+ v-if="isShow('library:set')"
+ ></span>
+ </el-tooltip>
</template>
<div class="max-height">
<el-row
- class="p10 cursor-pointer"
- v-for="(item, index) in dataB"
+ class="p5 cursor-pointer"
+ v-for="(item, index) in localTableList"
:key="item.id"
- @click.native="clickCategory(index, 'local' ,item)"
- :class="{activeRow:categoryIndex=='local' + index}"
+ @click.native="clickCategory(index, 'local', item)"
+ :class="{ activeRow: categoryIndex == 'local' + index }"
>
- <el-col :span="12" :class="item.bwType === '1'?'c-red':'c-green'">
- <p
- style="text-align:left;margin-left:10px"
- class="name-ellipsis"
- :title="item.tableName"
- >{{item.tableName}}</p>
+ <el-col :span="12" :class="item.bwType === '1' ? 'c-red' : 'c-green'">
+ <p style="text-align: left; margin-left: 5px" class="name-ellipsis" :title="item.tableName">
+ <span class="iconfont iconrenyuanku-09" v-if="item.tableType == 'person'"></span>
+ <span class="iconfont iconcheliangku-09" v-if="item.tableType == 'car'"></span>
+ <span> {{ item.tableName }}</span>
+ </p>
</el-col>
<el-col :span="10" :offset="1">
- <el-switch
- :active-value="1"
- :inactive-value="0"
- v-model="item.enable"
- size="small"
- style="margin-top:-7px"
- :disabled="isDisabled(item)"
- @change="enable(item)"
- ></el-switch>
- <el-tooltip content="缂栬緫" placement="top" popper-class="atooltip">
- <span
- class="iconfont iconbianji iconStyle1"
- @click.stop="edit(item,'local')"
- v-if="isShow('videoTable:edit')"
- ></span>
- </el-tooltip>
- <el-tooltip content="鍒犻櫎" placement="top" popper-class="atooltip">
- <span
- class="iconfont iconshanchu iconStyle1"
- style="color:#E74C3C;"
- v-if="isShow('videoTable:edit')"
- @click.stop="deleteBase(item.id)"
- ></span>
- </el-tooltip>
+ <div
+ class="status-dot"
+ :class="item.enable == 1 ? 'status-dot-active' : ''"
+ :style="item.enable == 1 ? { background: '#4E94FF' } : {}"
+ ></div>
</el-col>
<el-col
:span="24"
- class="tl ml10 f12"
- style="color:#888888"
- >{{item.startTime}}~{{item.endTime?item.endTime:'姘镐箙鏈夋晥'}}</el-col>
+ style="
+ text-align: left;
+ margin-left: 5px;
+ color: #888888;
+ font-size: 12px;
+ line-height: 17px;
+ "
+ >
+ <div class="time-start">{{ item.startTime }}~</div>
+ <div class="time-end">
+ {{ item.endTime ? item.endTime : "姘镐箙鏈夋晥" }}
+ </div>
+ </el-col>
</el-row>
</div>
</el-collapse-item>
@@ -142,35 +123,26 @@
</div>
</template>
<script>
-// const data = [{ name: '鍚告瘨搴�', id: '1', time: '2019-01-01 12:00:00 ~ 2019-01-04 12:00:00' },
-// { name: '鍦ㄩ�冨簱', id: '2', time: '2019-01-01 12:00:00 ~ 2019-01-04 12:00:00' }, { name: '鍚告瘨搴�', id: '3', time: '2019-01-01 12:00:00 ~ 2019-01-04 12:00:00' },
-// { name: '鍦ㄩ�冨簱', id: '4', time: '2019-01-01 12:00:00 ~ 2019-01-04 12:00:00' }]
-import { updateDbTableStatus } from '@/api/baseLibrary'
+import { updateDbTableStatus } from "@/api/baseLibrary"
export default {
- name: 'baseList',
+ name: "baseList",
data() {
return {
- buttonAuthority: sessionStorage.getItem('buttonAuthoritys') || [],
- activeNames: ['1', '2'],
- categoryIndex: '',
- data: [],
- dataB: [],
+ buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
+ activeNames: ["1", "2"],
+ categoryIndex: "",
+ syncTableList: [],
+ localTableList: [],
clickBase: {} // 褰撳墠鐐瑰嚮鐨勫簳搴撳璞�
}
},
computed: {
- // eslint-disable-next-line vue/return-in-computed-property
isAdmin() {
- if (
- sessionStorage.getItem('userInfo') &&
- sessionStorage.getItem('userInfo') !== ''
- ) {
- let loginName = JSON.parse(sessionStorage.getItem('userInfo')).username
- return (
- loginName === 'superadmin' || loginName === 'basic'
- )
+ if (sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "") {
+ let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username
+ return loginName === "superadmin" || loginName === "basic"
}
- return false;
+ return false
}
},
mounted() {
@@ -178,117 +150,55 @@
},
methods: {
isShow(authority) {
- if (this.isAdmin) {
- return true
- } else if (
- this.buttonAuthority.indexOf(',' + authority + ',') > -1
- ) {
- return true
- } else {
- return false
- }
+ return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
},
- async init() {
- // console.log("鎵ц浜唅nit娌�")
+ async init(typ) {
await this.BaseManageData.querySyncTables()
- this.data = this.BaseManageData.syncTables
- this.defaultShow()
- await this.BaseManageData.queryLocalTables()
- this.dataB = this.BaseManageData.localTables
- this.defaultShow()
- },
- handleChange(val) {
- console.log(val)
- },
- async enable(item) {
- let res = await updateDbTableStatus({
- id: item.id,
- enable: item.enable
- })
- if (res.success === true) {
- this.$notify({
- type: 'success',
- message: '搴曞簱鎴愬姛鍙樻洿鐢熸晥鐘舵�侊紒'
- })
+ this.syncTableList = this.BaseManageData.syncTables
+ if (typ) {
+ this.clickLast(typ)
} else {
- this.$notify({
- type: 'error',
- message: '搴曞簱鍙樻洿鐢熸晥鐘舵�佸け璐ワ紒'
- })
+ this.defaultShow()
+ }
+ await this.BaseManageData.queryLocalTables()
+ this.localTableList = this.BaseManageData.localTables
+ if (typ) {
+ this.clickLast(typ)
+ } else {
+ this.defaultShow()
}
},
add(type) {
- this.$emit('changeShow', null, type)
+ this.$emit("changeShow", null, type)
},
- isDisabled(item) {
- var flag = true
- if (this.isShow('videoTable:edit')) {
- if (item.endTime == "") {
- flag = false
- } else {
- flag = !this.$moment(new Date()).isBetween(item.startTime, item.endTime)
- }
- }
- return flag
+ clickLast(type) {
+ // this.$nextTick(() => {
+
+ // });
+ this.clickCategory(this.syncTableList.length - 1, type, this.syncTableList[this.syncTableList.length - 1])
},
- clickCategory(index, type, item) { // 杩欓噷鎴戜滑浼犲叆涓�涓綋鍓嶅��
+ clickCategory(index, type, item) {
this.categoryIndex = type + index
// 璋冪敤鍒囨崲鍙充晶闈㈡澘鐨勫嚱鏁板苟涓斿垏鎹㈢埗缁勪欢涓璱sSelected鐨勫�艰鍙︿竴涓粍浠舵竻闄よ閫変腑鐘舵��
- // this.$emit('clearSelected')
this.clickBase = item
- this.$emit('getList', item)
- },
- edit(item, type) {
- this.$emit('changeShow', item, type)
- },
- deleteBase(id) {
- let token = sessionStorage.getItem('loginedInfo') && JSON.parse(sessionStorage.getItem('loginedInfo')).access_token
- this.$confirm('鎻愮ず锛氱‘瀹氬垹闄ゅ簳搴擄紵', {
- center: true,
- cancelButtonClass: 'comfirm-class-cancle',
- confirmButtonClass: 'comfirm-class-sure'
- }).then(() => {
- fetch(`/data/api-v/dbtable/deleteDBtablesById/${id}`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- 'Authorization': token
- }
- }).then(res => {
- return res.json()
- }).then(data => {
- console.log(data.data)
- if (data.success) {
- this.$notify({
- type: 'success',
- message: '搴曞簱鍒犻櫎鎴愬姛锛�'
- })
- }
- this.init()
- }).catch(err => {
- this.$notify({
- type: 'error',
- message: err
- })
- })
- })
+ this.$emit("getList", item, type)
+ console.log("clickCategory", item, type)
},
// 榛樿鏄剧ず绗竴涓簱鐨勬暟鎹�
defaultShow() {
- // console.log(this.data.length,'defaultShow')
- if (this.data !== undefined && this.data.length > 0) {
- this.clickCategory(0, 'sync', this.data[0])
+ if (this.syncTableList && this.syncTableList.length) {
+ this.clickCategory(0, "sync", this.syncTableList[0])
} else {
- if (this.dataB !== undefined && this.dataB.length > 0) {
- this.clickCategory(0, 'local', this.data[0])
+ if (this.localTableList && this.localTableList.length) {
+ this.clickCategory(0, "local", this.syncTableList[0])
}
}
},
// 娣诲姞鏃堕棿姣旇緝鍑芥暟
dateParse(dateString) {
- var SEPARATOR_BAR = '-'
- var SEPARATOR_SLASH = '/'
- var SEPARATOR_DOT = '.'
+ var SEPARATOR_BAR = "-"
+ var SEPARATOR_SLASH = "/"
+ var SEPARATOR_DOT = "."
var dateArray
if (dateString.indexOf(SEPARATOR_BAR) > -1) {
dateArray = dateString.split(SEPARATOR_BAR)
@@ -305,48 +215,19 @@
} else {
return false
}
- },
- dateCompare(dateString, compareDateString) {
- // dateString:褰撳墠鏃堕棿
- // compareDateString:闇�瑕佹瘮杈冪殑鏃堕棿
- if (this.isEmpty(dateString)) {
- // alert('dateString涓嶈兘涓虹┖')
- return
- }
- if (this.isEmpty(compareDateString)) {
- // alert('compareDateString涓嶈兘涓虹┖')
- return 1
- }
- var dateTime = this.dateParse(dateString).getTime()
- var compareDateTime = this.dateParse(compareDateString).getTime()
- if (compareDateTime > dateTime) {
- return 1
- } else if (compareDateTime === dateTime) {
- return 0
- } else {
- return -1
- }
- },
- // 宸︿晶搴曞簱鐢熸晥寮�鍏虫槸鍚﹀惎鐢ㄥ垽鏂�
- // isDisa(data) {
- // if (!this.isShow('videoTable:edit')) {
- // return true
- // } else {
- // return false
- // }
- // }
+ }
},
props: {
listWidth: {
- default: '300px',
+ default: "224px",
type: String
},
title: {
- default: '鍚屾搴�',
+ default: "鍚屾搴�",
type: String
},
titleB: {
- default: '鏈湴搴�',
+ default: "鏈湴搴�",
type: String
},
isSelected: {
@@ -354,7 +235,7 @@
type: Boolean
},
type: {
- default: '',
+ default: "",
type: String
}
}
@@ -366,14 +247,30 @@
margin-left: 15px;
cursor: pointer;
}
-.activeRow {
- background: rgb(245, 247, 250);
-}
+
.cursor-pointer {
cursor: pointer;
}
.max-height {
max-height: 350px;
+ .el-col-10 {
+ height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+ width: auto;
+ float: right;
+ margin-right: 10px;
+ }
+ .el-col-12 {
+ width: auto;
+ }
+ .status-dot {
+ background: #bbbbbb;
+ height: 8px;
+ width: 8px;
+ border-radius: 50%;
+ }
}
.c-red {
color: red;
@@ -384,9 +281,11 @@
font-size: 14px;
}
.out-div {
- overflow: hidden auto;
max-height: 100%;
- // max-height: 890px;
+ height: 100%;
+ .el-collapse-item__header {
+ position: relative;
+ }
.el-collapse-item__wrap {
will-change: height;
background-color: #fff;
@@ -395,6 +294,36 @@
box-sizing: border-box;
border-bottom: 0px solid #ebeef5;
}
+ .el-collapse-item__arrow {
+ display: none;
+ }
+ .el-row {
+ border-radius: 9px;
+ background: rgba(239, 241, 245, 0.35);
+ margin-bottom: 4px;
+ min-height: 72px;
+ box-sizing: border-box;
+ padding: 10px 5px;
+ }
+ .time-start {
+ display: inline-block;
+ }
+ .time-end {
+ display: inline-block;
+ }
+ .activeRow {
+ background: var(--colorCard);
+ color: #fff;
+ .time-start {
+ color: #e9e9e9;
+ }
+ .time-end {
+ color: #e9e9e9;
+ }
+ .status-dot-active {
+ background: #fff !important;
+ }
+ }
}
.name-ellipsis {
max-width: 160px;
@@ -402,5 +331,22 @@
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 auto;
+ display: flex;
+ align-items: center;
+ .iconfont {
+ font-size: 24px;
+ margin-right: 5px;
+ line-height: 28px;
+ }
+}
+.m5 {
+ margin-left: 10px;
+ font-weight: bold;
+ font-size: 16px;
+ color: #5f5f5f;
+ font-family: PingFang SC;
+}
+.p5 {
+ padding: 6px;
}
</style>
--
Gitblit v1.8.0