From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug
---
src/pages/library/index/App.vue | 339 ++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 231 insertions(+), 108 deletions(-)
diff --git a/src/pages/library/index/App.vue b/src/pages/library/index/App.vue
index 3bb206e..e6a0954 100644
--- a/src/pages/library/index/App.vue
+++ b/src/pages/library/index/App.vue
@@ -1,171 +1,294 @@
<template>
<div class="s-base-manage">
- <div class="flex-box base-overflow" >
- <div class="pl20 data-left-box">
- <base-list
- ref="baseSync"
- :listWidth="`100%`"
- :title="`鍚屾搴揱"
- type="sync"
- :isSelected="isSelected"
- @getList="getPersonList"
- @changeShow="changeToAdd"
- ></base-list>
+ <div class="flex-box base-overflow">
+ <div class="data-left-box">
+ <div class="resize-bar"></div>
+ <!-- <div class="resize-line"></div> -->
+ <div class="resize-save">
+ <baseList
+ ref="baseSync"
+ :title="`鍚屾搴揱"
+ type="sync"
+ :isSelected="isSelected"
+ @getList="getPersonList"
+ @changeShow="changeToAdd"
+ ></baseList>
+ </div>
</div>
<div class="bg-white ml20 data-right-box">
- <div v-show="showList">
- <person-list ref="personList" :baseObject="baseObject" v-show="showType == 'person'"></person-list>
- <car-list ref="carList" :baseObject="baseObject" v-show="showType == 'car'"></car-list>
+ <div v-show="showList" style="height: 100%">
+ <person-list
+ ref="personList"
+ :baseObject="baseObject"
+ @changeShow="changeToAdd"
+ @onDelete="initBaseList"
+ :syncType="syncType"
+ v-show="showType == 'person'"
+ ></person-list>
+ <car-list
+ ref="carList"
+ :baseObject="baseObject"
+ @changeShow="changeToAdd"
+ @onDelete="initBaseList"
+ :syncType="syncType"
+ v-show="showType == 'car'"
+ ></car-list>
</div>
- <add-base
+ <addBase
ref="addBase"
:baseObject="baseForEdit"
:type="syncType"
- v-show="!showList"
+ v-if="!showList"
@refresh="findBaseSync"
@closeAdd="closeAdd"
- ></add-base>
+ ></addBase>
</div>
</div>
</div>
</template>
<script>
-import baseList from '../components/baseList'
-import addBase from '../components/addBase'
-import personList from '../components/personList'
-import carList from '../components/carList'
+import baseList from "../components/baseList";
+import addBase from "../components/addBase";
+import personList from "../components/personList";
+import carList from "../components/carList";
+const colorRgb = function (s) {
+ var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+ var color = s.toLowerCase();
+ if (reg.test(color)) {
+ if (color.length === 4) {
+ var colorNew = "#";
+ for (var i = 1; i < 4; i += 1) {
+ colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
+ }
+ color = colorNew;
+ }
+ var colorChange = [];
+ for (var i = 1; i < 7; i += 2) {
+ colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
+ }
+ return "" + colorChange.join(",") + "";
+ } else {
+ return color;
+ }
+};
export default {
data() {
return {
isSelected: false,
showList: true,
- showType: 'person',
- syncType: 'sync',
+ showType: "person",
+ syncType: "sync",
syncTables: [],
localTables: [],
baseObject: {},
baseForEdit: {}, // 缁欑紪杈戦〉闈紶鐨�
breeadCrumb: [
{
- name: '搴曞簱绠＄悊',
- path: '/baseManage',
- params: {}
+ name: "搴曞簱绠＄悊",
+ path: "/baseManage",
+ params: {},
},
{
- name: '搴曞簱璇︽儏',
- path: '/baseManage',
- params: {}
- }
- ]
- }
+ name: "搴曞簱璇︽儏",
+ path: "/baseManage",
+ params: {},
+ },
+ ],
+ };
},
methods: {
- clearSelect1() {
- this.$refs.baseLocal.categoryIndex = -1
- },
- clearSelect2() {
- this.$refs.baseSync.categoryIndex = -1
- },
- getPersonList(item) {
- console.log('浼犵粰鐖剁粍浠剁殑鍊�', item)
- this.baseObject = item
+ getPersonList(item, type) {
+ console.log(123);
+ console.log(item);
+ console.log(type);
+
+ if (item) {
+ this.baseObject = item;
+ this.baseForEdit = item;
+ this.syncType = type;
+ }
+
// 鐩存帴璋冪敤瀛愮粍浠跺埛鏂板垪琛ㄧ殑鏂规硶
// 鍒ゆ柇杩欐槸浜哄憳搴撹繕鏄溅杈嗗簱锛屽喅瀹歴howList鐨勫��
- if (item.tableType == "person") {
- console.log("person搴�")
- this.showType = 'person'
- this.$refs.personList.getPersonList()
- } else if (item.tableType == "car") {
- console.log("car搴�")
- this.showType = "car"
- this.$refs.carList.getCarList()
- }
- //this.showList = '1'
- this.breeadCrumb[1].name = '搴曞簱璇︽儏'
+ this.$nextTick(() => {
+ if (this.baseObject.tableType == "person") {
+ this.showType = "person";
+ this.$refs.personList.getPersonList();
+ } else if (this.baseObject.tableType == "car") {
+ this.showType = "car";
+ this.$refs.carList.getCarList();
+ }
+ });
+ this.breeadCrumb[1].name = "搴曞簱璇︽儏";
},
changeToAdd(item, type) {
if (item !== null) {
- this.baseForEdit = item
- this.breeadCrumb[1].name = '搴曞簱淇℃伅'
+ this.baseForEdit = item;
+ this.breeadCrumb[1].name = "搴曞簱淇℃伅";
} else {
- this.baseForEdit = {}
- this.breeadCrumb[1].name = '娣诲姞搴曞簱'
+ this.baseForEdit = {};
+ this.breeadCrumb[1].name = "娣诲姞搴曞簱";
}
- this.syncType = type
- this.showList = false
+ this.syncType = type;
+ this.showList = false;
+ },
+ initBaseList() {
+ this.$refs.baseSync.init();
+ this.BaseManageData.queryTagList();
},
// 鏌ヨ鍚屾搴撳垪琛ㄦ暟鎹甛鏌ヨ鏈湴搴撳垪琛ㄦ暟鎹�
findBaseSync() {
- this.BaseManageData.querySyncTables()
- this.BaseManageData.queryLocalTables()
+ this.BaseManageData.querySyncTables();
+ this.BaseManageData.queryLocalTables();
+ this.BaseManageData.queryTagList();
},
closeAdd() {
- console.log('closeAdd')
- this.showList = true
- }
+ this.showList = true;
+ this.$refs.baseSync.init(this.syncType);
+ },
},
props: {
cameraId: {
- default: '',
- type: String
- }
+ default: "",
+ type: String,
+ },
},
components: {
baseList,
addBase,
personList,
- carList
+ carList,
},
mounted() {
- //this.TreeDataPool.showTreeBox = false
- }
-}
+ window.addEventListener("message", (e) => {
+ if (e.data.msg === "changeColor") {
+ const res = colorRgb(e.data.color);
+ document.documentElement.style.setProperty(
+ "--colorCard",
+ `${e.data.color}`
+ );
+ }
+ });
+ },
+ created() {
+ let color = localStorage.getItem("--colorCard");
+ if (color) {
+ document.documentElement.style.setProperty("--colorCard", `${color}`);
+ } else {
+ color = getComputedStyle(document.documentElement).getPropertyValue(
+ "--colorCard"
+ );
+ const res = colorRgb(color);
+ document.documentElement.style.setProperty("--colorCard-rgb", `${res}`);
+ }
+ },
+};
</script>
-<style lang="scss" scoped>
+<style lang="scss">
.s-base-manage {
box-sizing: border-box;
- background-color: #e9ebf2;
- min-width: 1315px;
-}
-.base-overflow {
- overflow: visible !important;
- background-color: #ffffff;
- box-sizing: border-box;
- // padding: 20px 10px 0 10px;
-}
-.s-data-manage-breadcrumb {
- margin: 0 3px;
- height: 5%;
- -webkit-box-sizing: border-box;
- border: 1px solid #e4e7ed;
- -webkit-box-shadow: #e4e7ed 0px 0px 9px inset;
- box-shadow: #e4e7ed 0px 0px 9px inset;
- border-radius: 5px;
-}
-.data-left-box {
- @media screen and (max-width: 1440px) {
- width: 23%;
+ background-color: #eff1f5;
+ border-top: 1px solid #f1f3f6;
+
+ height: 100%;
+ .el-table {
+ .cell:empty::before {
+ content: "--";
+ color: #ccc;
+ }
+ .is-leaf {
+ .cell:empty::before {
+ content: "--";
+ color: #ccc;
+ }
+ }
}
- @media screen and (min-width: 1440px) and (max-width: 1640px) {
- width: 21%;
+ .el-collapse {
+ border: none;
}
- @media screen and (min-width: 1640px) {
- width: 20%;
+ .flex-box {
+ display: flex;
}
- box-sizing: border-box;
- border-right: 1px solid #e0e0e0;
-}
-.data-right-box {
- @media screen and (max-width: 1440px) {
- width: 77%;
+ .base-overflow {
+ height: 100%;
+ background-color: #eff1f5;
+ box-sizing: border-box;
}
- @media screen and (min-width: 1440px) and (max-width: 1640px) {
- width: 79%;
+ .s-data-manage-breadcrumb {
+ margin: 0 3px;
+ height: 5%;
+ box-sizing: border-box;
+ border: 1px solid #e4e7ed;
+ box-shadow: #e4e7ed 0px 0px 9px inset;
+ border-radius: 5px;
}
- @media screen and (min-width: 1640px) {
- width: 80%;
+ .data-left-box {
+ height: 100vh;
+ position: relative;
+ background: #fff;
+ box-sizing: border-box;
}
- padding: 5px 20px 5px 5px;
- box-sizing: border-box;
+ .resize-save {
+ position: absolute;
+ top: 0;
+ right: 5px;
+ bottom: 0;
+ left: 0;
+ padding: 14px 10px;
+ overflow-x: hidden;
+ }
+ .resize-bar {
+ width: 244px;
+ height: inherit;
+ resize: horizontal;
+ cursor: ew-resize;
+ opacity: 0;
+ overflow: scroll;
+ max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴�
+ min-width: 33px; //璁惧畾鏈�灏忓搴�
+ }
+ /* 鎷栨嫿绾� */
+ .resize-line {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border-right: 2px solid #efefef;
+ border-left: 1px solid #e0e0e0;
+ pointer-events: none;
+ }
+ .resize-bar:hover ~ .resize-line,
+ .resize-bar:active ~ .resize-line {
+ border-left: 1px dashed skyblue;
+ }
+ .resize-bar::-webkit-scrollbar {
+ width: 200px;
+ height: inherit;
+ }
+
+ /* Firefox鍙湁涓嬮潰涓�灏忓潡鍖哄煙鍙互鎷変几 */
+ @supports (-moz-user-select: none) {
+ .resize-bar:hover ~ .resize-line,
+ .resize-bar:active ~ .resize-line {
+ border-left: 1px solid #bbb;
+ }
+ .resize-bar:hover ~ .resize-line::after,
+ .resize-bar:active ~ .resize-line::after {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ bottom: 0;
+ right: -8px;
+ background-size: 100% 100%;
+ }
+ }
+ .data-right-box {
+ height: calc(100%);
+ overflow-y: auto;
+ flex: 1;
+ padding: 20px;
+ box-sizing: border-box;
+ }
}
</style>
--
Gitblit v1.8.0