Compare commits

...

25 Commits

Author SHA1 Message Date
fanluyan 62be779dba a 2 years ago
fanluyan fca1b3b13a 拍照时间表 2 years ago
fanluyan a571b1f4e9 dongshi 2 years ago
fanluyan 30d8498fcb 优化 2 years ago
fanluyan ca099093ee 东视版本 2 years ago
fanluyan 63957ef12a 东视 2 years ago
fanluyan b21e6859d4 东视 2 years ago
fanluyan 51a2a92c2b 东视 2 years ago
fanluyan b17f4424a6 优化装置列表 2 years ago
fanluyan 25342a89e9 修改左侧树状结构 2 years ago
fanluyan f606b9003e 修改左侧树状结构 2 years ago
fanluyan 96a75a4e6b 采样参数,图像,id查询添加rf参数 2 years ago
fanluyan 56e425f513 告警 2 years ago
fanluyan a8c6a339c5 样式优化添加echarts 2 years ago
fanluyan c50d9597a0 优化页面 2 years ago
fanluyan 08bb06f78c 优化 2 years ago
fanluyan 1e63720f56 anhuiosd 2 years ago
fanluyan e9cb3bcbbf osd 2 years ago
fanluyan 3fe5f93838 osd河南处理 2 years ago
fanluyan 82f60a0fa9 添加osd 2 years ago
fanluyan c46203b0c1 osd 2 years ago
fanluyan d8bb891ba2 样式优化 2 years ago
fanluyan 42a7c92543 样式优化 2 years ago
fanluyan 1f9476a5c3 优化图片轮播以及左侧树状结构 2 years ago
fanluyan bca647a736 ip添加验证 2 years ago

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

@ -64,105 +64,16 @@ export default {
title: "实时监控",
},
{
icon: "el-icon-film",
index: "/pictureRotation",
title: "图片轮巡",
},
{
icon: "el-icon-bell",
index: "/photoAlarm",
title: "告警处理",
},
{
icon: "el-icon-search",
index: "/realTimeSearch",
title: "历史图片",
},
{
icon: "el-icon-files",
index: "/property",
title: "资产管理",
subs: [
{
index: "/lineInformation",
title: "线路信息管理",
},
{
index: "/towerInformation",
title: "杆塔信息管理",
},
{
index: "/cameraChannel",
title: "通道管理",
},
{
index: "/photographicDevice",
title: "拍照装置管理",
},
{
index: "/devicePhotoSchedule",
title: "拍照时间表设置",
},
{
index: "/deviceReport",
title: "装置报表",
},
{
index: "/waterMark",
title: "水印下发",
},
// {
// index: "/deviceUpgrade",
// title: "",
// },
// {
// icon: "el-icon-picture-outline",
// index: "imageSettings",
// title: "",
// },
],
},
{
icon: "el-icon-monitor",
index: "/system",
title: "系统管理",
subs: [
{
index: "/userManagement",
title: "用户管理",
},
{
index: "/globalTools",
title: "全局设置",
},
],
},
],
items1: [
{
icon: "el-icon-s-home",
index: "stritl",
title: "首页",
},
{
icon: "el-icon-camera",
index: "/realTimeMonitor",
title: "实时监控",
},
{
icon: "el-icon-film",
index: "/pictureRotation",
title: "图片轮巡",
},
{
icon: "el-icon-bell",
index: "/photoAlarm",
title: "告警处理",
},
// {
// icon: "el-icon-film",
// index: "/pictureRotation",
// title: "",
// },
// {
// icon: "el-icon-bell",
// index: "/photoAlarm",
// title: "",
// },
{
icon: "el-icon-search",
@ -196,85 +107,13 @@ export default {
title: "拍照时间表设置",
},
// {
// index: "/deviceUpgrade",
// title: "",
// index: "/deviceReport",
// title: "",
// },
// {
// icon: "el-icon-picture-outline",
// index: "imageSettings",
// title: "",
// index: "/waterMark",
// title: "",
// },
],
},
{
icon: "el-icon-monitor",
index: "/system",
title: "系统管理",
subs: [
{
index: "/userManagement",
title: "用户管理",
},
// {
// index: "/globalTools",
// title: "",
// },
],
},
],
items2: [
{
icon: "el-icon-s-home",
index: "stritl",
title: "首页",
},
{
icon: "el-icon-camera",
index: "/realTimeMonitor",
title: "实时监控",
},
{
icon: "el-icon-film",
index: "/pictureRotation",
title: "图片轮巡",
},
{
icon: "el-icon-bell",
index: "photoAlarm",
title: "告警处理",
},
{
icon: "el-icon-search",
index: "/realTimeSearch",
title: "历史图片",
},
{
icon: "el-icon-files",
index: "/property",
title: "资产管理",
subs: [
{
index: "/lineInformation",
title: "线路信息管理",
},
{
index: "/towerInformation",
title: "杆塔信息管理",
},
// {
// index: "/cameraChannel",
// title: "",
// },
{
index: "/photographicDevice",
title: "拍照装置管理",
},
{
index: "/devicePhotoSchedule",
title: "拍照时间表设置",
},
// {
// index: "/deviceUpgrade",
// title: "",
@ -286,6 +125,21 @@ export default {
// },
],
},
// {
// icon: "el-icon-monitor",
// index: "/system",
// title: "",
// subs: [
// {
// index: "/userManagement",
// title: "",
// },
// {
// index: "/globalTools",
// title: "",
// },
// ],
// },
],
role: "",
@ -303,19 +157,21 @@ export default {
},
created() {
this.setCurrentRoute();
this.role = localStorage.getItem("role");
console.log("用户管理");
console.log(this.role);
// this.role = localStorage.getItem("role");
// console.log("");
// console.log(this.role);
if (this.role == 0) {
this.items = this.items;
} else if (this.role == 1) {
this.items = this.items1;
} else if (this.role == 2) {
this.items = this.items2;
}
// if (this.role == 0) {
// this.items = this.items;
// } else if (this.role == 1) {
// this.items = this.items1;
// } else if (this.role == 2) {
// this.items = this.items2;
// } else if (this.role == 4) {
// this.items = this.hnjcitems;
// }
console.log(this.items);
// console.log(this.items);
},
};
</script>

@ -3,13 +3,13 @@
<div class="logoTitle">视频监控可视化平台</div>
<div class="menuBox">
<vSidebar></vSidebar>
<div class="userInfo">
<!-- <div class="userInfo">
<div class="header-user-con">
<!-- 用户头像 -->
<div class="user-avator">
<img src="../assets/img/user.jpeg" />
</div>
<!-- 用户名下拉菜单 -->
<el-dropdown
class="user-name"
trigger="click"
@ -25,7 +25,7 @@
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div> -->
</div>
<password-dialog ref="passwordref"></password-dialog>
</div>

@ -0,0 +1,452 @@
<template>
<div class="echartsBox">
<div class="gropName">
<el-checkbox-group v-model="checkList">
<el-checkbox
v-for="item in qtOption"
:label="item.groupName"
:key="item.groupName"
><span v-if="item.groupName == 'H2'">{{ item.groupName }}()</span>
<span v-if="item.groupName == 'CO'"
>{{ item.groupName }}(一氧化碳)</span
>
<span v-if="item.groupName == 'CH4'">{{ item.groupName }}()</span>
<span v-if="item.groupName == 'C2H4'"
>{{ item.groupName }}(乙烯)</span
>
<span v-if="item.groupName == 'C2H6'"
>{{ item.groupName }}(乙烷)</span
>
<span v-if="item.groupName == 'C2H2'"
>{{ item.groupName }}(乙炔)</span
></el-checkbox
>
</el-checkbox-group>
</div>
<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "",
data() {
return {
checkList: [], //
qtOption: [], //
myChart: "",
xData1: [], //
lineData1: [], //
yMax1: "", //y
channelCrests1: [], //
dataPointer1: [], //
xData2: [], //
lineData2: [], //
yMax2: "", //y
channelCrests2: [], //
dataPointer2: [], //
xData3: [], //
lineData3: [], //
yMax3: "", //y
channelCrests3: [], //
dataPointer3: [], //
};
},
created() {
this.getMenuData1();
this.getMenuData2();
this.getMenuData3();
},
mounted() {},
watch: {},
methods: {
//1
getMenuData1() {
axios
.get("/aa.json")
.then((res) => {
console.log("getMenuData", res);
// this.qtOption = res.data.config.channels[0].crests;//
// console.log(this.qtOption);
this.lineData1 = res.data.data[0]; //
this.yMax1 = res.data.config.yMax; //y
this.channelCrests1 = res.data.config.channels[0].crests;
var timeSpan = 1; //
for (
var i = 0;
i < res.data.config.numberOfData * timeSpan;
i = i + timeSpan
) {
this.xData1.push(i);
}
for (var i = 0; i < this.channelCrests1.length; i++) {
this.dataPointer1.push({
name: this.channelCrests1[i].groupName,
label: this.channelCrests1[i].crestNo + "",
xAxis: this.channelCrests1[i].crestTime,
yAxis: this.lineData1[this.channelCrests1[i].crestTime],
});
}
console.log(this.dataPointer1);
//
this.getEchart1();
})
.catch((error) => {
console.log(error);
});
},
//2
getMenuData2() {
axios
.get("/bb.json")
.then((res) => {
this.lineData2 = res.data.data[0]; //
this.yMax2 = res.data.config.yMax; //y
this.channelCrests2 = res.data.config.channels[0].crests;
var timeSpan = 1; //
for (
var i = 0;
i < res.data.config.numberOfData * timeSpan;
i = i + timeSpan
) {
this.xData2.push(i);
}
for (var i = 0; i < this.channelCrests2.length; i++) {
this.dataPointer2.push({
name: this.channelCrests2[i].groupName,
label: this.channelCrests2[i].crestNo + "",
xAxis: this.channelCrests2[i].crestTime,
yAxis: this.lineData2[this.channelCrests2[i].crestTime],
});
}
console.log(this.dataPointer2);
//
//
this.getEchart2();
})
.catch((error) => {
console.log(error);
});
},
//3
getMenuData3() {
axios
.get("/cc.json")
.then((res) => {
this.lineData3 = res.data.data[0]; //
this.yMax3 = res.data.config.yMax; //y
this.channelCrests3 = res.data.config.channels[0].crests;
var timeSpan = 1; //
for (
var i = 0;
i < res.data.config.numberOfData * timeSpan;
i = i + timeSpan
) {
this.xData3.push(i);
}
console.log(this.lineData3);
for (var i = 0; i < this.channelCrests3.length; i++) {
this.dataPointer3.push({
name: this.channelCrests3[i].groupName,
label: this.channelCrests3[i].crestNo + "",
xAxis: this.channelCrests3[i].crestTime,
yAxis: this.lineData3[this.channelCrests3[i].crestTime],
});
}
console.log(this.dataPointer3);
//
this.getEchart3();
})
.catch((error) => {
console.log(error);
});
},
//
getEchart1() {
this.$nextTick(() => {
let that = this;
that.myChart = this.$echarts.init(document.getElementById("demo1"));
let option = {
title: {
text: "图谱1",
left: "left",
},
tooltip: {
trigger: "axis",
axisPointer: {
animation: false,
},
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
xAxis: {
type: "category",
data: this.xData1, // x
boundaryGap: false,
showMaxLabel: true,
name: "单位:s", //
},
yAxis: {
type: "value",
scale: true,
name: "单位:mV", //
nameTextStyle: {
//
color: "#000", //
fontSize: 10, //
padding: [0, 28, 4, 0], //
},
},
series: [
{
data: this.lineData1,
type: "line",
smooth: true,
symbol: "none",
sampling: "lttb",
itemStyle: {
color: "rgb(255, 70, 131)",
},
markPoint: {
data: this.dataPointer1,
symbol: "pin",
symbolSize: 18,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
distance: 0,
formatter: function (params) {
console.log(params);
return params.data.label + ":" + params.name;
},
},
},
},
},
},
],
};
that.myChart.setOption(option);
window.addEventListener("resize", () => {
that.myChart.resize();
});
});
},
getEchart2() {
this.$nextTick(() => {
let that = this;
that.myChart = this.$echarts.init(document.getElementById("demo2"));
let option = {
title: {
text: "图谱2",
left: "left",
},
tooltip: {
trigger: "axis",
axisPointer: {
animation: false,
},
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
xAxis: {
type: "category",
data: this.xData2, // x
boundaryGap: false,
showMaxLabel: true,
name: "单位:s", //
},
yAxis: {
type: "value",
scale: true,
name: "单位:mV", //
nameTextStyle: {
//
color: "#000", //
fontSize: 10, //
padding: [0, 28, 4, 0], //
},
},
series: [
{
data: this.lineData2,
type: "line",
smooth: true,
symbol: "none",
sampling: "lttb",
itemStyle: {
color: "rgb(255, 70, 131)",
},
markPoint: {
data: this.dataPointer2,
symbol: "pin",
symbolSize: 18,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
distance: 0,
formatter: function (params) {
console.log(params);
return params.data.label + ":" + params.name;
},
},
},
},
},
},
],
};
that.myChart.setOption(option);
window.addEventListener("resize", () => {
that.myChart.resize();
});
});
},
getEchart3() {
this.$nextTick(() => {
let that = this;
that.myChart = this.$echarts.init(document.getElementById("demo3"));
let option = {
title: {
text: "图谱3",
left: "left",
},
tooltip: {
trigger: "axis",
axisPointer: {
animation: false,
},
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
xAxis: {
type: "category",
data: this.xData3, // x
boundaryGap: false,
showMaxLabel: true,
name: "单位:s", //
},
yAxis: {
type: "value",
scale: true,
show: true, // y
name: "单位:mV", //
nameTextStyle: {
//
color: "#000", //
fontSize: 10, //
padding: [0, 28, 4, 0], //
},
},
series: [
{
data: this.lineData3,
type: "line",
smooth: true,
symbol: "none",
sampling: "lttb",
itemStyle: {
color: "rgb(255, 70, 131)",
},
markPoint: {
data: this.dataPointer3,
symbol: "pin",
symbolSize: 18,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
distance: 0,
formatter: function (params) {
console.log(params);
return params.data.label + ":" + params.name;
},
},
},
},
},
},
],
};
that.myChart.setOption(option);
window.addEventListener("resize", () => {
that.myChart.resize();
});
});
},
},
};
</script>
<style lang="less">
.echartsBox {
height: calc(100% - 32px);
padding: 16px;
display: flex;
flex-direction: column;
// justify-content: space-around;
#demo1,
#demo2,
#demo3 {
height: 400px;
width: 80%;
}
.gropName {
.el-checkbox-group {
display: flex;
flex-direction: column;
.el-checkbox {
height: 40px;
line-height: 40px;
}
}
}
}
</style>

@ -53,18 +53,24 @@ Vue.directive("noMoreClick", {
//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
document.title = `${to.meta.title} | 视频监控可视化平台`;
const role = localStorage.getItem("role");
const token = localStorage.getItem("token");
console.log(role, token);
if (!token && to.path !== "/login") {
//next("/login");
next({
path: "/login",
});
if (to.meta.title == "") {
document.title = ` 视频监控可视化平台`;
} else {
next();
document.title = `${to.meta.title} | 视频监控可视化平台`;
}
// const role = localStorage.getItem("role");
// const token = localStorage.getItem("token");
// console.log(role, token);
// if (!token && to.path !== "/login") {
// //next("/login");
// next({
// path: "/login",
// });
// } else {
// next();
// }
next();
});
new Vue({
router,

@ -4,7 +4,7 @@ import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{ path: "/", redirect: "/login" },
{ path: "/", redirect: "/stritl" },
{
path: "/stritl",
component: () => import("../components/Home.vue"),
@ -33,18 +33,7 @@ const routes = [
icon: "el-icon-camera",
},
},
{
path: "/pictureRotation",
component: () =>
import(
/* webpackChunkName: "home" */ "../views/pictureRotation/index.vue"
),
meta: {
title: "图片轮巡",
permission: true,
icon: "el-icon-camera",
},
},
{
path: "/realTimeSearch",
component: () =>
@ -57,35 +46,6 @@ const routes = [
icon: "el-icon-camera",
},
},
{
path: "/photoAlarm",
component: () =>
import(
/* webpackChunkName: "home" */ "../views/alarmHandling/index.vue"
),
meta: {
title: "告警处理",
permission: true,
icon: "el-icon-camera",
},
},
{
path: "/userManagement",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/system/userManagement.vue"
),
meta: { title: "用户管理", icon: "el-icon-monitor" },
},
{
path: "/globalTools",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/system/globalTools/index.vue"
),
meta: { title: "全局设置" },
},
{
path: "/lineInformation",
component: () =>
@ -129,11 +89,11 @@ const routes = [
],
},
{
path: "/login",
component: () => import("../views/login/index.vue"),
meta: { title: "登录" },
},
// {
// path: "/login",
// component: () => import("../views/login/index.vue"),
// meta: { title: "登录" },
// },
];
const router = new VueRouter({

@ -223,15 +223,6 @@ export function getTermLastGPSPosition(data) {
},
});
}
//图片轮巡
//获取图片轮巡接口
export function getPictureList(data) {
return request({
url: "/api/getPhotoBanner",
method: "post",
data,
});
}
//历史图片
//获取电压-线路-杆塔等信息
@ -251,32 +242,6 @@ export function getRealtimePhoto(data) {
});
}
//告警功能
//获取告警列表
export function getAlarmList(data) {
return request({
url: "/api/getTerminalAlarmList",
method: "post",
data,
});
}
//获取告警label
export function getAlarmTypeList(data) {
return request({
url: "/api/getAlarmTypeList",
method: "post",
data,
});
}
//已读未读
export function readAlarm(data) {
return request({
url: "/api/readAlarm",
method: "post",
data,
});
}
//手动拍照
export function takePicJoggle(data) {
return request({
@ -292,61 +257,7 @@ export function takePicJoggle(data) {
}
//用户管理
//用户列表查询
export function getUserList(data) {
return request({
url: "/api/userList",
method: "post",
data,
});
}
//新增用户
export function addUserApi(data) {
return request({
url: "/api/addUser",
method: "post",
data,
});
}
//删除用户
export function delUserApi(data) {
return request({
url: "/api/deleteUser",
method: "post",
data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//设置告警可信度
export function updateAlarmTypeList(data) {
return request({
url: "/api/updateAlarmTypeList",
method: "post",
data,
});
} //全局设置线缆绘制
export function getMarkEnableStatus(data) {
return request({
url: "/api/getMarkEnableStatus",
method: "post",
data,
});
}
//全局更新设置线缆绘制
export function updateMarkEnableStatus(data) {
return request({
url: "/api/updateMarkEnableStatus",
method: "post",
data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
});
}
//全局设置通道
export function updateAlarmChannel(data) {
@ -658,3 +569,12 @@ export function getTermListByChannelJoggle(data) {
data,
});
}
//调节焦距
export function updateTermCamera(data) {
return request({
url: "/api/updateTermCamera",
method: "get",
params: data,
});
}

File diff suppressed because it is too large Load Diff

@ -117,7 +117,13 @@ export default {
updateChannelapi(this.formdata)
.then((res) => {
if (res.code == 200) {
this.$message.success("修改成功");
// this.$message.success("");
this.$message({
duration: 1500,
showClose: true,
message: "添加成功",
type: "success",
});
this.$parent.deviceList();
this.isShow = false;
} else {
@ -125,7 +131,13 @@ export default {
}
})
.catch((err) => {
this.$message.error("修改失败");
//this.$message.error("");
this.$message({
duration: 1500,
showClose: true,
message: "修改失败",
type: "error",
});
});
}
} else {

@ -46,7 +46,7 @@
<div id="echart2" class="chartClass" v-loading="pieloading"></div>
</el-card>
</div>
<div class="echart-top">
<!-- <div class="echart-top">
<el-card class="box-card" v-loading="barloading">
<h3>7天告警数量统计</h3>
<div class="dateBox">
@ -78,7 +78,7 @@
</div>
<div id="echart4" class="chartClass"></div>
</el-card>
</div>
</div> -->
<el-dialog
class="exportDialog"
title="装置列表"
@ -120,8 +120,6 @@
<script>
import {
getTermStatistics,
getWeekAlarmStatistics,
getTodayAlarmStatistics,
getOnlineTerminalList,
getOnlineTerminalListExcel,
} from "@/utils/api/index";
@ -159,8 +157,6 @@ export default {
mounted() {
this.getDateTime(); //
this.getTermData();
this.getWeekAlarmStatistics();
this.getTodayAlarmStatistics();
},
watch: {
"$store.state.collapse"(val) {
@ -169,8 +165,6 @@ export default {
//echarts
this.myChart1.resize();
this.myChart2.resize();
this.myChart3.resize();
this.myChart4.resize();
}, 300);
},
},
@ -197,18 +191,7 @@ export default {
console.log(val);
window.location.href = "/api/api/getOnlineTerminalListExcel?type=" + val;
},
//
changedate() {
console.log(this.dateValue.getTime());
this.dateValue = this.dateValue.getTime();
this.getWeekAlarmStatistics();
},
//
changedate2() {
console.log(this.dateValue2.getTime());
this.dateValue2 = this.dateValue2.getTime();
this.getTodayAlarmStatistics();
},
//
getDateTime() {
console.log(new Date());
@ -231,30 +214,7 @@ export default {
})
.catch((err) => {});
},
//7
getWeekAlarmStatistics() {
this.barloading = true;
getWeekAlarmStatistics({ starttime: this.dateValue })
.then((res) => {
console.log(res);
this.weekData = res.data.list;
this.barloading = false;
this.getEchart3();
})
.catch((err) => {});
},
//
getTodayAlarmStatistics() {
this.pie2loading = true;
getTodayAlarmStatistics({ starttime: this.dateValue2 })
.then((res) => {
console.log(res);
this.todayAlarm = res.data.list;
this.pie2loading = false;
this.getEchart4();
})
.catch((err) => {});
},
//
getEchart2() {
this.$nextTick(() => {
@ -326,152 +286,6 @@ export default {
});
});
},
//7
getEchart3() {
this.$nextTick(() => {
this.$echarts.init(document.getElementById("echart3")).dispose();
this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
let option = {
// title: {
// text: "",
// },
color: ["#169e8c"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
//topleftrightbottom
top: "10%",
left: "10%",
right: "10%",
bottom: "10%",
},
xAxis: {
type: "category",
data: this.weekData.map((x) => {
return this.$moment(x.date).format("MM-DD");
}),
axisTick: {
alignWithLabel: true,
},
},
yAxis: { type: "value" },
series: [
{
name: "告警数量",
data: this.weekData.map((x) => {
return x.num;
}),
type: "bar",
showBackground: true,
backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
},
],
};
this.myChart3.setOption(option);
window.addEventListener("resize", () => {
this.myChart3.resize();
});
});
},
//
getEchart4() {
this.$nextTick(() => {
this.$echarts.init(document.getElementById("echart4")).dispose();
this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
let arr = [];
this.todayAlarm.forEach((element) => {
arr.push({
value: element.num, //numvalue
name: element.enname, //namename
});
});
let option = {
// title: {
// text: "",
// },
// tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "shadow",
// },
// },
// xAxis: {
// type: "category",
// data: this.todayAlarm.map((item) => {
// return item.enname;
// }),
// axisTick: {
// alignWithLabel: true,
// },
// },
// yAxis: { type: "value" },
// series: [
// {
// name: "",
// data: this.todayAlarm.map((item) => {
// return item.num;
// }),
// type: "bar",
// showBackground: true,
// backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
// },
// ],
// title: {
// text: "线",
// },
tooltip: {
trigger: "item",
},
legend: {
type: "scroll",
orient: "vertical",
right: 10,
top: 20,
bottom: 20,
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2,
},
label: {
show: true,
fontSize: 16,
fontWeight: "bold",
formatter: "{b}\n{d}%",
},
emphasis: {
label: {
show: true,
fontSize: 26,
fontWeight: "bold",
formatter: "{b}\n{d}%",
},
},
labelLine: {
show: true,
},
data: arr,
},
],
};
this.myChart4.setOption(option);
window.addEventListener("resize", () => {
this.myChart4.resize();
});
});
},
},
};
</script>
@ -481,7 +295,7 @@ export default {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-around;
//justify-content: space-around;
.echart-top {
display: flex;
height: 48%;

@ -799,7 +799,7 @@ export default {
}
if (val.protocol == 65281) {
this.$set(this.setForm, "resolution", this.ratiolist[12].id);
this.$set(this.setForm, "resolution", this.ratiolist[5].id);
this.$set(this.setForm, "luminance", 50);
this.$set(this.setForm, "contrast", 50);
this.$set(this.setForm, "saturation", 50);
@ -830,6 +830,10 @@ export default {
name: "flag",
value: 0,
},
{
name: "rf",
value: 255,
},
{
name: "channel",
value: this.selaccess,
@ -879,6 +883,10 @@ export default {
name: "flag",
value: 1,
},
{
name: "rf",
value: 255,
},
{
name: "channel",
value: this.setForm.channelId,

@ -4,7 +4,7 @@
title="参数设置"
:visible.sync="isShow"
:close-on-click-modal="false"
width="1100px"
width="1200px"
@close="handleclose"
>
<div class="zzinfo">
@ -282,7 +282,6 @@
<imageCapture ref="imageCaptureref" :rowdata="rowData"></imageCapture>
</div>
</el-tab-pane>
<el-tab-pane label="视频采集参数" name="6">
<div class="tabsBox">
<videoCapture ref="videoCaptureref" :rowdata="rowData"></videoCapture>
@ -300,13 +299,14 @@
@tab-click="waterhandleClick"
>
<el-tab-pane label="查询水印" name="first">
<div class="queryParam">
<div class="queryParam waterParams">
<div class="channelBox">
<span class="title">通道</span>
<el-select
v-model="channelId"
placeholder="请选择"
class="mr20"
@change="waterChange"
>
<el-option
v-for="item in accesslist"
@ -352,7 +352,7 @@
</div>
</el-tab-pane>
<el-tab-pane label="设置水印" name="second">
<div class="queryParam">
<div class="queryParam waterParams">
<div class="channelBox">
<span class="title">通道</span>
<el-select
@ -400,6 +400,166 @@
</el-tabs>
</div>
</el-tab-pane>
<el-tab-pane label="OSD参数" name="11">
<div class="tabsBox">
<el-tabs v-model="tabsActive" type="card" @tab-click="osdhandleClick">
<el-tab-pane label="查询实际参数" name="first">
<div class="queryParam osdParam">
<div class="channelBox">
<span class="title">通道</span>
<el-select
v-model="channelId"
placeholder="请选择"
class="mr20"
>
<el-option
v-for="item in accesslist"
:key="item.channelid"
:label="
item.alias !== null && item.alias !== ''
? item.alias
: item.channelname
"
:value="item.channelid"
>
{{
item.alias !== null && item.alias !== ""
? item.alias
: item.channelname
}}
</el-option>
</el-select>
</div>
<el-form
:model="osdParams"
label-position="right"
label-width="124px"
>
<el-form-item label="时间标识" prop="showTime">
<el-select
v-model="osdParams.showTime"
class="mr20"
:disabled="true"
>
<el-option
v-for="item in timelist"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="文本标识" prop="showText">
<el-select
v-model="osdParams.showText"
class="mr20"
:disabled="true"
>
<el-option
v-for="item in timelist"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="文本内容" prop="textContent">
<el-input
type="textarea"
:rows="3"
v-model="osdParams.textContent"
:disabled="true"
>
</el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="osdSearch"
:loading="osdLoading"
>查询</el-button
>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="设置参数" name="second">
<div class="queryParam osdParam">
<div class="channelBox">
<span class="title">通道</span>
<el-select
v-model="channelId"
placeholder="请选择"
class="mr20"
>
<el-option
v-for="item in accesslist"
:key="item.channelid"
:label="
item.alias !== null && item.alias !== ''
? item.alias
: item.channelname
"
:value="item.channelid"
>
{{
item.alias !== null && item.alias !== ""
? item.alias
: item.channelname
}}
</el-option>
</el-select>
</div>
<el-form
:model="osdParams"
label-position="right"
label-width="124px"
:rules="osdRules"
ref="osdFormref"
>
<el-form-item label="时间标识" prop="showTime">
<el-select v-model="osdParams.showTime" class="mr20">
<el-option
v-for="item in timelist"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="文本标识" prop="showText">
<el-select v-model="osdParams.showText" class="mr20">
<el-option
v-for="item in timelist"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="文本内容" prop="textContent">
<el-input
type="textarea"
:rows="3"
placeholder="请输入内容"
v-model="osdParams.textContent"
>
</el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="osdSet"
:loading="osdSetLoading"
>设置</el-button
>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-tab-pane>
<el-tab-pane label="装置运行状态报" name="8">
<div class="runform">
<el-form :model="runStatusForm" :inline="true" label-width="150px">
@ -541,7 +701,6 @@ export default {
}
}
}
if (value == "") {
return callback(new Error("请输入iP地址"));
} else if (!isCorrect) {
@ -605,6 +764,37 @@ export default {
idSetLoading: false,
//
waterForm: {},
//osd
osdParams: {
textContent: "",
},
textlist: [
{
name: "显示",
id: 1,
},
{
name: "不显示",
id: 0,
},
],
timelist: [
{
name: "显示",
id: 1,
},
{
name: "不显示",
id: 0,
},
],
osdLoading: false,
osdSetLoading: false,
osdRules: {
showText: [
{ required: true, message: "请选择文本标识", trigger: "change" },
],
},
accesslist: [], //
channelId: 1,
waterLoading: false,
@ -666,23 +856,37 @@ export default {
//
samphandleClick() {
this.samplingForm = {};
clearInterval(this.timer);
this.i = 0;
this.timer = null;
clearInterval(this.timer);
},
//
uphandleClick() {
this.upperComputer = {};
clearInterval(this.timer);
this.i = 0;
this.timer = null;
clearInterval(this.timer);
},
//id
idhandleClick() {
this.idParameter = {};
clearInterval(this.timer);
this.i = 0;
this.timer = null;
},
//osd
osdhandleClick(tab) {
console.log(tab);
if (tab.label == "设置参数") {
this.osdParams = {};
this.$set(this.osdParams, "showTime", this.timelist[0].id);
} else {
this.osdParams = {};
}
clearInterval(this.timer);
this.i = 0;
this.timer = null;
},
//
// -act=sampling [0xA4 ] --flag=[Request Set Flag, default is set=1, 0: request] --rf=[Request Flag] --reqtype=[Request Type] --maintime=[Main Time] --samplecount=[Sample Count] --samplingfreq=[Sample Frequency] --heartbeat=[Heartbeat Time]
@ -698,10 +902,10 @@ export default {
name: "flag",
value: 0,
},
// {
// name: "rf",
// value: 15,
// },
{
name: "rf",
value: 255,
},
// {
// name: "reqtype",
// value: "0xA4",
@ -748,10 +952,10 @@ export default {
name: "flag",
value: 1,
},
// {
// name: "rf",
// value: 15,
// },
{
name: "rf",
value: 255,
},
// {
// name: "reqtype",
// value: "0xA4",
@ -885,7 +1089,10 @@ export default {
name: "flag",
value: 0,
},
{
name: "rf",
value: 255,
},
{
name: "newcmdid",
value: "",
@ -924,6 +1131,10 @@ export default {
name: "flag",
value: 1,
},
{
name: "rf",
value: 255,
},
{
name: "newcmdid",
value: this.idParameter.newCmdId,
@ -1025,13 +1236,16 @@ export default {
});
}
},
waterhandleClick() {
waterChange() {
console.log("点击了切换");
this.waterForm = {};
},
waterhandleClick() {
//this.waterForm = {};
this.channelId = 1;
clearInterval(this.timer);
this.i = 0;
this.timer = null;
clearInterval(this.timer);
},
clearform() {
console.log("清除其他数据");
@ -1039,6 +1253,96 @@ export default {
this.waterLoading = false;
this.waterSetLoading = false;
},
//osd
osdSearch() {
if (this.rowData.isonline || this.rowData.onlinestatus === 1) {
this.osdLoading = true;
let params = [
{
name: "act",
value: "osd",
},
{
name: "flag",
value: 0,
},
{
name: "channel",
value: this.channelId,
},
{
name: "showTime",
value: "",
},
{
name: "showText",
value: "",
},
{
name: "text",
value: "",
},
];
this.setTermFn(params);
} else {
this.$message({
duration: 1500,
showClose: true,
message: "装置下线,发送指令失败",
type: "error",
});
}
},
osdSet() {
if (this.rowData.isonline || this.rowData.onlinestatus === 1) {
this.$refs.osdFormref.validate((valid) => {
if (valid) {
this.osdSetLoading = true;
console.log("我是文本");
console.log("我是文本", this.osdParams.textContent);
let params = [
{
name: "act",
value: "osd",
},
{
name: "flag",
value: 1,
},
{
name: "channel",
value: this.channelId,
},
{
name: "showTime",
value: this.osdParams.showTime,
},
{
name: "showText",
value: this.osdParams.showText,
},
{
name: "text",
value: this.osdParams.textContent,
},
];
this.setTermFn(params);
} else {
console.log("error submit!!");
return false;
}
});
} else {
this.$message({
duration: 1500,
showClose: true,
message: "装置下线,发送指令失败",
type: "error",
});
}
},
//
//--act=runningstatus [0xEA] --cmdid=[CMD_ID]
runstatusSearch() {
@ -1100,6 +1404,8 @@ export default {
this.statusLoading = false;
this.waterLoading = false;
this.waterSetLoading = false;
this.osdLoading = false;
this.osdSetLoading = false;
console.log("终止轮询");
// && res.data.result == 255
console.log(JSON.parse(res.data.data));
@ -1109,6 +1415,11 @@ export default {
//cmdid
this.idParameter = JSON.parse(res.data.data);
this.waterForm = JSON.parse(res.data.data);
this.osdParams = JSON.parse(res.data.data);
if (this.osdParams.textContent == "null ") {
console.log("我是空");
this.osdParams.textContent = "";
}
console.log(this.tabName);
if (this.tabName == "上位机信息") {
let hexArray = this.upperComputer.ip
@ -1151,6 +1462,8 @@ export default {
this.statusLoading = false;
this.waterLoading = false;
this.waterSetLoading = false;
this.osdLoading = false;
this.osdSetLoading = false;
}
})
.catch((err) => {});
@ -1174,44 +1487,93 @@ export default {
})
.catch((err) => {});
},
//
//
handleDeviceReset() {
console.log(this.rowData);
this.$confirm("此操作将复位装置, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
if (this.rowData.isonline || this.rowData.onlinestatus === 1) {
this.statusLoading = true;
let params = [
{
name: "act",
value: "reset",
},
{
name: "mode",
value: 0,
},
];
this.resetTermFn(params);
} else {
this.$message({
duration: 1500,
showClose: true,
message: "装置下线,发送指令失败",
type: "error",
});
}
},
resetTermFn(dataParams) {
console.log("点击了统一的接口", "runningstatus");
setTermCamera({
termId: this.rowData.id,
list: dataParams,
})
.then(() => {
resetTerminalApi({ cmId: this.rowData.cmdId || this.rowData.cmdid })
.then((res) => {
if (res.code == 200) {
this.$message({
duration: 1500,
showClose: true,
message: "装置已复位",
type: "success",
});
} else {
this.$message({
duration: 1500,
showClose: true,
message: res.msg,
type: "error",
});
}
})
.catch((err) => {});
.then((res) => {
if (res.code == 200) {
this.$message({
duration: 1500,
showClose: true,
message: "装置已复位",
type: "success",
});
} else {
this.$message({
duration: 1500,
showClose: true,
message: res.msg,
type: "error",
});
}
})
.catch(() => {
// this.$message({
// duration: 1500,
// showClose: true,
// type: "info",
// message: "",
// });
});
.catch((err) => {});
},
//
// handleDeviceReset() {
// console.log(this.rowData);
// this.$confirm(", ?", "", {
// confirmButtonText: "",
// cancelButtonText: "",
// type: "warning",
// })
// .then(() => {
// resetTerminalApi({ cmId: this.rowData.cmdId || this.rowData.cmdid })
// .then((res) => {
// if (res.code == 200) {
// this.$message({
// duration: 1500,
// showClose: true,
// message: "",
// type: "success",
// });
// } else {
// this.$message({
// duration: 1500,
// showClose: true,
// message: res.msg,
// type: "error",
// });
// }
// })
// .catch((err) => {});
// })
// .catch(() => {
// // this.$message({
// // duration: 1500,
// // showClose: true,
// // type: "info",
// // message: "",
// // });
// });
// },
display(val) {
this.isShow = true;
this.rowData = val;
@ -1230,11 +1592,13 @@ export default {
this.idParameter = {};
this.gpsForm = {};
this.waterForm = {};
this.osdParams = {};
this.channelId = 1;
this.i = 0;
clearInterval(this.timer);
this.timer = null;
this.osdLoading = false;
this.osdSetLoading = false;
this.sampLoading = false;
this.sampSetLoading = false;
this.upperLoading = false;
@ -1325,6 +1689,27 @@ export default {
text-align: right;
}
}
.waterParams {
width: 600px;
.el-input {
width: 400px;
}
}
.osdParam {
.channelBox {
.title {
width: 38px;
display: inline-block;
padding: 0 12px 0 0;
}
}
.el-textarea .el-textarea__inner {
font-family: none;
}
.el-textarea.is-disabled .el-textarea__inner {
color: #666;
}
}
}
}
</style>

@ -129,7 +129,7 @@ export default {
this.channelId = obj.id;
this.photoId = obj.photoId;
this.restCanvas();
this.getcanvansPic(this.pictureData, this.channelId);
//this.getcanvansPic(this.pictureData, this.channelId);
// console.log(this.picsrc);
},
//线
@ -150,7 +150,7 @@ export default {
this.channelId = val.list[0].id;
this.picvalue = val.list[0].name; //
this.termId = val.id; //id
this.getcanvansPic(val, this.channelId);
//this.getcanvansPic(val, this.channelId);
},
hide() {
this.isShow = false;

@ -206,14 +206,9 @@
{{ scope.row.status == 1 ? "运行中" : "已删除" }}
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="340"
v-if="roleUser != 2"
>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-dropdown
<!-- <el-dropdown
class="dropgps"
trigger="click"
@command="
@ -235,7 +230,7 @@
>
<el-dropdown-item command="GPS">GPS位置</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown> -->
<el-button
@click.native.stop="handleParameterSet(scope.row)"
type="text"
@ -246,11 +241,11 @@
type="text"
>修改</el-button
>
<el-button
<!-- <el-button
type="text"
@click.native.stop="handlepicture(scope.row)"
>图片标记</el-button
>
> -->
<el-button
type="text"
class="deleteText"
@ -261,13 +256,13 @@
<el-button
type="text"
class="deleteText"
@click.native.stop="handleDelete(scope.row)"
@click.native.stop="handleOpen(scope.row)"
v-if="scope.row.status == 0"
>打开</el-button
>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="180" v-else>
<!-- <el-table-column fixed="right" label="操作" width="180" v-else>
<template slot-scope="scope">
<el-button
@click.native.stop="handleRevisePhoto(scope.row)"
@ -286,7 +281,7 @@
>删除</el-button
>
</template>
</el-table-column>
</el-table-column> -->
</el-table>
<div class="pageNation">
<el-pagination
@ -595,10 +590,13 @@ export default {
})
.then(() => {
//
deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
console.log(res);
this.terminalList(); //
});
deleteTerminalJoggle({ list: this.deleteArr, type: 0 }).then(
(res) => {
console.log(res);
this.deleteArr = [];
this.terminalList(); //
}
);
this.$message({
duration: 1500,
type: "success",
@ -615,6 +613,43 @@ export default {
// });
});
},
//
handleOpen(data) {
console.log(data);
this.deleteArr.push({
termid: data.id,
});
console.log(this.deleteArr);
this.$confirm("确定要打开该装置?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "success",
})
.then(() => {
//
deleteTerminalJoggle({ list: this.deleteArr, type: 1 }).then(
(res) => {
console.log(res);
this.deleteArr = [];
this.terminalList(); //
}
);
this.$message({
duration: 1500,
type: "success",
message: "打开成功!",
showClose: true,
});
})
.catch(() => {
// this.$message({
// duration: 1500,
// type: "info",
// message: "",
// showClose: true,
// });
});
},
//
handleCurrentChange(val) {
this.page = val;

@ -1,563 +0,0 @@
<template>
<div class="picRotation">
<div class="rotationBox">
<div class="picHead">
<div class="pageNation">
<el-pagination
@current-change="handleCurrentChange"
:current-page="page"
:page-size="pageSize"
layout=" prev, pager, next, jumper,total"
:total="total"
>
</el-pagination>
</div>
<div class="buttonGroup">
<span class="info">
<b> {{ isRuning ? remainingTime : "已暂停" }} </b>
</span>
<el-button type="primary" @click="toggleCountdown">{{
isRuning ? "暂停轮巡" : "开始轮巡"
}}</el-button>
<el-button type="primary" @click="setbtn"></el-button>
</div>
</div>
<div class="imageCenter" v-loading="loading" v-cloak>
<el-row
v-for="i in rowNum"
:key="'row-' + i"
:style="{ height: 100 / rowNum + '%' }"
>
<el-col
:span="24 / colNum"
v-for="(item, index) in picList"
v-if="index < colNum * i && index >= colNum * (i - 1)"
:key="'col-' + index"
>
<div class="imgList" @click="handleShowHistory(item)">
<div
v-if="item.path !== null && item.path.indexOf('videos') == -1"
class="bigpic"
>
<img :src="item.path + '!1366x768'" @error="setDefaultImage" />
</div>
<div
class="bigpic"
v-else-if="
item.path !== null && item.path.indexOf('videos') !== -1
"
>
<video
width="100%"
height="100%"
:src="item.path"
controls="controls"
></video>
</div>
<div class="bigpic" v-else>
<img src="../../assets/img/nopic.jpg" />
</div>
<div class="picInfo">
<p>
{{ item.linename }}-{{ item.towername }}-{{
item.alias !== null && item.alias !== ""
? item.alias
: item.channnelname
}}
</p>
<p class="timeinfo" v-if="item.photoTime !== null">
{{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
</p>
<p class="timeinfo" v-else></p>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<el-dialog
title="设置"
:visible.sync="setdialog"
width="480px"
:close-on-click-modal="false"
class="setPicShow"
>
<el-form label-position="left">
<el-form-item label="轮巡速度">
<el-select v-model="selSpeed" placeholder="请选择">
<el-option
v-for="item in speedOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="画面布局" class="layoutBox">
<!-- <el-select v-model="selLayout" placeholder="s请选择">
<el-option
v-for="item in layoutOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> -->
<div class="selectGroup">
<div class="rowbox">
<el-radio-group v-model="rowradio" class="radio1">
<el-radio-button label="1"></el-radio-button>
<el-radio-button label="2"></el-radio-button>
<el-radio-button label="3"></el-radio-button>
<el-radio-button label="4"></el-radio-button>
<!-- <el-radio-button label="5"></el-radio-button>
<el-radio-button label="6"></el-radio-button> -->
</el-radio-group>
<span class="labelinfo"></span>
</div>
<div class="colbox">
<el-radio-group v-model="colradio" class="radio2">
<el-radio-button label="1"></el-radio-button>
<el-radio-button label="2"></el-radio-button>
<el-radio-button label="3"></el-radio-button>
<el-radio-button label="4"></el-radio-button>
<!-- <el-radio-button label="5"></el-radio-button>
<el-radio-button label="6"></el-radio-button> -->
</el-radio-group>
<span class="labelinfo"></span>
</div>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="setdialog = false"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
</div>
</el-dialog>
<morePicPreveiw ref="morePicPreveiw_ref"></morePicPreveiw>
<!-- <el-dialog
title="历史图片"
:visible.sync="historyPicdialog"
width="1366px"
:close-on-click-modal="false"
class="showDialogHistoryPic"
>
<div class="title">
{{ picInfoData.linename }}-{{ picInfoData.towername }}-{{
picInfoData.alias !== null && picInfoData.alias !== ""
? picInfoData.alias
: picInfoData.channnelname
}} {{ $moment(picInfoData.photoTime).format("YYYY-MM-DD ") }}
</div>
<carouselChart
ref="carouselpic"
:terminalPhoto="terminalPhoto"
v-if="terminalPhoto.length > 0"
v-loading="historyPicLoading"
></carouselChart>
</el-dialog> -->
</div>
</template>
<script>
import { getPictureList, getTerminalPhotoListJoggle } from "@/utils/api/index";
// import carouselChart from "../realTimeMonitor/components/carouselChart";
import morePicPreveiw from "../realTimeMonitor/components/morePicPreveiw";
import defaultImage from "../../assets/img/nodatapic2.jpg";
export default {
components: {
morePicPreveiw,
},
data() {
return {
OptionssalseImg: {
inline: false,
button: true,
navbar: false,
title: false,
toolbar: false,
tooltip: false,
zoomable: true,
url: "src",
},
value: "选项1",
page: 1, //
pageSize: 4, //
totalPage: 0, //
total: 0, //
picList: [], //
remainingTime: 0, //
isRuning: false,
timer: null,
loading: false,
setdialog: false, //
speedOptions: [
{
value: 5,
label: "5秒",
},
{
value: 11,
label: "11秒",
},
{
value: 12,
label: "12秒",
},
{
value: 13,
label: "13秒",
},
{
value: 14,
label: "14秒",
},
{
value: 15,
label: "15秒",
},
], //
selSpeed: 5,
//
rowNum: "",
colNum: "",
rowradio: "4",
colradio: "4",
selLayout: 1,
options: [
{
value: "选项1",
label: "顺序",
},
{
value: "选项2",
label: "倒序",
},
],
//
picInfoData: {}, //
historyPicdialog: false,
historyPicLoading: false,
terminalPhoto: [], //
nopicPath: require("@/assets/img/nopic.jpg"),
};
},
methods: {
setDefaultImage(e) {
e.target.src = defaultImage;
},
//
handleShowHistory(item) {
console.log(item);
this.$refs.morePicPreveiw_ref.display(item);
// this.picInfoData = item;
// console.log(this.picInfoData);
// this.historyPicdialog = true;
// //this.getTerminalPhotoList(item.cmdid);
// this.getTerminalPhotoList(item.channelid, item.photoTime, item.termid);
},
//
getTerminalPhotoList(channelid, date, termId) {
this.terminalPhoto = [];
this.historyPicLoading = true;
getTerminalPhotoListJoggle({
channelid: channelid,
time: date,
terminalid: termId,
})
.then((res) => {
console.log(res);
this.historyPicLoading = false;
if (res.data.list.length == 0) {
this.terminalPhoto = [
{
path: this.nopicPath,
termId: termId,
mediatype: 0,
},
];
} else {
this.terminalPhoto = res.data.list;
}
})
.catch((err) => {
console.log(err); //
});
},
setbtn() {
this.isRuning = false;
this.pauseCountdown();
this.setdialog = true;
this.selSpeed = parseInt(localStorage.getItem("totalTime"))
? parseInt(localStorage.getItem("totalTime"))
: 15;
this.rowNum = parseInt(localStorage.getItem("row"))
? parseInt(localStorage.getItem("row"))
: 4;
this.colNum = parseInt(localStorage.getItem("col"))
? parseInt(localStorage.getItem("col"))
: 4;
this.rowradio = parseInt(localStorage.getItem("row"))
? parseInt(localStorage.getItem("row"))
: 4;
this.colradio = parseInt(localStorage.getItem("col"))
? parseInt(localStorage.getItem("col"))
: 4;
},
submitForm() {
localStorage.setItem("totalTime", this.selSpeed);
localStorage.setItem("row", this.rowradio);
localStorage.setItem("col", this.colradio);
this.rowNum = parseInt(localStorage.getItem("row"))
? parseInt(localStorage.getItem("row"))
: 4;
this.colNum = parseInt(localStorage.getItem("col"))
? parseInt(localStorage.getItem("col"))
: 4;
this.pageSize = this.rowradio * this.colradio;
this.setdialog = false;
this.$message.success("设置成功");
this.getPicData();
},
//
handleCurrentChange(val) {
this.isRuning = false;
this.pauseCountdown();
this.page = val;
this.getPicData();
},
//
getPicData() {
this.loading = true;
this.picList = [];
getPictureList({
pageindex: this.page,
pagesize: this.rowNum * this.colNum,
})
.then((res) => {
this.picList = res.data.list;
this.totalPage = res.data.totalpage;
this.total = res.data.total;
this.loading = false;
})
.catch((err) => {
console.log(err);
});
},
//
startCountdown() {
this.timer = setInterval(() => {
if (this.remainingTime <= 0) {
this.clearTimer();
this.page++;
if (this.page > this.totalPage) {
this.page = 0;
this.startCountdown();
} else {
this.remainingTime = parseInt(localStorage.getItem("totalTime"))
? parseInt(localStorage.getItem("totalTime"))
: 15;
this.getPicData();
this.startCountdown();
}
} else {
this.remainingTime--;
}
}, 1000);
},
clearTimer() {
//
clearInterval(this.timer);
this.timer = null;
},
pauseCountdown() {
//
clearInterval(this.timer);
this.timer = null;
},
//isRuning
toggleCountdown() {
if (this.isRuning) {
this.pauseCountdown();
} else {
this.startCountdown();
this.getPicData();
}
this.isRuning = !this.isRuning;
},
},
computed: {},
mounted() {
this.remainingTime = parseInt(localStorage.getItem("totalTime"))
? parseInt(localStorage.getItem("totalTime"))
: 15;
this.rowradio = this.rowNum = parseInt(localStorage.getItem("row"))
? parseInt(localStorage.getItem("row"))
: 4;
this.colradio = this.colNum = parseInt(localStorage.getItem("col"))
? parseInt(localStorage.getItem("col"))
: 4;
this.pageSize = this.rowradio * this.colradio;
//this.toggleCountdown();
this.getPicData();
},
created() {},
beforeDestroy() {
// console.log("");
clearInterval(this.timer);
this.timer = null;
},
};
</script>
<style lang="less">
.picRotation {
width: calc(100% - 24px);
height: calc(100% - 24px);
padding: 12px 12px;
background: #ffffff;
.rotationBox {
border: 1px solid #dddddd;
height: calc(100% - 22px);
max-height: calc(100% - 22px);
padding: 12px;
border-radius: 4px;
}
.picHead {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 0px 8px 0px;
.buttonGroup {
display: flex;
.el-select {
margin-left: 10px;
width: 100px;
}
.info {
width: 80px;
text-align: center;
margin-right: 16px;
line-height: 32px;
b {
font-size: 24px;
font-weight: normal;
color: #67c23a;
vertical-align: middle;
}
}
}
}
.imageCenter {
// display: flex;
// flex-wrap: wrap;
height: calc(100% - 52px);
.el-col {
height: 100%;
padding-right: 0.1%;
padding-left: 0.1%;
padding-top: 0.1%;
padding-bottom: 0.1%;
}
// justify-content: space-between;
.imgList {
border: 1px solid #eee;
width: 100%;
position: relative;
//background-color: #00eaff;
height: 100%;
.bigpic {
width: 100%;
height: 100%;
background-size: 100% 100%;
}
img {
width: 100%;
height: 100%;
cursor: pointer;
}
.picInfo {
position: absolute;
background: #169e8ca1;
color: #fff;
height: auto;
font-size: 12px;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
p {
margin-top: 4px;
}
.timeinfo {
margin-bottom: 4px;
}
}
}
}
.setPicShow {
.el-select {
width: 222px;
}
.layoutBox {
display: flex;
align-items: center;
}
.selectGroup {
display: flex;
flex-direction: column;
.el-radio-button--small .el-radio-button__inner {
padding: 9px 24px;
}
.rowbox {
margin-bottom: 8px;
.labelinfo {
margin-left: 8px;
}
}
.colbox {
.labelinfo {
margin-left: 8px;
}
}
}
}
.showDialogHistoryPic {
display: flex;
align-items: center;
justify-content: center;
.el-dialog {
width: 70% !important;
height: 90%;
transform: none;
margin: auto;
left: auto;
top: auto;
}
.el-dialog__body {
height: calc(100% - 70px);
.title {
height: 32px;
padding-left: 12px;
line-height: 32px;
color: #fff;
font-size: 14px;
background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
text-align: center;
}
.thumb-example {
//height: 100%;
}
}
}
}
[v-cloak] {
display: none;
}
</style>

@ -1,917 +0,0 @@
<template>
<div class="thumb-example">
<div class="picTop">
<!-- 判断是否是图片并且不为空 -->
<div
class="bigimg"
v-if="
bigPicPath.indexOf('nopic') == -1 &&
bigPicPath.indexOf('videos') == -1
"
:style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
>
<el-button
class="downBtn"
@click.stop="
downLoadPic(
bigPicPath.substring(0, bigPicPath.length - 9),
bigPicPath.substring(0, bigPicPath.length - 9)
)
"
>下载图片</el-button
>
<!-- @click="handleBigPicbox(bigPicPath)" v-viewer="OptionssalseImg"-->
<div
class="nosee"
:style="'backgroundImage:url(' + bigPicPath + ')'"
></div>
<div class="bigimgView" @click="handleBigPicbox(bigPicPath)">
<img
ref="picJpg"
class="animImg"
:src="bigPicPath"
@error="setDefaultImage"
/>
</div>
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
<!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1366x768'" /> -->
</div>
<div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
<video
width="100%"
height="100%"
:src="bigPicPath.substring(0, bigPicPath.length - 9)"
controls="controls"
:poster="videopath"
autoplay
></video>
</div>
<div class="bigimg nopic" v-if="bigPicPath.indexOf('nopic') !== -1">
<img
class="animImg"
:src="bigPicPath.substring(0, bigPicPath.length - 9)"
/>
</div>
<div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
<i class="el-icon-arrow-left"></i>
</div>
<div
class="arrow rightArrow"
v-if="this.bigNum < this.terminalPhoto.length - 1"
@click="rightClick"
>
<i class="el-icon-arrow-right"></i>
</div>
</div>
<div class="picBottom">
<ul class="smallPicBox">
<li
v-for="(item, index) in fiveList"
@click="handleBigpic(item, index)"
:class="activeSmall === index ? 'borderActive' : ''"
>
<div
class="smallhavePic"
v-if="
item.path.indexOf('nopic') == -1 &&
item.path.indexOf('videos') == -1
"
>
<img :src="item.path + '!260x160'" @error="setDefaultImage" />
<p class="timeInfo">
<el-tooltip
class="item"
effect="dark"
content="拍照时间"
placement="top-start"
>
<span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
</el-tooltip>
(
<el-tooltip
class="item"
effect="dark"
content="图片上传时间"
placement="top-start"
>
<span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
</el-tooltip>
)
<span
>--{{
item.alias !== null && item.alias !== ""
? item.alias
: item.channelName
}}</span
>
</p>
</div>
<div
class="smallnoPic"
v-else-if="item.path.indexOf('videos') !== -1"
>
<img
src="../../../assets/img/loading.jpg"
style="object-fit: cover"
v-if="item.thumb == null"
/>
<img :src="item.thumb" v-else />
<p class="videoicon"><i class="el-icon-video-play"></i></p>
<p class="timeInfo">
<el-tooltip
class="item"
effect="dark"
content="拍照时间"
placement="top-start"
>
<span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
</el-tooltip>
(
<el-tooltip
class="item"
effect="dark"
content="图片上传时间"
placement="top-start"
>
<span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
</el-tooltip>
)
<span
>--{{
item.alias !== null && item.alias !== ""
? item.alias
: item.channelName
}}</span
>
</p>
</div>
<div class="smallnoPic" v-else>
<img :src="item.path" />
</div>
</li>
</ul>
<div
class="arrow leftArrow"
v-if="this.page != 1"
@click="smallLeftClick"
>
<i class="el-icon-arrow-left"></i>
</div>
<div
class="arrow rightArrow"
v-if="this.page < this.total"
@click="smallRightClick"
>
<i class="el-icon-arrow-right"></i>
</div>
</div>
<!-- 点击出现大图 -->
<div
v-if="showBigpic"
class="showPic"
v-loading="canvasloading"
@click="closePic($event)"
>
<div
class="picboxI"
@mousewheel.prevent="rollImg"
:style="{
transform: 'scale(' + zoomD + ')',
}"
@mousedown="move"
>
<img
@load="imgOnload"
id="bigimg"
ref="bigimgref"
class="maskPic img"
:src="bigImgPath"
/>
<!-- <canvas id="bigCanvas" class="myCanvas" ref="myCanvasbig"></canvas> -->
</div>
<div class="viewClose" @click="closePic($event)">
<i class="el-icon-close"></i>
</div>
</div>
</div>
</template>
<script>
import { getCoordinate, updateMarkEnableStatus } from "@/utils/api/index";
import defaultImage from "../../../assets/img/nodatapic2.jpg";
export default {
components: {},
props: {
terminalPhoto: {
type: Array,
default: () => [],
},
},
data() {
return {
OptionssalseImg: {
inline: false,
button: true,
navbar: false,
title: false,
toolbar: false,
tooltip: false,
zoomable: true,
url: "src",
},
isshowArrow: true, //
mediaType: "", //
bigPicPath: "", //
videopath: "",
smallPicPath: "", //
bigNum: 0, //
fiveList: [], //list
activeSmall: 0, //,
page: 1, //
pagesize: 5, //
total: 0, //
localPoints: [], //
canvas: null,
ctx: null,
imgpic: null,
color: "",
num: "",
showBigpic: false,
flagline: true,
markEnable: "",
zoomD: 1,
canvasloading: false,
bigImgPath: "",
};
},
mounted() {
console.log(this.terminalPhoto);
this.mediaType = this.terminalPhoto[0].mediaType;
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
// this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
console.log(this.fiveList);
//points
getCoordinate({
channelId:
this.fiveList[0].channelId == null ? 1 : this.fiveList[0].channelId,
needPic: "0",
termId: this.fiveList[0].termId,
})
.then((res) => {
console.log(res);
this.localPoints = res.data.list;
this.color = res.data.color;
this.num = res.data.boderWidth;
this.markEnable = res.data.markEnable;
if (this.markEnable === 1) {
this.drawline();
}
})
.catch((err) => {});
},
watch: {
terminalPhoto: function (newVal, oldVal) {
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
},
},
created() {},
methods: {
setDefaultImage(e) {
e.target.src = defaultImage;
this.bigPicPath = defaultImage;
},
downLoadPic(url, name) {
const image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.src = url;
image.onload = () => {
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
this.download(url, name);
// URL
URL.revokeObjectURL(url);
});
};
},
download(href, name) {
const eleLink = document.createElement("a");
eleLink.download = name;
eleLink.href = href;
eleLink.click();
eleLink.remove();
},
// showbigpicPath(data) {
// console.log(data);
// if (data.includes("!")) {
// this.bigPicPath = data.substring(0, data.length - 9);
// } else {
// this.bigPicPath = data;
// this.bgbigPath = data;
// }
// console.log(this.bigPicPath);
// },
// handleBigPicbox() {
// this.showBigpic = true;
// },
//demo
move(e) {
console.log(e);
e.preventDefault();
//
var personBox = document.querySelector(".picboxI");
var img = document.querySelector(".img");
var x = e.pageX - img.offsetLeft;
var y = e.pageY - img.offsetTop;
//
personBox.addEventListener("mousemove", move);
console.log(personBox.addEventListener("mousemove", move));
console.log(personBox.style);
function move(e) {
console.log(personBox.style.left);
personBox.style.left = e.pageX - x + "px";
personBox.style.top = e.pageY - y + "px";
}
//
img.addEventListener("mouseup", function () {
personBox.removeEventListener("mousemove", move);
});
//
personBox.addEventListener("mouseout", function () {
personBox.removeEventListener("mousemove", move);
});
},
//
rollImg(e) {
let direction = e.deltaY > 0 ? "down" : "up";
if (direction === "up") {
//
this.large();
} else {
//
this.Small();
}
},
//
large() {
this.$nextTick(() => {
if (this.zoomD < 6) {
this.zoomD += 0.1;
}
document.querySelector(
".picboxI"
).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
});
},
//
Small() {
this.$nextTick(() => {
if (this.zoomD > 0.3) {
this.zoomD -= 0.1;
}
document.querySelector(
".picboxI"
).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
});
},
imgOnload() {
console.log("加载完成");
this.canvasloading = false;
},
//
handleBigPicbox(val) {
console.log(val);
//this.canvasloading = true;
this.showBigpic = true;
this.bigImgPath = val.substring(0, val.length - 9);
},
closePic(e) {
console.log(e);
var btn = this.$refs.bigimgref;
console.log(btn);
if (btn) {
if (!btn.contains(event.target)) {
//.app-download
this.zoomD = 1;
this.showBigpic = false;
}
}
//
// this.showBigpic = false;
},
openline() {
this.flagline = true;
console.log("11111111111111111111111111", this.flagline);
updateMarkEnableStatus({
status: 1,
}).then((res) => {
console.log(res);
});
this.drawline();
},
drawline() {
this.canvas = this.$refs.myCanvas;
this.imgpic = this.$refs.picJpg;
console.log(this.canvas);
console.log(this.imgpic);
this.canvas.width = this.imgpic.offsetWidth; //
this.canvas.height = this.imgpic.offsetHeight; //
this.ctx = this.canvas.getContext("2d");
console.log(this.localPoints);
if (this.flagline == true) {
this.localPoints = this.localPoints;
} else {
this.localPoints = [];
}
console.log(this.ctx);
this.ctx.beginPath();
//线
this.ctx.strokeStyle = this.color;
// 线
this.ctx.lineWidth = this.num;
for (var i = 0; i < this.localPoints.length; i++) {
this.ctx.moveTo(
this.localPoints[i].x1 * this.imgpic.width,
this.localPoints[i].y1 * this.imgpic.height
);
this.ctx.lineTo(
this.localPoints[i].x2 * this.imgpic.width,
this.localPoints[i].y2 * this.imgpic.height
);
}
this.ctx.closePath();
this.ctx.stroke();
},
//线
handelClear() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.flagline = false;
updateMarkEnableStatus({
status: 0,
}).then((res) => {
console.log(res);
});
},
getphotoList() {
this.fiveList = this.terminalPhoto.slice(
(this.page - 1) * this.pagesize,
this.page * this.pagesize
);
this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
this.videopath = this.fiveList[this.activeSmall].thumb;
},
//
leftClick() {
this.bigNum--; //
this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
this.activeSmall--;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
console.log(this.page);
if (this.activeSmall < 0) {
this.activeSmall = 4;
this.smallLeftClick();
}
console.log(this.terminalPhoto[this.bigNum]);
getCoordinate({
channelId: this.terminalPhoto[this.bigNum].channelId,
needPic: "1",
termId: this.terminalPhoto[this.bigNum].termId,
})
.then((res) => {
console.log(res);
this.localPoints = res.data.list;
if (this.markEnable === 1) {
this.drawline();
}
})
.catch((err) => {});
},
//
rightClick() {
this.bigNum++; //
this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
this.activeSmall++;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
if (this.activeSmall > 4) {
this.activeSmall = 0;
console.log(this.activeSmall);
this.smallRightClick();
}
getCoordinate({
channelId: this.terminalPhoto[this.bigNum].channelId,
needPic: "1",
termId: this.terminalPhoto[this.bigNum].termId,
})
.then((res) => {
console.log(res);
this.localPoints = res.data.list;
if (this.markEnable === 1) {
this.drawline();
}
})
.catch((err) => {});
},
//
handleBigpic(row, index) {
console.log(row);
console.log();
this.activeSmall = index;
this.mediaType = row.mediaType;
this.bigPicPath = row.path + "!1366x768";
// this.bgbigPath = row.path + "!1366x768";
getCoordinate({
channelId: row.channelId,
needPic: "1",
termId: row.termId,
})
.then((res) => {
console.log(res);
this.localPoints = res.data.list;
if (this.markEnable === 1) {
this.drawline();
}
// this.drawline();
})
.catch((err) => {});
},
//
smallLeftClick() {
this.activeSmall = 0;
console.log("点击了左侧");
this.page--;
if (this.page < 1) {
this.isshowArrow = false;
} else {
this.getphotoList();
}
console.log(this.page);
console.log(this.fiveList);
//points
getCoordinate({
channelId: this.fiveList[0].channelId,
needPic: "0",
termId: this.fiveList[0].termId,
})
.then((res) => {
console.log(res);
this.localPoints = res.data.list;
if (this.markEnable === 1) {
this.drawline();
}
// this.drawline();
})
.catch((err) => {});
},
//
smallRightClick() {
this.activeSmall = 0;
console.log("点击了右侧");
console.log(this.page);
this.page++;
this.getphotoList();
console.log(this.fiveList);
//points
getCoordinate({
channelId: this.fiveList[0].channelId,
needPic: "0",
termId: this.fiveList[0].termId,
})
.then((res) => {
console.log(res);
this.localPoints = res.data.list;
if (this.markEnable === 1) {
this.drawline();
}
// this.drawline();
})
.catch((err) => {});
},
},
};
</script>
<style lang="less">
.thumb-example {
width: 100%;
display: flex;
flex-direction: column;
height: calc(100% - 32px);
box-sizing: border-box;
.picTop {
width: 100%;
height: 80%;
overflow: hidden;
margin-bottom: 4px;
position: relative;
.downBtn {
position: absolute;
background: rgba(0, 0, 0, 0.5);
border: none;
right: 8px;
bottom: 16px;
color: #fff;
z-index: 5;
&:hover {
background: rgba(0, 0, 0, 0.9);
color: #169e8c;
}
}
&:hover {
.arrow {
opacity: 1;
transition: all 0.5s ease-in;
}
}
.bigimg {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-size: 100% 100%;
.nosee {
width: 100%;
height: 100%;
position: absolute;
background-size: 100% 100%;
z-index: 2;
}
.bigimgView {
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
opacity: 0;
.animImg {
opacity: 0;
}
}
.mark {
position: absolute;
bottom: 12px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
left: 16px;
font-size: 14px;
line-height: 24px;
//opacity: 0;
transition: bottom 2s ease 0s;
}
.myCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 2;
}
}
img {
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
}
.arrow {
opacity: 0;
position: absolute;
cursor: pointer;
color: #fff;
font-size: 16px;
border-radius: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
line-height: 60px;
width: 40px;
height: 40px;
z-index: 4;
&:hover {
color: #169e8c;
}
}
.leftArrow {
left: 16px;
}
.rightArrow {
right: 16px;
}
}
.picBottom {
width: 100%;
height: 20%;
position: relative;
.smallPicBox {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
li {
width: 20%;
border: 3px solid transparent;
// overflow: hidden;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
}
.smallhavePic {
width: 100%;
height: 100%;
}
.smallnoPic {
width: 100%;
height: 100%;
}
}
.timeInfo {
position: absolute;
bottom: 0px;
width: 100%;
background: #f0f0f0;
padding: 6px 0px;
font-size: 12px;
text-align: center;
color: #333;
}
.videoicon {
position: absolute;
top: 73%;
left: 10%;
transform: translate(-50%, -50%);
i {
font-size: 28px;
color: #fff;
}
}
.borderActive {
.timeInfo {
//background: @color-primary;
background: linear-gradient(180deg, #00eaff 10%, #169e8c 100%);
color: #fff;
}
}
// .borderActive {
// border: 3px solid @color-primary;
// &::after {
// content: "";
// position: absolute;
// width: 0;
// height: 0;
// left: 50%;
// top: -16px;
// margin-left: -8px;
// border-bottom: 13px solid @color-primary;
// border-left: 8px solid transparent;
// border-right: 8px solid transparent;
// }
// }
}
.arrow {
position: absolute;
cursor: pointer;
color: #fff;
font-size: 12px;
border-radius: 30px;
position: absolute;
top: 45%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
line-height: 60px;
width: 28px;
height: 28px;
}
.leftArrow {
left: 16px;
}
.rightArrow {
right: 16px;
}
}
//
.showPic {
position: fixed;
background-color: rgba(0, 0, 0, 50%);
bottom: 0;
left: 0;
overflow: hidden;
right: 0;
top: 0;
z-index: 9999;
width: 100%;
height: 100%;
display: flex;
cursor: pointer;
.picboxI {
position: relative;
width: 85%;
height: 85%;
margin: auto;
animation-name: scaleDraw;
/*关键帧名称*/
animation-timing-function: ease;
/*动画的速度曲线*/
animation-iteration-count: 1;
/*动画播放的次数*/
animation-duration: 0.65s;
display: flex;
align-items: center;
justify-content: center;
img {
max-width: 100%;
max-height: 100%;
margin: auto;
position: absolute;
cursor: grab;
}
.myCanvas {
position: absolute;
// top: 0;
// left: 0;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
cursor: pointer;
pointer-events: none;
}
}
.viewClose {
-webkit-app-region: no-drag;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
cursor: pointer;
height: 80px;
overflow: hidden;
position: absolute;
right: -40px;
top: -40px;
transition: background-color 0.15s;
width: 80px;
.el-icon-close {
bottom: 16px;
left: 16px;
position: absolute;
color: #fff;
font-size: 18px;
}
}
}
}
@keyframes scaleDraw {
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0% {
transform: scale(0);
/*开始为原始大小*/
}
100% {
transform: scale(1);
}
}
// https://v1.github.surmon.me/vue-awesome-swiper/
</style>

@ -1,6 +1,8 @@
<template>
<div class="thumb-example">
<div class="radioBox" v-if="roleUser != 2">{{ radioPx }}</div>
<div class="radioBox" v-if="roleUser != 2">
{{ radioPx }}
</div>
<div class="topPic">
<div
class="bigPic"
@ -14,9 +16,10 @@
v-loading="picLoading"
>
<el-image
:src="currentPicPath + '!1366x768'"
:src="currentPicPath + ''"
:preview-src-list="srcList"
@load="loadImage"
@error="setDefaultImage"
ref="picJpg"
>
<template slot="error">
@ -35,7 +38,7 @@
autoplay
></video>
</div>
<div class="arrow leftArrow" @click="leftClick" v-if="currentPage > 0">
<div class="arrow leftArrow" @click="leftClick" v-if="activeSmall > 0">
<i class="el-icon-arrow-left"></i>
</div>
<el-button
@ -46,30 +49,28 @@
<div
class="arrow rightArrow"
@click="rightClick"
v-if="currentPage < terminalPhoto.length - 1"
v-if="activeSmall !== terminalPhoto.length - 1"
>
<i class="el-icon-arrow-right"></i>
</div>
</div>
<div class="bottomPic" v-on:wheel="handleScroll">
<el-carousel
:loop="false"
:autoplay="false"
ref="carousel"
indicator-position="none"
@change="changeItem"
>
<el-carousel-item
<!-- -->
<div class="bottomPic">
<div class="scrollPicContain">
<div
class="el-car-item"
v-for="(list, index) in terminalPhoto"
:key="index"
ref="scrollBox"
v-on:wheel="handleScroll"
:class="terminalPhoto.length < photoNum ? 'littlePic' : ''"
>
<div
class="smallPic"
v-for="(item, index2) in list"
v-for="(item, index2) in terminalPhoto"
:key="index2"
@click="changeBigPic(item, index2)"
:class="activeSmall === index2 ? 'borderActive' : ''"
:class="`${activeSmall === index2 ? 'borderActive ' : ''}${
photoNum === 10 ? 'moreSmallPic' : ''
}`"
>
<div
class="picBox"
@ -79,7 +80,7 @@
"
>
<!-- <el-image v-lazy="item.path + '!260x160'"></el-image> -->
<img v-lazy="item.path + '!260x160'" />
<img v-lazy="item.path + ''" />
<p class="timeInfo">
<el-tooltip
@ -112,7 +113,7 @@
</div>
<div class="picBox" v-else-if="item.mediaType == 1">
<!-- <el-image :src="item.thumb + '!260x160'"></el-image> -->
<img v-lazy="item.thumb + '!260x160'" />
<img v-lazy="item.thumb + ''" />
<p class="timeInfo">
<i class="el-icon-video-camera"></i>
<el-tooltip
@ -148,8 +149,14 @@
<img v-lazy="item.path" />
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="arrow leftArrow" @click="smallLeftClick">
<i class="el-icon-arrow-left"></i>
</div>
<div class="arrow rightArrow">
<i class="el-icon-arrow-right" @click="smallRightClick"></i>
</div>
</div>
</div>
</div>
</template>
@ -190,8 +197,8 @@ export default {
};
},
mounted() {
console.log(this.terminalPhoto);
this.changeBigPic(this.terminalPhoto[0][0], 0);
////console.log(this.terminalPhoto);
this.changeBigPic(this.terminalPhoto[0], 0);
},
watch: {
terminalPhoto: {
@ -204,8 +211,9 @@ export default {
},
created() {
this.roleUser = localStorage.getItem("role");
console.log(this.roleUser);
////console.log(this.roleUser);
},
methods: {
//
downLoadPic(url, name) {
@ -241,7 +249,7 @@ export default {
termId: data.termId,
})
.then((res) => {
console.log(res);
//console.log(res);
this.localPoints = res.data.list;
this.color = res.data.color;
this.borderwidth = res.data.boderWidth;
@ -255,12 +263,12 @@ export default {
//线
openLine() {
this.flagLine = true;
console.log("我是绘制线缆");
//1
updateMarkEnableStatus({
status: 1,
}).then((res) => {
console.log(res);
//console.log(res);
});
this.drawline();
},
@ -268,38 +276,35 @@ export default {
closeLine() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.flagLine = false;
console.log("关闭线缆");
//0
updateMarkEnableStatus({
status: 0,
}).then((res) => {
console.log(res);
//console.log(res);
});
},
//线
drawline() {
this.canvas = this.$refs.myCanvas;
this.imgpic = this.$refs.picJpg;
console.log(this.canvas);
console.log(this.imgpic);
this.canvas.width = this.imgpic.imageWidth; //
this.canvas.height = this.imgpic.imageHeight; //
this.ctx = this.canvas.getContext("2d");
console.log(this.localPoints);
if (this.flagLine == true) {
this.localPoints = this.localPoints;
console.log(this.localPoints);
} else {
this.localPoints = [];
}
console.log(this.ctx);
this.ctx.beginPath();
//线
this.ctx.strokeStyle = this.color;
// 线
this.ctx.lineWidth = this.borderwidth;
console.log(this.ctx.lineWidth, this.ctx.strokeStyle);
console.log(this.localPoints);
if (this.localPoints == null) {
return;
} else {
@ -326,37 +331,23 @@ export default {
},
//
leftClick() {
console.log("我点击了左侧按钮", this.activeSmall, this.currentPage);
console.log(this.photoNum);
this.activeSmall--;
if (this.activeSmall < 0) {
this.currentPage--;
this.$refs.carousel.setActiveItem(this.currentPage);
this.activeSmall =
this.terminalPhoto[this.terminalPhoto.length - 1].length - 1;
}
this.changeBigPic(
this.terminalPhoto[this.currentPage][this.activeSmall],
this.activeSmall
);
this.$refs.scrollBox.scrollLeft -=
this.$refs.scrollBox.offsetWidth / this.photoNum;
this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
},
rightClick() {
console.log(this.activeSmall);
console.log(this.terminalPhoto.length);
console.log(this.photoNum);
this.activeSmall++;
if (this.activeSmall > this.photoNum - 1) {
this.currentPage++;
this.$refs.carousel.setActiveItem(this.currentPage);
this.activeSmall = 0;
}
this.changeBigPic(
this.terminalPhoto[this.currentPage][this.activeSmall],
this.activeSmall
);
this.$refs.scrollBox.scrollLeft +=
this.$refs.scrollBox.offsetWidth / this.photoNum;
this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
},
//
changeBigPic(data, i) {
console.log(data, i);
console.log("鼠标222222222", this.currentPage, this.activeSmall);
// //console.log(data, i);
// //console.log("222222222", this.currentPage, this.activeSmall);
this.srcList = [];
this.localPoints = [];
this.activeSmall = i;
@ -368,78 +359,36 @@ export default {
} else {
this.radioPx = "";
}
this.getPointList(data);
//this.getPointList(data);
},
loadImage() {
console.log("loading");
this.picLoading = false;
},
changeItem(e) {
// console.log(this.currentPage);
// this.currentPage = e;
// if (e === 0) {
// this.activeSmall = 0;
// //this.changeBigPic(this.terminalPhoto[0][0], 0);
// } else {
// this.activeSmall = 0;
// // this.changeBigPic(this.terminalPhoto[this.currentPage][0], 0);
// }
//this.active = e; // tab
setDefaultImage(e) {
e.target.src = defaultImage;
this.picLoading = false;
},
//
handleScroll(e) {
let direction = e.deltaY > 0 ? "down" : "up"; //deltaY
console.log(e.deltaY, direction);
if (direction == "down") {
if (
this.currentPage == this.terminalPhoto.length - 1 &&
this.activeSmall ==
this.terminalPhoto[this.terminalPhoto.length - 1].length - 1
) {
this.$message({
message: "已经是最后一张图",
type: "success",
showClose: true,
duration: 500,
});
return;
} else {
// this.rightClick();
this.activeSmall++;
if (this.activeSmall > this.photoNum - 1) {
this.currentPage++;
this.$refs.carousel.setActiveItem(this.currentPage);
this.activeSmall = 0;
}
console.log(this.activeSmall);
}
this.$refs.scrollBox.scrollLeft +=
(this.$refs.scrollBox.offsetWidth / this.photoNum) * 3;
}
if (direction == "up") {
if (this.currentPage == 0 && this.activeSmall == 0) {
this.$message({
showClose: true,
duration: 500,
message: "已经是最新一张图",
type: "success",
});
return;
} else {
// this.leftClick();
console.log(this.activeSmall);
this.activeSmall--;
console.log(this.activeSmall);
if (this.activeSmall < 0) {
this.currentPage--;
console.log("我是页数", this.currentPage);
this.$refs.carousel.setActiveItem(this.currentPage);
this.activeSmall = this.terminalPhoto[this.currentPage].length - 1;
console.log(this.terminalPhoto);
console.log(this.terminalPhoto[this.currentPage].length);
console.log("我是选中的值", this.activeSmall);
}
console.log(this.activeSmall);
}
this.$refs.scrollBox.scrollLeft -=
(this.$refs.scrollBox.offsetWidth / this.photoNum) * 3;
}
},
//
smallLeftClick() {
this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth;
},
smallRightClick() {
this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth;
},
},
};
</script>
@ -543,41 +492,68 @@ export default {
width: 100%;
height: 20%;
margin-bottom: 6px;
.el-carousel {
.scrollPicContain {
// width: 1380px;
display: flex;
height: 100%;
.el-carousel__container {
height: 100% !important;
}
.el-carousel__arrow {
position: relative;
.arrow {
opacity: 0;
position: absolute;
cursor: pointer;
font-size: 14px;
border-radius: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #4cdbc8;
font-weight: bold;
background-color: rgba(31, 45, 61, 0.8);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
line-height: 60px;
width: 30px;
height: 30px;
z-index: 4;
&:hover {
background-color: rgba(31, 45, 61, 1);
}
}
.leftArrow {
left: 16px;
}
.rightArrow {
right: 16px;
}
&:hover {
.arrow {
opacity: 1;
transition: all 0.5s ease-in;
}
}
}
.el-car-item {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
overflow-x: hidden;
overflow-y: hidden;
scroll-behavior: smooth;
.smallPic {
width: 20%;
width: 19.2%;
border: 3px solid transparent;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
white-space: nowrap;
position: relative;
cursor: pointer;
.picBox {
width: 100%;
height: 100%;
}
// .el-image {
// width: 100%;
// height: 100%;
// }
img {
width: 100%;
height: 100%;
@ -600,6 +576,9 @@ export default {
}
}
}
.moreSmallPic {
width: 9.8%;
}
.borderActive {
.timeInfo {
color: #fff;
@ -607,6 +586,9 @@ export default {
}
}
}
.littlePic {
justify-content: center;
}
}
}
</style>

@ -0,0 +1,612 @@
<template>
<div class="thumb-example">
<div class="radioBox" v-if="roleUser != 2">{{ radioPx }}</div>
<div class="topPic">
<div
class="bigPic"
v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
>
<el-image :src="currentPicPath"></el-image>
</div>
<div
class="bigPic"
v-else-if="currentPicPath && mediaType == 0"
v-loading="picLoading"
>
<el-image
:src="currentPicPath + ''"
:preview-src-list="srcList"
@load="loadImage"
ref="picJpg"
>
<template slot="error">
<img src="../../../assets/img/nodatapic2.jpg" />
</template>
</el-image>
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
<!-- <img :src="currentPicPath + '!1366x768'" @load="loadImage" /> -->
</div>
<div class="bigPic" v-else-if="currentPicPath && mediaType == 1">
<video
width="100%"
height="100%"
:src="currentPicPath"
controls="controls"
autoplay
></video>
</div>
<div class="arrow leftArrow" @click="leftClick" v-if="currentPage > 0">
<i class="el-icon-arrow-left"></i>
</div>
<el-button
class="downBtn"
@click.stop="downLoadPic(currentPicPath, currentPicPath)"
>下载图片</el-button
>
<div
class="arrow rightArrow"
@click="rightClick"
v-if="currentPage < terminalPhoto.length - 1"
>
<i class="el-icon-arrow-right"></i>
</div>
</div>
<div class="bottomPic" v-on:wheel="handleScroll">
<el-carousel
:loop="false"
:autoplay="false"
ref="carousel"
indicator-position="none"
@change="changeItem"
>
<el-carousel-item
class="el-car-item"
v-for="(list, index) in terminalPhoto"
:key="index"
>
<div
class="smallPic"
v-for="(item, index2) in list"
:key="index2"
@click="changeBigPic(item, index2)"
:class="activeSmall === index2 ? 'borderActive' : ''"
>
<div
class="picBox"
v-if="
item.path.indexOf('nopic') == -1 &&
item.path.indexOf('videos') == -1
"
>
<!-- <el-image v-lazy="item.path + '!260x160'"></el-image> -->
<img v-lazy="item.path + '!260x160'" />
<p class="timeInfo">
<el-tooltip
class="item"
effect="dark"
content="拍照时间"
placement="top-start"
>
<span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
</el-tooltip>
(
<el-tooltip
class="item"
effect="dark"
content="图片上传时间"
placement="top-start"
>
<span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
</el-tooltip>
)
<span
>--{{
item.alias !== null && item.alias !== ""
? item.alias
: item.channelName
}}</span
>
</p>
</div>
<div class="picBox" v-else-if="item.mediaType == 1">
<!-- <el-image :src="item.thumb + '!260x160'"></el-image> -->
<img v-lazy="item.thumb + '!260x160'" />
<p class="timeInfo">
<i class="el-icon-video-camera"></i>
<el-tooltip
class="item"
effect="dark"
content="拍照时间"
placement="top-start"
>
<span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
</el-tooltip>
(
<el-tooltip
class="item"
effect="dark"
content="图片上传时间"
placement="top-start"
>
<span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
</el-tooltip>
)
<span
>--{{
item.alias !== null && item.alias !== ""
? item.alias
: item.channelName
}}</span
>
</p>
</div>
<div class="picBox" v-else>
<!-- <el-image :src="item.path"></el-image> -->
<img v-lazy="item.path" />
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<script>
import defaultImage from "../../../assets/img/nodatapic2.jpg";
import { getCoordinate, updateMarkEnableStatus } from "@/utils/api/index";
export default {
components: {},
props: {
terminalPhoto: {
type: Array,
default: () => [],
},
photoNum: {
type: Number,
default: () => [],
},
},
data() {
return {
picLoading: true,
currentPicPath: "", //
mediaType: "", //
activeSmall: 0, //,
currentPage: 0,
srcList: [],
radioPx: "",
roleUser: "",
localPoints: [], //线
flagLine: true, //线
canvas: null,
ctx: null,
imgpic: null,
color: "", //线
borderwidth: "", //线
markEnable: "", //
};
},
mounted() {
console.log(this.terminalPhoto);
this.changeBigPic(this.terminalPhoto[0][0], 0);
},
watch: {
terminalPhoto: {
handler(newVal, oldVal) {
this.terminalPhoto = newVal;
},
immediate: true,
deep: true, //deep false
},
},
created() {
this.roleUser = localStorage.getItem("role");
console.log(this.roleUser);
},
methods: {
//
downLoadPic(url, name) {
const image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.src = url;
image.onload = () => {
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
this.download(url, name);
// URL
URL.revokeObjectURL(url);
});
};
},
download(href, name) {
const eleLink = document.createElement("a");
eleLink.download = name;
eleLink.href = href;
eleLink.click();
eleLink.remove();
},
//线
getPointList(data) {
getCoordinate({
channelId: data.channelId,
needPic: "1",
termId: data.termId,
})
.then((res) => {
console.log(res);
this.localPoints = res.data.list;
this.color = res.data.color;
this.borderwidth = res.data.boderWidth;
this.markEnable = res.data.markEnable;
if (this.markEnable === 1) {
this.drawline();
}
})
.catch((err) => {});
},
//线
openLine() {
this.flagLine = true;
console.log("我是绘制线缆");
//1
updateMarkEnableStatus({
status: 1,
}).then((res) => {
console.log(res);
});
this.drawline();
},
//线
closeLine() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.flagLine = false;
console.log("关闭线缆");
//0
updateMarkEnableStatus({
status: 0,
}).then((res) => {
console.log(res);
});
},
//线
drawline() {
this.canvas = this.$refs.myCanvas;
this.imgpic = this.$refs.picJpg;
console.log(this.canvas);
console.log(this.imgpic);
this.canvas.width = this.imgpic.imageWidth; //
this.canvas.height = this.imgpic.imageHeight; //
this.ctx = this.canvas.getContext("2d");
console.log(this.localPoints);
if (this.flagLine == true) {
this.localPoints = this.localPoints;
console.log(this.localPoints);
} else {
this.localPoints = [];
}
console.log(this.ctx);
this.ctx.beginPath();
//线
this.ctx.strokeStyle = this.color;
// 线
this.ctx.lineWidth = this.borderwidth;
console.log(this.ctx.lineWidth, this.ctx.strokeStyle);
console.log(this.localPoints);
if (this.localPoints == null) {
return;
} else {
for (var i = 0; i < this.localPoints.length; i++) {
this.ctx.moveTo(
this.localPoints[i].x1 * this.imgpic.imageWidth,
this.localPoints[i].y1 * this.imgpic.imageHeight
);
this.ctx.lineTo(
this.localPoints[i].x2 * this.imgpic.imageWidth,
this.localPoints[i].y2 * this.imgpic.imageHeight
);
}
this.ctx.closePath();
this.ctx.stroke();
}
// this.ctx.beginPath(); //
// this.ctx.moveTo(100, 100); //
// this.ctx.lineTo(300, 100); //
// this.ctx.lineTo(300, 300); //
// this.ctx.closePath(); //
// this.ctx.stroke(); //
},
//
leftClick() {
console.log("我点击了左侧按钮", this.activeSmall, this.currentPage);
this.activeSmall--;
if (this.activeSmall < 0) {
this.currentPage--;
this.$refs.carousel.setActiveItem(this.currentPage);
this.activeSmall =
this.terminalPhoto[this.terminalPhoto.length - 1].length - 1;
}
this.changeBigPic(
this.terminalPhoto[this.currentPage][this.activeSmall],
this.activeSmall
);
},
rightClick() {
console.log(this.activeSmall);
console.log(this.terminalPhoto.length);
this.activeSmall++;
if (this.activeSmall > this.photoNum - 1) {
this.currentPage++;
this.$refs.carousel.setActiveItem(this.currentPage);
this.activeSmall = 0;
}
this.changeBigPic(
this.terminalPhoto[this.currentPage][this.activeSmall],
this.activeSmall
);
},
//
changeBigPic(data, i) {
console.log(data, i);
console.log("鼠标222222222", this.currentPage, this.activeSmall);
this.srcList = [];
this.localPoints = [];
this.activeSmall = i;
this.mediaType = data.mediaType;
this.currentPicPath = data.path;
this.srcList.push(data.path);
if (data.width != undefined) {
this.radioPx = data.width + "x" + data.height;
} else {
this.radioPx = "";
}
// this.getPointList(data);
},
loadImage() {
this.picLoading = false;
},
changeItem(e) {
// console.log(this.currentPage);
// this.currentPage = e;
// if (e === 0) {
// this.activeSmall = 0;
// //this.changeBigPic(this.terminalPhoto[0][0], 0);
// } else {
// this.activeSmall = 0;
// // this.changeBigPic(this.terminalPhoto[this.currentPage][0], 0);
// }
//this.active = e; // tab
},
//
handleScroll(e) {
let direction = e.deltaY > 0 ? "down" : "up"; //deltaY
console.log(e.deltaY, direction);
if (direction == "down") {
if (
this.currentPage == this.terminalPhoto.length - 1 &&
this.activeSmall ==
this.terminalPhoto[this.terminalPhoto.length - 1].length - 1
) {
this.$message({
message: "已经是最后一张图",
type: "success",
showClose: true,
duration: 500,
});
return;
} else {
// this.rightClick();
this.activeSmall++;
if (this.activeSmall > this.photoNum - 1) {
this.currentPage++;
this.$refs.carousel.setActiveItem(this.currentPage);
this.activeSmall = 0;
}
console.log(this.activeSmall);
}
}
if (direction == "up") {
if (this.currentPage == 0 && this.activeSmall == 0) {
this.$message({
showClose: true,
duration: 500,
message: "已经是最新一张图",
type: "success",
});
return;
} else {
// this.leftClick();
console.log(this.activeSmall);
this.activeSmall--;
console.log(this.activeSmall);
if (this.activeSmall < 0) {
this.currentPage--;
console.log("我是页数", this.currentPage);
this.$refs.carousel.setActiveItem(this.currentPage);
this.activeSmall = this.terminalPhoto[this.currentPage].length - 1;
console.log(this.terminalPhoto);
console.log(this.terminalPhoto[this.currentPage].length);
console.log("我是选中的值", this.activeSmall);
}
console.log(this.activeSmall);
}
}
},
},
};
</script>
<style lang="less">
.thumb-example {
width: 100%;
// display: flex;
// flex-direction: column;
height: calc(100% - 32px);
box-sizing: border-box;
.radioBox {
position: absolute;
top: 8px;
right: 24px;
color: #fff;
font-size: 14px;
}
.topPic {
width: 100%;
height: 80%;
margin-bottom: 4px;
position: relative;
.bigPic {
width: 100%;
height: 100%;
.el-image {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
.myCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 3;
pointer-events: none;
}
&:hover {
.arrow {
opacity: 1;
transition: all 0.5s ease-in;
}
.downBtn {
opacity: 1;
transition: all 0.5s ease-in;
}
}
.arrow {
opacity: 0;
position: absolute;
cursor: pointer;
font-size: 16px;
border-radius: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #4cdbc8;
font-weight: bold;
background-color: rgba(31, 45, 61, 0.8);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
line-height: 60px;
width: 40px;
height: 40px;
z-index: 4;
&:hover {
background-color: rgba(31, 45, 61, 1);
}
}
.leftArrow {
left: 16px;
}
.rightArrow {
right: 16px;
}
.downBtn {
position: absolute;
background: rgba(0, 0, 0, 0.5);
border: none;
right: 24px;
bottom: 24px;
color: #fff;
z-index: 5;
opacity: 0;
&:hover {
background: rgba(0, 0, 0, 0.9);
color: #169e8c;
}
}
}
.bottomPic {
width: 100%;
height: 20%;
margin-bottom: 6px;
.el-carousel {
height: 100%;
.el-carousel__container {
height: 100% !important;
}
.el-carousel__arrow {
color: #4cdbc8;
font-weight: bold;
background-color: rgba(31, 45, 61, 0.8);
&:hover {
background-color: rgba(31, 45, 61, 1);
}
}
}
.el-car-item {
display: flex;
justify-content: center;
.smallPic {
width: 20%;
border: 3px solid transparent;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
.picBox {
width: 100%;
height: 100%;
}
// .el-image {
// width: 100%;
// height: 100%;
// }
img {
width: 100%;
height: 100%;
}
.timeInfo {
position: absolute;
bottom: 0px;
width: 100%;
background: #f0f0f0;
padding: 6px 0;
font-size: 12px;
text-align: center;
color: #333;
.el-icon-video-camera {
font-size: 20px;
margin-right: 8px;
align-items: center;
vertical-align: sub;
color: #169e8c;
}
}
}
.borderActive {
.timeInfo {
color: #fff;
background: linear-gradient(180deg, #4cdbc8 10%, #128071);
}
}
}
}
}
</style>

@ -83,23 +83,23 @@ export default {
} else {
this.terminalPhoto = res.data.list;
}
let newDataList = [];
let current = 0;
if (this.terminalPhoto && this.terminalPhoto.length > 0) {
for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
if (i % this.photoNum !== 0 || i === 0) {
if (!newDataList[current]) {
newDataList.push([this.terminalPhoto[i]]);
} else {
newDataList[current].push(this.terminalPhoto[i]);
}
} else {
current++;
newDataList.push([this.terminalPhoto[i]]);
}
}
}
this.terminalPhoto = [...newDataList];
// let newDataList = [];
// let current = 0;
// if (this.terminalPhoto && this.terminalPhoto.length > 0) {
// for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
// if (i % this.photoNum !== 0 || i === 0) {
// if (!newDataList[current]) {
// newDataList.push([this.terminalPhoto[i]]);
// } else {
// newDataList[current].push(this.terminalPhoto[i]);
// }
// } else {
// current++;
// newDataList.push([this.terminalPhoto[i]]);
// }
// }
// }
// this.terminalPhoto = [...newDataList];
})
.catch((err) => {
console.log(err); //

@ -63,8 +63,8 @@
<deviceInfoButton></deviceInfoButton>
<scheduleButton></scheduleButton>
<alarmButton></alarmButton>
<cableButton></cableButton>
<!-- <alarmButton></alarmButton>
<cableButton></cableButton> -->
<gpsButton></gpsButton>
<el-button type="primary" @click="handlehistoryPic">
历史图片</el-button
@ -82,6 +82,42 @@
<el-button type="primary">主动拍照 </el-button> -->
</div>
</div>
<div class="setfocalLength" v-if="areaData.protocol == '65286'">
<h3>焦距调节</h3>
<div class="selectChannel">
<span class="labelname">选择通道</span>
<el-select
v-model="channelarrValue"
placeholder="请选择通道"
ref="multiSelect"
>
<el-option
v-for="item in channelfocalOpyion"
:key="item.channelid"
:label="
item.alias !== null && item.alias !== ''
? item.alias
: item.channelname
"
:value="item.channelid"
>
{{
item.alias !== null && item.alias !== ""
? item.alias
: item.channelname
}}
</el-option>
</el-select>
</div>
<div class="buttonGroup">
<el-button type="primary" icon="el-icon-zoom-in" @click="amplify()"
>放大</el-button
>
<el-button type="primary" icon="el-icon-zoom-out" @click="reduce()"
>缩小</el-button
>
</div>
</div>
<parameterSetDialog ref="parameterSetref"></parameterSetDialog>
</div>
</template>
@ -94,7 +130,11 @@ import alarmButton from "./alarmButton.vue";
import cableButton from "./cableButton.vue";
import gpsButton from "./gpsButton.vue";
import parameterSetDialog from "../../photographicDevice/components/parameterSetDialog.vue";
import { getChannelByTermidJoggle } from "@/utils/api/index";
import {
getChannelByTermidJoggle,
updateTermCamera,
getTermStatus,
} from "@/utils/api/index";
export default {
components: {
takePicButton,
@ -110,6 +150,8 @@ export default {
return {
selectChannelValue: null, //
channelListOption: [], //
channelarrValue: null,
channelfocalOpyion: [], //
dateValue: "", //
pickerOptions: {
disabledDate(date) {
@ -165,7 +207,8 @@ export default {
];
this.channelListOption = this.channelListOption.concat(res.data.list);
console.log(this.channelListOption);
this.channelfocalOpyion = res.data.list; //
this.channelarrValue = this.channelfocalOpyion[0].channelid;
this.selectChannelValue = this.channelListOption[0].channelid; //;
this.$store.commit("channelId", this.selectChannelValue); //vuex
this.$store.commit("channelIdList", res.data.list); //vuex
@ -216,6 +259,53 @@ export default {
console.log(this.areaData);
this.$refs.parameterSetref.display(this.areaData);
},
//
amplify() {
getTermStatus({ termId: this.areaData.id }).then((res) => {
console.log(res);
if (res.data.isonline) {
updateTermCamera({
termId: this.areaData.id,
channelId: this.channelarrValue,
type: 6,
})
.then((res) => {})
.catch();
//this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
} else {
this.$message({
duration: 1500,
showClose: true,
message: "装置下线,发送指令失败",
type: "error",
});
}
});
console.log(this.channelarrValue, this.areaData.id);
},
//
reduce() {
getTermStatus({ termId: this.areaData.id }).then((res) => {
console.log(res);
if (res.data.isonline) {
updateTermCamera({
termId: this.areaData.id,
channelId: this.channelarrValue,
type: 7,
})
.then((res) => {})
.catch();
//this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
} else {
this.$message({
duration: 1500,
showClose: true,
message: "装置下线,发送指令失败",
type: "error",
});
}
});
},
},
};
</script>
@ -269,5 +359,38 @@ export default {
}
}
}
.setfocalLength {
margin-bottom: 16px;
position: relative;
h3 {
font-size: 14px;
font-weight: normal;
color: #303133;
margin-bottom: 8px;
}
.selectChannel {
display: flex;
align-items: center;
margin-bottom: 12px;
.labelname {
font-size: 14px;
margin-right: 4px;
width: 80px;
color: #666;
}
}
.buttonGroup {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.el-button {
margin-bottom: 8px;
width: 104px;
}
.el-button + .el-button {
margin-left: 0px;
}
}
}
}
</style>

@ -15,14 +15,14 @@
<div class="imgcloum" @click="handleTowerPic(item)">
<!-- 首先判断是否是图片mediatype=0,并且path不为空 展示图片 -->
<img
:src="item.path + '!1366x768'"
:src="item.path + ''"
v-if="item.mediatype == 0 && item.path !== null"
@error="setDefaultImage"
/>
<!-- 判断是否是视频mediatype=1,并且path不为空 展示图片 -->
<img
v-else-if="item.mediatype == 1 && item.thumb !== null"
:src="item.thumb + '!1366x768'"
:src="item.thumb + ''"
/>
<!-- 判断是否是视频mediatype=bull,并且path为空 展示暂无图片 -->
<img

@ -232,6 +232,7 @@ import {
setTermCamera,
getTermCameraRequest,
getTermStatus,
setScheduleRulel,
} from "@/utils/api/index";
export default {
props: {
@ -624,6 +625,7 @@ export default {
//xympadmn --act=schedule [0xCA] --flag=[Request Set Flag, default is set=1, 0: request] --channel=[Channel No] --group=[Group] --hour1=[Hour 1] --min1=[Minute 1] --preset1=[Preset 1]
submitForm() {
console.log(this.currentTimeRule);
let timeArrList = [];
if (
this.areaData.protocol == "65285" &&
this.currentTimeRule.listTime.length > 1
@ -721,6 +723,23 @@ export default {
);
}
console.log(params);
for (var k = 0; k < timeArr.length; k++) {
//console.log(moment(dayArr[k]).hour());
timeArrList.push({
hour: this.$moment(timeArr[k]).hour(),
minute: this.$moment(timeArr[k]).minute(),
preset: 255,
});
}
console.log(timeArrList);
var parmsobj = {
termid: this.areaData.id,
channelid: this.timeChannel,
offset: this.setNum,
list: timeArrList,
};
console.log(parmsobj);
//this.setTimeRuleJava(parmsobj); //使java
this.setTermFnRule(params);
} else {
this.sureloading = false;
@ -733,6 +752,33 @@ export default {
}
});
},
//使
setTimeRuleJava(parmsobj) {
console.log(parmsobj);
setScheduleRulel({
scheduleid: this.currentTimeRule.id,
list: [parmsobj],
})
.then((res) => {
console.log(res);
this.requestid = res.data.list[0].requestid;
console.log(this.requestid);
clearInterval(this.timer);
this.deviceTimer = window.setInterval(() => {
this.getinfoRules();
this.deviceNum++;
console.log(this.deviceNum, this.deviceNum * 1000);
}, 1000 * this.deviceNum);
})
.catch((err) => {
// this.$message({
// duration: 1500,
// showClose: true,
// message: "",
// type: "error",
// });
});
},
//
setTermFnRule(dataParams) {
setTermCamera({

@ -36,11 +36,13 @@
:data="lineTreeData"
:props="defaultProps"
node-key="id"
default-expand-all
:default-expanded-keys="defaultExpandedKeys"
highlight-current
:expand-on-click-node="false"
:filter-node-method="filterNode"
:current-node-key="currentNodekey"
@node-expand="onHandleExpand"
@node-collapse="onHandleCollapse"
@node-click="handleNodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
@ -51,7 +53,10 @@
<span v-else-if="node.level === 2">
<span class="iconfont icon-dianlihangye" style="margin-right: 6px">
</span>
<span>{{ node.label }} </span>
<span
>{{ node.label }}
<span class="num">({{ data.list.length }}) </span></span
>
</span>
<span v-else>
<span
@ -77,7 +82,7 @@
</div>
</template>
<script>
import { getdyTreeListJoggle } from "@/utils/api/index";
import { getdyTreeListJoggle, getzzdyTreeList } from "@/utils/api/index";
export default {
data() {
return {
@ -86,6 +91,8 @@ export default {
totalNum: "", //
zzradio: -1, //线
lineTreeData: [],
defaultExpandedKeys: [], //
collapsedKeys: [], // key
defaultProps: {
//
children: "list",
@ -93,6 +100,7 @@ export default {
},
currentData: {}, //
currentNodekey: "", //,
role: "",
};
},
components: {},
@ -109,6 +117,9 @@ export default {
JSON.parse(localStorage.getItem("radio")) !== null
? JSON.parse(localStorage.getItem("radio"))
: -1; //radio
this.role = localStorage.getItem("role");
console.log("用户管理");
console.log(this.role);
this.getRadio(); //线线
this.getLineTreeList(); //
},
@ -126,20 +137,65 @@ export default {
if (this.filterText !== "") {
this.$refs.tree.filter(this.filterText);
} else {
getdyTreeListJoggle({ type: this.zzradio })
.then((res) => {
console.log(res);
this.lineTreeData = res.data.list;
this.onlineNum = res.data.onlineNum;
this.totalNum = res.data.totalNum;
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentData.id); //
if (this.role == 4) {
getzzdyTreeList({ type: this.zzradio })
.then((res) => {
console.log(res);
this.lineTreeData = res.data.list;
this.onlineNum = res.data.onlineNum;
this.totalNum = res.data.totalNum;
if (this.zzradio == 0) {
console.log("装置为离线");
this.$nextTick(() => {
console.log(this.lineTreeData);
this.currentData = this.lineTreeData[0];
console.log(this.currentData);
this.handleNodeClick(this.currentData);
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentData.id); //
this.scrollView();
});
});
} else {
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentData.id); //
this.scrollView();
});
}
})
.catch((err) => {
console.log(err); //
});
})
.catch((err) => {
console.log(err); //
});
} else {
getdyTreeListJoggle({ type: this.zzradio })
.then((res) => {
console.log(res);
this.lineTreeData = res.data.list;
this.onlineNum = res.data.onlineNum;
this.totalNum = res.data.totalNum;
if (this.zzradio == 0) {
console.log("装置为离线");
this.$nextTick(() => {
console.log(this.lineTreeData);
this.currentData = this.lineTreeData[0];
console.log(this.currentData);
this.handleNodeClick(this.currentData);
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentData.id); //
this.scrollView();
});
});
} else {
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentData.id); //
this.scrollView();
});
}
})
.catch((err) => {
console.log(err); //
});
}
}
},
//
@ -159,44 +215,99 @@ export default {
//
getLineTreeList() {
console.log(this.zzradio);
getdyTreeListJoggle({ type: this.zzradio })
.then((res) => {
console.log(res);
this.lineTreeData = res.data.list;
console.log(this.lineTreeData);
this.onlineNum = res.data.onlineNum;
this.totalNum = res.data.totalNum;
this.currentData = JSON.parse(localStorage.getItem("currentData"));
if (this.lineTreeData[0].list[0].list.length > 0) {
}
if (
this.currentData !== null &&
Object.keys(this.currentData).length !== 0
) {
console.log("aaaa");
this.currentNodekey = this.currentData.id;
this.handleNodeClick(this.currentData);
} else {
console.log("aaaa");
this.currentData = this.lineTreeData[0]; //
this.currentNodekey = this.lineTreeData[0].id; //
this.handleNodeClick(this.currentData);
}
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey); //
this.scrollView();
if (this.role == 4) {
getzzdyTreeList({ type: this.zzradio })
.then((res) => {
this.lineTreeData = res.data.list;
this.onlineNum = res.data.onlineNum;
this.totalNum = res.data.totalNum;
this.currentData = JSON.parse(localStorage.getItem("currentData"));
this.lineTreeData.forEach((node) => {
if (node.list) {
node.list.forEach((child) => {
this.defaultExpandedKeys.push(child.id);
});
} else {
this.defaultExpandedKeys.push(node.id);
}
});
this.defaultExpandedKeys =
JSON.parse(localStorage.getItem("defaultKey")) !== null
? JSON.parse(localStorage.getItem("defaultKey"))
: this.defaultExpandedKeys; //defaultKey ;
console.log(this.defaultExpandedKeys);
if (this.lineTreeData[0].list[0].list.length > 0) {
}
if (
this.currentData !== null &&
Object.keys(this.currentData).length !== 0
) {
this.currentNodekey = this.currentData.id;
this.handleNodeClick(this.currentData);
} else {
this.currentData = this.lineTreeData[0]; //
this.currentNodekey = this.lineTreeData[0].id; //
this.handleNodeClick(this.currentData);
}
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey); //
this.scrollView();
});
})
.catch((err) => {
console.log(err); //
});
})
.catch((err) => {
console.log(err); //
});
} else {
getdyTreeListJoggle({ type: this.zzradio })
.then((res) => {
this.lineTreeData = res.data.list;
this.onlineNum = res.data.onlineNum;
this.totalNum = res.data.totalNum;
this.currentData = JSON.parse(localStorage.getItem("currentData"));
this.lineTreeData.forEach((node) => {
if (node.list) {
node.list.forEach((child) => {
this.defaultExpandedKeys.push(child.id);
});
} else {
this.defaultExpandedKeys.push(node.id);
}
});
this.defaultExpandedKeys =
JSON.parse(localStorage.getItem("defaultKey")) !== null
? JSON.parse(localStorage.getItem("defaultKey"))
: this.defaultExpandedKeys; //defaultKey ;
console.log(this.defaultExpandedKeys);
if (this.lineTreeData[0].list[0].list.length > 0) {
}
if (
this.currentData !== null &&
Object.keys(this.currentData).length !== 0
) {
this.currentNodekey = this.currentData.id;
this.handleNodeClick(this.currentData);
} else {
this.currentData = this.lineTreeData[0]; //
this.currentNodekey = this.lineTreeData[0].id; //
this.handleNodeClick(this.currentData);
}
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey); //
this.scrollView();
});
})
.catch((err) => {
console.log(err); //
});
}
},
//treenode
handleNodeClick(data) {
console.log(data);
this.currentData = data;
this.scrollView();
// this.scrollView();
this.$store.commit("currentData", this.currentData); //currentDatavuex
this.$store.commit("termId", this.currentData.id); //currentDatavuex
this.$store.commit("protocol", this.currentData.protocol); //currentDatavuex
@ -206,6 +317,28 @@ export default {
//this.$refs.tree.scrollTo(data);
// localStorage.setItem("currentData", JSON.stringify(this.currentData));
},
//
onHandleExpand(data) {
this.defaultExpandedKeys.push(data.id);
console.log(this.defaultExpandedKeys);
localStorage.setItem(
"defaultKey",
JSON.stringify(this.defaultExpandedKeys)
);
},
//
onHandleCollapse(data) {
console.log(this.defaultExpandedKeys);
let index = this.defaultExpandedKeys.findIndex(
(item) => item === data.id
);
if (index !== -1) this.defaultExpandedKeys.splice(index, 1);
console.log(this.defaultExpandedKeys);
localStorage.setItem(
"defaultKey",
JSON.stringify(this.defaultExpandedKeys)
);
},
scrollView() {
if (this.currentData) {
this.$nextTick(() => {
@ -282,6 +415,10 @@ export default {
display: flex;
display: inline-table;
overflow: hidden;
align-items: center;
}
.num {
color: #169e8c;
}
}
}
@ -298,6 +435,10 @@ export default {
span {
display: flex;
//overflow: hidden;
align-items: center;
.num {
color: #fff;
}
.iconfont {
//width: 30px;
display: inline-table;

@ -40,13 +40,23 @@ export default {
},
watch: {
termId: {
handler(newVal, oldVal) {},
handler(newVal, oldVal) {
console.log("我改变了");
clearInterval(this.statusTimer);
this.statusTimer = null;
this.statusNum = 0;
clearInterval(this.picPimer);
this.picPimer = null;
this.picNum = 0;
this.picLoading = false;
},
deep: true,
immediate: true,
},
},
mounted() {
console.log(this.channelIdList);
console.log("我是主动拍照");
},
computed: {
termId() {
@ -111,7 +121,7 @@ export default {
this.statusTimer = window.setInterval(() => {
this.getTakePicStatus(res.data);
this.statusNum++;
}, 3000);
}, 5000);
})
.catch((err) => {});
},
@ -126,6 +136,50 @@ export default {
.then((res) => {
console.log(res);
//res.data 0 1 2
// if (
// res.data.cmaStatus == 0 &&
// res.data.picStatus == false &&
// this.statusNum >= 5
// ) {
// //
// this.clearFn();
// this.$message({
// duration: 1500,
// showClose: true,
// message: "true",
// type: "warning",
// });
// } else if (res.data.cmaStatus == 1) {
// this.clearFn();
// this.$message({
// duration: 1500,
// showClose: true,
// message: "cmaStatus1",
// type: "success",
// });
// clearInterval(this.picPimer);
// this.picPimer = null;
// this.picPimer = window.setInterval(() => {
// this.newPicApi(val);
// this.picNum++;
// }, 8000);
// return;
// } else if (res.data.picStatus == true) {
// this.clearFn();
// this.$message({
// duration: 1500,
// showClose: true,
// message: "",
// type: "success",
// });
// clearInterval(this.picPimer);
// this.picPimer = null;
// this.picPimer = window.setInterval(() => {
// this.newPicApi(val);
// this.picNum++;
// }, 2000);
// return;
// }
if (res.data.cmaStatus != 1 && this.statusNum >= 5) {
this.clearFn();
this.$message({
@ -194,5 +248,16 @@ export default {
this.picLoading = false;
},
},
destroyed() {
console.log("离开了");
clearInterval(this.statusTimer);
this.statusTimer = null;
this.statusNum = 0;
},
beforeRouteLeave(to, from, next) {
//
next();
console.log("7777777777777777777777777");
},
};
</script>

@ -85,11 +85,16 @@ export default {
// deep: true,
// immediate: true,
// },
// termId: {
// handler(newVal, oldVal) {},
// deep: true,
// immediate: true,
// },
termId: {
handler(newVal, oldVal) {
clearInterval(this.statusTimer);
this.statusTimer = null;
this.statusNum = 0;
this.picLoading = false;
},
deep: true,
immediate: true,
},
// channelId: {
// handler(newVal, oldVal) {},
// deep: true,

@ -148,25 +148,28 @@ export default {
} else {
this.terminalPhoto = res.data.list;
}
let newDataList = [];
let current = 0;
if (this.terminalPhoto && this.terminalPhoto.length > 0) {
for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
if (i % this.photoNum !== 0 || i === 0) {
if (!newDataList[current]) {
newDataList.push([this.terminalPhoto[i]]);
} else {
newDataList[current].push(this.terminalPhoto[i]);
}
} else {
current++;
newDataList.push([this.terminalPhoto[i]]);
}
}
}
this.terminalPhoto = [...newDataList];
// let newDataList = [];
// let current = 0;
// if (this.terminalPhoto && this.terminalPhoto.length > 0) {
// for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
// if (i % this.photoNum !== 0 || i === 0) {
// if (!newDataList[current]) {
// newDataList.push([this.terminalPhoto[i]]);
// } else {
// newDataList[current].push(this.terminalPhoto[i]);
// }
// } else {
// current++;
// newDataList.push([this.terminalPhoto[i]]);
// }
// }
// }
// this.terminalPhoto = [...newDataList];
// this.$nextTick(() => {
// this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0);
// });
this.$nextTick(() => {
this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0);
this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0);
});
this.swiperLoading = false;

@ -121,7 +121,7 @@
<div class="bigpic" v-if="item.path.indexOf('videos') == -1">
<el-image
lazy
:src="item.path + '!1366x768'"
:src="item.path + ''"
:preview-src-list="[item.path]"
>
<template slot="error">

@ -1,163 +0,0 @@
<template>
<el-dialog
class="addUserDialog"
:title="title"
:visible.sync="isShow"
:close-on-click-modal="false"
width="470px"
@close="handleclose"
>
<el-form
label-position="left"
ref="formInfo"
label-width="100px"
:rules="title == '新增' ? rules : xgrules"
:model="formdata"
>
<el-form-item label="用户名:" prop="userName">
<el-input
placeholder="请输入用户名"
v-model="formdata.userName"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="角色:" prop="role">
<el-select v-model="formdata.role" placeholder="请选择">
<el-option
v-for="item in roleoptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="密码:" prop="password">
<el-input
placeholder="请输入密码"
v-model="formdata.password"
show-password
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="isShow = false"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
</div>
</el-dialog>
</template>
<script>
import { addUserApi, updateUserApi } from "@/utils/api/index";
export default {
props: {
title: String,
},
data() {
return {
roleUser: "",
isShow: false,
roleoptions: [
{
value: 1,
label: "管理员",
},
{
value: 2,
label: "用户",
},
],
formdata: {},
rules: {
userName: [
{ required: true, message: "请输入用户名", trigger: "blur" },
],
role: [{ required: true, message: "请选择角色", trigger: "blur" }],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
// { min: 6, max: 8, message: "6-8", trigger: "blur" },
],
},
xgrules: {
userName: [
{ required: true, message: "请输入用户名", trigger: "blur" },
],
role: [{ required: true, message: "请选择角色", trigger: "blur" }],
},
};
},
methods: {
//
getdataform(val) {
console.log(val);
if (val == null) {
return (this.formdata = {
role: 2,
});
}
//this.formdata = val;
this.formdata = JSON.parse(JSON.stringify(val));
},
//
submitForm() {
this.$refs.formInfo.validate((valid) => {
if (valid) {
if (this.title == "新增") {
addUserApi(this.formdata)
.then((res) => {
if (res.code == 200) {
this.$message({
duration: 1500,
showClose: true,
message: "添加成功",
type: "success",
});
this.isShow = false;
} else {
this.$message.error(res.msg);
}
})
.catch((err) => {});
} else {
updateUserApi(this.formdata)
.then((res) => {
if (res.code == 200) {
this.$message.success("修改成功");
this.isShow = false;
} else {
this.$message.error(res.msg);
}
})
.catch((err) => {});
}
} else {
console.log("error submit!!");
return false;
}
});
},
display() {
this.isShow = true;
this.roleUser = localStorage.getItem("role");
},
hide() {
this.isShow = false;
},
handleclose() {
this.$parent.deviceList();
},
},
mounted() {},
};
</script>
<style lang="less">
.addUserDialog {
.el-form-item {
.el-input,
.el-select,
.el-input-number {
width: 100%;
}
}
}
</style>

@ -1,210 +0,0 @@
<template>
<div class="globalBox">
<div class="setBox">
<el-card class="box-card globalDrawLine">
<div slot="header" class="clearfix">
<span>线缆开启关闭</span>
</div>
<div>
<el-switch
style="display: block"
v-model="lineValue"
active-text="开启"
inactive-text="关闭"
@change="showLine"
>
</el-switch>
</div>
</el-card>
<el-card class="box-card globalDrawLine">
<div slot="header" class="clearfix">
<span>设置告警通道</span>
</div>
<div>
<el-select v-model="channel" @change="handleChange">
<el-option
v-for="item in tdOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</div>
</el-card>
<el-card class="box-card globalprob">
<div slot="header" class="clearfix">
<span>设置告警可信度</span>
</div>
<div v-for="(item, index) in probList" :key="index" class="probBox">
<label>{{ item.name }}</label>
<el-input-number
:min="0"
:max="110"
controls-position="right"
v-model="item.prob"
placeholder="请输入可信度值"
></el-input-number>
</div>
<el-button class="setbtn" type="primary" @click="setProb"
>设置</el-button
>
</el-card>
</div>
</div>
</template>
<script>
import {
getAlarmTypeList,
updateAlarmTypeList,
getMarkEnableStatus,
updateMarkEnableStatus,
updateAlarmChannel,
} from "@/utils/api/index";
export default {
components: {},
data() {
return {
lineValue: false,
lineNum: 0,
probList: [],
tdOptions: [{ id: -1, name: "全部", alias: null }], //
channel: "",
};
},
created() {
this.getalarmList();
this.getmark();
},
methods: {
//
getmark() {
getMarkEnableStatus()
.then((res) => {
console.log(res);
if (res.data.imgMark === 1) {
this.lineValue = true;
console.log("绘制开启");
} else {
this.lineValue = false;
console.log("绘制关闭");
}
this.channel = res.data.alarmChannel;
console.log(this.channel);
})
.catch((err) => {});
},
//线
showLine(val) {
if (val) {
this.lineNum = 1;
} else {
this.lineNum = 0;
}
updateMarkEnableStatus({
status: this.lineNum,
})
.then((res) => {
console.log(res);
})
.catch((err) => {});
console.log(val, this.lineNum, "开关");
},
//
getalarmList() {
getAlarmTypeList().then((res) => {
console.log(res);
this.probList = res.data.list;
this.tdOptions = [{ id: -1, name: "全部", alias: null }];
this.tdOptions = this.tdOptions.concat(res.data.channellist);
});
},
setProb() {
console.log(this.probList);
updateAlarmTypeList({ list: this.probList })
.then((res) => {
console.log(res);
if (res.code === 200) {
this.$message({
duration: 1500,
showClose: true,
message: "告警可信度设置成功",
type: "success",
});
}
})
.catch((err) => {
console.log(err);
});
},
//
handleChange(val) {
console.log(val);
updateAlarmChannel({ channel: this.channel })
.then((res) => {
console.log(res);
if (res.code === 200) {
this.$message({
duration: 1500,
showClose: true,
message: "告警通道设置成功",
type: "success",
});
}
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
<style lang="less">
.globalBox {
width: calc(100% - 24px);
height: calc(100% - 24px);
padding: 12px 12px;
background: #fff;
.setBox {
border: 1px solid #dddddd;
height: calc(100% - 24px);
padding: 12px;
border-radius: 4px;
display: flex;
.globalDrawLine {
width: 200px;
height: max-content;
margin-right: 24px;
}
.globalprob {
width: 378px;
height: max-content;
display: flex;
flex-direction: column;
.el-card__body {
display: flex;
flex-direction: column;
.probBox {
display: flex;
height: 40px;
line-height: 40px;
align-items: center;
label {
width: 138px;
}
.el-input-number--small {
width: 200px;
}
.el-input {
width: 200px;
}
}
.setbtn {
margin-top: 24px;
margin-left: auto;
}
}
}
}
}
</style>

@ -1,200 +0,0 @@
<template>
<div class="usermanagement">
<div class="deviceBox">
<div class="deviceBtnGroup">
<h4>用户管理</h4>
<el-button type="primary" icon="el-icon-plus" @click="handleAdddevice()"
>新增</el-button
>
</div>
<div class="deviceTable">
<el-table
ref="multipleTable"
:data="deviceTableData"
stripe
tooltip-effect="dark"
style="width: 100%"
height="calc(100% - 40px)"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
>
<!-- <el-table-column type="index" width="55"> </el-table-column>
<el-table-column type="selection" width="55"> </el-table-column> -->
<template slot="empty">
<el-empty :image-size="160" description="暂无数据"></el-empty>
</template>
<el-table-column
label="用户名"
show-overflow-tooltip
prop="userName"
></el-table-column>
<el-table-column label="角色" show-overflow-tooltip prop="role">
<template slot-scope="scope">{{
scope.row.role == 1 ? "管理员" : "用户"
}}</template>
</el-table-column>
<el-table-column
label="创建时间"
show-overflow-tooltip
prop="createTime"
>
<template slot-scope="scope">{{
$moment(scope.row.createTime).format("yy-MM-DD HH:mm:ss")
}}</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button
@click.native.stop="handleResive(scope.row)"
type="text"
>修改</el-button
>
<el-button
type="text"
class="deleteText"
@click.native.stop="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="pageNation">
<el-pagination
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:current-page="page"
:page-size="pageSize"
layout="sizes, prev, pager, next, jumper,total"
:total="total"
background
>
</el-pagination>
</div>
</div>
</div>
<!-- 新增 -->
<addUser :title="title" ref="adduserref"></addUser>
</div>
</template>
<script>
import addUser from "./components/addUser.vue";
import { getUserList, delUserApi } from "@/utils/api/index";
export default {
components: {
addUser,
},
data() {
return {
title: "", //
deviceTableData: [],
//multipleSelection: [], //
page: 1, //
pageSize: 20, //
total: 0, //
};
},
created() {
this.deviceList();
},
methods: {
//线
deviceList() {
getUserList({
pageindex: this.page,
pagesize: this.pageSize,
})
.then((res) => {
this.deviceTableData = res.data.list;
this.total = res.data.total;
})
.catch((err) => {});
},
//
handleRowClick(row, column, event) {
this.$refs.multipleTable.toggleRowSelection(row);
},
//
handleSelectionChange(val) {
this.multipleSelection = val;
},
//
handleAdddevice() {
this.title = "新增";
this.$refs.adduserref.display();
this.$refs.adduserref.getdataform(null);
},
//
handleResive(data) {
this.title = "修改";
this.$refs.adduserref.display();
this.$refs.adduserref.getdataform(data);
},
//
handleDelete(data) {
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
delUserApi({ uid: data.userId }).then((res) => {
if (res.code == 200) {
this.$message.success("删除成功");
this.deviceList(); //
} else {
this.$message.error(res.msg);
}
});
})
.catch(() => {
this.$message({
duration: 1500,
showClose: true,
type: "info",
message: "已取消删除",
});
});
},
//
handleCurrentChange(val) {
this.page = val;
this.deviceList();
},
//
handleSizeChange(val) {
this.pageSize = val;
this.deviceList();
},
},
};
</script>
<style lang="less">
.usermanagement {
width: calc(100% - 24px);
height: calc(100% - 24px);
padding: 12px 12px;
background: #fff;
.deviceBox {
border: 1px solid #dddddd;
height: calc(100% - 24px);
padding: 12px;
border-radius: 4px;
}
.deviceBtnGroup {
display: flex;
justify-content: space-between;
align-items: center;
}
.deviceTable {
margin-top: 16px;
height: calc(100% - 48px);
//background: #fcc;
}
}
</style>

@ -21,11 +21,12 @@ module.exports = defineConfig({
proxy: {
"/api": {
//表示拦截以/api开头的请求路径
target: "http://47.96.238.157:8093", //阿里云服务器环境
//target: "http://47.96.238.157:8093", //阿里云服务器环境
//target: "http://180.166.218.222:40080", //dell
target: "http://192.168.50.42:81", //dell
changOrigin: true, //是否开启跨域
pathRewrite: {
"^/api": "", //重写api把api变成空字符因为我们真正请求的路径是没有api的
"^/api": "/api", //重写api把api变成空字符因为我们真正请求的路径是没有api的
},
},
},

Loading…
Cancel
Save