From 13514e95ffc45c976806e8e752adb42e0c47052f Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期五, 31 七月 2020 17:37:22 +0800
Subject: [PATCH] 临时将card组件的轮播图片层级降低,添加了测试用的文件夹
---
src/pages/test/index/Searching.vue | 908 +++++++++++++++++++++++++++++++++
src/pages/test/components/cardWindow.vue | 362 +++++++++++++
src/pages/desktop/desktop/circle.png | 0
src/pages/test/index/App.vue | 115 ++++
src/pages/search/index/Searching.vue | 14
src/pages/desktop/desktop/main.jpg | 0
src/pages/desktop/desktop/desktop.png | 0
src/pages/search/components/cardWindow.vue | 7
src/pages/test/index/main.ts | 34 +
src/pages/desktop/desktop/trash.png | 0
src/pages/test/components/layout.vue | 125 ++++
src/pages/search/index/App.vue | 14
src/pages/test/index/mixins.ts | 28 +
13 files changed, 1,597 insertions(+), 10 deletions(-)
diff --git a/src/pages/desktop/desktop/circle.png b/src/pages/desktop/desktop/circle.png
new file mode 100644
index 0000000..e2eedce
--- /dev/null
+++ b/src/pages/desktop/desktop/circle.png
Binary files differ
diff --git a/src/pages/desktop/desktop/desktop.png b/src/pages/desktop/desktop/desktop.png
new file mode 100644
index 0000000..7b9b347
--- /dev/null
+++ b/src/pages/desktop/desktop/desktop.png
Binary files differ
diff --git a/src/pages/desktop/desktop/main.jpg b/src/pages/desktop/desktop/main.jpg
new file mode 100644
index 0000000..400f79a
--- /dev/null
+++ b/src/pages/desktop/desktop/main.jpg
Binary files differ
diff --git a/src/pages/desktop/desktop/trash.png b/src/pages/desktop/desktop/trash.png
new file mode 100644
index 0000000..c1d758c
--- /dev/null
+++ b/src/pages/desktop/desktop/trash.png
Binary files differ
diff --git a/src/pages/search/components/cardWindow.vue b/src/pages/search/components/cardWindow.vue
index 30d12d4..fc543e6 100644
--- a/src/pages/search/components/cardWindow.vue
+++ b/src/pages/search/components/cardWindow.vue
@@ -237,6 +237,7 @@
}
.window-view {
width: 100%;
+ height: auto;
// height: 100%;
// min-height: 684px;
overflow: auto;
@@ -246,14 +247,10 @@
width: calc(100% - 350px);
}
.windown-model {
- .window{
- z-index: 200000;
- position: absolute
- }
.content {
position: absolute;
top: 5px;
- z-index: 200000000;
+ z-index: 20000;
.el-tabs__nav {
z-index: 20000;
}
diff --git a/src/pages/search/index/App.vue b/src/pages/search/index/App.vue
index d17a996..b31dde4 100644
--- a/src/pages/search/index/App.vue
+++ b/src/pages/search/index/App.vue
@@ -10,6 +10,9 @@
<div class="column-right" :style="`height:${screenHeight}px;`">
<right-side />
</div>
+
+ <card-window></card-window>
+
</div>
</template>
@@ -17,12 +20,14 @@
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
+ RightSide,
+ CardWindow
},
data() {
return {
@@ -57,6 +62,13 @@
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;
diff --git a/src/pages/search/index/Searching.vue b/src/pages/search/index/Searching.vue
index d3003cc..554031e 100644
--- a/src/pages/search/index/Searching.vue
+++ b/src/pages/search/index/Searching.vue
@@ -232,20 +232,19 @@
</div>
</hsc-window>
</hsc-window-style-metal> -->
- <card-window></card-window>
+
</div>
</template>
<script>
import Card from "@/components/subComponents/Card";
import UploadImg from "@/components/searching/UploadImg";
-import CardWindow from "../components/cardWindow";
+//import CardWindow from "../components/cardWindow";
import bus from "./main";
export default {
components: {
Card,
- UploadImg,
- CardWindow
+ UploadImg
},
data() {
return {
@@ -730,6 +729,13 @@
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%;
diff --git a/src/pages/test/components/cardWindow.vue b/src/pages/test/components/cardWindow.vue
new file mode 100644
index 0000000..b19f8ad
--- /dev/null
+++ b/src/pages/test/components/cardWindow.vue
@@ -0,0 +1,362 @@
+<template>
+ <div class="window-view">
+ <hsc-window-style-metal class="windown-model">
+ <hsc-window
+ v-for="(item, index) in CardList.details"
+ :closeButton="true"
+ @closebuttonclick="closeWindow(index)"
+ @update:height="resizeHeight"
+ @update:width="resizeWidth"
+ :key="index"
+ 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 v-if="item.list.length == 1" style="height: calc(100% - 50px)">
+ <model-card :data="item.list[0]"></model-card>
+ </div>
+ <el-carousel v-else height="calc(100% - 50px);" :autoplay="false">
+ <el-carousel-item
+ v-for="(subitem, subindex) in item.list"
+ :key="subindex"
+ height="100%"
+ >
+ <model-card
+ :data="subitem"
+ :activeName="type"
+ @changeType="changeType"
+ :list="item.list"
+ ></model-card>
+ </el-carousel-item>
+ </el-carousel>
+ <div class="model-bottom">
+ <p class="model-bottom-left" @click="upPage(item.list, index)">
+ <i class="el-icon-arrow-left"></i>
+ 涓婁竴涓�
+ </p>
+ <p class="model-bottom-right" @click="nextPage(item.list, index)">
+ 涓嬩竴涓�
+ <i class="el-icon-arrow-right"></i>
+ </p>
+ </div>
+ </hsc-window>
+ </hsc-window-style-metal>
+ </div>
+</template>
+<script>
+import ModelCard from '@/components/subComponents/ModelCard'
+export default {
+ name: 'cardWindow',
+ components: {
+ ModelCard
+ },
+ data() {
+ return {
+ center: '',
+ type: 'pic',
+ defaultHeight: 432,
+ defaultWidth: 600
+ }
+ },
+ methods: {
+ resizeWidth(w) {
+ this.defaultWidth = w
+ },
+ resizeHeight(h) {
+ this.defaultHeight = h
+ },
+ changeType(str) {
+ this.type = str
+ },
+ async closeWindow(index) {
+ let tempPage = JSON.stringify(this.CardList.details[index].ownerPage)
+ this.CardList.details.splice(index, 1)
+ if (this.CardList.details.length > 0) {
+ let len = this.CardList.details.length
+ let currentObj = this.CardList.details[len - 1]
+ if (Number(tempPage) === currentObj.ownerPage) {
+ this.VideoPhotoData.activeCard = currentObj.activeObject.id
+ } else {
+ this.VideoPhotoData.page = currentObj.ownerPage
+ await this.VideoPhotoData.querySearchList()
+ bus.$emit('changePage', this.VideoPhotoData.page)
+ this.CardList.datalist = this.VideoPhotoData.cards
+ this.VideoPhotoData.activeCard = currentObj.activeObject.id
+ }
+ } else {
+ this.VideoPhotoData.activeCard = ''
+ }
+ },
+ async nextPage(dataInfo, index) {
+ let id = dataInfo[0].id
+ let res = this.CardList.getBehindEle(id)
+ if (res) {
+ this.$set(this.CardList.details, index, res)
+ this.VideoPhotoData.activeCard = res.activeObject.id
+ } else {
+ if (
+ this.VideoPhotoData.total <=
+ this.VideoPhotoData.page * this.VideoPhotoData.size
+ ) {
+ this.$notify({
+ title: '娉ㄦ剰',
+ message: '宸叉棤鏁版嵁鏇存柊!',
+ type: 'warning'
+ })
+ return
+ }
+ this.VideoPhotoData.page += 1
+ let detailsLen
+ let len
+ if (this.VideoPhotoData.uploadDiaplay) {
+ await this.VideoPhotoData.findPersonByPage()
+ bus.$emit('changePage', this.VideoPhotoData.page)
+ this.CardList.datalist = this.VideoPhotoData.persons
+ console.log('datalist:', this.CardList.datalist)
+ detailsLen = this.CardList.details.length
+ len = this.VideoPhotoData.persons.length
+ this.VideoPhotoData.activeCard = this.VideoPhotoData.persons[0].activeObject.id
+ } else {
+ await this.VideoPhotoData.querySearchList()
+ bus.$emit('changePage', this.VideoPhotoData.page)
+ this.CardList.datalist = this.VideoPhotoData.cards
+ detailsLen = this.CardList.details.length
+ len = this.VideoPhotoData.cards.length
+ this.VideoPhotoData.activeCard = this.VideoPhotoData.cards[0].activeObject.id
+ }
+ this.$set(this.CardList.details, index, this.CardList.datalist[0])
+ this.$notify({
+ title: '鏇存柊鏁版嵁',
+ message: '宸茶烦杞埌涓嬩竴椤碉紒',
+ type: 'warning'
+ })
+ }
+ this.autoScrollDown()
+ // let target = driver.find_elements_by_class_name("my-active-card")
+ // let target = window.scroll
+ // console.log(target,'閫夋嫨寰楀厓绱�')
+ // driver.execute_script("arguments[0].scrollIntoView();", target)
+ },
+ async upPage(dataInfo, index) {
+ let id = dataInfo[0].id
+ let res = this.CardList.getFrontEle(id)
+ if (res) {
+ this.$set(this.CardList.details, index, res)
+ this.VideoPhotoData.activeCard = res.activeObject.id
+ this.autoScrollUp()
+ } else {
+ if (this.VideoPhotoData.page === 1) {
+ this.$notify({
+ title: '娉ㄦ剰',
+ message: '宸叉棤鏁版嵁鏇存柊!',
+ type: 'warning'
+ })
+ return
+ }
+ this.VideoPhotoData.page -= 1
+ let detailsLen
+ let len
+ if (this.VideoPhotoData.uploadDiaplay) {
+ await this.VideoPhotoData.findPersonByPage()
+ bus.$emit('changePage', this.VideoPhotoData.page)
+ this.CardList.datalist = this.VideoPhotoData.persons
+ detailsLen = this.CardList.details.length
+ len = this.VideoPhotoData.persons.length
+ this.VideoPhotoData.activeCard = this.VideoPhotoData.persons[
+ len - 1
+ ].activeObject.id
+ } else {
+ await this.VideoPhotoData.querySearchList()
+ bus.$emit('changePage', this.VideoPhotoData.page)
+ this.CardList.datalist = this.VideoPhotoData.cards
+ detailsLen = this.CardList.details.length
+ len = this.VideoPhotoData.cards.length
+ this.VideoPhotoData.activeCard = this.VideoPhotoData.cards[
+ len - 1
+ ].activeObject.id
+ }
+ this.$set(this.CardList.details, index, this.CardList.datalist[len - 1])
+
+ this.$notify({
+ title: '鏇存柊鏁版嵁',
+ message: '宸茶烦杞埌涓婁竴椤碉紒',
+ type: 'warning'
+ })
+ this.autoScrollDown(1)
+ }
+ },
+ autoScrollDown(arg) {
+ //arg == 1 琛ㄧず鍚戝墠缈婚〉鐩存帴婊氬埌搴曪紝涓�0鎴栫┖ 琛ㄧず鏈〉鍐呮粴鍔�
+ if (this.VideoPhotoData.scrollContainDom) {
+ this.$nextTick(() => {
+ let dom = document.getElementsByClassName('my-active-card')[0]
+ let scrollTop = this.VideoPhotoData.scrollContainDom.scrollTop
+ let offsetHeight = this.VideoPhotoData.scrollContainDom.offsetHeight
+ if (arg == 1) {
+ this.VideoPhotoData.scrollContainDom.scrollTop =
+ scrollTop + offsetHeight + 160
+ return
+ }
+ if (dom.offsetTop > scrollTop + offsetHeight) {
+ this.VideoPhotoData.scrollContainDom.scrollTop =
+ scrollTop + offsetHeight + 80
+ return
+ }
+ })
+ }
+ },
+ autoScrollUp() {
+ if (this.VideoPhotoData.scrollContainDom) {
+ this.$nextTick(() => {
+ let dom = document.getElementsByClassName('my-active-card')[0]
+ let scrollTop = this.VideoPhotoData.scrollContainDom.scrollTop
+ let offsetHeight = this.VideoPhotoData.scrollContainDom.offsetHeight
+ if (dom.offsetTop < scrollTop && scrollTop !== 0) {
+ this.VideoPhotoData.scrollContainDom.scrollTop =
+ scrollTop - offsetHeight
+ }
+ })
+ }
+ }
+ }
+}
+</script>
+<style lang="scss">
+.layout {
+ min-width: 1350px;
+ overflow: auto;
+}
+.window-view {
+ width: 100%;
+ height: 600px;
+ // height: 100%;
+ // min-height: 684px;
+ overflow: auto;
+ .router-view {
+ float: left;
+ height: 100%;
+ width: calc(100% - 350px);
+ }
+ .windown-model {
+ .content {
+ position: absolute;
+ top: 5px;
+ z-index: 20000;
+ .el-tabs__nav {
+ z-index: 20000;
+ }
+ }
+ .el-carousel {
+ .el-carousel__container {
+ height: calc(100% - 10px);
+ .el-carousel__arrow:hover {
+ background-color: rgba(102, 102, 102);
+ }
+ .el-carousel__arrow--right {
+ right: 42%;
+ }
+ .el-carousel__arrow--left {
+ left: 42%;
+ }
+ }
+ }
+ .el-tabs__nav {
+ //box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.07);
+ padding-left: 20px;
+ .el-tabs__active-bar {
+ width: 40px;
+ margin-left: 20px;
+ }
+ .el-tabs__item {
+ font-size: 18px;
+ }
+ }
+ .titlebar {
+ background: #fff !important;
+ height: 10px !important;
+ padding: 0px;
+ position: relative;
+ z-index: 30000;
+ .button {
+ font-size: 25px;
+ margin: 5px;
+ //position: relative;
+ //z-index: 5;
+ top: 10px;
+ }
+ }
+ .button {
+ background-color: transparent;
+ border: none;
+ font-size: medium;
+ margin: 0;
+ padding: 0 0.25em;
+ border-radius: 4pt;
+ cursor: pointer;
+ }
+ .el-carousel__indicators {
+ display: none;
+ }
+ .el-carousel {
+ height: calc(100% - 50px);
+ }
+ .el-carousel__arrow {
+ bottom: -25px !important;
+ top: inherit !important;
+ }
+ .model-bottom {
+ width: 100%;
+ height: 45px;
+ line-height: 45px;
+ font-size: 15px;
+ color: #222222;
+ .model-bottom-left,
+ .model-bottom-right {
+ cursor: pointer;
+ padding: 0px 10px;
+ }
+ .model-bottom-left {
+ float: left;
+ }
+ .model-bottom-right {
+ float: right;
+ }
+ .model-bottom-left:hover {
+ color: #3d68e1;
+ }
+ .model-bottom-right:hover {
+ color: #3d68e1;
+ }
+ }
+ }
+}
+.close-tree-log {
+ position: absolute;
+ width: 32px;
+ height: 41px;
+ float: left;
+ top: 48px;
+ box-sizing: border-box;
+ background: #ffffff;
+ box-shadow: 0 -3px 36px 0 rgba(0, 0, 0, 0.19);
+ border-top-right-radius: 3em;
+ border-bottom-right-radius: 3em;
+ i {
+ position: relative;
+ top: -4px;
+ left: -5px;
+ font-size: 24px;
+ color: #3d68e1;
+ cursor: pointer;
+ }
+}
+</style>
diff --git a/src/pages/test/components/layout.vue b/src/pages/test/components/layout.vue
new file mode 100644
index 0000000..8cce0c5
--- /dev/null
+++ b/src/pages/test/components/layout.vue
@@ -0,0 +1,125 @@
+<template>
+ <div class="column">
+ <div class="column-left" :style="`height:${screenHeight}px;`">
+ <div class="resize-bar"></div>
+ <div class="resize-line"></div>
+ <div class="resize-save">
+ <left-nav :appName="'Video'" :height="screenHeight - 40"></left-nav>
+ </div>
+ </div>
+ <div class="column-right" :style="`height:${screenHeight}px;`">
+ <right-side />
+ </div>
+
+ </div>
+</template>
+
+<script>
+import LeftNav from "@/components/LeftNav";
+// import CameraVideo from "./components/Video.vue";
+import RightSide from "../index/Searching"
+
+export default {
+ name: "layout",
+ components: {
+ LeftNav,
+ RightSide
+
+ },
+ data() {
+ return {
+ screenHeight: 0,
+ }
+ },
+ mounted() {
+ this.screenHeight = document.documentElement.clientHeight - 20;
+ window.onresize = () => {
+ return (() => {
+ this.screenHeight = document.documentElement.clientHeight - 20;
+ })();
+ };
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.column {
+ overflow: hidden;
+}
+.column-left {
+ height: inherit;
+ background-color: #fff;
+ position: relative;
+ float: left;
+}
+.column-right {
+ height: 100%;
+ padding: 16px;
+ 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;
+ overflow-x: hidden;
+}
+.resize-bar {
+ width: 310px;
+ height: inherit;
+ resize: horizontal;
+ cursor: ew-resize;
+ opacity: 0;
+ overflow: scroll;
+ max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴�
+ min-width: 310px; //璁惧畾鏈�灏忓搴�
+}
+/* 鎷栨嫿绾� */
+.resize-line {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border-right: 2px solid #eee;
+ border-left: 1px solid #bbb;
+ 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>
diff --git a/src/pages/test/index/App.vue b/src/pages/test/index/App.vue
new file mode 100644
index 0000000..b2f151a
--- /dev/null
+++ b/src/pages/test/index/App.vue
@@ -0,0 +1,115 @@
+<template>
+ <div class="column">
+ <layout></layout>
+ <div class="heigher-index">
+ <card-window></card-window>
+ </div>
+ </div>
+</template>
+
+<script>
+import CardWindow from "../components/cardWindow";
+import Layout from "../components/layout"
+export default {
+ name: "SearchPage",
+ components: {
+ CardWindow,
+ Layout
+ },
+ data() {
+ return {
+ screenHeight: 0,
+ }
+ },
+ mounted() {
+ this.screenHeight = document.documentElement.clientHeight - 20;
+ window.onresize = () => {
+ return (() => {
+ this.screenHeight = document.documentElement.clientHeight - 20;
+ })();
+ };
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.column {
+ overflow: hidden;
+}
+.column-left {
+ height: inherit;
+ background-color: #fff;
+ position: relative;
+ float: left;
+}
+.column-right {
+ height: 100%;
+ padding: 16px;
+ 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;
+ overflow-x: hidden;
+}
+.resize-bar {
+ width: 310px;
+ height: inherit;
+ resize: horizontal;
+ cursor: ew-resize;
+ opacity: 0;
+ overflow: scroll;
+ max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴�
+ min-width: 310px; //璁惧畾鏈�灏忓搴�
+}
+/* 鎷栨嫿绾� */
+.resize-line {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border-right: 2px solid #eee;
+ border-left: 1px solid #bbb;
+ 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>
diff --git a/src/pages/test/index/Searching.vue b/src/pages/test/index/Searching.vue
new file mode 100644
index 0000000..0802c12
--- /dev/null
+++ b/src/pages/test/index/Searching.vue
@@ -0,0 +1,908 @@
+<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
+ @change="searchingBtn"
+ :disabled="isDisabled"
+ collapse-tags
+ size="mini"
+ style="width:calc(100% - 40px);min-width: 120px;"
+ placeholder="璇烽�夋嫨"
+ >
+ <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%">
+ <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% - 72px)">
+ <!-- <div id="searchMid" class="mid" ref="scrollContain" v-if="!VideoPhotoData.uploadDiaplay">
+ <Card
+ :class="item.activeObject.id === VideoPhotoData.activeCard ? 'my-active-card' : ''"
+ v-for="(item, index) in VideoPhotoData.cards"
+ :key="index + 'a'"
+ :outHeight="'155px'"
+ :outWidth="cardWidth"
+ :data="item"
+ :showType="showType"
+ @detailsClick="getDetails($event, index)"
+ @addToBase="toAdd"
+ ></Card>
+ </div>-->
+ <div id="searchMid" class="mid">
+ <div class="left-selection" v-if="VideoPhotoData.uploadDiaplay">
+ <upload-img ref="uploadImg" @labelDisabled="disabled"></upload-img>
+ </div>
+ <div
+ class="right-section"
+ ref="scrollContain"
+ :style="VideoPhotoData.uploadDiaplay ? 'calc(100% - 315px)' : 'width:100%'"
+ >
+ <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>
+ </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 (0) {
+ this.VideoPhotoData.uploadDiaplay = true;
+ console.log("鍒璺宠繃鏉ョ殑浠ュ浘鎼滃浘");
+ this.VideoPhotoData.picUrl = this.$route.query.picSmUrl;
+ this.VideoPhotoData.uploadImg = this.$route.query.picSmUrl;
+ this.VideoPhotoData.uploadType = true
+ this.VideoPhotoData.compTargetId = this.$route.query.targetId
+ this.VideoPhotoData.compTargetType = this.$route.query.compType
+ this.VideoPhotoData.size = 30
+ this.VideoPhotoData.compareTabs = ["esData"];
+ this.VideoPhotoData.findPerson2(); // 鏌ユ壘姝や汉
+ // this.$nextTick(() => {
+ // this.$refs.uploadImg.rightSectionDisplay = true;
+ // });
+ } 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;
+ } else {
+ this.typeDisable = false;
+ this.VideoPhotoData.querySearchList();
+ }
+ },
+ "VideoPhotoData.selectBlacks": function (value) {
+ this.blackAngWhite()
+ },
+ "VideoPhotoData.selectWhites": function (value) {
+ this.blackAngWhite()
+ },
+ tagValues: function (newValue, oldValue) {
+ if (newValue.length > 0) {
+ this.showType = "compare";
+ } else {
+ this.showType = "search";
+ }
+ if (newValue.length !== oldValue.length) {
+ console.log("tagValue涓殑鍒锋柊鏂规硶");
+ // this.VideoPhotoData.querySearchList();
+ this.setLoadSearch(this.VideoPhotoData.querySearchList());
+ }
+ },
+ "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: {
+ 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);
+ 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) {
+ debugger
+ //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();
+ })
+ }
+ }
+};
+</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;
+ .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% - 135px);
+ 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: 10px;
+ 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: 24px;
+ 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;
+}
+.addToBase {
+ width: 98%;
+ height: 450px;
+ 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>
+#searchMid {
+ .el-loading-mask {
+ .el-loading-spinner {
+ width: 100%;
+ height: 100%;
+ .el-loading-spinner-search {
+ background: url("../../../assets/gif/searchLoading.gif") no-repeat;
+ }
+ }
+ }
+ .left-selection {
+ width: 300px;
+ height: 100%;
+ float: left;
+ margin-right: 15px;
+ }
+ .right-section {
+ //width: calc(100% - 315px);
+ height: 100%;
+ float: left;
+ overflow: auto;
+ position: relative;
+ }
+}
+</style>
diff --git a/src/pages/test/index/main.ts b/src/pages/test/index/main.ts
new file mode 100644
index 0000000..849c98f
--- /dev/null
+++ b/src/pages/test/index/main.ts
@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import "@/assets/css/element-variables.scss";
+import "../../../assets/css/common.scss"
+import "../../../assets/css/overried.scss"
+
+import "../../../assets/icons/alibaba/iconfont.css";
+import "../../../assets/icons/basic/iconfont.css";
+import "../../../assets/icons/iconfont.css";
+import "../../../assets/icons/symbol.js";
+
+import App from './App.vue'
+import moment from "moment";
+Vue.prototype.$moment = moment;
+
+import Mixin from "./mixins";
+Vue.mixin(Mixin);
+
+Vue.use(ElementUI)
+
+import * as VueWindow from "@hscmap/vue-window";
+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)
+})
diff --git a/src/pages/test/index/mixins.ts b/src/pages/test/index/mixins.ts
new file mode 100644
index 0000000..163c814
--- /dev/null
+++ b/src/pages/test/index/mixins.ts
@@ -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;
\ No newline at end of file
--
Gitblit v1.8.0