Skip to content

P
police-jyzb-vue-hzzj
Commit 8d8608ac by T
Options

现场版本代码

parent 4ad2494c
正在显示 包含 2088 行增加 和 87 行删除
src/api/warehouse.js
import request from '@/utils/request' import request from '@/utils/request'
import { transform } from '@/utils/index' import { transform } from '@/utils/index'
import axios from 'axios'
export function getListWarehouse(data) { export function getListWarehouse(data) {
return request({ return request({
...@@ -98,3 +99,42 @@ export function enableChannelReadEquById(data) { ...@@ -98,3 +99,42 @@ export function enableChannelReadEquById(data) {
data: transform(data) data: transform(data)
}) })
} }
//新增或编辑视频
export function addOrUpdateCamera(data) {
return request({
url: window._CONFIG['serviceURL'] + '/api/Warehouse/AddOrUpdateCamera',
method: 'post',
data: transform(data)
})
}
//根据组织机构id获取视频配置列表
export function getCameraByOrgId(data) {
return request({
url: window._CONFIG['serviceURL'] + '/api/Warehouse/GetCameraByOrgId',
method: 'post',
data: data
})
}
//删除监控视频配置
export function deleteCamera(data) {
return request({
method: 'POST',
url: window._CONFIG['serviceURL'] + '/api/Warehouse/DeleteCamera',
data: transform(data)
})
}
//获取回放视频
export function getStartHls(data) {
return request({
method: 'POST',
url: window._CONFIG['videoURL'] + '/hls/startHls',
data: data,
})
}
src/utils/index.js
...@@ -171,27 +171,27 @@ ...@@ -171,27 +171,27 @@
* @param {*} data * @param {*} data
* @returns * @returns
*/ */
export function transform(data) { //统一加密处理--开关
let k = { export function transform(data) {
appKey: 'N1JOsoM/x25Mj1VUaJATBw==', //isEncryption为0---加密，1----不加密
orgId: '', let isEncryption =0;
version: '1.0',
timestamp: parseInt(new Date().getTime()/1000),
body: escape(JSON.stringify(data)),
sign: md5('37524eb2833fc76e4c8f555468901307'+parseInt(new Date().getTime()/1000)+'1.0'+escape(JSON.stringify(data)))
}
return k;
// let k = {
// appKey: '8EV3FnNIVaKp8zekBwxpdw==',
// orgId: '',
// version: '1.0',
// timestamp: parseInt(new Date().getTime()/1000),
// body: escape(JSON.stringify(data)),
// sign: md5('f0457716734855a2a9f337a4070c6977'+parseInt(new Date().getTime()/1000)+'1.0'+escape(JSON.stringify(data)))
// }
// return k;
} if(isEncryption == 0){
let k = {
appKey: 'N1JOsoM/x25Mj1VUaJATBw==',
orgId: '',
version: '1.0',
timestamp: parseInt(new Date().getTime()/1000),
body: escape(JSON.stringify(data)),
sign: md5('37524eb2833fc76e4c8f555468901307'+parseInt(new Date().getTime()/1000)+'1.0'+escape(JSON.stringify(data)))
}
return k;
}
if(isEncryption == 1){
return data
}
}
export function downloadFile(obj, name, suffix) { export function downloadFile(obj, name, suffix) {
const url = window.URL.createObjectURL(new Blob([obj])) const url = window.URL.createObjectURL(new Blob([obj]))
......
src/views/base/houseBaseInfo/index.vue
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<!--表单组件--> <!--表单组件-->
<eForm ref="form" @warehouseChange="warehouseChange"/> <eForm ref="form" @warehouseChange="warehouseChange"/>
<hForm ref="hForm" @controlDev="humidityChange"/> <hForm ref="hForm" @controlDev="humidityChange"/>
<mvConfigForm ref="mvConfigForm" />
<el-row :gutter="10" style="margin-top: -10px;"> <el-row :gutter="10" style="margin-top: -10px;">
<el-col :xs="24" :sm="24" :md="10" :lg="14" :xl="14"> <el-col :xs="24" :sm="24" :md="10" :lg="14" :xl="14">
...@@ -25,7 +26,7 @@ ...@@ -25,7 +26,7 @@
@change="changeWorked(scope.row, scope.row.isWork)"/> @change="changeWorked(scope.row, scope.row.isWork)"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="150" align="center" fixed="right"> <el-table-column label="操作" width="150" align="center" >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="primary" @click="showDetail(scope.row)">查看</el-button> <el-button size="mini" type="primary" @click="showDetail(scope.row)">查看</el-button>
<el-button size="mini" type="warning" @click="stop(scope.row)" v-if="scope.row.orderType==='库存调拨' || scope.row.orderType==='借用' || scope.row.orderType === '领用'">终止</el-button> <el-button size="mini" type="warning" @click="stop(scope.row)" v-if="scope.row.orderType==='库存调拨' || scope.row.orderType==='借用' || scope.row.orderType === '领用'">终止</el-button>
...@@ -68,7 +69,7 @@ ...@@ -68,7 +69,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="policeName" label="操作人员" width="100" align="center" :show-overflow-tooltip="true"/> <el-table-column prop="policeName" label="操作人员" width="100" align="center" :show-overflow-tooltip="true"/>
<el-table-column prop="createTime" label="操作时间" align="center" :show-overflow-tooltip="true"/> <el-table-column prop="createTime" label="操作时间" align="center" :show-overflow-tooltip="true"/>
<el-table-column label="出入库类型" fixed="right" align="center" width="100"> <el-table-column label="出入库类型" align="center" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.outInState == 0" type="warning">出库</el-tag> <el-tag v-if="scope.row.outInState == 0" type="warning">出库</el-tag>
<el-tag v-else-if="scope.row.outInState == 1" type="success">入库</el-tag> <el-tag v-else-if="scope.row.outInState == 1" type="success">入库</el-tag>
...@@ -78,27 +79,29 @@ ...@@ -78,27 +79,29 @@
</el-card> </el-card>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10"> <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
<el-card class="box-card" style="height:430px"> <el-card class="box-card" style="height:950px">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>{{ radio }}</span> <span>库存环境</span>
<!-- <span>{{ radio }}</span>
<el-radio-group v-model="radio" size="small" @change="radioChange" style="float: right;margin-top:-7px;margin-bottom:-10px;"> <el-radio-group v-model="radio" size="small" @change="radioChange" style="float: right;margin-top:-7px;margin-bottom:-10px;">
<el-radio-button label="库存状态"></el-radio-button> <el-radio-button label="库存状态"></el-radio-button>
<el-radio-button label="装备库存"></el-radio-button> <el-radio-button label="装备库存"></el-radio-button>
<el-radio-button label="温湿度" v-if="isShow"></el-radio-button> <el-radio-button label="温湿度" v-if="isShow"></el-radio-button>
</el-radio-group> </el-radio-group> -->
</div> </div>
<v-chart height="300" :data="chartData" :scale="scale" :padding="padding" style="margin-top:25px" key='1' v-if="radio != '温湿度'"> <div>
<v-tooltip :showTitle="false" dataKey="item*percent"/> <el-row :gutter="10" v-if="devList.length!=0" >
<v-axis/> <el-col :span="16" >
<v-legend :useHtml="true" position="right-center" :containerTpl="containerTplLegend" :itemTpl="itemTplLegend" :offset="offset"/> <div >
<v-guide :type="guideOpts.type" :position="guideOpts.position" :content="guideOpts.content" :v-style="guideOpts.style" />
<v-guide :type="guideOpts1.type" :position="guideOpts1.position" :content="guideOpts1.content" :v-style="guideOpts1.style" /> <div style="margin-top: -28px;">
<v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig"/> <div style="float:right; margin-left: 10px;" >
<v-coord type="theta" :radius="0.75" :innerRadius="0.7"/> <el-select v-model="devIp" filterable placeholder="请选择除湿机" @change="humidityChange" style="width:200px;margin-top: -10px;">
</v-chart> <el-option v-for="item in devList" :key="item.devId" :label="item.devName" :value="item.devIp"/>
<div v-else> </el-select>
<el-row :gutter="10" style="margin-left:-40px;margin-right: -5px;"> </div>
<el-col :span="16"> <span><h5>当前时间：{{currentTime}}</h5></span>
</div>
<v-chart :forceFit="true" height="330" :data="curveData" :scale="curveScale"> <v-chart :forceFit="true" height="330" :data="curveData" :scale="curveScale">
<v-tooltip /> <v-tooltip />
<v-axis /> <v-axis />
...@@ -106,20 +109,14 @@ ...@@ -106,20 +109,14 @@
<v-smooth-line position="updateTime*count" color="type" shape="smooth" /> <v-smooth-line position="updateTime*count" color="type" shape="smooth" />
<v-point position="updateTime*count" color="type" shape="circle" /> <v-point position="updateTime*count" color="type" shape="circle" />
</v-chart> </v-chart>
</div>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8" >
<div style="float:right; margin-left: 10px;"> <div style="float:right; margin-left: 10px;">
<el-select v-model="devIp" filterable placeholder="请选择除湿机" @change="humidityChange" style="width:100%">
<el-option v-for="item in devList" :key="item.devId" :label="item.devName" :value="item.devIp"/>
</el-select>
<div style="border:1px solid #e8e8e8;margin-top:10px;"> <div style="border:1px solid #e8e8e8;margin-top:10px;">
<table style="table-layout:auto; width:100%;border-collapse:collapse;box-sizing:border-box;"> <table style="table-layout:auto; width:100%;border-collapse:collapse;box-sizing:border-box;">
<tbody> <tbody>
<tr style="border-bottom:1px solid #e8e8e8;"> <tr style="border-bottom:1px solid #e8e8e8;">
<th class="textHeader">Ip</th>
<td class="textContent">{{ devIp }}</td>
</tr>
<tr style="border-bottom:1px solid #e8e8e8;">
<th class="textHeader">温度</th> <th class="textHeader">温度</th>
<td class="textContent">{{ warehouseWd }}℃</td> <td class="textContent">{{ warehouseWd }}℃</td>
</tr> </tr>
...@@ -137,9 +134,8 @@ ...@@ -137,9 +134,8 @@
</tr> </tr>
<tr style="border-bottom:1px solid #e8e8e8;"> <tr style="border-bottom:1px solid #e8e8e8;">
<th class="textHeader">操作</th> <th class="textHeader">操作</th>
<td class="textContent" style="margin-top:-10px;"> <td class="textContent" style="margin-top:-10px;"><el-button type="primary" size="small"
<el-button type="primary" size="small" @click="setHumidity" style="margin-top:-10px;margin-bottom:-10px;">设置</el-button> @click="setHumidity" style="margin-top:-10px;margin-bottom:-10px;">设置</el-button></td>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -147,15 +143,41 @@ ...@@ -147,15 +143,41 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row v-else>
<el-col :span="24">
<div>
<el-empty :image-size="200" description="未配置温湿度记录设备，请联系相关运维人员配置" ></el-empty>
</div>
</el-col>
</el-row>
</div> </div>
</el-card> <div class="grid-wrapper">
<el-card class="box-card" style="margin-top:10px;height:502px"> <div slot="header" class="clearfix" style="text-align:center;">
<div slot="header" class="clearfix" style="text-align:center;">
<span style="float: left;">视频影像</span> <span style="float: left;">视频影像</span>
<el-button style="padding: 3px 0" type="text" @click="remoteOpenDoor">远程开门</el-button> <el-button style="padding: 3px 0; margin-left:-50px;" type="text" @click="remoteOpenDoor">远程开门</el-button>
<el-button style="float: right; padding: 3px 0" type="text" @click="$router.push('/video/list')">查看更多</el-button> <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="$router.push('/videoHstory/list')">历史视频</el-button> -->
</div> </div>
<iframe :src="src" frameborder="no" style="width:100%;height:410px;margin-top:-8px;" v-if="showVideo"/> <div class="grid" v-if="videos.length!=0">
<div class="monitoring-page">
<div class="grid-container" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: -1px;">
<!-- loop through up to 9 sources and display each in an iframe -->
<template v-for="(video, index) in videos.slice(0, 9)">
<iframe :key="index" :src="video.src" frameborder="0" allowfullscreen ='ture' style="width:100%;height:410px; grid-column: span 3; grid-row: span 3; " v-if="videos.length === 1"></iframe>
<iframe :key="index" :src="video.src" frameborder="0" allowfullscreen ='ture' style="width:100%;margin-top:-18px; " v-else></iframe>
</template>
</div>
</div>
</div>
<div class="grid" v-else>
<el-empty :image-size="200" description="未配置视频地址，请联系相关运维人员配置" ></el-empty>
</div>
<!-- <div slot="bottom" class="clearfix" style="text-align:center;margin-top:10px;">
<el-button style="float: right; padding: 3px 0" type="text" @click="mvConfig">视频配置</el-button>
</div> -->
</div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
...@@ -171,16 +193,19 @@ ...@@ -171,16 +193,19 @@
</template> </template>
<script> <script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import zhCN from 'video.js/dist/lang/zh-CN.json';
import initData from '@/mixins/initData' import initData from '@/mixins/initData'
import { initPdata } from '@/api/data' import { initPdata } from '@/api/data'
import DataSet from '@antv/data-set' import DataSet from '@antv/data-set'
import { getListDev } from '@/api/warehouseDev' import { getListDev } from '@/api/warehouseDev'
import { getListOrgWarehouse, getGroupByCount } from '@/api/warehouse' import { getListOrgWarehouse, getGroupByCount, getCameraByOrgId } from '@/api/warehouse'
import { getAllInOutTop10History, getOrderInfo, changeOrderIsWork, setWarehouseState, closeOrder } from '@/api/inventory' import { getAllInOutTop10History, getOrderInfo, changeOrderIsWork, setWarehouseState, closeOrder } from '@/api/inventory'
import { getWarehouseInfo } from '@/api/warehouseDev' import { getWarehouseInfo } from '@/api/warehouseDev'
import eForm from './form' import eForm from './form'
import hForm from './hForm' import hForm from './hForm'
import mvConfigForm from './mvConfigForm'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import BorrowDetail from '@/views/warehouse/borrow/list/form' import BorrowDetail from '@/views/warehouse/borrow/list/form'
import BorrowOtherDetail from '@/views/warehouse/borrowOther/list/form' import BorrowOtherDetail from '@/views/warehouse/borrowOther/list/form'
...@@ -191,13 +216,15 @@ import RemoteDoor from './remoteDoor' ...@@ -191,13 +216,15 @@ import RemoteDoor from './remoteDoor'
import { transform } from '@/utils/index' import { transform } from '@/utils/index'
export default { export default {
name: 'HouseBaseInfo', name: 'HouseBaseInfo',
components: { eForm, hForm, BorrowDetail, BorrowOtherDetail, TransferDetail, ReceiveDetail, ReturnOtherDetail, RemoteDoor }, components: { eForm, hForm,mvConfigForm, BorrowDetail, BorrowOtherDetail, TransferDetail, ReceiveDetail, ReturnOtherDetail, RemoteDoor },
mixins: [initData], mixins: [initData],
data() { data() {
return { return {
crrTime:(new Date()).toLocaleString(),
isLocked: true, isLocked: true,
showVideo: true, showVideo: true,
timer: null, timer: null,
currentTime: null,
inAndOutList: [], inAndOutList: [],
radio: '库存状态', radio: '库存状态',
pieList: [], pieList: [],
...@@ -210,7 +237,8 @@ export default { ...@@ -210,7 +237,8 @@ export default {
curveScale: [{ curveScale: [{
type: 'timeCat', type: 'timeCat',
dataKey: 'updateTime', dataKey: 'updateTime',
mask: 'MM/DD HH时' mask: 'HH时',
tickCount: 12
}], }],
sourceData: [], sourceData: [],
offset: [15, 0], offset: [15, 0],
...@@ -256,7 +284,9 @@ export default { ...@@ -256,7 +284,9 @@ export default {
page: 0, size: 3, total: 0, page: 0, size: 3, total: 0,
humidity: 20, humidity: 20,
isShow: false, isShow: false,
src: 'http://127.0.0.1:8080/ckzp.html', //src: 'http://127.0.0.1:8080/ckzp.html',
//视频流地址
videos: [],
temperatureValue:0,humidityValue:0,devList: [],devId: '', devState: '0', temperatureValue:0,humidityValue:0,devList: [],devId: '', devState: '0',
orgId : this.$store.state.user.user.baseJpOrganization.id, warehouseList: [], warehouseId: null, orgId : this.$store.state.user.user.baseJpOrganization.id, warehouseList: [], warehouseId: null,
processUrl: { processUrl: {
...@@ -299,6 +329,7 @@ export default { ...@@ -299,6 +329,7 @@ export default {
docElm.webkitRequestFullScreen() docElm.webkitRequestFullScreen()
this.$store.commit('TOGGLE_SIDEBAR') this.$store.commit('TOGGLE_SIDEBAR')
this.getListOrgWarehouse() this.getListOrgWarehouse()
this.getVideos()
}, },
mounted(){//生命周期模板挂载之后 mounted(){//生命周期模板挂载之后
let _this = this; let _this = this;
...@@ -308,13 +339,39 @@ export default { ...@@ -308,13 +339,39 @@ export default {
this.initOrderInfo() this.initOrderInfo()
this.getListDev() this.getListDev()
},1000 * 30) },1000 * 30)
this.startAutoUpdate();
}, },
beforeDestroy(){//生命周期实例销毁之前 beforeDestroy(){//生命周期实例销毁之前
if(this.timer){ if(this.timer){
clearInterval(this.timer); clearInterval(this.timer);
} }
this.stopAutoUpdate();
//视频
// const videoPlayers = this.$el.querySelectorAll(".video-js");
// videoPlayers.forEach((player) => {
// player.dispose();
// });
}, },
methods: { methods: {
startAutoUpdate() {
this.currentTime = new Date(); // 初始化当前时间
this.intervalId = setInterval(() => {
this.currentTime = this.getFormattedTime(); // 更新当前时间
}, 1000); // 每秒更新一次
},
stopAutoUpdate() {
clearInterval(this.intervalId); // 清除定时器
},
getFormattedTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 补齐两位数
const day = String(now.getDate()).padStart(2, '0'); // 补齐两位数
const hour = String(now.getHours()).padStart(2, '0'); // 补齐两位数
const minute = String(now.getMinutes()).padStart(2, '0'); // 补齐两位数
const second = String(now.getSeconds()).padStart(2, '0'); // 补齐两位数
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
},
stop(row) { stop(row) {
this.$confirm('此操作将强制终止单据,是否继续？', '提示', { this.$confirm('此操作将强制终止单据,是否继续？', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
...@@ -357,7 +414,7 @@ export default { ...@@ -357,7 +414,7 @@ export default {
//单个库房直接显示库房 //单个库房直接显示库房
this.warehouseId = this.warehouseList[0].id this.warehouseId = this.warehouseList[0].id
this.isLocked = !this.warehouseList[0].isLocked this.isLocked = !this.warehouseList[0].isLocked
this.src = 'http://'+ this.warehouseList[0].cameraUrl +':8080/ckzp.html' //this.src = 'http://'+ this.warehouseList[0].cameraUrl +':8080/ckzp.html'
this.devList = [] this.devList = []
this.devId = '' this.devId = ''
this.devState = 0 this.devState = 0
...@@ -376,7 +433,7 @@ export default { ...@@ -376,7 +433,7 @@ export default {
}) })
} }
}) })
}, },
initInAndOutList() { initInAndOutList() {
getAllInOutTop10History({warehouseId:this.warehouseId}).then(res => { getAllInOutTop10History({warehouseId:this.warehouseId}).then(res => {
if(res.code == '10000') { if(res.code == '10000') {
...@@ -407,29 +464,6 @@ export default { ...@@ -407,29 +464,6 @@ export default {
this.getListDev() this.getListDev()
this.initOrderInfo() this.initOrderInfo()
}, },
itemTplLegend: function itemTpl(value, color, checked, index) {
const obj = this.chartData[index];
var percent = '0%';
var objCount = 0;
if(obj){
percent=(obj.percent * 100).toFixed(2) +'%';
objCount=obj.count;
}
checked = checked ? 'checked' : 'unChecked';
return '<tr class="g2-legend-list-item item-' + index + ' ' + checked + '" data-value="' + value + '" data-color=' + color + ' >' + '<td style="width:120px;height:35px;line-height:35px;"><i class="g2-legend-marker" style="width:10px;height:10px;display:inline-block;margin-right:20px;background-color:' + color + ';"></i>' + '<span class="g2-legend-text" style="color: #666">' + value + '</span></td>' + '<td style="text-align: right;width:30px">' + percent + '</td>' + '<td style="text-align: right;color: #666;width:30px">' + objCount + '</td>' + '</tr>';
},
radioChange(value) {
if (value == '库存状态') {
this.dataSource = this.pieList.tjList
this.guideOpts.content = '装备总数'
}
if (value == '装备库存') {
this.dataSource = this.pieList.typeList
this.guideOpts.content = '在库总数'
}
//this.guideOpts.content = '装备总数'
this.guideOpts1.content = this.dataSource.map(item => item.count).reduce((total, num) => total + num)
},
humidityChange() { humidityChange() {
getWarehouseInfo({warehouseId: this.warehouseId, devIp: this.devIp}).then(res => { getWarehouseInfo({warehouseId: this.warehouseId, devIp: this.devIp}).then(res => {
if (res.data.list.length > 0) { if (res.data.list.length > 0) {
...@@ -466,7 +500,7 @@ export default { ...@@ -466,7 +500,7 @@ export default {
}, },
getMockData() { getMockData() {
let list = [] let list = []
for(var a=0; a<9; a++) { for(var a=0; a<12; a++) {
list.push({updateTime: new Date().setHours(new Date().getHours() - a),'温度': 0, '湿度': 0 }) list.push({updateTime: new Date().setHours(new Date().getHours() - a),'温度': 0, '湿度': 0 })
} }
return list return list
...@@ -527,7 +561,25 @@ export default { ...@@ -527,7 +561,25 @@ export default {
} }
}) })
_this.dialog = true _this.dialog = true
},
//获取视频列表
getVideos(){
getCameraByOrgId({orgId: this.orgId}).then(res => {
if (res.code == '10000') {
this.videos= res.data.videos
// console.log(res.data)
// this.$notify({
// title: '已获取视频',
// type: 'success',
// duration: 2500
// })
} else {
this.$message.error(res.msg)
}
})
} }
} }
} }
</script> </script>
...@@ -572,4 +624,60 @@ export default { ...@@ -572,4 +624,60 @@ export default {
overflow: auto; overflow: auto;
} }
.grid-wrapper {
border: 1px solid #ccc;
padding: 10px;
margin-top: 15px;
}
.grid {
margin-top: 20px;
}
// .monitoring-page {
// display: flex;
// justify-content: center;
// align-items: center;
// height: 100%;
// }
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 2px;
width: 100%;
height: 100%;
}
.grid-item {
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
border-radius: 5px;
overflow: hidden;
}
.video-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 14px;
text-align: center;
}
</style> </style>
src/views/base/houseBaseInfo/index1 copy.vue 0 → 100644
<template>
<div class="app-container">
<!--表单组件-->
<eForm ref="form" @warehouseChange="warehouseChange"/>
<hForm ref="hForm" @controlDev="humidityChange"/>
<mvConfigForm ref="mvConfigForm" />
<el-row :gutter="10" style="margin-top: -10px;">
<el-col :xs="24" :sm="24" :md="10" :lg="14" :xl="14">
<el-card class="box-card" style="height:330px">
<div slot="header" class="clearfix">
<span>业务单激活</span>
<el-switch v-model="isLocked" active-text="解库" inactive-text="锁库" active-color="#409EFF" inactive-color="#F56C6C" style="float: right" @change="changeLocked"></el-switch>
</div>
<el-table :data="orderData" style="width:100%" stripe border>
<el-table-column type="index" align="center" width="50" label="序号"/>
<el-table-column prop='orderType' align="center" label="业务类型" width="150" />
<el-table-column prop='equNames' align="center" label="装备名称" :show-overflow-tooltip="true" />
<el-table-column prop='createTime' align="center" label="创建时间" />
<el-table-column prop='isWork' align="center" label="是否激活" width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isWork"
active-color="#409EFF"
inactive-color="#F56C6C"
@change="changeWorked(scope.row, scope.row.isWork)"/>
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center" >
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="showDetail(scope.row)">查看</el-button>
<el-button size="mini" type="warning" @click="stop(scope.row)" v-if="scope.row.orderType==='库存调拨' || scope.row.orderType==='借用' || scope.row.orderType === '领用'">终止</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination :total="total" :current-page="page + 1" style="margin-top: 8px;" layout="total, prev, pager, next"
:page-size="3" @current-change="postPageChange"/>
</el-card >
<el-card class="box-card" style="margin-top:10px;">
<div slot="header" class="clearfix">
<span>出入库记录</span>
<el-button size="mini" type="primary" v-if="warehouseList.length > 1" style="float: right;" @click="getListOrgWarehouse">切换仓库</el-button>
</div>
<el-table :data="inAndOutList" style="width:100%" stripe border>
<el-table-column type="index" label="序号" width="50" align="center"/>
<el-table-column prop="actionState" label="业务类型" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.actionState == 1" type="success">采购</el-tag>
<el-tag v-else-if="scope.row.actionState == 2" type="warning">借用</el-tag>
<el-tag v-else-if="scope.row.actionState == 3" type="info">领用</el-tag>
<el-tag v-else-if="scope.row.actionState == 4" type="warning">调拨</el-tag>
<el-tag v-else-if="scope.row.actionState == 6" type="primary">维修</el-tag>
<el-tag v-else-if="scope.row.actionState == 7" type="danger">报废</el-tag>
<el-tag v-else-if="scope.row.actionState == 13 || scope.row.actionState == 14" type="success">本仓库借用</el-tag>
<!-- <el-tag v-else-if="scope.row.actionState == 15 || scope.row.actionState == 16" type="success">跨仓库借用</el-tag>
<el-tag v-else-if="scope.row.actionState == 17 || scope.row.actionState == 18" type="success">跨仓库归还</el-tag> -->
<el-tag v-else-if="scope.row.actionState == 19" type="success">装备回库</el-tag>
</template>
</el-table-column>
<el-table-column prop="equipmentName" label="装备名称" align="center"/>
<el-table-column prop="sizeName" label="装备型号" align="center"/>
<el-table-column label="安全等级" align="center" width="150px">
<template slot-scope="scope">
<el-tag v-if="scope.row.safeLevel == 0" type="success">质保期内</el-tag>
<el-tag v-else-if="scope.row.safeLevel == 1" type="warning">即将过期</el-tag>
<el-tag v-else-if="scope.row.safeLevel == 2" type="danger">已过质保期</el-tag>
</template>
</el-table-column>
<el-table-column prop="policeName" label="操作人员" width="100" align="center" :show-overflow-tooltip="true"/>
<el-table-column prop="createTime" label="操作时间" align="center" :show-overflow-tooltip="true"/>
<el-table-column label="出入库类型" align="center" width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.outInState == 0" type="warning">出库</el-tag>
<el-tag v-else-if="scope.row.outInState == 1" type="success">入库</el-tag>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
<el-card class="box-card" style="height:950px">
<div slot="header" class="clearfix">
<span>库存环境</span>
<!-- <span>{{ radio }}</span>
<el-radio-group v-model="radio" size="small" @change="radioChange" style="float: right;margin-top:-7px;margin-bottom:-10px;">
<el-radio-button label="库存状态"></el-radio-button>
<el-radio-button label="装备库存"></el-radio-button>
<el-radio-button label="温湿度" v-if="isShow"></el-radio-button>
</el-radio-group> -->
</div>
<div>
<el-row :gutter="10" v-if="devList.length!=0" >
<el-col :span="16" >
<div >
<div style="margin-top: -28px;">
<div style="float:right; margin-left: 10px;" >
<el-select v-model="devIp" filterable placeholder="请选择除湿机" @change="humidityChange" style="width:200px;margin-top: -10px;">
<el-option v-for="item in devList" :key="item.devId" :label="item.devName" :value="item.devIp"/>
</el-select>
</div>
<span><h5>当前时间：{{currentTime}}</h5></span>
</div>
<v-chart :forceFit="true" height="330" :data="curveData" :scale="curveScale">
<v-tooltip />
<v-axis />
<v-legend />
<v-smooth-line position="updateTime*count" color="type" shape="smooth" />
<v-point position="updateTime*count" color="type" shape="circle" />
</v-chart>
</div>
</el-col>
<el-col :span="8" >
<div style="float:right; margin-left: 10px;">
<div style="border:1px solid #e8e8e8;margin-top:10px;">
<table style="table-layout:auto; width:100%;border-collapse:collapse;box-sizing:border-box;">
<tbody>
<tr style="border-bottom:1px solid #e8e8e8;">
<th class="textHeader">温度</th>
<td class="textContent">{{ warehouseWd }}℃</td>
</tr>
<tr style="border-bottom:1px solid #e8e8e8;">
<th class="textHeader">设置湿度</th>
<td class="textContent">{{ setSd }}%</td>
</tr>
<tr style="border-bottom:1px solid #e8e8e8;">
<th class="textHeader">当前湿度</th>
<td class="textContent">{{ warehouseSd }}%</td>
</tr>
<tr style="border-bottom:1px solid #e8e8e8;">
<th class="textHeader" >状态</th>
<td class="textContent"><el-tag style="margin-top:-10px;margin-bottom:-10px;">{{ devState == 0 ? '未运行' : '运行中'  }}</el-tag></td>
</tr>
<tr style="border-bottom:1px solid #e8e8e8;">
<th class="textHeader">操作</th>
<td class="textContent" style="margin-top:-10px;"><el-button type="primary" size="small"
@click="setHumidity" style="margin-top:-10px;margin-bottom:-10px;">设置</el-button></td>
</tr>
</tbody>
</table>
</div>
</div>
</el-col>
</el-row>
<el-row v-else>
<el-col :span="24">
<div>
<el-empty :image-size="200" description="未配置温湿度记录设备，请联系相关运维人员配置" ></el-empty>
</div>
</el-col>
</el-row>
</div>
<div class="grid-wrapper">
<div slot="header" class="clearfix" style="text-align:center;">
<span style="float: left;">视频影像</span>
<el-button style="padding: 3px 0" type="text" @click="remoteOpenDoor">远程开门</el-button>
<el-button style="float: right; padding: 3px 0" type="text" @click="$router.push('/videoHstory/list')">历史视频</el-button>
</div>
<div class="grid" v-if="videos.length!=0">
<div class="video-grid">
<div
v-for="(video, index) in videos"
:key="'video-' + index"
class="video-container"
>
<video
ref="videoPlayer"
class="video-js vjs-big-play-centered"
controls
preload="auto"
:poster="video.poster"
data-setup="{}"
>
<source :src="video.src" type="application/x-mpegURL" />
</video>
</div>
</div>
</div>
<div class="grid" v-else>
<el-empty :image-size="200" description="未配置视频地址，请配置" ></el-empty>
</div>
<div slot="bottom" class="clearfix" style="text-align:center;margin-top:10px;">
<el-button style="float: right; padding: 3px 0" type="text" @click="mvConfig">视频配置</el-button>
</div>
</div>
</el-card>
<!-- <el-card class="box-card" style="margin-top:10px;height:502px">
<div slot="header" class="clearfix" style="text-align:center;">
<span style="float: left;">视频影像</span>
<el-button style="padding: 3px 0" type="text" @click="remoteOpenDoor">远程开门</el-button>
<el-button style="float: right; padding: 3px 0" type="text" @click="$router.push('/video/list')">查看更多</el-button>
</div>
</el-card> -->
</el-col>
</el-row>
<borrow-detail ref="借用" />
<borrow-other-detail ref="跨库借用" />
<transfer-detail ref="库存调拨" />
<receive-detail ref="领用" />
<return-other-detail ref="跨库归还" />
<remote-door ref="door"/>
</div>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import zhCN from 'video.js/dist/lang/zh-CN.json';
import initData from '@/mixins/initData'
import { initPdata } from '@/api/data'
import DataSet from '@antv/data-set'
import { getListDev } from '@/api/warehouseDev'
import { getListOrgWarehouse, getGroupByCount, getCameraByOrgId } from '@/api/warehouse'
import { getAllInOutTop10History, getOrderInfo, changeOrderIsWork, setWarehouseState, closeOrder } from '@/api/inventory'
import { getWarehouseInfo } from '@/api/warehouseDev'
import eForm from './form'
import hForm from './hForm'
import mvConfigForm from './mvConfigForm'
import { mapState } from 'vuex'
import BorrowDetail from '@/views/warehouse/borrow/list/form'
import BorrowOtherDetail from '@/views/warehouse/borrowOther/list/form'
import TransferDetail from '@/views/warehouse/transfer/list/form'
import ReceiveDetail from '@/views/warehouse/receive/apply/detailForm'
import ReturnOtherDetail from '@/views/warehouse/returnOther/list/form'
import RemoteDoor from './remoteDoor'
import { transform } from '@/utils/index'
export default {
name: 'HouseBaseInfo',
components: { eForm, hForm,mvConfigForm, BorrowDetail, BorrowOtherDetail, TransferDetail, ReceiveDetail, ReturnOtherDetail, RemoteDoor },
mixins: [initData],
data() {
return {
crrTime:(new Date()).toLocaleString(),
isLocked: true,
showVideo: true,
timer: null,
currentTime: null,
inAndOutList: [],
radio: '库存状态',
pieList: [],
dataSource: [],
scale: [{
dataKey: 'percent',
min: 0,
formatter: '.0%'
}],
curveScale: [{
type: 'timeCat',
dataKey: 'updateTime',
mask: 'HH时',
tickCount: 12
}],
sourceData: [],
offset: [15, 0],
padding: [0, 70, 0, 0],
containerTplLegend:`<div class="g2-legend"> <table class="g2-legend-list" style="width: 100%"></table> </div>`,
guideOpts: {
type: 'text',
position: [ '50%', '40%' ],
content: '',
style: {
lineHeight: '240px',
fontSize: '16',
fill: 'rgba(0,0,0,.45)',
textAlign: 'center'
}
},
guideOpts1: {
type: 'text',
position: [ '50%', '55%' ],
content: '',
style: {
lineHeight: '240px',
fontSize: '40',
fill: 'rgba(0,0,0,.85)',
textAlign: 'center'
}
},
pieStyle: {
stroke: '#fff',
lineWidth: 2
},
labelConfig: ['percent', {
formatter: (val, item) => {
return item.point.item + ': ' + item.point.count + ' '
}
}],
warehouseSd: 0,
warehouseWd: 0,
setSd: 0,
devIp: '',
nowtime: new Date(),
orderData: [],
page: 0, size: 3, total: 0,
humidity: 20,
isShow: false,
//src: 'http://127.0.0.1:8080/ckzp.html',
//视频流地址
videos: [
{
src: "http://192.168.2.246:7707/hls/play?mediaKey=d217899fb21928c488872dc90f6a8056",
name:'',
},
// {
// src: "http://192.168.2.246:7707/hls/play?mediaKey=1f3767f5982898ea4f8923a56dc3294a",
// },
// {
// src: "http://192.168.2.246:7707/hls/play?mediaKey=d217899fb21928c488872dc90f6a8056",
// },
// {
// src: "http://192.168.2.246:7707/hls/play?mediaKey=1f3767f5982898ea4f8923a56dc3294a",
// },
// {
// src: "http://192.168.2.246:7707/hls/play?mediaKey=d217899fb21928c488872dc90f6a8056",
// },
// {
// src: "http://192.168.2.246:7707/hls/play?mediaKey=1f3767f5982898ea4f8923a56dc3294a",
// },
// {
// src: "http://192.168.2.246:7707/hls/play?mediaKey=d217899fb21928c488872dc90f6a8056",
// },
// {
// src: "http://192.168.2.246:7707/hls/play?mediaKey=1f3767f5982898ea4f8923a56dc3294a",
// },
// {
// src: "http://192.168.2.246:7707/hls/play?mediaKey=d217899fb21928c488872dc90f6a8056",
// },
],
temperatureValue:0,humidityValue:0,devList: [],devId: '', devState: '0',
orgId : this.$store.state.user.user.baseJpOrganization.id, warehouseList: [], warehouseId: null,
processUrl: {
"借用": '/api/Borrow/GetByID',
"跨库借用": '/api/Transfer/GetByID',
"库存调拨": '/api/Transfer/GetByID',
"领用": '/api/Borrow/GetByID',
"跨库归还": '/api/Transfer/GetByID'
}
}
},
computed: {
chartData() {
let dv = new DataSet.View().source(this.dataSource)
// 计算数据百分比
dv.transform({
type: 'percent',
field: 'count',
dimension: 'item',
as: 'percent'
})
return dv.rows
},
curveData() {
let dv = new DataSet.View().source(this.sourceData);
dv.transform({
type: 'fold',
fields: ['湿度', '温度'],
key: 'type',
value: 'count',
});
return dv.rows
},
...mapState({
sidebar: state => state.app.sidebar,
})
},
created() {
var docElm = document.documentElement
docElm.webkitRequestFullScreen()
this.$store.commit('TOGGLE_SIDEBAR')
this.getListOrgWarehouse()
this.getVideos()
},
mounted(){//生命周期模板挂载之后
let _this = this;
this.timer = setInterval(()=>{
this.initInAndOutList()
this.getPieInfo()
this.initOrderInfo()
this.getListDev()
},1000 * 30)
this.startAutoUpdate();
//视频
this.$nextTick(() => {
const videoContainers = this.$el.querySelectorAll(".video-container");
videoContainers.forEach((container) => {
const player = videojs(
container.querySelector(".video-js"),
{
controls: true,
autoplay: false,
preload: "auto",
fluid: true,
height: 120,
width: 120,
//language:'zh-CN',
//playbackRates: [0.5, 1, 1.5, 2],
// 配置项...
controlBar: {
// 控制栏配置项...
playToggle: { innerHTML: "播放" },
volumePanel: { inline: false },
currentTimeDisplay: {},
timeDivider: {},
durationDisplay: {},
progressControl: {},
liveDisplay: {},
fullscreenToggle: { innerHTML: "全屏" },
},
notSupportedMessage: "此视频暂无法播放，请稍后再试",
textTrackSettings: {
fontFamily: "Arial,sans-serif",
//fontSize: "12px",
fontColor: "#ffffff",
},
sources: [
{
src: container.querySelector("video source").src,
type: "application/x-mpegURL",
},
],
},
function onPlayerReady() {
player.play(); // 自动加载播放视频
console.log("Player is ready!");
}
);
// 加载中文语言文件并设置语言选项
player.ready(function () {
const langOptions = {
cn: zhCN,
};
player.language('cn');
player.language(langOptions);
});
});
});
},
beforeDestroy(){//生命周期实例销毁之前
if(this.timer){
clearInterval(this.timer);
}
this.stopAutoUpdate();
//视频
const videoPlayers = this.$el.querySelectorAll(".video-js");
videoPlayers.forEach((player) => {
player.dispose();
});
},
methods: {
startAutoUpdate() {
this.currentTime = new Date(); // 初始化当前时间
this.intervalId = setInterval(() => {
this.currentTime = this.getFormattedTime(); // 更新当前时间
}, 1000); // 每秒更新一次
},
stopAutoUpdate() {
clearInterval(this.intervalId); // 清除定时器
},
getFormattedTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 补齐两位数
const day = String(now.getDate()).padStart(2, '0'); // 补齐两位数
const hour = String(now.getHours()).padStart(2, '0'); // 补齐两位数
const minute = String(now.getMinutes()).padStart(2, '0'); // 补齐两位数
const second = String(now.getSeconds()).padStart(2, '0'); // 补齐两位数
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
},
stop(row) {
this.$confirm('此操作将强制终止单据,是否继续？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
closeOrder({id: row.id, organizationId: row.orgId, userId: this.$store.state.user.user.id, type: row.orderType === '库存调拨' ? 'Transfer' : row.orderType === '借用' ? 'Borrow' : row.orderType === '领用' ? 'Consume' : ''}).then(res => {
if (res.code === '10000') {
this.initOrderInfo()
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
})
})
},
changeLocked(value) {
setWarehouseState({ warehouseId: this.warehouseId, isLocked: (value ? 0 : 1) }).then(res => {
if (res.code === '10000') {
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
})
},
getPieInfo() {
getGroupByCount({warehouseCode:this.warehouseId}).then(res => {
if (res.code == "10000") {
this.pieList = res.data
this.dataSource = res.data.tjList
this.guideOpts.content = '装备总数'
this.guideOpts1.content = this.dataSource.map(item => item.count).reduce((total, num) => total + num)
}
})
},
getListOrgWarehouse() { //获取组织机构本级仓库
getListOrgWarehouse({orgizationId:this.orgId}).then(res=> {
this.warehouseList = res.data
if (this.warehouseList.length == 1){
//单个库房直接显示库房
this.warehouseId = this.warehouseList[0].id
this.isLocked = !this.warehouseList[0].isLocked
//this.src = 'http://'+ this.warehouseList[0].cameraUrl +':8080/ckzp.html'
this.devList = []
this.devId = ''
this.devState = 0
this.getListDev()
this.initInAndOutList()
this.getPieInfo()
this.initOrderInfo()
} else if (this.warehouseList.length > 1){
//多个库房显示库房选择
this.showWarehouseList()
} else {
this.$notify({
title: '您的账号当前并无仓库可查看！',
type: 'warning',
duration:2500
})
}
})
},
initInAndOutList() {
getAllInOutTop10History({warehouseId:this.warehouseId}).then(res => {
if(res.code == '10000') {
this.inAndOutList = res.data
} else {
this.$message.error(res.msg)
}
})
},
initOrderInfo() {
getOrderInfo({page: this.page, size: this.size, warehouseId: this.warehouseId}).then(res => {
if (res.code == '10000'){
this.orderData = res.data.content
this.total = res.data.totalElements
} else {
this.$message.error(res.msg)
}
})
},
warehouseChange(data) {
this.warehouseId = data.id
this.isLocked = !data.isLocked
this.showVideo = true
let obj = this.warehouseList.find(i => i.id === this.warehouseId)
this.src = 'http://'+ obj.cameraUrl +':8080/ckzp.html'
this.initInAndOutList()
this.getPieInfo()
this.getListDev()
this.initOrderInfo()
},
humidityChange() {
getWarehouseInfo({warehouseId: this.warehouseId, devIp: this.devIp}).then(res => {
if (res.data.list.length > 0) {
this.sourceData = res.data.list
} else {
this.sourceData = this.getMockData()
}
this.warehouseSd = res.data.warehouseSd
this.setSd = res.data.setSd
this.warehouseWd = res.data.warehouseWd
this.devState = res.data.devState
})
},
getListDev() { //获取仓库下所有除湿机
getListDev({warehouseId:this.warehouseId}).then(res=> {
this.devList = res.data
if(this.devList.length > 0){
this.devId = this.devList[0].devId //默认显示第一个
this.devIp = res.data[0].devIp
this.isShow = true
getWarehouseInfo({warehouseId: this.warehouseId, devIp: res.data[0].devIp}).then(res => {
if (res.data.list.length > 0) {
this.sourceData = res.data.list
} else {
this.sourceData = this.getMockData()
}
this.warehouseSd = res.data.warehouseSd
this.setSd = res.data.setSd
this.warehouseWd = res.data.warehouseWd
this.devState = res.data.devState
})
}
})
},
getMockData() {
let list = []
for(var a=0; a<12; a++) {
list.push({updateTime: new Date().setHours(new Date().getHours() - a),'温度': 0, '湿度': 0 })
}
return list
},
showWarehouseList() {
const _this = this.$refs.form
this.showVideo = false
_this.form = {
warehouseList : this.warehouseList
}
_this.dialog = true
},
remoteOpenDoor() {
const _this = this.$refs.door
_this.initChannel(this.warehouseId)
_this.dialog = true
},
changeWorked(row, isWork) {
changeOrderIsWork({id: row.id,warehouseId: row.warehouseId, type: row.orderType, isWork: isWork}).then(res => {
if (res.code == '10000') {
this.$notify({
title: '设置成功',
type: 'success',
duration: 2500
})
this.initOrderInfo()
} else {
row.isWork = !row.isWork
this.$message.error(res.msg)
}
})
},
setHumidity() {
const _this = this.$refs.hForm
_this.form = {
devId: this.devId,
OpenState: this.devState + '',
Humid: this.setSd
}
_this.dialog = true
},
postPageChange(e) {
this.page = e - 1
this.initOrderInfo()
},
showDetail(row) {
const _this = this.$refs[row.orderType]
var params = {id: row.applyId}
if (row.orderType == '库存调拨') { params.type = '调拨' }
if (row.orderType == '跨库借用') { params.type = '跨库借用' }
if (row.orderType == '跨库归还') { params.type = '跨库归还' }
initPdata( window._CONFIG['serviceURL'] + this.processUrl[row.orderType] , transform(params)).then(res => {
if(res.code == '10000') {
_this.form = res.data
_this.getSteps(res.data.flowType, res.data.orgId)
} else {
this.$message.error(res.msg)
}
})
_this.dialog = true
},
//配置视频
mvConfig(){
const _this = this.$refs.mvConfigForm
_this.form = {
devId: this.devId,
OpenState: this.devState + '',
Humid: this.setSd
}
_this.dialog = true
},
//获取视频列表
getVideos(){
getCameraByOrgId({orgId: this.orgId}).then(res => {
if (res.code == '10000') {
console.log(res.data)
this.$notify({
title: '操作成功',
type: 'success',
duration: 2500
})
//this.$emit('controlDev')
} else {
this.$message.error(res.msg)
}
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/.el-card .el-card__header{
background:#ffffff;
color:#000000;
font-size: 16px;
}
.link_style{
float: right;
padding: 4px 10px;
color:white
}
.textHeader{
background-color:#fafafa;
padding:16px 10px;
font-size: 14px;
border-right:1px solid #e8e8e8;
text-align:center;
}
.textContent{
background-color:#ffffff;
padding: 8px 8px;
text-align:left;
}
/deep/ .el-dialog{
display: flex;
flex-direction: column;
margin:0 !important;
position:absolute;
top:40%;
left:50%;
transform:translate(-50%,-50%);
/*height:600px;*/
max-height:calc(100% - 30px);
max-width:calc(100% - 30px);
}
/deep/ .el-dialog .el-dialog__body{
flex:1;
overflow: auto;
}
.grid-wrapper {
border: 1px solid #ccc;
padding: 10px;
margin-top: 15px;
}
.grid {
margin-top: 20px;
}
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-gap: 3px;
}
.video-container {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.video-js {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.vjs-big-play-centered:before {
font-size: 10px !important;
}
/* Set the font-family, color and size of the video player controls */
.video-js .vjs-control {
font-family: Arial, sans-serif;
color: #ffffff;
/* font-size: 14px; */
}
</style>
src/views/base/houseBaseInfo/mvConfigForm.vue 0 → 100644
<template>
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" title="监控视频配置" width="500px" height='600px'>
<!-- <el-button @click="addField" type="primary" size="small" style="float: right;">
添加视频配置组
</el-button> -->
<div v-for="(item, index) in fields" :key="index" style="margin-top: 50px; " >
<!-- <div class="dialog-footer">
<el-button type="danger" size="small" style="float: right;" plain @click="removeField(index)">删除</el-button>
</div> -->
<el-divider >{{ item.title }}</el-divider>
<el-form :model="videos" :rules="rules" label-width="90px">
<!-- <el-form-item label="id" >
<el-input v-model="videos.id" placeholder=""></el-input>
</el-form-item> -->
<el-form-item label="视频名称" prop="name">
<el-input v-model="videos.name" placeholder="请输入视频名称"></el-input>
</el-form-item>
<el-form-item label="视频URL" prop="url">
<el-input v-model="videos.url" placeholder="请输入视频URL"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="info" plain @click="cancel">关闭</el-button>
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
</div>
</el-dialog>
</template>
<script>
import { addOrUpdateCamera } from '@/api/warehouse'
export default {
data() {
return {
loading: false, dialog: false, visible: false,
orgId : this.$store.state.user.user.baseJpOrganization.id,
videos:
{
id:'',
name:'',
url:''
}
,
form:{
Id : "",
orgId : "",
channelName: "",
src: ""
},
fields: [
{
title: '视频1',
value1: '',
value2: '',
value3: '',
}
],
rules: {
name: [
{ required: true, message: '请输入视频名称', trigger: 'blur' },
],
url: [
{ required: true, message: '请输入视频URL', trigger: 'blur' },
],}
}
},
methods: {
cancel() {
this.resetForm()
},
doSubmit(){
// updateHumid(this.form)
// controlDev(this.form).then(res => {
// if (res.code == '10000') {
// this.dialog = false
// this.$notify({
// title: '设置成功',
// type: 'success',
// duration: 2500
// })
// this.$emit('controlDev')
// } else {
// this.$message.error(res.msg)
// }
// })
this.form ={
Id : this.videos.id,
orgId : this.$store.state.user.user.baseJpOrganization.id,
channelName: this.videos.name,
src: this.videos.url
}
addOrUpdateCamera(this.form).then(res => {
//console.log(this.$store.state.user.user.baseJpOrganization.id)
if (res.code == '10000') {
this.dialog = false
this.$notify({
title: '操作成功',
type: 'success',
duration: 2500
})
//this.$emit('controlDev')
} else {
this.$message.error(res.msg)
}
})
},
resetForm() {
this.dialog = false
//this.$refs['form'].resetFields()
},
addField() {
this.fields.push({
title: `视频${this.fields.length + 1}`,
value1: '',
value2: '',
value3: '',
});
},
removeField(index) {
this.fields.splice(index, 1);
},
}
}
</script>
<style lang="less" scoped>
/deep/ .el-input-number .el-input__inner {
text-align: left;
}
.form-table{
/deep/&.el-table{
overflow: visible;
.el-table__body-wrapper{
overflow: visible;
.cell{
overflow: visible;
}
}
}
}
</style>
src/views/base/houseBaseInfo/videoHstory.vue 0 → 100644
<template>
<el-card class="rows">
<div class="header">
<el-button size="mini" style="float:right;margin-right: 3%;" type="info" @click="back">返回仓库管理</el-button>
</div>
<el-col :span="16">
<div class="video-grid">
<div class="video-container">
<video
ref="videoPlayer"
class="video-js vjs-big-play-centered"
controls
preload="auto"
data-setup="{}"
>
<source
:src="videoSrc"
type="application/x-mpegURL"
/>
</video>
</div>
</div>
</el-col>
<el-col :span="8" >
<el-divider>选择回放日期及时间</el-divider>
<div class="calendar-box">
<div class="calendar-wrapper">
<h4>{{currentDateStr}}</h4>
<div class="calendar-toolbar">
<div class="prev" @click="prevMonth"><el-button type="primary" size="mini" plain>上个月</el-button></div>
<div class="today" @click="today"><el-button type="primary" size="mini" plain>今天</el-button></div>
<div class="next" @click="nextMonth"><el-button type="primary" size="mini" plain>下个月</el-button></div>
</div>
<div class="calendar-week">
<div
class="week-item calendarBorder"
v-for="item of weekList"
:key="item"
>
{{ item }}
</div>
</div>
<div class="calendar-inner">
<div
class="calendar-item calendarBorder"
v-for="(item, index) of calendarList"
:key="index"
:class="{
'calendar-item': true,
calendarBorder: true,
'calendar-item-hover': !item.disable,
'calendar-item-disabled': item.disable,
'calendar-item-checked':
dayChecked && dayChecked.value == item.value,
}"
@click="handleClickDay(item)"
>
{{ item.date }}
</div>
</div>
</div>
</div>
<div style="margin-left: 105px;">
<el-time-picker
style="margin-top: 20px;margin-right: 20px; width:250px;"
is-range
v-model="dataTime"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
@change='changeDataTime'
>
</el-time-picker>
<el-button type="primary" icon="el-icon-video-camera" @click="playCustom">查看回放</el-button>
</div>
</el-col>
</el-card>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { getStartHls } from '@/api/warehouse'
export default {
name: "VideoGrid",
data() {
return {
showYearMonth: {}, // 显示的年月
calendarList: [], // 用于遍历显示
shareDate: new Date(), // 享元模式，用来做 日期数据转换 优化
dayChecked: {}, // 当前选择的天
weekList: ["一", "二", "三", "四", "五", "六", "日"], // 周
value1: '',
videoSrc:'',
dataTime:'',
todayD: '',
sFormattedDate:'',
eFormattedDate:'',
rptsURL:''
};
},
created() {
this.initDataFun(); // 初始化数据
},
computed: {
// 显示当前时间
currentDateStr() {
let { year, month } = this.showYearMonth;
return `${year}年${this.pad(month + 1)}月`;
},
},
methods:{
back(){
this.$router.push({
path: '/houseBaseInfo/index',
})
},
playCustom() {
console.log('rtsp://admin:junmp123@192.168.3.186:554/Streaming/tracks/201?starttime='+this.todayD+'t'+this.sFormattedDate+'z&endtime='+this.todayD+'t'+this.eFormattedDate+'z')
this.rptsURL= 'rtsp://admin:junmp123@192.168.3.186:554/Streaming/tracks/201?starttime='+this.todayD+'t'+this.sFormattedDate+'z&endtime='+this.todayD+'t'+this.eFormattedDate+'z'
getStartHls({URl:this.rptsURl}).then(res => {
if (res.code == 200) {
console.log(res.data)
this.$notify({
title: '操作成功',
type: 'success',
duration: 2500
})
//this.$emit('controlDev')
} else {
this.$message.error(res.msg)
}
})
const options = {
autoplay: true,
controls: true,
sources: [
{
src:
"http://192.168.2.246:7707/hls/play?mediaKey=d217899fb21928c488872dc90f6a8056",
type: "application/x-mpegURL",
},
],
};
let player = videojs(this.$refs.videoPlayer, options);
player.play();
},
changeDataTime(){
//console.log(this.dataTime)
//console.log(this.dataTime[0])
//开始时间转换处理--取时分秒为数字
let sDate = new Date(this.dataTime[0])
const sHours = sDate.getHours().toString().padStart(2, '0');
const sMinutes = sDate.getMinutes().toString().padStart(2, '0');
const sSeconds = sDate.getSeconds().toString().padStart(2, '0');
this.sFormattedDate = `${sHours}${sMinutes}${sSeconds}`;
console.log(this.sFormattedDate)
//console.log(this.dataTime[1])
//开始时间转换处理---取时分秒为数字
let eDate = new Date(this.dataTime[1])
const eHours = eDate.getHours().toString().padStart(2, '0');
const eMinutes = eDate.getMinutes().toString().padStart(2, '0');
const eSeconds = eDate.getSeconds().toString().padStart(2, '0');
this.eFormattedDate = `${eHours}${eMinutes}${eSeconds}`;
console.log(this.eFormattedDate)
},
//#region 计算日历数据
// 初始化数据
initDataFun() {
// 初始化当前时间
this.setCurrentYearMonth(); // 设置日历显示的日期（年-月）
this.createCalendar(); // 创建当前月对应日历的日期数据
this.getCurrentDay(); // 获取今天
},
// 设置日历显示的日期（年-月）
setCurrentYearMonth(d = new Date()) {
let year = d.getFullYear();
let month = d.getMonth();
let date = d.getDate();
this.showYearMonth = {
year,
month,
date,
};
},
getCurrentDay(d = new Date()) {
let year = d.getFullYear();
let month = d.getMonth();
let date = d.getDate();
this.dayChecked = {
year,
month,
date,
value: this.stringify(year, month, date),
disable: false
};
},
// 创建当前月对应日历的日期数据
createCalendar() {
const today = new Date(); // 获取今天的日期
const todayYear = today.getFullYear();
const todayMonth = today.getMonth();
const todayDate = today.getDate();
// 一天有多少毫秒
const oneDayMS = 24 * 60 * 60 * 1000;
let list = [];
let { year, month } = this.showYearMonth;
// #region
// ---------------仅仅只算某月的天---------------
// // 当前月，第一天和最后一天的毫秒数
// let begin = new Date(year, month, 1).getTime();
// let end = new Date(year, month + 1, 0).getTime();
// ---------------计算某月前后需要填补的天---------------
// 当前月份第一天是星期几, 0-6
let firstDay = this.getFirstDayByMonths(year, month);
// 填充多少天，因为我将星期日放到最后了，所以需要另外调整下
let prefixDaysLen = firstDay === 0 ? 6 : firstDay - 1;
// 向前移动之后的毫秒数
let begin = new Date(year, month, 1).getTime() - oneDayMS * prefixDaysLen;
// 当前月份最后一天是星期几, 0-6
let lastDay = this.getLastDayByMonth(year, month);
// 填充多少天，因为我将星期日放到最后了，所以需要另外调整下
let suffixDaysLen = lastDay === 0 ? 0 : 7 - lastDay;
// 向后移动之后的毫秒数
let end = new Date(year, month + 1, 0).getTime() + oneDayMS * suffixDaysLen;
// // 计算左侧时间段的循环数
// let rowNum = Math.ceil((end - begin) / oneDayMS / 7);
// let newPeriod = [];
// for (let i = 0; i < rowNum; i++) {
// newPeriod.push({});
// }
// #endregion
// 填充天
while (begin <= end) {
// 享元模式，避免重复 new Date
this.shareDate.setTime(begin);
let year = this.shareDate.getFullYear();
let curMonth = this.shareDate.getMonth();
let date = this.shareDate.getDate();
list.push({
year: year,
month: curMonth + 1,
date: date,
value: this.stringify(year, curMonth, date),
disable: curMonth !== month || // 当前月份不是显示的月份
(year > todayYear) || // 年份大于今天的年份
(year === todayYear && curMonth > todayMonth) || // 年份等于今天的年份且月份大于今天的月份
(year === todayYear && curMonth === todayMonth && date > todayDate) // 年份和月份都等于今天且日期大于今天的日期
});
begin += oneDayMS;
}
this.calendarList = list;
},
// 格式化时间
stringify(year, month, date) {
let str = [year, this.pad(month + 1), this.pad(date)].join("-");
return str;
},
// 对小于 10 的数字，前面补 0
pad(str) {
return str < 10 ? `0${str}` : str;
},
// 点击上一月
prevMonth() {
this.showYearMonth.month--;
this.recalculateYearMonth(); // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
this.createCalendar(); // 创建当前月对应日历的日期数据
},
// 点击跳至今天
today() {
this.setCurrentYearMonth(new Date()); // 设置当前日期为今天
this.createCalendar(); // 创建当月的日历数据
this.getCurrentDay(); // 获取今天的日期
//console.log(this.dayChecked.value)
this.todayD = this.dayChecked.value.split('-').join('');
console.log(this.todayD)
},
// 点击下一月
nextMonth() {
this.showYearMonth.month++;
this.recalculateYearMonth(); // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
this.createCalendar(); // 创建当前月对应日历的日期数据
},
// 重算：显示的某年某月
recalculateYearMonth() {
let { year, month, date } = this.showYearMonth;
let maxDate = this.getDaysByMonth(year, month);
// 预防其他月跳转到2月，2月最多只有29天，没有30-31
date = Math.min(maxDate, date);
let instance = new Date(year, month, date);
this.setCurrentYearMonth(instance);
},
// 判断当前月有多少天
getDaysByMonth(year, month) {
return new Date(year, month + 1, 0).getDate();
},
// 当前月的第一天是星期几
getFirstDayByMonths(year, month) {
return new Date(year, month, 1).getDay();
},
// 当前月的最后一天是星期几
getLastDayByMonth(year, month) {
return new Date(year, month + 1, 0).getDay();
},
// #endregion 计算日历数据
// 操作：点击了某天
handleClickDay(item) {
if (!item || item.disable) return;
//const originalDate = item
// const formattedDate = originalDate.split('-').join('');
// console.log(formattedDate);
this.dayChecked = item;
//console.log(this.dayChecked);
this.todayD = this.dayChecked.value.split('-').join('');
console.log(this.todayD)
},
},
mounted() {
// Iterate over each video container and initialize the video player
// let player = videojs(this.$refs.videoPlayer);
// player.play();
},
};
</script>
<style lang="scss" scoped>
.rows{
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 98.5%;
}
.el-col-16{
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
margin-bottom: 10px;
}
.video-grid {
display: grid;
//grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
width: 100%;
grid-gap: 3px;
}
.video-container {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.video-js {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.vjs-big-play-centered:before {
font-size: 10px !important;
}
/* Set the font-family, color and size of the video player controls */
.video-js .vjs-control {
font-family: Arial, sans-serif;
color: #ffffff;
/* font-size: 14px; */
}
.el-col-8{
//margin-top: 20px;
padding: 10px;
}
.calendar-box {
width: 32vw;
height: 40vh;
display: flex;
justify-content: center;
align-items: center;
.calendar-wrapper {
.calendar-toolbar {
width: 345px;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
.prev,
.today,
.next,
.current {
cursor: pointer;
&:hover {
color: #438bef;
}
}
}
.calendar-week {
//width: 37px;
border-left: 1px solid #eee;
display: flex;
flex-wrap: wrap;
.week-item {
width: 50px;
height: 30px;
border-top: 1px solid #eee;
}
}
.calendar-inner {
width: 367px;
border-left: 1px solid #eee;
display: flex;
flex-wrap: wrap;
.calendar-item {
width: 50px;
height: 30px;
}
.calendar-item-hover {
cursor: pointer;
&:hover {
color: #fff;
background-color: #438bef;
}
}
.calendar-item-disabled {
color: #acacac;
cursor: not-allowed;
}
.calendar-item-checked {
color: #fff;
background-color: #438bef;
}
}
.calendarBorder {
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
}
}
}
</style>
\ No newline at end of file
src/views/base/warehouse/storeroom/form.vue
...@@ -16,9 +16,9 @@ ...@@ -16,9 +16,9 @@
<el-form-item label="联系电话" prop="phone"> <el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" style="width: 370px;" placeholder="请输入联系电话"/> <el-input v-model="form.phone" style="width: 370px;" placeholder="请输入联系电话"/>
</el-form-item> </el-form-item>
<el-form-item label="视频地址"> <!-- <el-form-item label="视频地址">
<el-input v-model="form.cameraUrl" style="width: 370px;" placeholder="请输入安装视频服务的Ip"/> <el-input v-model="form.cameraUrl" style="width: 370px;" placeholder="请输入安装视频服务的Ip"/>
</el-form-item> </el-form-item> -->
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="cancel" type="info" plain>关闭</el-button> <el-button @click="cancel" type="info" plain>关闭</el-button>
......
src/views/equipmentCtr/videoConfiguration/form.vue 0 → 100644
<template>
<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增监控配置' : '编辑监控配置'" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
<el-form-item label="监控视频名称" prop="channelName">
<el-input v-model="form.channelName" style="width: 300px;"/>
</el-form-item>
<el-form-item label="监控视频地址" prop="src">
<el-input v-model="form.src" style="width: 300px;"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取消</el-button>
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
</div>
</el-dialog>
</template>
<script>
import { addOrUpdateCamera } from '@/api/warehouse'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { Treeselect },
props: {
isAdd: {
type: Boolean,
required: true
}
},
data() {
return {
loading: false, dialog: false, visible: false,
videos:
{
id:'',
name:'',
url:''
}
,
form:{
Id : "",
orgId : "",
channelName: "",
src: ""
},
rules: {
channelName: [
{ required: true, message: '请输入监控视频名称', trigger: 'blur' }
],
src: [
{ required: true, message: '请输入监控视频地址', trigger: 'blur' }
],
}
}
},
methods: {
cancel() {
this.resetForm()
},
doSubmit() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true
if (this.isAdd) {
this.doAdd()
} else this.doEdit()
}
})
},
doAdd() {
//this.form.orgId =this.orgId
console.log(this.form.orgId)
addOrUpdateCamera(this.form).then(res => {
if (res.code === '10000') {
this.resetForm()
this.$notify({
title: '添加成功',
type: 'success',
duration: 2500
})
this.loading = false
this.$parent.$parent.$parent.initPost()
} else {
this.loading = false
this.$message.error(res.msg)
}
}).catch(err => {
this.loading = false
// console.log(err.response.data.message)
})
},
doEdit() {
//this.form.orgId = this.$store.state.user.user.baseJpOrganization.id
//this.form.orgId =this.id
console.log('5555'+this.form)
addOrUpdateCamera(this.form).then(res => {
if (res.code === '10000') {
this.resetForm()
this.$notify({
title: '修改成功',
type: 'success',
duration: 2500
})
this.loading = false
this.$parent.$parent.$parent.initPost()
} else {
this.loading = false
this.$message.error(res.msg)
}
}).catch(err => {
this.loading = false
// console.log(err.response.data.message)
})
},
initWarehouseById(id) {
// 获取仓库列表
// getListOrgWarehouse({orgizationId: id}).then(res =>{
// this.warehouses = res.data
// })
},
resetForm() {
this.dialog = false
this.$refs['form'].resetFields()
this.form = {
id: '',
channelName: '',
src:'',
orgId:''
}
},
isvalidIp(str) {
const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
return reg.test(str)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .el-input-number .el-input__inner {
text-align: left;
}
</style>
src/views/equipmentCtr/videoConfiguration/index.vue 0 → 100644
<template>
<div class="" style="background:#f0f2f5">
<div class="dashboard-editor-container">
<el-row :gutter="20" style="background:#f0f2f5;">
<!--装备类型数据-->
<el-col :xs="9" :sm="6" :md="5" :lg="5" :xl="5" v-show="show">
<div class="chart-wrapper" style="overflow:auto">
<div class="head-container">
<el-input prefix-icon="el-icon-search" style="width: 100%;"
placeholder="输入组织机构名称过滤" clearable
v-model="filterText">
</el-input>
</div>
<el-tree
ref="tree"
class="filter-tree"
node-key="id"
:default-expanded-keys="['7C842FDD-D0C1-4AD5-A4F8-7D8EB689DFDA']"
:data="tData"
:props="defaultProps"
:highlight-current="true"
:filter-node-method="filterNode"
@node-click="handleNodeClick"/>
</div>
</el-col>
<el-col :xs="15" :sm="18" :md="19" :lg="show?19:24" :xl="show?19:24" style="padding-left:0px">
<div class="chart-wrapper" style="overflow:scroll">
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<el-button class="filter-item" size="mini" :icon="show ? 'el-icon-s-fold': 'el-icon-s-unfold'" @click="show=!show"/>
<el-popover placement="bottom-end" width="150" trigger="click">
<el-button class="filter-item" slot="reference" size="mini" icon="el-icon-s-grid"/>
<el-checkbox v-model="allColumnsSelected" :indeterminate="allColumnsSelectedIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox
v-for="item in columns"
:key="item.label"
v-model="item.visible"
@change="handleCheckedTableColumnsChange(item)"
>
{{ item.label }}
</el-checkbox>
</el-popover>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="add">新增配置</el-button>
</div>
<!--表单组件-->
<eForm ref="form" :is-add="isAdd"/>
<!--表格渲染-->
<el-table ref="table" v-loading="loading" :data="data" highlight-current-row border size="small" style="width: 100%;">
<el-table-column prop="channelName" label="监控视频名称"/>
<el-table-column prop="src" label="监控视频地址"/>
<el-table-column prop="createtime" label="配置时间" sortable/>
<el-table-column label="操作" width="150" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="edit(scope.row)">编辑</el-button>
<el-popover
:ref="scope.row.id"
placement="top"
width="180">
<p>确定删除本条数据吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="$refs[scope.row.id,scope.row.orgId].doClose()">取消</el-button>
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id, scope.row.orgId)">确定</el-button>
</div>
<el-button slot="reference" type="danger" size="mini">删除</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<!-- <el-pagination
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="postSizeChange"
@current-change="postPageChange"/> -->
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { getCameraByOrgId, deleteCamera } from '@/api/warehouse'
import checkPermission from '@/utils/permission'
import { deleteCfg } from '@/api/warehouseDev'
import { getListOrg } from '@/api/org'
import initData from '@/mixins/initData'
import eForm from './form'
export default {
name: 'Asset',
components: { eForm },
mixins: [initData],
// 设置数据字典
data() {
return {
filterText: '',
selection: '',
orgId: '',
columns: [],
allColumnsSelected: true,
allColumnsSelectedIndeterminate: false,
show: true,
tData: [],
defaultProps:{
children: 'children',
label: 'name'
},
delLoading: false
}
},
created() {
this.initTree()
this.$nextTick(() => {
this.initPost()
const columns = []
this.$refs['table'].columns.forEach((e, index) => {
if (!e.property || e.type !== 'default') {
return
}
e.__index = index
columns.push({
property: e.property,
index,
label: e.label,
visible: true
})
})
this.columns = columns
})
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
checkPermission,
beforeInit() {
getCameraByOrgId({orgId: this.orgId || this.$store.state.user.user.baseJpOrganization.id}).then(res => {
if (res.code == '10000') {
this.data = res.data.videos,
this.loading = false,
console.log(res.data)
} else {
this.$message.error(res.msg)
}
})
},
initTree() {
const params = { id: this.$store.state.user.user.baseJpOrganization.id }
getListOrg(params).then(res => {
this.tData = res.data
})
},
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
subDelete(id,orgId) {
this.delLoading = true
const params = {id:id, orgId:orgId}
deleteCamera(params).then(res => {
if (res.code === '10000') {
this.$refs[id].doClose()
this.dleChangePage()
this.initPost()
this.$notify({
title: '删除成功',
type: 'success',
duration: 2500
})
} else {
this.$message.error(res.msg)
}
this.delLoading = false
}).catch(err => {
this.delLoading = false
this.$refs[devId].doClose()
console.log(err.response.data.message)
})
},
add() {
this.isAdd = true
console.log(this.orgId)
const _this = this.$refs.form
if (!this.selection) {
this.$notify({
title: '请选择组织机构',
type: 'warning',
duration: 2500
})
} else {
_this.form = {
id: '',
orgId: this.orgId,
channelName: '',
src: '',
}
_this.dialog = true
}
},
edit(data) {
this.isAdd = false
console.log(this.orgId)
const _this = this.$refs.form
_this.form = {
id: data.id,
orgId: data.orgId,
channelName: data.channelName,
src: data.src,
}
_this.initWarehouseById(data.orgId)
_this.dialog = true
},
handleNodeClick(data) {
this.selection = data
this.orgId = data.id
this.initPost()
},
handleCheckAllChange(val) {
if (val === false) {
this.allColumnsSelected = true
return
}
this.columns.forEach(column => {
if (!column.visible) {
column.visible = true
this.updateColumnVisible(column)
}
})
this.allColumnsSelected = val
this.allColumnsSelectedIndeterminate = false
},
handleCheckedTableColumnsChange(item) {
let totalCount = 0
let selectedCount = 0
this.columns.forEach(column => {
++totalCount
selectedCount += column.visible ? 1 : 0
})
if (selectedCount === 0) {
this.$notify({
title: '请至少选择一列',
type: 'warning',
duration: 2500
})
this.$nextTick(function() {
item.visible = true
})
return
}
this.allColumnsSelected = selectedCount === totalCount
this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
this.updateColumnVisible(item)
},
updateColumnVisible(item) {
const table = this.$refs['table']
const vm = table.$children.find(e => e.prop === item.property)
const columnConfig = vm.columnConfig
if (item.visible) {
let columnIndex = -1
// 找出合适的插入点
table.store.states.columns.find(e => {
columnIndex++
return e.__index !== undefined && e.__index > columnConfig.__index
})
vm.owner.store.commit('insertColumn', columnConfig, columnIndex, null)
} else {
vm.owner.store.commit('removeColumn', columnConfig, null)
}
}
}
}
</script>
<style scoped>
.dev-type-main-left {
overflow: auto;
padding: 10px;
}
.right-menu {
z-index: 1;
position: absolute;
height: 100px;
width: 100px;
position: absolute;
border-radius: 5px;
border: 1px solid #ccc;
background-color: white;
}
.menu-item {
line-height: 20px;
text-align: left;
margin-top: 10px;
font-size: 14px;
color: #606266;
}
li:hover {
background-color: #edf6ff;
color: #606266;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
padding: 7px 7px 7px 7px;
background-color: rgb(240, 242, 245);
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
height : 650px
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论