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

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

parent d998ecc8
/* /*
* @Author: your name * @Author: your name
* @Date: 2022-02-23 15:28:07 * @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 * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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 * @FilePath: /newDev/gassafety-progress/gassafetyprogress-web/src/api/bigWindow/getdevice.js
...@@ -118,6 +118,19 @@ export function deviceUserList(query) { ...@@ -118,6 +118,19 @@ export function deviceUserList(query) {
params: query, params: query,
}); });
} }
// 气瓶详情
export function getqpDetail(query) {
return request({
url: '/supervise/user/getLpgGasBottleFilesBackToByCode',
method: "get",
params: query,
})
}
// 监控 // 监控
export function getVideo(query) { export function getVideo(query) {
return request({ return request({
......
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
> >
<el-button <el-button
:disabled="scope.row.gasBottleTitleList.length == 0" :disabled="scope.row.gasBottleTitleList.length == 0"
@click.stop="qipingShow(scope.row.gasBottleTitleList)" @click.stop="qipingShow(scope.row.gasBottleTitleList)"
type="text" type="text"
>气瓶</el-button >气瓶</el-button
> >
...@@ -104,7 +104,9 @@ ...@@ -104,7 +104,9 @@
> >
<div class="table-wrapper"> <div class="table-wrapper">
<div class="list-top"> <div class="list-top">
<div class="title">设备列表</div> <div class="title">
{{ safetyDeviceList.length > 0 ? "设备列表" : "气瓶列表" }}
</div>
<div class="close" @click="close"> <div class="close" @click="close">
<i <i
...@@ -262,6 +264,7 @@ export default { ...@@ -262,6 +264,7 @@ export default {
// justify-content: space-between; // justify-content: space-between;
margin-top: 2px; margin-top: 2px;
z-index: 9999; z-index: 9999;
overflow: hidden;
& > div { & > div {
} }
......
<template> <template>
<transition> <transition>
<div v-show="show" class="wrapper myCenter"> <div v-show="show" class="wrapper myCenter ">
<div class="left"> <div class="left">
<!-- <div class="title-wrapper"> <!-- <div class="title-wrapper">
<div class="title">{{ title }}报警器列表</div> <div class="title">{{ title }}报警器列表</div>
......
...@@ -326,12 +326,20 @@ ...@@ -326,12 +326,20 @@
import { getFiles } from "@/api/lpgRegulation/files"; import { getFiles } from "@/api/lpgRegulation/files";
export default { export default {
name: "lpg-gasbottlefiles-info", name: "lpg-gasbottlefiles-info",
props: {
detailInfo: {
type: Object,
default: () => {
return {};
},
},
},
data() { data() {
return { return {
detailInfo: { // detailInfo: {
fImageList: [], // fImageList: [],
}, // },
detailOpen: false, // detailOpen: false,
}; };
}, },
computed: { computed: {
...@@ -341,14 +349,14 @@ export default { ...@@ -341,14 +349,14 @@ export default {
}, },
created() {}, created() {},
methods: { methods: {
getDetailInfo(id) { // getDetailInfo(id) {
getFiles(id).then((res) => { // getFiles(id).then((res) => {
if (res.code == 200 && res.data) { // if (res.code == 200 && res.data) {
this.detailInfo = res.data; // this.detailInfo = res.data;
this.detailOpen = true; // this.detailOpen = true;
} // }
}); // });
}, // },
}, },
}; };
</script> </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> <template>
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="(record, index) in trackRecordList" v-for="(record, index) in trackRecordList"
:key="index" :key="index"
:timestamp="record.operateDate"> :timestamp="record.time"
<div v-if="record.processesName == '0'"> >
<div>气瓶充装</div> <!-- <div v-if="record.processesName == '0'"> -->
<div style="margin: 15px 0px">{{ record.messageInfo }}</div> <div>{{record.title}}</div>
</div> <div style="margin: 15px 0px">{{ record.message }}</div>
<!-- </div>
<div v-if="record.processesName == '1'"> <div v-if="record.processesName == '1'">
<div>气瓶配送</div> <div>气瓶配送</div>
<div style="margin: 15px 0px">{{ record.messageInfo }}</div> <div style="margin: 15px 0px">{{ record.message }}</div>
</div> </div>
<div v-if="record.processesName == '2'"> <div v-if="record.processesName == '2'">
<div>气瓶回收</div> <div>气瓶回收</div>
<div style="margin: 15px 0px">{{ record.messageInfo }}</div> <div style="margin: 15px 0px">{{ record.message }}</div>
</div> </div> -->
</el-timeline-item> </el-timeline-item>
</el-timeline> </el-timeline>
</template> </template>
<script> <script>
import { bottleTrackRecordList } from "@/api/gasBottleTrack/bottleTrackRecord"; // import { bottleTrackRecordList } from "@/api/gasBottleTrack/bottleTrackRecord";
export default { export default {
name: "processes", name: "processes",
props: { props: {
bottleId: { trackRecordList: {
type:Number type: Array,
} default: () => {
}, return [];
data(){ },
return{
trackRecordList: []
}
}, },
created(){ },
this.getTrackRecordInfo(); data() {
}, return {
methods:{ // trackRecordList: [],
getTrackRecordInfo(){ };
bottleTrackRecordList({bottleId : this.bottleId}).then(res =>{ },
if(res.code == 200){ created() {
this.trackRecordList = res.data; // this.getTrackRecordInfo();
} },
}) methods: {
} // getTrackRecordInfo() {
} // bottleTrackRecordList({ bottleId: this.bottleId }).then((res) => {
} // if (res.code == 200) {
// this.trackRecordList = res.data;
// }
// });
// },
},
};
</script> </script>
<style scoped> <style scoped></style>
</style>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com * @Author: 纪泽龙 jizelong@qq.com
* @Date: 2024-10-25 15:11:18 * @Date: 2024-10-25 15:11:18
* @LastEditors: 纪泽龙 jizelong@qq.com * @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 * @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 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
...@@ -16,10 +16,10 @@ ...@@ -16,10 +16,10 @@
> >
<el-tabs v-model="activeName"> <el-tabs v-model="activeName">
<el-tab-pane label="气瓶信息" name="first"> <el-tab-pane label="气瓶信息" name="first">
<BottleInfo /> <BottleInfo :detailInfo="itemData"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="流转过程" name="second"> <el-tab-pane label="流转过程" name="second">
<Processes /> <Processes :trackRecordList="itemData.backToMessage"/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-dialog> </el-dialog>
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
<script> <script>
import BottleInfo from "./BottleInfo"; import BottleInfo from "./BottleInfo";
import Processes from "./Processes"; import Processes from "./Processes";
import { getqpDetail } from "@/api/bigWindow/getDevice.js";
export default { export default {
name: "view-bottle-track-info", name: "view-bottle-track-info",
components: { components: {
...@@ -39,18 +40,30 @@ export default { ...@@ -39,18 +40,30 @@ export default {
detailOpen: false, detailOpen: false,
activeName: "first", activeName: "first",
bottleId: null, bottleId: null,
itemData:{
backToMessage:[],
},
}; };
}, },
watch:{ watch: {
bottleId(newData){ bottleId(newData) {
console.log(newData) console.log(newData);
this.getqpDetail(newData);
} },
}, },
methods: { methods: {
getqpDetail(code) {
getqpDetail({ code }).then((res) => {
console.log("气瓶详情", res);
this.itemData = res.data;
});
},
handleClick(tab, event) { handleClick(tab, event) {
console.log(tab, event); console.log(tab, event);
this.activeName = tab; this.activeName = tab;
}, },
}, },
}; };
...@@ -58,10 +71,62 @@ export default { ...@@ -58,10 +71,62 @@ export default {
<style lang="scss"> <style lang="scss">
.big-window-dlg { .big-window-dlg {
// .el-dialog { .el-dialog {
// background: rgba(2, 26, 51, 0.9); background: rgba(2, 26, 51, 0.9);
// border: 1px solid #127bd1; 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{ // .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