| public/images/settings/cloud.png | 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/ai/index/App.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/desktop/index/App.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/desktop/index/components/ToolsEntry.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/searchForCluster/index/App.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/searchForCluster/index/Searching.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/searchForCluster/index/main.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/searchForCluster/index/mixins.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/settings/components/CloudNode.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
public/images/settings/cloud.pngsrc/pages/ai/index/App.vue
@@ -23,25 +23,35 @@ <div class="width-new-line task-list" v-show="activeName === 'myAlgorithm'"> <p class="src-title">算法软件</p> <div class="flex-list"> <div class="wrap-box" v-for="item in ungradeList" :key="item.id"> <div class="wrap-box" v-for="item in ungradeList" :key="'upgrade'+item.id"> <div class="list-choose-item-left"> <div class="mask flex-center"> <div class="info-onmask"> <div>当前版本:{{item.version}}</div> <div>最新版本:{{item.remoteVersion}}</div> </div> <el-button type="primary" class="bot-btn" @click="donwload(item)">升级</el-button> </div> <div class="list-complete-item-handle"> <div class="svg-wrap"> <div class="svg-wrap" :class="{willUpGrade:item.isUpgrade}"> <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> <div class="mask"> <div class="info-onmask"> <div>当前版本:{{item.version}}</div> <div>最新版本:{{item.remoteVersion}}</div> </div> <div class="mask-btn"> <el-button type="warning" class="bot-btn" size="small" @click="donwload(item)" >升级</el-button> </div> </div> <!-- <div class="list-complete-item-handle"> --> <!-- <div class="svg-wrap" :class="{willUpGrade:item.isUpgrade}"> --> <img v-if="item.iconBlob" class="baseImg" :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" alt /> <img v-else class="baseImg" :src="item.icon" alt=""> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> <div style="padding:0px 10px 0px 10px;"> @@ -66,7 +76,7 @@ :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" alt /> <img v-else class="baseImg" :src="item.icon" alt=""> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> <div style="padding:0px 10px 0px 10px;"> @@ -105,7 +115,7 @@ :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" alt /> <img v-else class="baseImg" :src="item.icon" alt=""> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> <div style="padding:0px 10px 0px 10px;"> @@ -123,17 +133,33 @@ <div class="list-complete-item-handle"> <div class="svg-wrap" v-loading="item.unloadLoading" element-loading-text="卸载中" :class="{willUpGrade:item.isUpgrade}" v-loading="item.unloadLoading||item.upgradeLoading" :element-loading-text="item.unloadLoading?'卸载中':'升级中'" element-loading-background="rgba(0,0,0,.8)" > <div class="mask" v-if="!item.isDefault"> <el-button v-if="!item.isDefault" @click="unLoad(item)" type="primary" class="bot-btn" >卸载</el-button> <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> <div class="mask" v-if="!item.isDefault || item.isUpgrade"> <div class="info-onmask"> <div>当前版本:{{item.version}}</div> <div v-if="item.remoteVersion">最新版本:{{item.remoteVersion}}</div> </div> <div class="mask-btn"> <el-button v-if="!item.isDefault" @click="unLoad(item)" type="primary" size="small" class="bot-btn" >卸载</el-button> <el-button v-if="item.isUpgrade" @click="downloadApp(item,'upgrade')" type="warning" size="small" class="bot-btn" >升级</el-button> </div> </div> <img v-if="item.iconBlob" @@ -141,7 +167,7 @@ :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" alt /> <img v-else class="baseImg" :src="item.icon" alt=""> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> <div style="padding:0px 10px 0px 10px;"> @@ -164,8 +190,8 @@ <div class="list-complete-item-handle uninstall"> <div class="svg-wrap" v-loading="item.installLoading" element-loading-text="安装中" v-loading="item.installLoading||item.upgradeLoading" :element-loading-text="item.installLoading?'安装中':'升级中'" element-loading-background="rgba(0,0,0,.8)" > <div class="mask"> @@ -181,7 +207,7 @@ :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" alt /> <img v-else class="baseImg" :src="item.icon" alt=""> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> <div style="padding:0px 10px 0px 10px;"> @@ -242,7 +268,7 @@ :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" alt /> <img v-else class="baseImg" :src="item.icon" alt=""> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> <div style="padding:0px 10px 0px 10px;"> @@ -279,7 +305,7 @@ :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" alt /> <img v-else class="baseImg" :src="item.icon" alt=""> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> <div style="padding:0px 10px 0px 10px;"> @@ -442,24 +468,24 @@ FileUploader }, computed: { notInstalledList() { notInstalledList () { return this.TaskMange.list1.filter(sdk => { return sdk.installed === false; }); }, installedList() { installedList () { return this.TaskMange.list1.filter(sdk => { return sdk.installed === true; }); }, ungradeList() { ungradeList () { // 升级处理会导致重复的key,需要修改 return []; //return []; return this.TaskMange.list1.filter(sdk => { return sdk.isUpgrade === true; }); }, isAdmin() { isAdmin () { if ( sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "" @@ -471,7 +497,7 @@ return false; }, }, data() { data () { return { TaskMange: new TaskManage, VideoManageData: new VideoManageData, @@ -565,7 +591,7 @@ }, watch: { list2: { handler(newVal, oldVal) { handler (newVal, oldVal) { // window.console.log(newVal, oldVal, '监听list2') if (newVal !== oldVal) { // window.console.log(newVal, '监听list2') @@ -586,7 +612,7 @@ } } }, mounted() { mounted () { this.getAllApps(); this.findAllSdk(); this.findByType(); @@ -599,10 +625,11 @@ this.VideoManageData.init(); }, methods: { isShow(authority) { isShow (authority) { return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1 }, offlineInstall() { //离线安装 offlineInstall () { this.installDialogVisible = false; this.isInstall = true; //安装 @@ -617,8 +644,11 @@ setTimeout(() => { this.findAllSdk(); this.getAllApps(); window.parent.postMessage({ msg: "AppUpdate" }, '*') this.activeName = 'myAlgorithm'; }, 3000) }, 3000); } }).catch(e => { @@ -630,22 +660,46 @@ }); }) }, downloadApp(app) { app.installLoading = true; downloadApp (app, action) { if (action == 'upgrade') { app.upgradeLoading = true; } else { app.installLoading = true; } let _this = this; installApp({ path: app.id }).then(res => { if (res && res.success) { setTimeout(() => { app.installLoading = false; if (action == 'upgrade') { app.upgradeLoading = false; _this.notify({ type:'success', message:'升级成功' }); } else { app.installLoading = false; _this.notify({ type:'success', message:'安装成功' }); } _this.getAllApps(); window.parent.postMessage({ msg: "AppUpdate" }, '*') }, 3000); } }).catch(e => { console.log(e); if (action == 'upgrade') { app.upgradeLoading = false; } else { app.installLoading = false; } }) }, getAllApps() { getAllApps () { let _this = this; _this.installedApps = []; _this.storeApps = []; @@ -654,10 +708,10 @@ //_this.storeApps = res.data; res.data.forEach(item => { if (item.installed) { let obj = Object.assign({ unloadLoading: false }, item) let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item) _this.installedApps.push(obj) } else { let obj = Object.assign({ installLoading: false }, item) let obj = Object.assign({ installLoading: false, upgradeLoading: false }, item) _this.storeApps.push(obj) } }); @@ -667,7 +721,7 @@ }) }, //卸载应用 unLoad(app) { unLoad (app) { app.unloadLoading = true; let _this = this; removeApp({ appId: app.id }).then(res => { @@ -681,6 +735,9 @@ }, '*') }, 3000); } }).catch(e => { console.log(e); app.unloadLoading = false; }) }, @@ -691,7 +748,7 @@ // this.activeCode = ''; // this.activedSdkOrApp = this.newActInfo() // }, actSdkOrApp(id, type = 'sdk') { actSdkOrApp (id, type = 'sdk') { this.actType = type; this.actId = id; this.actDrawerShow = true; @@ -699,7 +756,7 @@ this.activeCode = ''; this.activedSdkOrApp = this.newActInfo() }, newActInfo() { newActInfo () { return { activateCode: '', productName: '', @@ -709,7 +766,7 @@ devIds: '' } }, getUnActivedList() { getUnActivedList () { getUnActivedSdk().then(res => { if (res.code == 200) { this.unActivedSDKList = res.data; @@ -717,7 +774,7 @@ }) }, getUnActivedAppList() { getUnActivedAppList () { getUnActivedApp().then(res => { if (res.code == 200) { this.unActivedAppList = res.data; @@ -725,10 +782,10 @@ }); }, installFormat(percentage) { installFormat (percentage) { return percentage === 100 ? '安装成功' : `${percentage}%`; }, actived() { actived () { let _this = this; if (this.actType == 'sdk') { //激活算法 @@ -766,12 +823,12 @@ }); } }, getCodeDetail() { }, checkMyAlgorith() { getCodeDetail () { }, checkMyAlgorith () { this.actDrawerShow = false; this.activeName = "myAlgorithm"; }, onFileUpload(file) { onFileUpload (file) { //this.patchUpdateStatus = `<span style="color:green">上传成功, 点击升级按钮开始安装</span>`; this.patchFile = { ...file }; this.fileAdded = true; @@ -883,12 +940,12 @@ }, onFileAdded(f) { onFileAdded (f) { ; this.patchUpdateStatus = ""; }, // 校验输入的是否是数字 valiNum(value) { valiNum (value) { if (value) { let re = /[^\-?\d.]*$/; if (!re.test(value)) { @@ -905,7 +962,7 @@ } }, // 左边拖动模块得拖动结束后的触发函数 endLeft(env) { endLeft (env) { this.dragging = false; let taskId = env.to.id; let sdkId = this.TaskMange.list1[env.oldIndex].id; @@ -946,24 +1003,24 @@ this.addTaskSdk(json); }, // 右边拖动模块开始拖动触发函数 startRight(env) { startRight (env) { this.$nextTick(() => { this.dragging = true; }); // window.window.console.log(env, "right start"); }, // 右边拖动模块拖动结束触发函数 endRight(env) { endRight (env) { // window.window.console.log(env, "right end"); }, clickSet(data) { clickSet (data) { if (data.isSetting) { data.isSetting = false; } else { data.isSetting = true; } }, clickDel(data, Index) { clickDel (data, Index) { this.$confirm("提示：删除后，此任务在摄像机中的应用失效，是否删除？", { center: true, showConfirmButton: true, @@ -976,7 +1033,7 @@ }) .catch(err => { }); }, clickSetAlgo(row, data) { clickSetAlgo (row, data) { // window.console.log(row, data, "编辑任务中某一个算法"); if (row.isShowSetAlgo && data.id === this.TaskMange.currentAlgoId) { row.isShowSetAlgo = false; @@ -1042,7 +1099,7 @@ // }); } }, async getRulesByTaskSdk(taskId, sdkId) { async getRulesByTaskSdk (taskId, sdkId) { let res = await getRulesByTaskSdk({ taskId: taskId, sdkId: sdkId @@ -1078,7 +1135,7 @@ this.argsList = JSON.parse(JSON.stringify(this.TaskMange.argsList)); } }, async findAllSdk() { async findAllSdk () { let res = await findAllSdk(); if (res && res.success) { this.TaskMange.list1 = res.data.map((i, index) => { @@ -1095,7 +1152,7 @@ }); } }, addTask() { addTask () { let obj = { id: "", name: "任务" + this.TaskMange.list2.length, @@ -1111,7 +1168,7 @@ taskArea.scrollTop = taskArea.scrollHeight; }); }, async findAll() { async findAll () { let res = await findAll(); if (res && res.success) { if (res.data && res.data.length !== 0) { @@ -1148,7 +1205,7 @@ } } }, clickDelSdk(task, sdk) { clickDelSdk (task, sdk) { this.$confirm( "提示：删除后，此算法在本任务中移除，同时在摄像机中的应用失效，是否删除？", { @@ -1164,7 +1221,7 @@ }) .catch(err => { }); }, selectChange(event, type, data) { selectChange (event, type, data) { if (type === "options1") { // window.window.console.log(type, data, "选择下拉框"); data.options1.map(i => { @@ -1175,7 +1232,7 @@ } }, // 删除任务算法 async delTaskSdk(task, sdk) { async delTaskSdk (task, sdk) { let json = { taskId: task.id, sdkId: sdk.id @@ -1195,7 +1252,7 @@ } }, // 删除任务 async deleteTask(data, index) { async deleteTask (data, index) { // window.console.log(data, "deleteTask"); let res = await deleteTask({ taskId: data.id }); // this.$toast({ @@ -1212,7 +1269,7 @@ } }, // 更新任务状态 async updateTaskStatus(data) { async updateTaskStatus (data) { // window.console.log(data, '更新任务状态') let json = { taskId: data.id, @@ -1230,7 +1287,7 @@ }); }, // 更新任务名称 async updateTaskName(data) { async updateTaskName (data) { let json = { taskId: data.id, taskName: data.name @@ -1250,7 +1307,7 @@ } }, // 获取底库数据 async getBaseList() { async getBaseList () { // let res = await getTagList(); // if (res && res.success) { // let filter = res.data.filter(i => { @@ -1279,7 +1336,7 @@ ]; }, // 获取算法参数 async getSdkArgs(data) { async getSdkArgs (data) { let res = await getSdkArgs({ sdkId: data.id, scope: "TASKRULE" @@ -1301,7 +1358,7 @@ } }, // 查询字典 async findByType() { async findByType () { let res = await findByType(); if (res && res.success) { let list = res.data.RULECOMPUTEBETWEEN.map(i => { @@ -1314,17 +1371,17 @@ } }, // 算法配置，新建 add() { add () { this.TaskMange.argsList.push( JSON.parse(JSON.stringify(this.TaskMange.baseObject)) ); }, // 算法配置 删除 delRule(index) { delRule (index) { this.TaskMange.argsList.splice(index, 1); }, // 算法参数保存 async save() { async save () { let list = this.TaskMange.argsList.map(i => { let obj = {}; obj.id = i.id; @@ -1357,7 +1414,7 @@ } } }, getDefault() { getDefault () { this.deleteTaskSdkRule( this.TaskMange.currentTaskId, this.TaskMange.currentAlgoId @@ -1368,7 +1425,7 @@ ); }); }, async deleteTaskSdkRule(taskId, sdkId) { async deleteTaskSdkRule (taskId, sdkId) { let json = { taskId: taskId, sdkId: sdkId @@ -1388,7 +1445,7 @@ } }, // 给任务添加算法 async addTaskSdk(data) { async addTaskSdk (data) { let res = await addTaskSdk(data); if (res && res.success) { // window.console.log(res, 'res') @@ -1396,7 +1453,7 @@ } }, // 新添加任务 async addTaskAsync(name) { async addTaskAsync (name) { let res = await addTask({ taskname: name }); // this.$toast({ // type: res.success ? "success" : "error", @@ -1412,7 +1469,7 @@ this.findAll(); } }, cancle(row) { cancle (row) { if (row.isShowSetAlgo) { row.isShowSetAlgo = false; } @@ -1422,12 +1479,12 @@ this.$set(i, "isSelect", false); }); }, cancleTask(row) { cancleTask (row) { if (row.isSetting) { row.isSetting = false; } }, commandAlgo(command, row, item) { commandAlgo (command, row, item) { if (command === 1) { // console.log('设置算法') this.clickSetAlgo(row, item); @@ -1437,13 +1494,13 @@ this.clickDelSdk(row, item); } }, commandTask(command, row) { commandTask (command, row) { if (command === 1) { //编辑任务 this.clickSet(row); } }, donwload(item) { donwload (item) { this.downloading = true; this.downloadItem = item.id; @@ -1467,15 +1524,15 @@ this.downloadItem = ""; }); }, commandAlgLib(item) { commandAlgLib (item) { this.$set(item, "isEdit", true); }, inputBlur(item) { inputBlur (item) { // console.log(item, '修改名称') this.$set(item, "isEdit", false); }, cleanTemplateForm() { cleanTemplateForm () { this.appSceneForm.name = ""; this.appSceneForm.desc = ""; this.appSceneForm.rules = ""; @@ -1483,10 +1540,10 @@ this.$refs.ruleEditor.cleanRule(); }, handleTabClick() { handleTabClick () { }, handleCreateScene() { handleCreateScene () { this.sceneDialogVisible = true; this.dialogTitle = '创建场景模板'; @@ -1499,10 +1556,10 @@ this.cleanTemplateForm(); }); }, handleDialogClose() { handleDialogClose () { this.sceneDialogVisible = false; }, handleEditScene(item) { handleEditScene (item) { this.appSceneForm.name = item.name; this.appSceneForm.desc = item.desc; @@ -1594,7 +1651,7 @@ .src-title { //color: #bfbfbf; color: #bbcee8; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC"; font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC'; font-weight: 650; font-style: normal; height: 36px; @@ -1619,7 +1676,7 @@ position: absolute; top: 50%; left: 50%; background: url("/images/algo/green.gif"); background: url('/images/algo/green.gif'); overflow: hidden; transform: translate(-50%, -50%); .inner-bar { @@ -1707,6 +1764,13 @@ margin: auto; margin-bottom: 30px; max-width: 200px; .mask { width: 100%; .el-button + .el-button { margin-left: 0 !important; } } } } } @@ -1746,6 +1810,9 @@ z-index: 1; border-radius: 3px; display: none; .el-button + .el-button { margin-left: 0 !important; } .tool { position: absolute; top: 49%; @@ -1941,16 +2008,16 @@ } } .drawer-content { font-family: "PingFangSC-Regular"; font-family: 'PingFangSC-Regular'; .el-step__title.is-process { border-color: #3d68e1 !important; color: #3d68e1 !important; font-family: Tahoma, Helvetica, Arial, "\5B8B\4F53", sans-serif; font-family: Tahoma, Helvetica, Arial, '\5B8B\4F53', sans-serif; } .el-step__head.is-process { border-color: #3d68e1 !important; color: #3d68e1 !important; font-family: Tahoma, Helvetica, Arial, "\5B8B\4F53", sans-serif; font-family: Tahoma, Helvetica, Arial, '\5B8B\4F53', sans-serif; } .el-input { width: 100%; @@ -2026,6 +2093,10 @@ display: none; .info-onmask { color: #8ecaff; } .mask-btn { width: 100%; display: flex; } i { color: #fff; @@ -2112,6 +2183,8 @@ .mask { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: center; top: 0; .bot-btn { flex: 1; @@ -2295,6 +2368,16 @@ max-height: 106px; } } .willUpGrade { .iconupdate { color: #01e667; position: absolute; top: 5px; right: 5px; font-weight: 550; font-size: 26px; } } &.uninstall { .svg-wrap { background-color: #ddd; src/pages/desktop/index/App.vue
@@ -27,13 +27,13 @@ components: { Desktop, NotificationCenter, NoticeTip, Tools, ToolsEntry }, data() { data () { return { buttonAuthority: sessionStorage.getItem('buttonAuthoritys') || [] } }, computed: { isAdmin() { isAdmin () { if ( sessionStorage.getItem('userInfo') && sessionStorage.getItem('userInfo') !== '' @@ -46,7 +46,7 @@ return false } }, mounted() { mounted () { document.getElementById('app').style.backgroundImage = process.env.VUE_APP_MAIN_URL; this.showApps(); @@ -79,13 +79,37 @@ }); }, methods: { showApps() { showApps () { let _that = this; getApps().then(rsp => { if (rsp && rsp.success) { _that.$store.state.desktop.docks = []; let installedApps = []; let testObj = { id: 'tjcxjq', create_by: 'test', create_time: '', height: 675, icon: '../../images/app-mid/search.png', installed: true, isDelete: 0, isUpgrade: false, title: '统计查询(集群)', name: '统计查询(集群)', remoteVersion: '', type: '2', update_by: '', update_time: '', url: "/view/searchForCluster/", version: '1.0.0', width: 1344, isDefault: false }; console.log(rsp.data); rsp.data.push(testObj); rsp.data.forEach(function (item) { if (item.installed) { let temp = { @@ -133,7 +157,7 @@ addWeather: function (weather) { this.$store.commit('desktop/addWeather', weather); }, screenShot(dock) { screenShot (dock) { //找到当前的iframe let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(dock.url) >= 0); //保存当前应用快照 @@ -179,12 +203,12 @@ width: 100%; height: 100%; background-size: 100% 100%; background-image: url("/images/desktop/background.png"); background-image: url('/images/desktop/background.png'); background-attachment: fixed; } .clearFix:after { content: ""; content: ''; display: block; height: 0; clear: both; src/pages/desktop/index/components/ToolsEntry.vue
@@ -61,6 +61,7 @@ }, methods: { dockClick(dock) { debugger if (dock.type === '1') { window.open(dock.url); } else if (dock.type === '2' && !dock.isOpen) { src/pages/searchForCluster/index/App.vue
New file @@ -0,0 +1,142 @@ <template> <div class="column"> <div class="column-left"> <div class="resize-bar"></div> <div class="resize-line"></div> <div class="resize-save"> <left-nav :appName="'Search'" :height="screenHeight - 40"></left-nav> </div> </div> <div class="column-right"> <right-side /> </div> <card-window></card-window> </div> </template> <script> import LeftNav from "@/components/LeftNav"; // import CameraVideo from "./components/Video.vue"; import RightSide from "./Searching" import CardWindow from "@/components/cardWindow"; export default { name: "SearchPage", components: { LeftNav, RightSide, CardWindow }, data() { return { screenHeight: 0, } }, created() { // this.parseUrl(); }, mounted() { this.screenHeight = document.documentElement.clientHeight - 20; window.onresize = () => { return (() => { this.screenHeight = document.documentElement.clientHeight - 20; })(); }; }, methods: { parseUrl() { } } }; </script> <style lang="scss" > .left-tree-box .el-tabs--border-card .el-tabs__header{ display: block!important; margin-bottom: 10px; } .column { overflow: hidden; min-width: 1399px; height: 100%; } .column-left { background-color: #fff; position: relative; float: left; height: 100vh; } .column-right { height: 100vh; background-color: #eee; box-sizing: border-box; overflow: hidden; } .heigher-index { position: absolute; top: 0; z-index: 10; width: 100%; height: 100%; } .resize-save { position: absolute; top: 0; right: 5px; bottom: 0; left: 0; padding: 16px; padding-top: 8px; overflow-x: hidden; } .resize-bar { width: 310px; 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: url(./resize.svg); background-size: 100% 100%; } } </style> src/pages/searchForCluster/index/Searching.vue
New file @@ -0,0 +1,954 @@ <template> <div class="searching-box"> <div class="searching-right"> <div class="searching-right-nav"> <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block;"> <el-breadcrumb-item> <span @click="uploadChange()">检索</span> </el-breadcrumb-item> <el-breadcrumb-item v-if="!VideoPhotoData.uploadType">全部</el-breadcrumb-item> <el-breadcrumb-item v-if="VideoPhotoData.uploadType">以图搜图</el-breadcrumb-item> </el-breadcrumb> </div> <div class="searching-right-content"> <div class="top"> <el-tooltip content="以图搜图" placement="bottom" popper-class="atooltip"> <el-button @click="showUpload" type="primary" icon="el-icon-camera-solid" size="mini" circle :style="VideoPhotoData.uploadDiaplay ? 'margin-right: 20px;' : 'margin-right: 20px;background-color:#cccccc;border-color:#cccccc'" ></el-button> </el-tooltip> <p class="p-label" style="width:16%"> <b>标签：</b> <el-select v-model="tagValues" multiple :disabled="isDisabled" collapse-tags size="mini" style="width:calc(100% - 40px);min-width: 120px;" placeholder="请选择" @change="tagChange" > <el-option v-for="item in VideoPhotoData.tabs" style="font-size:12px" :key="item.key" :label="item.title" :value="item.value" :title="item.title" ></el-option> </el-select> </p> <p class="p-task" style="width:16%"> <b>场景：</b> <el-select v-model="taskValues" multiple @change="searchingBtn" :disabled="typeDisable" collapse-tags size="mini" style="width:calc(100% - 40px);min-width: 120px;" placeholder="请选择" > <!-- <el-option v-for="item in VideoPhotoData.tasks" style="font-size:12px" :key="item.taskid+'x'" :label="item.del_flag && item.taskname !=='人脸测温'? item.taskname+'（已删除）' : item.taskname" :value="item.taskid" :title="item.del_flag && item.taskname !=='人脸测温'? item.taskname+'（已删除）' : item.taskname" ></el-option>--> <el-option v-for="item in VideoPhotoData.tasks" style="font-size:12px" :key="item.id+'x'" :value="item.id" :label="item.isDelete ? item.name+'（已删除）' : item.name" :title="item.isDelete ? item.name+'（已删除）' : item.name" ></el-option> </el-select> </p> <p class="p-level" style="width:18%"> <b>事件等级：</b> <el-select v-model="alarmValues" multiple @change="searchingBtn" :disabled="isDisabled" collapse-tags size="mini" style="width:calc(100% - 64px);min-width: 120px;" placeholder="请选择" > <el-option v-for="item in VideoPhotoData.dictionary.ALARMLEVEL" :key="item.id" :label="item.name" :value="item.value" ></el-option> </el-select> </p> <p class="p-date" style="width:19%;vertical-align: top;"> <el-date-picker size="mini" v-model="searchTime" @change="searchingBtn" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00','23:59:59']" style="width:99%;min-width:200px" ></el-date-picker> </p> <p class="p-input" style="width:19%"> <el-input placeholder="请输入内容" prefix-icon="el-icon-search" style="width: calc(100% - 75px);min-width:100px;margin-left:10px;margin-right: 10px;" v-model="VideoPhotoData.inputValue" size="mini" ></el-input> <el-button type="primary" size="mini" @click="searchingBtn">搜索</el-button> </p> <p class="p-clear"> <b class="clear-searching" @click="clearSearch">重置</b> </p> </div> <div ref="mid" style="height:calc(100% - 50px);"> <div class="left-selection" v-if="VideoPhotoData.uploadDiaplay"> <upload-img ref="uploadImg" @labelDisabled="disabled"></upload-img> </div> <div id="searchMid" class="mid" :style="{width: VideoPhotoData.uploadDiaplay ? 'calc(100% - 315px)' : '100%'}" > <div class="right-section" ref="scrollContain"> <Card v-for="(item, index) in VideoPhotoData.cards" :class="item.activeObject.id === VideoPhotoData.activeCard ? 'my-active-card' : ''" :key="index + 'u'" :outHeight="'162px'" :outWidth="VideoPhotoData.uploadDiaplay?searchImgCardWidth:cardWidth" :data="item" :showType="showType" @detailsClick="getDetails($event, index)" @addToBase="toAdd" ></Card> <div class="foot"> <el-pagination :current-page="VideoPhotoData.page" @current-change="changePages" @size-change="sizeChange" :page-sizes="VideoPhotoData.pageSizeOption" :page-size="VideoPhotoData.size" layout="total, sizes, prev, pager, next, jumper" :total="VideoPhotoData.total" ></el-pagination> </div> </div> </div> </div> <!-- <div class="foot"> <el-pagination :current-page="VideoPhotoData.page" @current-change="changePages" @size-change="sizeChange" :page-sizes="VideoPhotoData.pageSizeOption" :page-size="VideoPhotoData.size" layout="total, sizes, prev, pager, next, jumper" :total="VideoPhotoData.total" ></el-pagination> </div>--> </div> </div> <hsc-window-style-metal class="windown-model"> <hsc-window v-for="(item, index) in CardList.addBaseList" :closeButton="true" @closebuttonclick="closeWindow(index)" :key="index" @update:height="resizeHeight" @update:width="resizeWidth" style="background:white; height:475px" :left="center.x + index * 10" :top="center.y + index * 10" :resizable="true" positionHint="center" :isScrollable="true" :minWidth="662" :minHeight="479" :maxWidth="10000" :maxHeight="7000" :height="defaultHeight" :width="defaultWidth" > <div class="addToBase"> <div class="topLabel">加入底库</div> <div class="items"> <div class="lable"> <p>黑名单 ></p> </div> <div class="baseList"> <el-checkbox-group v-model="VideoPhotoData.selectBlacks" @change="blackAngWhite"> <div class="base" v-for="(item, index) in VideoPhotoData.blackList" :key="index"> <el-checkbox :label="item.value" :title="item.title" :disabled="item.disabled" >{{item.title}}</el-checkbox> </div> </el-checkbox-group> </div> </div> <div class="items"> <div class="lable"> <p>白名单 ></p> </div> <div class="baseList"> <el-checkbox-group v-model="VideoPhotoData.selectWhites" @change="blackAngWhite"> <div class="base" v-for="(item, index) in VideoPhotoData.whiteList" :key="index"> <el-checkbox :label="item.value" :title="item.title" :disabled="item.disabled" >{{item.title}}</el-checkbox> </div> </el-checkbox-group> </div> </div> <div class="buttons"> <el-button type="primary" @click="saveAddBase(item, index)">保存</el-button> <el-button type="default" @click="closeWindow(index)">取消</el-button> </div> </div> </hsc-window> </hsc-window-style-metal> </div> </template> <script> import Card from "@/components/subComponents/Card"; import UploadImg from "@/components/searching/UploadImg"; //import CardWindow from "../components/cardWindow"; import bus from "./main"; export default { components: { Card, UploadImg }, data() { return { cardWidth: "", center: "", defaultHeight: 432, defaultWidth: 600, isDisabled: false, typeDisable: false, showType: "search", searchImgCardWidth: "", tagValues: [], alarmValues: [], dialogVisible: false, taskValues: [], searchTime: [ this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD HH:mm:ss") ], searchText: "", currentPage: 1, }; }, created() { this.TreeDataPool.readonly = true; this.TreeDataPool.gbReadonly = true; this.TreeDataPool.multiple = true; this.TreeDataPool.clean(); this.TreeDataPool.fetchTreeData(); }, mounted() { this.$nextTick(() => { let scrollContain = this.$refs.scrollContain this.VideoPhotoData.scrollContainDom = scrollContain let list = this.TreeDataPool.localVedioList.filter(i => { return i.progress == 100 }) this.TreeDataPool.localVedioList = list }) window.addEventListener("resize", this.getHeight); this.getCenter(); this.getHeight(); this.blackAngWhite(); // 视频监控任务跳转 屏蔽 20200730 // if (this.$route.query.from === "video") { // this.VideoPhotoData.queryTasks = this.taskValues = [ // this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId // ]; // } this.searchTime = this.getDateInit(); this.VideoPhotoData.searchTime = this.getDateInit(); // 暂时关闭跳转 20200730 // if (this.$route.query.showType === "findByPic") { if (this.getUrlKey("showType")) { this.VideoPhotoData.uploadDiaplay = true; // console.log("别处跳过来的以图搜图"); this.VideoPhotoData.picUrl = this.getUrlKey("picSmUrl"); this.VideoPhotoData.uploadImg = this.getUrlKey("picSmUrl"); this.VideoPhotoData.uploadType = true this.VideoPhotoData.compTargetId = this.getUrlKey("targetId") this.VideoPhotoData.compTargetType = this.getUrlKey("compType") this.VideoPhotoData.size = 30 this.VideoPhotoData.compareTabs = ["esData"]; this.VideoPhotoData.findPerson2(); // 查找此人 } else { this.searchTime = this.getDateInit(); this.VideoPhotoData.searchTime = this.getDateInit(); // this.VideoPhotoData.querySearchList(); this.setLoadSearch(this.VideoPhotoData.querySearchList()); } this.VideoPhotoData.queryTagList(); this.VideoPhotoData.queryTaskList(); this.VideoPhotoData.queryDictionary(); this.$nextTick(() => { bus.$on("changePage", page => { this.currentPage = page; this.VideoPhotoData.page = page; }); }); }, destroyed() { window.removeEventListener("resize", this.getHeight); this.CardList.details = []; // this.TreeDataPool.treeActiveName = "camera"; this.VideoPhotoData.queryAlarmlevel = []; this.VideoPhotoData.inputValue = ""; this.VideoPhotoData.queryTabs = []; this.VideoPhotoData.queryTasks = []; this.VideoPhotoData.treeNodes = []; this.CardList.addBaseList = []; this.VideoPhotoData.selectBlacks = []; this.VideoPhotoData.selectWhites = []; }, watch: { "TreeDataPool.showTreeBox"(value) { this.getHeight(); if (this.VideoPhotoData.realSmallPath.length > 0) { this.VideoPhotoData.findPersonByPage(); } else { // this.VideoPhotoData.querySearchList(); this.setLoadSearch(this.VideoPhotoData.querySearchList()); } }, // "TreeDataPool.selectedNodes": function(newValue,oldValue) { // if (newValue !== oldValue) { // this.VideoPhotoData.treeNodes = newValue; // console.log("监听树节点中的刷新方法", newValue,oldValue); // this.VideoPhotoData.querySearchList(); // } // }, "TreeDataPool.selectedNodes": { handler: function (newVal, oldVal) { if (newVal !== oldVal) { this.VideoPhotoData.treeNodes = newVal; if (this.VideoPhotoData.uploadType) { this.VideoPhotoData.findPersonByPage() } else { // this.VideoPhotoData.querySearchList(); this.setLoadSearch(this.VideoPhotoData.querySearchList()); } } }, deep: true //深度监听 }, "DataStackPool.selectedDir": { handler(nodes, oldNodes) { if (nodes !== oldNodes) { // this.VideoPhotoData.treeNodes = nodes.map(i=>{return i.id}); this.VideoPhotoData.treeNodes = [nodes.id]; if (this.VideoPhotoData.uploadType) { this.VideoPhotoData.findPersonByPage() } else { // this.VideoPhotoData.querySearchList(); this.setLoadSearch(this.VideoPhotoData.querySearchList()); } } }, deep: true }, "VideoPhotoData.activeCard": function (value) { let card = this.$refs.scrollContain.getElementsByClassName("my-active-card"); if (card.length > 0) { let cardHeight = card[0].clientHeight; let cardTop = card[0].offsetTop; let scrollTop = this.$refs.scrollContain.scrollTop; let divHeight = this.$refs.scrollContain.clientHeight; if ( cardTop - cardHeight - scrollTop > divHeight || cardTop - cardHeight - scrollTop < 0 ) this.$refs.scrollContain.scrollTo(0, cardTop - cardHeight); } }, "VideoPhotoData.uploadType": function (value) { console.log("页面模式：", value) if (value) { this.typeDisable = true; this.disabled = true; } else { this.typeDisable = false; this.VideoPhotoData.querySearchList(); } }, "VideoPhotoData.selectBlacks": function (value) { this.blackAngWhite() }, "VideoPhotoData.selectWhites": function (value) { this.blackAngWhite() }, "VideoPhotoData.uploadDiaplay": function (value) { this.getHeight(); console.log("upload的值是：", value) if (value) { if (!this.VideoPhotoData.uploadType) { console.log("uploadDisplay中的刷新"); let scrollContain = this.$refs.scrollContain this.VideoPhotoData.scrollContainDom = scrollContain this.VideoPhotoData.showType = "search"; // this.VideoPhotoData.querySearchList(); //this.setLoadSearch(this.VideoPhotoData.querySearchList()); this.isDisabled = false; } else { //this.VideoPhotoData.scrollContainDom = ''; this.VideoPhotoData.showType = "findByPic"; } } else { this.VideoPhotoData.uploadType = false; this.VideoPhotoData.showType = "search"; } } }, methods: { isShowUpload() { console.log('isShowUpload', this.VideoPhotoData.uploadDiaplay) this.getHeight(); console.log("upload的值是：", this.VideoPhotoData.uploadDiaplay) if (this.VideoPhotoData.uploadDiaplay) { if (!this.VideoPhotoData.uploadType) { console.log("uploadDisplay中的刷新"); let scrollContain = this.$refs.scrollContain this.VideoPhotoData.scrollContainDom = scrollContain this.VideoPhotoData.showType = "search"; // this.VideoPhotoData.querySearchList(); //this.setLoadSearch(this.VideoPhotoData.querySearchList()); this.isDisabled = false; } else { //this.VideoPhotoData.scrollContainDom = ''; this.VideoPhotoData.showType = "findByPic"; } } else { this.VideoPhotoData.uploadType = false; this.VideoPhotoData.showType = "search"; } }, resizeWidth(w) { this.defaultWidth = w; }, resizeHeight(h) { this.defaultHeight = h; }, getHeight() { let w = this.$refs.mid.offsetWidth; let integer = parseInt(w / 330); let integerSearchImg = parseInt((w - 300) / 325); // 取消size修改 // console.log(integer, integerSearchImg) // this.handleSizeChange(integer, integerSearchImg); this.cardWidth = `calc(${100 / integer}% - 20px)`; this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`; }, uploadChange() { this.VideoPhotoData.uploadDiaplay = false; }, blackAngWhite() { if (this.VideoPhotoData.selectBlacks.length > 0) { for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) { //this.VideoPhotoData.whiteList[i].disabled = true this.$set(this.VideoPhotoData.whiteList[i], 'disabled', true) } } if (this.VideoPhotoData.selectBlacks.length == 0) { for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) { //this.VideoPhotoData.whiteList[i].disabled = false this.$set(this.VideoPhotoData.whiteList[i], 'disabled', false) } } if (this.VideoPhotoData.selectWhites.length > 0) { for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) { // this.VideoPhotoData.blackList[i].disabled = true this.$set(this.VideoPhotoData.blackList[i], 'disabled', true) } } if (this.VideoPhotoData.selectWhites.length == 0) { for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) { //this.VideoPhotoData.blackList[i].disabled = false this.$set(this.VideoPhotoData.blackList[i], 'disabled', false) } } }, saveAddBase(item, index) { if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) { this.$notify({ title: "注意", message: "请选择要添加的底库", type: "warning" }) return } let res = this.VideoPhotoData.addBase(item) res.then(data => { console.log("then", data) if (data.success) { this.$notify({ title: "成功", message: data.data, type: "success" }) } else { this.$notify({ title: "失败", message: data.data, type: "error" }) } this.CardList.addBaseList.splice(index, 1); this.VideoPhotoData.selectBlacks = [] this.VideoPhotoData.selectWhites = [] }) }, getDetails(ev, index) { //let obj = this.CardList.datalist[index]; this.CardList.datalist = this.VideoPhotoData.cards; let obj = this.CardList.datalist[index]; this.CardList.details = Array.from( new Set([...this.CardList.details, ...[obj]]) ); // this.CardList.details.push(obj); this.VideoPhotoData.activeCard = obj.activeObject.id; }, toAdd(item) { this.CardList.addBaseList.push(item) }, handleClose(done) { this.$confirm('确认关闭？') .then(_ => { done(); }) .catch(_ => { }); }, showUpload() { this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay; //初始化数据 this.VideoPhotoData.clearStatus(); this.CardList.details = []; // if (this.VideoPhotoData.uploadDiaplay) { // } //this.VideoPhotoData.uploadImg = require("C:/Users/mdesign/Desktop/cvasdv.jpg"); }, 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") ]; }, format(array) { return [ this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"), this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss") ]; }, searchingBtn() { // let obj = document.getElementById('searchMid'); // console.log(obj,'target',document) // let load = this.$loading({ // target:obj, // }) // load.close(); // console.log(load,'loading') // this.AuthData.loading = true this.VideoPhotoData.page = 1; this.VideoPhotoData.queryTabs = this.tagValues; //处理搜索类型 var tempArr = this.taskValues.map(task => task.split(',')); var tasks = []; tempArr.forEach(arr => { tasks = tasks.concat(arr) }); this.VideoPhotoData.queryTasks = tasks; this.VideoPhotoData.queryAlarmlevel = this.stringToNum(); this.VideoPhotoData.searchTime = this.format(this.searchTime); //this.VideoPhotoData.inputValue = this.searchText; this.VideoPhotoData.showType = this.showType; if (!this.VideoPhotoData.uploadType) { console.log("查询方法"); this.VideoPhotoData.uploadDiaplay = false; //this.VideoPhotoData.page = this.currentPage; // this.VideoPhotoData.querySearchList(); this.setLoadSearch(this.VideoPhotoData.querySearchList()); } else { console.log("以图搜图"); //this.VideoPhotoData.page = this.currentPage; // this.VideoPhotoData.findPersonByPage(); this.setLoadSearch(this.VideoPhotoData.findPersonByPage()); } }, stringToNum() { var arr = []; this.alarmValues.forEach(element => { if (element == "-1") { arr.push(-1); } if (element == "1") { arr.push(1); } if (element == "2") { arr.push(2); } if (element == "3") { arr.push(3); } if (element == "4") { arr.push(4); } if (element == "5") { arr.push(5); } }); // console.log("输出的数组：", arr); return arr; }, changePages(page) { this.VideoPhotoData.page = page; if (!this.VideoPhotoData.uploadType) { console.log("分页改变！") this.VideoPhotoData.uploadDiaplay = false; // this.VideoPhotoData.querySearchList(); this.setLoadSearch(this.VideoPhotoData.querySearchList()); } else { // this.VideoPhotoData.findPersonByPage(); this.setLoadSearch(this.VideoPhotoData.findPersonByPage()); } }, closeWindow(index) { this.CardList.addBaseList.splice(index, 1); }, handleSizeChange(integer, integerSearchImg) { if (this.VideoPhotoData.uploadDiaplay) { this.VideoPhotoData.size = integerSearchImg * 10; //this.VideoPhotoData.findPersonByPage(); } else { this.VideoPhotoData.size = integer * 10; //this.VideoPhotoData.querySearchList(); } }, sizeChange(size) { if (this.VideoPhotoData.uploadType) { this.VideoPhotoData.size = size; this.VideoPhotoData.findPersonByPage(); } else { this.VideoPhotoData.uploadDiaplay = false; this.VideoPhotoData.size = size; // this.VideoPhotoData.querySearchList(); this.setLoadSearch(this.VideoPhotoData.querySearchList()); } }, clearSearch() { this.tagValues = [] this.taskValues = [] this.alarmValues = [] this.VideoPhotoData.queryTabs = []; this.VideoPhotoData.queryTasks = []; this.VideoPhotoData.queryAlarmlevel = []; this.VideoPhotoData.searchTime = this.getDateInit(); this.VideoPhotoData.inputValue = ""; this.searchTime = this.getDateInit(); if (!this.VideoPhotoData.uploadType) { // this.VideoPhotoData.querySearchList(); this.setLoadSearch(this.VideoPhotoData.querySearchList()); } else { // this.VideoPhotoData.findPersonByPage(); this.setLoadSearch(this.VideoPhotoData.findPersonByPage()); } }, disabled(data) { this.isDisabled = data; }, getCenter() { this.center = { x: document.documentElement.clientWidth / 2 - 250, y: document.documentElement.clientHeight / 2 - 200 }; }, setLoadSearch(fn) { this.AuthData.setLoading("searchMid", this); fn.then(_ => { this.AuthData.closeLoad(); }) }, getUrlKey(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null }, tagChange(obj) { console.log(obj) if (obj.length > 0) { this.showType = "compare"; } else { this.showType = "search"; } this.VideoPhotoData.queryTabs = obj; this.setLoadSearch(this.VideoPhotoData.querySearchList()); } } }; </script> <style lang="scss"> .searching-box { width: 100%; height: 100% !important; float: left; //position: relative; .searching-right { width: 100%; background-color: #e9ebf2; height: 100%; padding: 0px 20px; box-sizing: border-box; //临时 .el-carousel__item.is-active { z-index: 0 !important; } //临时 .searching-right-nav { height: 50px; width: 100%; line-height: 58px; text-align: left; font-size: 14px !important; box-sizing: border-box; color: rgba(0, 0, 0, 0.78) !important; } .searching-right-content { height: calc(100% - 80px); width: 100%; box-sizing: border-box; .top { background-image: linear-gradient(-180deg, #ffffff 13%, #e9ebf2 100%); height: 76px; width: 100%; padding: 5px 22px; box-sizing: border-box; text-align: left; // line-height: 55px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; .p-label, .p-task, .p-level, .p-date, .p-input, .p-clear { display: inline-block; padding-right: 10px; box-sizing: border-box; margin-top: 20px; b:hover { color: #2249b4; } } .clear-searching { cursor: pointer; text-decoration: underline; width: 40px; font-size: 13px; color: #3d68e1; } } .mid { //width: 100%; //height: 100%; padding: 5px; overflow: auto; position: relative; .my-card { float: left; margin: 0px 14px 10px 0px; cursor: pointer; } } .foot { overflow: hidden; width: 100%; height: 80px; //line-height: 80px; padding-top: 20px; padding-right: 24px; box-sizing: border-box; text-align: right; } } } .el-select__tags { max-width: 250px !important; } } .el-select-dropdown { width: 200px !important; } .el-tag { max-width: 85% !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .titlebar { height: 10px !important; background: #fff !important; .button { position: absolute; font-size: 25px !important; right: 10px; top: 10px; z-index: 3; } } .addToBase { width: 98%; height: 430px; position: relative; .topLabel { margin-top: 20px; height: 40px; border-bottom: 1px solid #eee; font-family: PingFangSC-Medium; font-size: 20px; font-weight: 600; line-height: 1rem; color: #222222; text-align: left; margin-left: 15px; } .items { width: 100%; height: auto; max-height: 35%; overflow-y: auto; margin: 20px 0px; .lable { width: 15%; margin-top: 10px; float: left; //font-family: PingFangSC-Medium; font-size: 14px; font-weight: 600; } .baseList { width: 85%; height: 100%; float: left; // display: flex; // justify-content: flex-start; .base { //flex-wrap: wrap; width: calc(33% - 10px); padding: 0px 5px; line-height: 30px; float: left; text-align: left; font-size: 12px !important; .el-checkbox { width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; .el-checkbox__label { display: inline !important; } } } } } .buttons { position: absolute; right: 0px; bottom: 15px; } } .search { background-color: #eee; } </style> <style lang="scss" scoped> .left-selection { width: 300px; height: 100%; float: left; margin-right: 15px; } #searchMid { height: 100%; box-sizing: border-box; .el-loading-mask { .el-loading-spinner { width: 100%; height: 100%; .el-loading-spinner-search { background: url("/images/search/searchLoading.gif") no-repeat; } } } .right-section { //width: calc(100% - 315px); height: 100%; padding-bottom: 20px; box-sizing: border-box; //float: left; overflow: auto; position: relative; } } </style> src/pages/searchForCluster/index/main.ts
New file @@ -0,0 +1,33 @@ import Vue from 'vue'; import App from './App.vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import "@/assets/css/element-variables.scss"; import preview from 'vue-photo-preview' import moment from "moment"; import * as VueWindow from "@hscmap/vue-window"; import Mixin from "./mixins"; import 'vue-photo-preview/dist/skin.css' Vue.prototype.$moment = moment; Vue.mixin(Mixin); Vue.use(ElementUI) Vue.use(preview) Vue.use(VueWindow); Vue.filter('moment', function (value, formatString) { formatString = formatString || 'YYYY-MM-DD HH:mm:ss'; return moment(value).format(formatString); }); export default Vue.prototype.bus = new Vue({ el: '#app', render: h => h(App) }) src/pages/searchForCluster/index/mixins.ts
New file @@ -0,0 +1,28 @@ import VideoPhotoData from "@/Pool/VideoPhotoData"; import VideoTaskData from "@/Pool/VideoTaskData"; import TreeDataPool from "@/Pool/TreeData"; import CardList from "@/Pool/CardList"; import DataStackPool from "@/Pool/dataStack" import AuthData from '@/Pool/AuthData'; /* eslint-disable */ const onlyVideoPhotoData = new VideoPhotoData const onlyVideoTaskData = new VideoTaskData const onlyTreeDataPool = new TreeDataPool const onlyDataStack = new DataStackPool const onlyCardList = new CardList const onlyAuthData = new AuthData const mixin = { data() { return { TreeDataPool: onlyTreeDataPool, VideoPhotoData: onlyVideoPhotoData, CardList: onlyCardList, DataStackPool: onlyDataStack, VideoTaskData: onlyVideoTaskData, AuthData: onlyAuthData, }; }, }; export default mixin; src/pages/settings/components/CloudNode.vue
@@ -135,6 +135,7 @@ } }, mounted () { console.log(this.nodes) //this.getInsideNodes(); }, methods: { @@ -196,8 +197,8 @@ // return temp; // }, outsideNodes () { //return this.nodes.filter(item=>item.hardwareType=='03'); return this.mockData.filter(item => item.hardwareType == '03'); return this.mockData.filter(item=>item.hardwareType=='03'); //return this.nodes.filter(item => item.hardwareType == '03'); } } } @@ -230,6 +231,7 @@ .outer { width: 40%; position: relative; text-align: left; .node { position: absolute; }
