xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化添加收藏和删除图片功能

Browse Source
hn2.0
fanluyan 2 years ago
parent 7f956de762
commit 7f97e2b080
5 changed files with 413 additions and 125 deletions
Show Stats Download Patch File Download Diff File

16
src/utils/api/index.js
Unescape Escape View File

@ -817,3 +817,19 @@ export function updateTermCamera(data) {
params: data,
});
}
//删除图片
export function deletePicList(data) {
return request({
url: "/api/deletePicList",
method: "post",
data,
});
}
export function addFavorList(data) {
return request({
url: "/api/addFavorList",
method: "post",
data,
});
}

3
src/views/components/carouselChart.vue
Unescape Escape View File

@ -65,6 +65,7 @@
<ul class="smallPicBox">
<li
v-for="(item, index) in fiveList"
:key="index"
@click="handleBigpic(item, index)"
:class="activeSmall === index ? 'borderActive' : ''"
>
@ -292,6 +293,8 @@ export default {
},
watch: {
terminalPhoto: function (newVal, oldVal) {
console.log("我是图片我变了");
this.terminalPhoto = oldVal.concat(newVal);
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;

440
src/views/realTimeMonitor/index.vue
Unescape Escape View File

@ -3,6 +3,21 @@
<div class="monitor-container">
<!-- 左侧数据列表树 -->
<div class="sideBar">
<div class="tabMenu">
<el-radio-group v-model="favorVal" @input="getfavRadio">
<el-radio-button :label="-1">全部</el-radio-button>
<el-radio-button :label="1">收藏</el-radio-button>
</el-radio-group>
<div class="deviceNum">
<el-statistic title="在线 / 总数">
<template slot="formatter">
（<span>{{ onlineNum ? onlineNum : 0 }}</span> /
<span>{{ totalNum ? totalNum : 0 }}</span
>）
</template>
</el-statistic>
</div>
</div>
<div class="searchBar">
<el-input
placeholder="输入关键字进行过滤"
@ -11,16 +26,7 @@
>
</el-input>
</div>
<div class="deviceNum">
<el-statistic title="装置在线 / 总数">
<template slot="formatter">
（<span>{{ onlineNum ? onlineNum : 0 }}</span> /
<span>{{ totalNum ? totalNum : 0 }}</span
>）
</template>
</el-statistic>
</div>
<div class="radioFilter">
<div class="radioFilter" v-if="favorVal != 1">
<el-radio-group v-model="zzradio" @input="getRadio">
<el-radio :label="-1">全部</el-radio>
<el-radio :label="1">在线</el-radio>
@ -34,58 +40,94 @@
>刷新</el-button
>
</div>
<el-tree
ref="tree"
:data="lineTreeData"
:props="defaultProps"
node-key="id"
default-expand-all
highlight-current
:expand-on-click-node="false"
:filter-node-method="filterNode"
:current-node-key="currentNodekey"
@node-click="handleNodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span v-if="node.level === 1">
<span
class="iconfont icon-dianli"
style="margin-right: 6px"
></span>
<span>{{ node.label }} </span>
</span>
<span v-else-if="node.level === 2">
<span
class="iconfont icon-dianlihangye"
style="margin-right: 6px"
>
<div class="treeboxAll">
<el-tree
v-if="showFavor"
ref="favortree"
:data="favorData"
default-expand-all
node-key="id"
:props="defaultProps"
highlight-current
:current-node-key="currentNodekey"
@node-click="handleFavorNodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<span
class="iconfont icon-shexiangtoulixian"
v-if="data.onlinestatus == 0"
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
style="margin-right: 6px"
></span>
<span
class="iconfont icon-shexiangtou-lixian"
v-else
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
style="margin-right: 6px"
></span>
<span
:id="data.id"
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
>{{ node.label }}</span
>
</span>
<span>{{ node.label }} </span>
</span>
<span v-else>
<span
class="iconfont icon-shexiangtoulixian"
v-if="data.onlinestatus == 0"
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
style="margin-right: 6px"
></span>
<span
class="iconfont icon-shexiangtou-lixian"
v-else
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
style="margin-right: 6px"
></span>
<span
:id="data.id"
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
>{{ node.label }}</span
>
</span>
<!-- <span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
</el-tree>
<el-tree
v-else
ref="tree"
:data="lineTreeData"
:props="defaultProps"
node-key="id"
default-expand-all
highlight-current
:expand-on-click-node="false"
:filter-node-method="filterNode"
:current-node-key="currentNodekey"
@node-click="handleNodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span v-if="node.level === 1">
<span
class="iconfont icon-dianli"
style="margin-right: 6px"
></span>
<span>{{ node.label }} </span>
</span>
<span v-else-if="node.level === 2">
<span
class="iconfont icon-dianlihangye"
style="margin-right: 6px"
>
</span>
<span>{{ node.label }} </span>
</span>
<span v-else>
<span
class="iconfont icon-shexiangtoulixian"
v-if="data.onlinestatus == 0"
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
style="margin-right: 6px"
></span>
<span
class="iconfont icon-shexiangtou-lixian"
v-else
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
style="margin-right: 6px"
></span>
<span
:id="data.id"
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
>{{ node.label }}</span
>
</span>
<!-- <span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
>{{ node.level }}---{{ node.label }}</span
> -->
</span>
</el-tree>
</span>
</el-tree>
</div>
</div>
<div class="resize" title="收缩侧边栏"></div>
@ -113,7 +155,14 @@
</div>
<div class="parameterArea">
<div class="zzbox">
{{ zzCmdid }}
<b>{{ zzCmdid }}</b>
<!-- <b>{{ collectFlag }}</b> -->
<el-button
type="text"
:icon="collectFlag ? 'el-icon-star-on' : 'el-icon-star-off'"
@click="addCollectClick"
>{{ collectFlag ? "取消收藏" : "添加收藏" }}</el-button
>
</div>
<div class="paramsDate">
<h3>日历快速查询</h3>
@ -314,6 +363,7 @@ import {
getTakePicStatusJoggle,
setTermGPSJoggle,
updateTermCamera,
addFavorList,
} from "@/utils/api/index";
import previewContain from "./previewContain.vue";
import carouselChart from "../components/carouselChart.vue";
@ -321,6 +371,7 @@ import setschedule from "./components/setschedule.vue";
import infoDialog from "./components/infoDialog.vue";
import gpsPosition from "./components/gpsPosition.vue";
import morePicPreveiw from "./components/morePicPreveiw.vue";
import { number } from "echarts";
export default {
components: {
@ -387,9 +438,22 @@ export default {
selectTowerId: "",
currentData: "", //保存选中的数据
zzradio: -1,
favorVal: -1, //收藏夹默认选中
showFavor: false,
collectFlag: false,
favorData: [
{
id: 1,
name: "收藏夹",
list: [],
},
],
};
},
watch: {
//增量刷新内容
filterText(val) {
console.log(val);
this.$refs.tree.filter(val);
@ -427,6 +491,22 @@ export default {
}, 300000);
},
methods: {
//获取收藏
getfavRadio() {
console.log("点击了收藏");
console.log(this.showFavor);
console.log(this.favorVal);
if (this.favorVal == -1) {
console.log("全部");
this.showFavor = false;
this.getLineTreeList();
} else {
console.log("收藏");
this.showFavor = true;
this.getFavorTreeList();
}
},
//
//获取当前选中的radio
getRadio() {
console.log(this.zzradio);
@ -451,6 +531,11 @@ export default {
this.zztermId = data.id;
this.zzprotocol = data.protocol;
this.CurrentData = data;
if (data.isfavor == 0 || data.isfavor == null) {
this.collectFlag = false;
} else {
this.collectFlag = true;
}
//this.previewData = data;
if (data.dyValue) {
this.LineFlag = true;
@ -554,52 +639,74 @@ export default {
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
});
// }
// if (this.zzradio == -1) {
// this.lineTreeData = this.lineTreeData;
// } else if (this.zzradio == 1) {
// //在线
// var data = JSON.parse(JSON.stringify(this.lineTreeData));
// console.log(data);
// const filterId = (data, id) => {
// if (!Array.isArray(data)) {
// return data;
// }
// return data.filter((item) => {
// if ("list" in item) {
// item.list = filterId(item.list, id);
// }
// return item.onlinestatus !== 0;
// });
// };
// const filtredData = filterId(data);
// console.log(filtredData);
// this.lineTreeData = filtredData;
// } else if (this.zzradio == 0) {
// //离线
// var data = JSON.parse(JSON.stringify(this.lineTreeData));
// console.log(data);
// const filterId = (data, id) => {
// if (!Array.isArray(data)) {
// return data;
// }
// return data.filter((item) => {
// if ("list" in item) {
// item.list = filterId(item.list, id);
// }
// return item.onlinestatus !== 1;
// });
// };
// const filtredData = filterId(data);
// console.log(filtredData);
// this.lineTreeData = filtredData;
// }
})
.catch((err) => {
console.log(err); //代码错误、请求失败捕获
});
},
//获取收藏夹结构数据
getFavorTreeList() {
getdyTreeListJoggle({ type: this.zzradio })
.then((res) => {
console.log(res);
this.favorData[0].list = res.data.favorlist;
console.log(this.favorData);
this.onlineNum = res.data.onlineNum;
this.totalNum = res.data.totalNum;
this.currentData = this.favorData[0].list[0];
console.log(this.currentData);
this.handleFavorNodeClick(this.currentData);
this.$nextTick(() => {
this.$refs.favortree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
});
})
.catch((err) => {
console.log(err); //代码错误、请求失败捕获
});
},
getupdateFavorTreeList() {
getdyTreeListJoggle({ type: this.zzradio })
.then((res) => {
console.log(res);
this.favorData[0].list = res.data.favorlist;
console.log(this.favorData);
})
.catch((err) => {
console.log(err); //代码错误、请求失败捕获
});
},
handleFavorNodeClick(data) {
this.clearfun();
console.log(data, "11111111");
this.selectData = data;
this.zztermId = data.id;
this.zzprotocol = data.protocol;
this.CurrentData = data;
//this.previewData = data;
if (data.isfavor == 0 || data.isfavor == null) {
this.collectFlag = false;
} else {
this.collectFlag = true;
}
console.log(this.collectFlag, "22222222");
if (data.name == "收藏夹") {
return;
} else {
console.log("杆塔");
this.LineFlag = false;
this.towerFlag = true;
this.towertitle = data.name;
this.zzCmdid = data.cmdid;
//this.previewData = data;
if (data.isfavor == 0 || data.isfavor == null) {
this.collectFlag = false;
} else {
this.collectFlag = true;
}
this.getChannelList(data.id);
// this.getTerminalPhotoList(id, date, data.id);
}
},
//获取通道的接口
getChannelList(id) {
getChannelByTermidJoggle({ termid: id })
@ -703,6 +810,51 @@ export default {
console.log(err); //代码错误、请求失败捕获
});
},
addCollectClick() {
if (!this.collectFlag) {
this.$confirm("此操作将添加至收藏夹, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.collectFlag = true;
addFavorList({ list: [this.zztermId], type: 1 }).then((res) => {
this.getupdateFavorTreeList();
});
this.$message({
type: "success",
message: "添加成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消该操作",
});
});
} else {
this.$confirm("此操作将取消收藏, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.collectFlag = false;
addFavorList({ list: [this.zztermId], type: 0 }).then((res) => {
this.getFavorTreeList();
});
this.$message({
type: "success",
message: "取消收藏!",
}).catch(() => {
this.$message({
type: "info",
message: "已取消该操作",
});
});
});
}
},
//点击图片列表执行函数
jumpTowerPic(data) {
console.log("我是从子组件过来的数据");
@ -1270,30 +1422,68 @@ export default {
//border-right: 1px solid @border-color-base;
display: flex;
flex-direction: column;
padding: 16px 0px;
.searchBar {
width: 94%;
margin: 0 auto;
// padding: 16px 0px;
.barHead {
width: calc(100% - 12px);
height: 32px;
background: linear-gradient(180deg, #4cdbc8 10%, #128071);
line-height: 32px;
display: flex;
align-items: center;
padding-left: 12px;
margin-bottom: 8px;
.el-divider--vertical {
width: 2px;
margin-left: 0px;
}
h2 {
color: #fff;
font-size: 16px;
font-weight: normal;
}
}
.deviceNum {
width: 94%;
margin: 0 auto;
.tabMenu {
margin-bottom: 8px;
height: 20px;
line-height: 20px;
font-size: 12px;
.el-statistic {
display: flex;
justify-content: center;
align-items: center;
.head {
padding-left: 12px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
.el-radio-group {
.el-radio-button {
margin-right: 12px;
.el-radio-button__inner {
border-radius: 4px;
border: 1px solid #dcdfe6;
box-shadow: none;
}
}
.con {
color: #169e8c;
}
.deviceNum {
// width: 94%;
// margin: 0 auto;
// margin-bottom: 8px;
height: 20px;
line-height: 20px;
font-size: 12px;
.el-statistic {
display: flex;
justify-content: center;
align-items: center;
.head {
}
.con {
color: #169e8c;
}
}
}
}
.searchBar {
width: 94%;
margin: 0 auto;
margin-bottom: 8px;
}
.radioFilter {
width: 94%;
margin: 0 auto;
@ -1312,9 +1502,11 @@ export default {
}
}
}
.el-tree {
.treeboxAll {
overflow-y: auto;
overflow-x: hidden;
}
.el-tree {
.el-tree-node__content {
height: 32px;
font-size: 12px;
@ -1412,11 +1604,17 @@ export default {
.zzbox {
height: 32px;
line-height: 32px;
color: #169e8c;
font-size: 14px;
font-weight: normal;
display: flex;
//margin-bottom: 16px;
//background-color: #169e8cb0;
b {
color: #169e8c;
font-size: 14px;
font-weight: normal;
}
.el-button--text {
color: #f08200;
}
}
.paramsDate,
.monitorItemBox,

75
src/views/realTimeSearch/index.vue
Unescape Escape View File

@ -130,7 +130,6 @@
</div>
<!-- <el-image :src="item.path" lazy></el-image> -->
<div class="caption">
<p class="infoTop">
{{ item.linename }} /
@ -156,6 +155,14 @@
}} -->
</p>
</div>
<div class="deleteBox" v-if="role != 2">
<el-button
title="删除照片"
type="primary"
icon="el-icon-delete"
@click.stop="deletePic(item)"
></el-button>
</div>
</div>
<div class="bigpic" v-else>
<!-- <el-image :src="item.path" lazy></el-image> -->
@ -232,7 +239,11 @@
</template>
<script>
import { getSearchInfo, getRealtimePhoto } from "@/utils/api/index";
import {
getSearchInfo,
getRealtimePhoto,
deletePicList,
} from "@/utils/api/index";
export default {
data() {
return {
@ -281,9 +292,11 @@ export default {
current: 0,
//告警
alarmList: "",
role: "",
};
},
created() {
this.role = localStorage.getItem("role");
var that = this;
document.onkeydown = function (e) {
var key = window.event.keyCode;
@ -1000,6 +1013,37 @@ export default {
}
this.getPicData();
},
deletePic(val) {
console.log(val);
let deleteArr = [];
deleteArr.push(val.picid);
console.log(deleteArr);
deletePicList({ list: deleteArr })
.then((res) => {
console.log(res);
this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$message({
type: "success",
showClose: true,
message: "删除成功!",
});
this.getPicData();
})
.catch(() => {
this.$message({
type: "info",
showClose: true,
message: "已取消删除",
});
});
})
.catch((err) => {});
},
//点击分页
handleCurrentChange(val) {
this.page = val;
@ -1240,6 +1284,7 @@ export default {
width: 100%;
height: 100%;
background-size: 100% 100%;
position: relative;
.picshow {
width: 100%;
height: 250px;
@ -1254,6 +1299,11 @@ export default {
pointer-events: none;
}
}
&:hover {
.deleteBox {
display: block;
}
}
}
img {
cursor: pointer;
@ -1286,6 +1336,27 @@ export default {
margin-left: 4px;
}
}
.deleteBox {
position: absolute;
right: 4px;
top: 4px;
z-index: 2;
display: none;
.el-button {
width: auto;
background: rgba(0, 0, 0, 0.5);
border: 1px solid transparent;
color: #fff;
font-size: 16px;
padding: 3px;
}
&:hover {
.el-button {
background: #f56c6c;
//color: #f56c6c;
}
}
}
}
.noPicBox {
display: flex;

4
vue.config.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save