jianguan
/
supervise-monitor-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

视频中心效果的代码的修改，质物监测中的各页面的修改，

master
zyc@123456 2 years ago
parent
1b703d045d
commit
e8421a397d
4 changed files with 375 additions and 192 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/views/dashboard/components/HomeMap.vue
  2. 446
      src/views/monitor/videos/index.vue
  3. 61
      src/views/zhiwujiance/zhiwujianceInfo.vue
  4. 53
      src/views/zhiwujiance/zhiwujianceList.vue

7
src/views/dashboard/components/HomeMap.vue
View File

@ -344,9 +344,12 @@
)
return (
params.name +
'<br/>仓库数量: ' +
valueStr +
'<br/>仓库数量:1 ' +
'个'
// params.name +
// '<br/>仓库数量: ' +
// valueStr +
// '个'
)
} else {
return (

446
src/views/monitor/videos/index.vue
View File

@ -22,8 +22,6 @@
</el-select>
</el-form-item> -->
</el-form>
<!-- 11 -->
</div>
<div class="shipinscons">
@ -61,31 +59,91 @@
</div> -->
<!-- 111end -->
<!-- 222视频监控 -->
<div class="ruqinbaojingcss" style="z-index: 20;" v-if="showShipinjiankong">
<div class="myiconfont bluezibg jingicon shipin_zhengchang1" v-if="showShipinjiankong_zhengchang" @mouseover="enter" @mouseleave="leave" @click="openshipinShipinjiankong()">&#xe644;</div>
<div class="ruqinbaojingcss" v-if="showShipinjiankong">
<div class="myiconfont huizibg jingicon shipin_lixian1" v-if="showShipinjiankong_lixian">&#xe644;</div>
<div class="myiconfont redzibg jingicon shipin_baojing1" v-if="showShipinjiankong_baojing">&#xe644;</div>
<!-- 显示文字 -->
<div class="seencons shipin_zhengchang1b" v-if="seenshipinShipinjiankong">
<p @click="toMore()">实时视频</p>
<p @click="toMore()">回放视频</p>
</div>
<!-- 鼠标移入显示文字 -->
<div class="seenconsc shipin_zhengchang1c" v-if="seen_shubiaoShipinjiankong">
<p>设备名称：1号楼1F西侧走廊像机1</p>
<p>设备编号：HK023123</p>
<p>设备IP：192.168.1.2</p>
<div class="shipincss Shipin_yingzi" v-if="showShipinjiankong_zhengchang">
<div class="jingicon shipin_zhengchang1" v-if="showShipinjiankong_zhengchang">
<div class="myiconfont jingicon bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter" @mouseleave="leave" @click="openshipinShipinjiankong()">&#xe644;</div>
<!-- 显示文字 -->
<div class="seencons shipin_out" v-if="seenshipinShipinjiankong">
<p @click="toMore()">实时视频</p>
<p @click="toMore()">回放视频</p>
</div>
<!-- 鼠标移入显示文字 -->
<div class="seenconsc shipin_out" v-if="seen_shubiaoShipinjiankong">
<p>设备名称：1号楼1F西侧走廊像头1</p>
<p>设备编号：HK023123</p>
</div>
</div>
<div class="jingicon shipin_zhengchang2" v-if="showShipinjiankong_zhengchang">
<div class="myiconfont jingicon bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter2" @mouseleave="leave2" @click="openshipinShipinjiankong2()">&#xe644;</div>
<!-- 显示文字 -->
<!-- <div class="seencons shipin_out" v-if="seenshipinShipinjiankong2">
<p @click="toMore()">实时视频2</p>
<p @click="toMore()">回放视频2</p>
</div> -->
<!-- 鼠标移入显示文字 -->
<!-- <div class="seenconsc shipin_out" v-if="seen_shubiaoShipinjiankong2">
<p>设备名称：1号楼1F西侧走廊像头222</p>
<p>设备编号：HK222222</p>
</div> -->
</div>
<div class="jingicon shipin_zhengchang3" v-if="showShipinjiankong_zhengchang">
<div class="myiconfont jingicon bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter3" @mouseleave="leave3" @click="openshipinShipinjiankong3()">&#xe644;</div>
<!-- 显示文字 -->
<!-- <div class="seencons shipin_out" v-if="seenshipinShipinjiankong3">
<p @click="toMore()">实时视频</p>
<p @click="toMore()">回放视频3</p>
</div> -->
<!-- 鼠标移入显示文字 -->
<!-- <div class="seenconsc shipin_out" v-if="seen_shubiaoShipinjiankong3">
<p>设备名称：1号楼1F西侧走廊像头33</p>
<p>设备编号：HK3333</p>
</div> -->
</div>
<div class="jingicon shipin_zhengchang4" v-if="showShipinjiankong_zhengchang">
<div class="myiconfont jingicon bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter4" @mouseleave="leave4" @click="openshipinShipinjiankong4()">&#xe644;</div>
<!-- 显示文字 -->
<!-- <div class="seencons shipin_out" v-if="seenshipinShipinjiankong4">
<p @click="toMore()">实时视频4</p>
<p @click="toMore()">回放视频</p>
</div> -->
<!-- 鼠标移入显示文字 -->
<!-- <div class="seenconsc shipin_out" v-if="seen_shubiaoShipinjiankong4">
<p>设备名称：1号楼1F西侧走廊像头4</p>
<p>设备编号：HK0244444</p>
</div> -->
</div>
<!-- <div class="myiconfont bluezibg jingicon shipin_zhengchang1" v-if="showShipinjiankong_zhengchang" @mouseover="enter" @mouseleave="leave" @click="openshipinShipinjiankong()">&#xe644;</div>
<div class="myiconfont bluezibg jingicon shipin_zhengchang2" v-if="showShipinjiankong_zhengchang">&#xe644;</div>
<div class="myiconfont bluezibg jingicon shipin_zhengchang3" v-if="showShipinjiankong_zhengchang">&#xe644;</div>
<div class="myiconfont bluezibg jingicon shipin_zhengchang4" v-if="showShipinjiankong_zhengchang">&#xe644;</div> -->
<!-- 显示文字 -->
<!-- <div class="seencons shipin_zhengchang1b" v-if="seenshipinShipinjiankong">
<p @click="toMore()">实时视频</p>
<p @click="toMore()">回放视频</p>
</div> -->
<!-- 鼠标移入显示文字 -->
<!-- <div class="seenconsc shipin_zhengchang1c" v-if="seen_shubiaoShipinjiankong">
<p>设备名称：1号楼1F西侧走廊像头1</p>
<p>设备编号：HK023123</p>
</div> -->
</div>
</div>
<!-- 2222end -->
<!-- 333门禁管理 -->
<div class="ruqinbaojingcss" style="z-index: 30;" v-if="showMenjinguanli">
<div class="myiconfont bluezibg jingicon menjin_zhengchang1" v-if="showMenjinguanli_zhengchang" @click="openshipinMenjinguanli()">&#xe60b;</div>
<div class="ruqinbaojingcss" v-if="showMenjinguanli">
<div class="Menjincss Menjin_yingzi" v-if="showMenjinguanli_zhengchang">
<div class="myiconfont bluezibg jingicon menjin_zhengchang1" v-if="showMenjinguanli_zhengchang" @click="openshipinMenjinguanli()">&#xe60b;</div>
<div class="myiconfont bluezibg jingicon menjin_zhengchang2" v-if="showMenjinguanli_zhengchang">&#xe60b;</div>
</div>
<div class="myiconfont huizibg jingicon menjin_lixian1" v-if="showMenjinguanli_lixian">&#xe60b;</div>
<div class="myiconfont redzibg jingicon menjin_baojing1" v-if="showMenjinguanli_baojing">&#xe60b;</div>
<!-- 显示文字 -->
<div class="seencons menjin_zhengchang1b" v-if="seenshipinMenjinguanli">
@ -94,136 +152,67 @@
</div>
<!-- 333end -->
<!--444门电子围栏-->
<div class="ruqinbaojingcss" style="z-index: 40;" v-if="showDianziweilan">
<div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1" v-if="showDianziweilan_zhengchang" @click="openshipinDianziweilan()">&#xe6b8;</div>
<div class="ruqinbaojingcss" v-if="showDianziweilan">
<div class="myiconfont huizibg jingicon Dianziweilan_lixian1" v-if="showDianziweilan_lixian">&#xe6b8;</div>
<div class="myiconfont redzibg jingicon Dianziweilan_baojing1" v-if="showDianziweilan_baojing">&#xe6b8;</div>
<div class="Dianziweilancss Dianziweilan_yingzi" v-if="showDianziweilan_zhengchang">
<div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1" v-if="showDianziweilan_zhengchang" @click="openshipinDianziweilan()">&#xe6b8;</div>
<div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang2" v-if="showDianziweilan_zhengchang">&#xe6b8;</div>
<div class="myiconfont huizibg jingicon Dianziweilan_lixian1" v-if="showDianziweilan_lixian">&#xe6b8;</div>
<div class="myiconfont redzibg jingicon Dianziweilan_baojing1" v-if="showDianziweilan_baojing">&#xe6b8;</div>
<!-- 显示文字 -->
<div class="seencons Dianziweilan_zhengchang1b" v-if="seenshipinDianziweilan">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
<div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang3" v-if="showDianziweilan_zhengchang">&#xe6b8;</div>
<div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang4" v-if="showDianziweilan_zhengchang">&#xe6b8;</div>
<div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang5" v-if="showDianziweilan_zhengchang">&#xe6b8;</div>
<div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang6" v-if="showDianziweilan_zhengchang">&#xe6b8;</div>
<!-- 显示文字 -->
<div class="seencons Dianziweilan_zhengchang1b" v-if="seenshipinDianziweilan">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
</div>
</div>
</div>
<!-- 444end -->
</div>
</div>
<div class="sbottombars">
<!-- 下部机构导航 -->
<!-- <div class="tabhead">
<div class="tabhead">
<el-checkbox-group v-model="departmentTypeArray">
<el-checkbox-button label="1" checked><div @click="openruqinbaojing()"><span class="iconfontyuan myiconfont redziyuan icon-intruder-alarm"></span>入侵报警</div></el-checkbox-button>
<el-checkbox-button label="2"><div @click="openshipinjiankong()"><span class="iconfontyuan myiconfont greenziyuan icon-shipin1"></span>视频监控</div></el-checkbox-button>
<el-checkbox-button label="3"><div @click="openmenjinguanli()"><span class="iconfontyuan myiconfont yellowziyuan icon-menjin"></span>门禁管理</div></el-checkbox-button>
<el-checkbox-button label="4"><div @click="opendianziweilan()"><span class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div></el-checkbox-button>
<!-- <el-checkbox-button label="1" checked><div @click="openruqinbaojing()"><span class="iconfontyuan myiconfont redziyuan icon-intruder-alarm"></span>入侵报警</div></el-checkbox-button> -->
<el-checkbox-button checked label="2"><div @click="openshipinjiankong()"><span class="iconfontyuan myiconfont greenziyuan icon-shipin1"></span>视频监控</div></el-checkbox-button>
<el-checkbox-button checked label="3"><div @click="openmenjinguanli()"><span class="iconfontyuan myiconfont yellowziyuan icon-menjin"></span>门禁管理</div></el-checkbox-button>
<el-checkbox-button checked label="4"><div @click="opendianziweilan()"><span class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div></el-checkbox-button>
</el-checkbox-group>
</div> -->
<div class="leftbars">
<div class="bartops">
<div class="libar bluezi">视频监控</div>
<div class="libar bluezi">门禁管理</div>
<div class="libar bluezi">电子围栏</div>
</div>
<div class="moress" >
<!-- 入侵报警 -->
<!-- <div class="mores">
<el-checkbox-group size="mini" v-model="btnRuqinbaojing" v-if="showRuqinbaojing" @change="openbtnRuqinbaojing">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="openruqinbaojing_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe608;</span><span class="numzi bluezi">216</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="openruqinbaojing_lixian()">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe608;</span><span class="numzi huizi">23</span>
</div>
<div class="moress" >
<!-- 视频监控按钮组 -->
<div class="mores">
<el-checkbox-group size="mini" v-model="btnShipinjiankong">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="open_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe644;</span><span class="numzi bluezi">216</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="openruqinbaojing_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe608;</span><span class="numzi redzi">38</span>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div> -->
<div class="mores">
<!-- 视频监控按钮组 -->
<el-checkbox-group size="mini" v-model="btnShipinjiankong" v-if="showShipinjiankong">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="openShipinjiankong_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe644;</span><span class="numzi bluezi">216</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="openShipinjiankong_lixian()">
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="open_lixian()">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe644;</span><span class="numzi huizi">23</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="openShipinjiankong_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe644;</span><span class="numzi redzi">38</span>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="mores">
<!-- 门禁管理按钮组 -->
<el-checkbox-group size="mini" v-model="btnMenjinguanli" v-if="showMenjinguanli">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="openMenjinguanli_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe60b;</span><span class="numzi bluezi">216</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="openMenjinguanli_lixian()">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe60b;</span><span class="numzi huizi">23</span>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="open_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe644;</span><span class="numzi redzi">38</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="openMenjinguanli_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe60b;</span><span class="numzi redzi">38</span>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="mores">
<!-- 电子围栏按钮组 -->
<el-checkbox-group size="mini" v-model="btnDianziweilan" v-if="showDianziweilan">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="openDianziweilan_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe6b8;</span><span class="numzi bluezi">216</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="openDianziweilan_lixian()">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe6b8;</span><span class="numzi huizi">23</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="openDianziweilan_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe6b8;</span><span class="numzi redzi">38</span>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div>
</div>
</div>
<!-- 列表结束 -->
</div>
@ -380,6 +369,9 @@ export default {
// 视频结束
seenshipinRuqinbaojing: false,
seenshipinShipinjiankong: false,
seenshipinShipinjiankong2: false,
seenshipinShipinjiankong3: false,
seenshipinShipinjiankong4: false,
seenshipinMenjinguanli: false,
seenshipinDianziweilan: false,
//
@ -389,6 +381,9 @@ export default {
showDianziweilan: true,
//鼠标移入
seen_shubiaoShipinjiankong: false,
seen_shubiaoShipinjiankong2: false,
seen_shubiaoShipinjiankong3: false,
seen_shubiaoShipinjiankong4: false,
//上边的按钮入侵报警正常
showRuqinbaojing_zhengchang: true,
//上边的按钮入侵报警离线
@ -442,6 +437,15 @@ export default {
openshipinShipinjiankong() {
this.seenshipinShipinjiankong = !this.seenshipinShipinjiankong
},
openshipinShipinjiankong2() {
this.seenshipinShipinjiankong2 = !this.seenshipinShipinjiankong2
},
openshipinShipinjiankong3() {
this.seenshipinShipinjiankong3 = !this.seenshipinShipinjiankong3
},
openshipinShipinjiankong4() {
this.seenshipinShipinjiankong4 = !this.seenshipinShipinjiankong4
},
openshipinMenjinguanli() {
this.seenshipinMenjinguanli = !this.seenshipinMenjinguanli
},
@ -518,6 +522,25 @@ export default {
openDianziweilan_baojing() {
this.showDianziweilan_baojing = !this.showDianziweilan_baojing
},
//////
//上边的按钮正常
open_zhengchang() {
this.showShipinjiankong_zhengchang = !this.showShipinjiankong_zhengchang
this.showMenjinguanli_zhengchang = !this.showMenjinguanli_zhengchang
this.showDianziweilan_zhengchang = !this.showDianziweilan_zhengchang
},
//上边的按钮离线
open_lixian() {
this.showShipinjiankong_lixian = !this.showShipinjiankong_lixian
this.showMenjinguanli_lixian = !this.showMenjinguanli_lixian
this.showDianziweilan_lixian = !this.showDianziweilan_lixian
},
//上边的按钮报警
open_baojing() {
this.showShipinjiankong_baojing = !this.showShipinjiankong_baojing
this.showMenjinguanli_baojing = !this.showMenjinguanli_baojing
this.showDianziweilan_baojing = !this.showDianziweilan_baojing
},
//鼠标移入
enter() {
this.seen_shubiaoShipinjiankong = true
@ -525,7 +548,27 @@ export default {
leave() {
this.seen_shubiaoShipinjiankong = false
},
//鼠标移入2
enter2() {
this.seen_shubiaoShipinjiankong2 = true
},
leave2() {
this.seen_shubiaoShipinjiankong2 = false
},
//鼠标移入3
enter3() {
this.seen_shubiaoShipinjiankong3 = true
},
leave3() {
this.seen_shubiaoShipinjiankong3 = false
},
//鼠标移入2
enter4() {
this.seen_shubiaoShipinjiankong4 = true
},
leave4() {
this.seen_shubiaoShipinjiankong4 = false
},
resetState() {
this.viewState = 1
},
@ -735,16 +778,17 @@ export default {
<style scoped>
.main-content{position: relative;overflow: hidden;}
.seencons{background-color: #fff;
.seencons{background-color: #fff;width: 130px;z-index: 9900;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
padding: 0 10px;}
.seencons p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:center;cursor: pointer;}
padding: 0 30px;}
.seencons p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:left;cursor: pointer;}
/* // */
/* 鼠标移入 */
.seenconsc{background-color: #fff;
.seenconsc{background-color: #fff;width: 250px;z-index: 9800;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
padding: 0 10px;}
padding: 0 30px;}
.seenconsc p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:left;cursor: pointer;}
.shipin_out{position: absolute;top: 40px;left: 35px;}
/* .app-container{background-color: #f5f5f5;margin: 0;} */
.shipinlisttop {position: relative;
display: flex;
@ -765,9 +809,9 @@ export default {
background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
} */
.shipinscons {height: 95%;text-align: center;overflow-y: auto;
margin: 20px auto 0;
margin: 0px auto 0;
text-align: center;position: relative;
padding: 20px 50px 20px 320px;
padding: 20px 50px 20px 50px;
background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
}
.shipinscon {width: 60%;
@ -795,12 +839,18 @@ export default {
/* float: left;
top:0; */
}
.shipinstu .jingicon {cursor: pointer;
.Dianziweilancss{position:absolute;top:4%;right: 15%;bottom: 4%;left: 15%;
}
.shipincss{position:absolute;top:2%;right: 1%;bottom: 2%;left: 2%;
}
.Menjincss{position:absolute;top:2%;right: 2%;bottom: 2%;left: 2%;
}
.shipinstu .jingicon {cursor: pointer;position: relative;
font-size: 22px !important;
border-radius: 40px !important;
width: 40px !important;
height: 40px !important;line-height: 40px;
padding: 0px;text-align: center;
padding: 0px;text-align: center;z-index: 20;
}
@ -838,24 +888,50 @@ export default {
.shipinstu .ruqin_lixian2{position: absolute;top: 30%;left: 98%;}
/* //视频监控// */
.shipinstu .shipin_baojing1{position: absolute;top: 35px;left: 22%;}
.shipinstu .shipin_zhengchang1{position: absolute;top: 22%;left: 25%;}
.shipinstu .shipin_zhengchang1b{position: absolute;top: 28%;left: 26%;z-index: 800;}
.shipinstu .shipin_zhengchang1c{position: absolute;top: 28%;left: 26%;z-index: 200;}
.shipinstu .shipin_lixian1{position: absolute;top: 50%;left: 30%;}
.shipinstu .shipin_baojing1{position: absolute;top: 13%;left: 2%;}
.shipinstu .shipin_zhengchang1{position: absolute;top: 2%;left: 2%;}
/* .shipinstu .shipin_out{position: absolute;top: 40%;left: 40%;z-index: 800;}
.shipinstu .shipin_dianout{position: absolute;top: 40%;left: 40%;z-index: 200;} */
.shipinstu .shipin_zhengchang1b{position: absolute;top: 7%;left: 7%;z-index: 8000;}
.shipinstu .shipin_zhengchang1c{position: absolute;top: 7%;left: 7%;z-index: 8000;}
.shipinstu .shipin_lixian1{position: absolute;top: 78%;left: 2%;}
.shipinstu .shipin_zhengchang2{position: absolute;top: 90%;left: 2%;}
.shipinstu .shipin_zhengchang3{position: absolute;top: 2%;left: 93%;}
.shipinstu .shipin_zhengchang4{position: absolute;top: 90%;left: 93%;}
/* //门禁管理// */
.shipinstu .menjin_baojing1{position: absolute;top: 35px;left: 32%;}
.shipinstu .menjin_zhengchang1{position: absolute;top: 22%;left: 35%;}
.shipinstu .menjin_zhengchang1b{position: absolute;top: 28%;left: 37%;}
.shipinstu .menjin_baojing1{position: absolute;top: 12%;left: 90%;}
.shipinstu .menjin_zhengchang1{position: absolute;top: 14%;left: 95%;}
.shipinstu .menjin_zhengchang1b{position: absolute;top: 19%;left: 92%;z-index: 800;}
.shipinstu .menjin_lixian1{position: absolute;top: 78%;left: 90%;}
.shipinstu .menjin_lixian1{position: absolute;top: 50%;left: 40%;}
.shipinstu .menjin_zhengchang2{position: absolute;top: 78%;left: 95%;}
/* //电子围栏// */
.shipinstu .Dianziweilan_baojing1{position: absolute;top: 35px;left: 42%;}
.shipinstu .Dianziweilan_zhengchang1{position: absolute;top: 22%;left: 45%;}
.shipinstu .Dianziweilan_zhengchang1b{position: absolute;top: 28%;left: 47%;}
.shipinstu .Dianziweilan_baojing1{position: absolute;top: 35px;left: 42%;z-index: 5000;}
.shipinstu .Dianziweilan_zhengchang1{position: absolute;top: 0%;left: 93%;z-index: 500;}
.shipinstu .Dianziweilan_zhengchang1b{position: absolute;top: 5%;left: 88%;z-index: 500;}
.shipinstu .Dianziweilan_lixian1{position: absolute;top: 87%;left: 42%;}
.shipinstu .Dianziweilan_zhengchang2{position: absolute;top: 92%;left: 93%;}
.shipinstu .Dianziweilan_zhengchang3{position: absolute;top: 0%;left: 46%;}
.shipinstu .Dianziweilan_zhengchang4{position: absolute;top: 92%;left: 46%;}
.shipinstu .Dianziweilan_zhengchang5{position: absolute;top: 0%;left: 0%;}
.shipinstu .Dianziweilan_zhengchang6{position: absolute;top: 92%;left: 0%;}
.shipinstu .Dianziweilan_lixian1{position: absolute;top: 50%;left: 46%;}
.Dianziweilan_yingzi{
/* background-color: rgba(73, 74, 75, 0.2); */
border-radius: 30px;}
.Shipin_yingzi{
/* background-color: rgba(70, 117, 192, 0.2); */
/* z-index: 200; */
}
.Menjin_yingzi{
/* background-color: rgba(70, 117, 192, 0.2); */
/* z-index: 200; */
}
.Shipinlixian_yingzi{
/* background-color: rgba(94, 4, 4, 0.2); */
z-index: 10;}
.mores /deep/ .el-checkbox{width: 126px;margin: 0;}
.mores /deep/ .el-checkbox-button {
background-color: #dbd9d9;height: 40px;margin: 0px 0 20px 0;
@ -866,14 +942,36 @@ export default {
.mores /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
background-color: #e9f7fa;border: 1px solid #469efd;color: #000;
}
.moress{
/* position: absolute;top: 100px;left: 20px;z-index: 9000; */
padding: 0 0px;
/* // 底部导航 */
.sbottombars{
/* padding: 30px;
background-color: #ffffff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; */
position: fixed;
bottom: 50px;
left: 230px;width: 100%;
/* z-index: 900; */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: center;
}
.tabhead {padding: 0 0px 0 0;
/* position: fixed;
bottom: 50px;
left: 230px;
z-index: 900; */
}
.moress{
/* position: absolute;bottom:30px;right: 20px;z-index: 9000;left: 20px; */
padding: 20px 0 0 170px;margin: 0px 0 0px 0;
/* display: flex;
flex-direction: column;
justify-content: center;align-items: center;
justify-content: center;align-items: center; */
}
.mores{padding: 0 0px;margin: 0px 0 0px 0;flex: 1;
.mores{padding: 0 0px;margin: 0px 0 0px 0;
/* flex: 1; */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@ -921,17 +1019,7 @@ export default {
.huizi{color: #373739;}
/* // 底部导航 */
.tabhead {
/* position: fixed;
bottom: 50px;
left: 230px; */
position: absolute;
top: 30px;
left: 20px;
z-index: 900;
}
.iconfontyuan {
font-size: 18px !important;
margin: 0 3px 0 3px;
@ -965,15 +1053,13 @@ export default {
color: #fff;
background-color: #683afd;
}
/* // .tabhead .bar{background-color: #0b5394;color: #f5f7fa;border-right: 1px solid #fff;padding: 11px 0;text-align: center;display: inline-block;vertical-align: top;
// width: calc((100% - 1px) / 4 );box-sizing: border-box;font-size:18px;}
// .tabhead .bar:last-of-type{border-right: 0px solid #eeeeee;width: calc((100% - 0px) / 4 );}
// .tabhead .barb {background-color: #fff;color: #0b5394;} */
.leftbars{
/* padding: 30px;
background-color: #ffffff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; */
.tabhead .bar{background-color: #0b5394;color: #f5f7fa;border-right: 1px solid #fff;padding: 11px 0;text-align: center;display: inline-block;vertical-align: top;
width: calc((100% - 1px) / 4 );box-sizing: border-box;font-size:18px;}
.tabhead .bar:last-of-type{border-right: 0px solid #eeeeee;width: calc((100% - 0px) / 4 );}
.tabhead .barb {background-color: #fff;color: #0b5394;}
/* .leftbars{
position: absolute;
top: 30px;
top: 60px;
left: 20px;
z-index: 900;
display: flex;
@ -983,5 +1069,5 @@ export default {
.leftbars .bartops{width: 120px;}
.leftbars .bartops .libar{margin: 0 0 21px 0;padding: 10px;
background-color: #ffffff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;}
.leftbars .moress{flex: 1;}
.leftbars .moress{flex: 1;} */
</style>

61
src/views/zhiwujiance/zhiwujianceInfo.vue
View File

@ -13,6 +13,61 @@
<div>质物监测详情信息</div>
</div>
<el-row>
<el-col :span="4" class="tleftb">
<span>仓库名称</span>
</el-col>
<el-col :span="8">
<el-form-item>
<span>{{ infoForm.name }}</span>
</el-form-item>
</el-col>
<el-col :span="4" class="tleftb">
<span>仓库位置</span>
</el-col>
<el-col :span="8">
<el-form-item>
<span>{{ infoForm.weizhi }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4" class="tleftb">
<span>货架号</span>
</el-col>
<el-col :span="8">
<el-form-item>
<span>{{ infoForm.huohao }}</span>
</el-form-item>
</el-col>
<el-col :span="4" class="tleftb">
<span>联系人</span>
</el-col>
<el-col :span="8">
<el-form-item>
<span>{{ infoForm.ren }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4" class="tleftb">
<span>联系电话</span>
</el-col>
<el-col :span="8">
<el-form-item>
<span>{{ infoForm.tel }}</span>
</el-form-item>
</el-col>
<el-col :span="4" class="tleftb">
<span>拍照时间</span>
</el-col>
<el-col :span="8">
<el-form-item>
<span>{{ infoForm.time }}</span>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="4" class="tleftb">
<span>质物编码</span>
</el-col>
@ -29,8 +84,8 @@
<span>{{ infoForm.weizhi }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
</el-row> -->
<!-- <el-row>
<el-col :span="4" class="tleftb">
<span>拍照时间</span>
</el-col>
@ -47,7 +102,7 @@
<span></span>
</el-form-item>
</el-col>
</el-row>
</el-row> -->
<el-row>
<el-col :span="4" class="tleftb">
<span>拍照图片</span>

53
src/views/zhiwujiance/zhiwujianceList.vue
View File

@ -55,8 +55,19 @@
@selection-change="handleSelectionChange">
<el-table-column type="selection" align="center" width="50" />
<el-table-column label="序号" fixed type="index" width="80" :index="indexMethod" align="center" />
<el-table-column prop="jc" width="320" label="信息" header-align="center" align="center">
<template slot-scope="scope">
<div class="newsname" v-for="(item, index) in Datalistb" :key="index">
<div class="tit">仓库名称：{{item.name}}</div>
<div class="time">仓库位置：{{item.weizhi}}</div>
<div class="time">货架号：{{item.huohao}}</div>
<div class="time">联系人：{{item.ren}}</div>
<div class="time">联系电话：{{item.dianhua}}</div>
</div>
<el-table-column prop="jc" label="" header-align="center" align="center">
</template>
</el-table-column>
<el-table-column prop="jc" label="相似度对比" header-align="center" align="center">
<template slot-scope="scope">
<div v-for="(item, index) in Datalista" :key="index">
<div class="newslilefts" >
@ -64,7 +75,7 @@
<div class="newsli">
<div class="tu"><img :src="item.tuUrl" alt="" /></div>
<div class="rightwen">
<div class="tit">位置：{{item.cangku}}</div>
<!-- <div class="tit">位置：{{item.cangku}}</div> -->
<div class="time">拍照日期：{{item.createTime}}</div>
<div class="time">拍照时间：{{item.createTime2}}</div>
<!-- <div class="time">生产厂家：{{item.changjia}}</div>
@ -79,7 +90,7 @@
<div class="newsli">
<div class="tu"><img :src="item.tuUrlb" alt="" /></div>
<div class="rightwen">
<div class="tit">位置：{{item.cangku}}</div>
<!-- <div class="tit">位置：{{item.cangku}}</div> -->
<div class="time">拍照日期：{{item.createTime}}</div>
<div class="time">拍照时间：{{item.createTime2}}</div>
@ -94,7 +105,7 @@
<el-table-column label="操作" align="center" width="220px" class-name="small-padding fixed-width">
<template slot-scope="{row}">
<el-button size="mini" type="primary" @click="toShipin()">视频</el-button>
<el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
<!-- <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button> -->
<el-button size="mini" type="primary" @click="handleCheck(row)">详情</el-button>
<!-- <el-button size="mini" type="primary">处理</el-button> -->
@ -305,6 +316,10 @@
{cangku:'仓库1003F3',name: '康师傅矿泉水',tuUrl:'./image/tu1.jpg', createTime: '2023-05-03',createTime2: '18:26:38', changjia: '康师傅',shuliang:'1000',zhongliang:'500',
nameb: '康师傅矿泉水2',tuUrlb:'./image/tu2.jpg', createTimeb: '2023-05-03',createTime2: '18:26:38',changjiab: '康师傅',shuliangb:'1000',zhongliangb:'500'},
],
Datalistb: [
{name:'仓库1',cangku:'仓库1003F3',weizhi: '石家庄市长安区和平西路126号', huohao: 'F31006C102325',ren:'李舜华',dianhua:'13933263572'},
],
listLoading: false,
listQuery: {
@ -635,7 +650,7 @@
width: 100%;height: 100%;border-radius: 5px;border: 1px solid #ff2424;
}
.newslilefts .newsli .rightwen {
padding: 13px 0 0 20px;text-align: left;
padding: 20px 0 0 20px;text-align: left;
flex: 3;
}
.newslilefts .newsli .rightwen .tit {
@ -646,8 +661,8 @@
line-height: 25px; */
}
.newslilefts .newsli .rightwen .time {
padding: 7px 0;
color: #848383;
padding: 12px 0;
/* color: #848383; */
font-size: 14px;
/* height: 25px;
line-height: 25px; */
@ -661,4 +676,28 @@
padding: 5px 10px;
text-align: right;
}
/* //// */
.newsname {
/* display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between; */
margin: 0px 0px;
padding: 5px 10px;text-align: left;
/* border-bottom: 1px solid #ececee; */
}
.newsname .tit {
padding: 5px 0;
font-size: 14px;font-weight: bold;
/* height: 25px;
overflow: hidden;
line-height: 25px; */
}
.newsname .time {
padding: 5px 0;
/* color: #848383; */
font-size: 14px;
/* height: 25px;
line-height: 25px; */
}
</style>

Write Preview
Loading…
Cancel
Save