Commit 041d563a authored by 纪泽龙's avatar 纪泽龙

大屏气瓶列表以及详情以及详情样式更改完成

parent d998ecc8
/*
* @Author: your name
* @Date: 2022-02-23 15:28:07
* @LastEditTime: 2024-07-18 15:13:55
* @LastEditTime: 2024-10-28 11:14:31
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /newDev/gassafety-progress/gassafetyprogress-web/src/api/bigWindow/getdevice.js
......@@ -118,6 +118,19 @@ export function deviceUserList(query) {
params: query,
});
}
// 气瓶详情
export function getqpDetail(query) {
return request({
url: '/supervise/user/getLpgGasBottleFilesBackToByCode',
method: "get",
params: query,
})
}
// 监控
export function getVideo(query) {
return request({
......
......@@ -104,7 +104,9 @@
>
<div class="table-wrapper">
<div class="list-top">
<div class="title">设备列表</div>
<div class="title">
{{ safetyDeviceList.length > 0 ? "设备列表" : "气瓶列表" }}
</div>
<div class="close" @click="close">
<i
......@@ -262,6 +264,7 @@ export default {
// justify-content: space-between;
margin-top: 2px;
z-index: 9999;
overflow: hidden;
& > div {
}
......
<template>
<transition>
<div v-show="show" class="wrapper myCenter">
<div v-show="show" class="wrapper myCenter ">
<div class="left">
<!-- <div class="title-wrapper">
<div class="title">{{ title }}报警器列表</div>
......
......@@ -326,12 +326,20 @@
import { getFiles } from "@/api/lpgRegulation/files";
export default {
name: "lpg-gasbottlefiles-info",
data() {
return {
props: {
detailInfo: {
fImageList: [],
type: Object,
default: () => {
return {};
},
},
},
detailOpen: false,
data() {
return {
// detailInfo: {
// fImageList: [],
// },
// detailOpen: false,
};
},
computed: {
......@@ -341,14 +349,14 @@ export default {
},
created() {},
methods: {
getDetailInfo(id) {
getFiles(id).then((res) => {
if (res.code == 200 && res.data) {
this.detailInfo = res.data;
this.detailOpen = true;
}
});
},
// getDetailInfo(id) {
// getFiles(id).then((res) => {
// if (res.code == 200 && res.data) {
// this.detailInfo = res.data;
// this.detailOpen = true;
// }
// });
// },
},
};
</script>
......
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2024-10-25 15:11:18
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2024-10-28 11:25:48
* @FilePath: /zh-baseversion-web/src/views/bigWindow/components/Processes.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<el-timeline>
<el-timeline-item
v-for="(record, index) in trackRecordList"
:key="index"
:timestamp="record.operateDate">
<div v-if="record.processesName == '0'">
<div>气瓶充装</div>
<div style="margin: 15px 0px">{{ record.messageInfo }}</div>
</div>
:timestamp="record.time"
>
<!-- <div v-if="record.processesName == '0'"> -->
<div>{{record.title}}</div>
<div style="margin: 15px 0px">{{ record.message }}</div>
<!-- </div>
<div v-if="record.processesName == '1'">
<div>气瓶配送</div>
<div style="margin: 15px 0px">{{ record.messageInfo }}</div>
<div style="margin: 15px 0px">{{ record.message }}</div>
</div>
<div v-if="record.processesName == '2'">
<div>气瓶回收</div>
<div style="margin: 15px 0px">{{ record.messageInfo }}</div>
</div>
<div style="margin: 15px 0px">{{ record.message }}</div>
</div> -->
</el-timeline-item>
</el-timeline>
</template>
<script>
import { bottleTrackRecordList } from "@/api/gasBottleTrack/bottleTrackRecord";
export default {
// import { bottleTrackRecordList } from "@/api/gasBottleTrack/bottleTrackRecord";
export default {
name: "processes",
props: {
bottleId: {
type:Number
}
trackRecordList: {
type: Array,
default: () => {
return [];
},
},
data(){
return{
trackRecordList: []
}
},
created(){
this.getTrackRecordInfo();
data() {
return {
// trackRecordList: [],
};
},
methods:{
getTrackRecordInfo(){
bottleTrackRecordList({bottleId : this.bottleId}).then(res =>{
if(res.code == 200){
this.trackRecordList = res.data;
}
})
}
}
}
created() {
// this.getTrackRecordInfo();
},
methods: {
// getTrackRecordInfo() {
// bottleTrackRecordList({ bottleId: this.bottleId }).then((res) => {
// if (res.code == 200) {
// this.trackRecordList = res.data;
// }
// });
// },
},
};
</script>
<style scoped>
</style>
<style scoped></style>
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2024-10-25 15:11:18
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2024-10-25 17:36:21
* @LastEditTime: 2024-10-28 11:21:52
* @FilePath: /zh-baseversion-web/src/views/bigWindow/components/ViewBottleTrackInfo.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -16,10 +16,10 @@
>
<el-tabs v-model="activeName">
<el-tab-pane label="气瓶信息" name="first">
<BottleInfo />
<BottleInfo :detailInfo="itemData"/>
</el-tab-pane>
<el-tab-pane label="流转过程" name="second">
<Processes />
<Processes :trackRecordList="itemData.backToMessage"/>
</el-tab-pane>
</el-tabs>
</el-dialog>
......@@ -28,6 +28,7 @@
<script>
import BottleInfo from "./BottleInfo";
import Processes from "./Processes";
import { getqpDetail } from "@/api/bigWindow/getDevice.js";
export default {
name: "view-bottle-track-info",
components: {
......@@ -39,18 +40,30 @@ export default {
detailOpen: false,
activeName: "first",
bottleId: null,
itemData:{
backToMessage:[],
},
};
},
watch:{
bottleId(newData){
console.log(newData)
}
watch: {
bottleId(newData) {
console.log(newData);
this.getqpDetail(newData);
},
},
methods: {
getqpDetail(code) {
getqpDetail({ code }).then((res) => {
console.log("气瓶详情", res);
this.itemData = res.data;
});
},
handleClick(tab, event) {
console.log(tab, event);
this.activeName = tab;
},
},
};
......@@ -58,10 +71,62 @@ export default {
<style lang="scss">
.big-window-dlg {
// .el-dialog {
// background: rgba(2, 26, 51, 0.9);
// border: 1px solid #127bd1;
// }
.el-dialog {
background: rgba(2, 26, 51, 0.9);
border: 1px solid #127bd1;
.el-dialog__header {
border-bottom: 1px solid #127bd1;
}
.el-dialog__body {
padding-top: 10px;
}
.el-dialog__headerbtn .el-dialog__close {
color: #1890ff;
font-size: 22px;
}
.el-dialog__title {
color: #1890ff;
}
}
// background-color: #dfe4ed;
.el-tabs__nav-wrap::after {
// background-color: #127bd1;
// background-color: #606266;
opacity: 0;
}
.el-tabs__active-bar {
// background-color:#49d8ff;
// background-color:#49d8ff;
}
.el-tabs__item {
// 标签的字
color: #fff;
&.el-tabs__item.is-active {
// 选中的字的颜色
color: #1890ff;
}
}
// 文本内容的字的颜色
.el-form-item__label {
color: #fff;
}
// 右边的颜色
.el-form-item__content span {
color: #fff;
}
// 圆圈
.el-timeline-item__node {
// background: #1890ff;
}
// 左边框
.el-timeline-item__tail {
// border: 1px solid #1890ff;
}
// 字
.el-timeline-item__content {
color: #fff;
}
// .el-dialog__title{
// }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment