| | |
| | | <div class="resize-bar"></div> |
| | | <!-- <div class="resize-line"></div> --> |
| | | <div class="resize-save"> |
| | | <base-list |
| | | <baseList |
| | | ref="baseSync" |
| | | :title="`同步库`" |
| | | type="sync" |
| | | :isSelected="isSelected" |
| | | @getList="getPersonList" |
| | | @changeShow="changeToAdd" |
| | | ></base-list> |
| | | ></baseList> |
| | | </div> |
| | | </div> |
| | | <div class="bg-white ml20 data-right-box"> |
| | | <div v-show="showList" style="height: 100%;"> |
| | | <div v-show="showList" style="height: 100%"> |
| | | <person-list |
| | | ref="personList" |
| | | :baseObject="baseObject" |
| | |
| | | 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 { |
| | |
| | | { |
| | | name: "底库管理", |
| | | path: "/baseManage", |
| | | params: {}, |
| | | params: {} |
| | | }, |
| | | { |
| | | name: "底库详情", |
| | | path: "/baseManage", |
| | | params: {}, |
| | | }, |
| | | ], |
| | | }; |
| | | params: {} |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | methods: { |
| | | getPersonList(item,type) { |
| | | this.baseObject = item; |
| | | this.baseForEdit = item; |
| | | this.syncType = type |
| | | getPersonList(item, type) { |
| | | this.baseObject = item |
| | | this.baseForEdit = item |
| | | this.syncType = type |
| | | |
| | | // 直接调用子组件刷新列表的方法 |
| | | // 判断这是人员库还是车辆库,决定showList的值 |
| | | if (item.tableType == "person") { |
| | | this.showType = "person"; |
| | | this.$refs.personList.getPersonList(); |
| | | } else if (item.tableType == "car") { |
| | | this.showType = "car"; |
| | | this.$refs.carList.getCarList(); |
| | | } |
| | | this.breeadCrumb[1].name = "底库详情"; |
| | | this.$nextTick(() => { |
| | | if (item.tableType == "person") { |
| | | this.showType = "person" |
| | | this.$refs.personList.getPersonList() |
| | | } else if (item.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(){ |
| | | 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() { |
| | | this.showList = true; |
| | | }, |
| | | this.showList = true |
| | | this.$refs.baseSync.init(this.syncType) |
| | | } |
| | | }, |
| | | props: { |
| | | cameraId: { |
| | | default: "", |
| | | type: String, |
| | | }, |
| | | type: String |
| | | } |
| | | }, |
| | | components: { |
| | | baseList, |
| | | addBase, |
| | | personList, |
| | | carList, |
| | | carList |
| | | }, |
| | | mounted() { |
| | | window.addEventListener("message", (e) => { |
| | | if (e.data.msg === "changeColor") { |
| | | document.documentElement.style.setProperty( |
| | | "--colorCard", |
| | | `${e.data.color}` |
| | | ); |
| | | const res = colorRgb(e.data.color) |
| | | document.documentElement.style.setProperty("--colorCard", `${e.data.color}`) |
| | | } |
| | | }); |
| | | }) |
| | | }, |
| | | created() { |
| | | const color = localStorage.getItem("--colorCard"); |
| | | let color = localStorage.getItem("--colorCard") |
| | | if (color) { |
| | | document.documentElement.style.setProperty("--colorCard", `${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" > |
| | | <style lang="scss"> |
| | | .s-base-manage { |
| | | box-sizing: border-box; |
| | | background-color: #e9ebf2; |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | .el-collapse { |
| | | border: none; |
| | | } |