Skip to content

Q
qsh-wc
Commit b4b204e8 authored by mahui's avatar mahui
Browse files
Options

init

parent faf12d07
Show whitespace changes
Inline Side-by-side
Showing with 1250 additions and 495 deletions
pc/src/main.js
View file @ b4b204e8
...@@ -4,10 +4,14 @@ import router from './router' ...@@ -4,10 +4,14 @@ import router from './router'
import { store } from '@/store' import { store } from '@/store'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn' import zhCn from 'element-plus/dist/locale/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import vue3PhotoPreview from 'vue3-photo-preview'; import vue3PhotoPreview from 'vue3-photo-preview';
import 'vue3-photo-preview/dist/index.css'; import 'vue3-photo-preview/dist/index.css';
const app = createApp(App); const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(vue3PhotoPreview); app.use(vue3PhotoPreview);
app.use(store); app.use(store);
app.use(ElementPlus, { app.use(ElementPlus, {
......
pc/src/views/home.vue
View file @ b4b204e8
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
<div class="logo">@浙江丹靓环境工程有限公司</div> <div class="logo">@浙江丹靓环境工程有限公司</div>
<transition name="el-zoom-in-bottom"> <transition name="el-zoom-in-bottom">
<order-detail v-model="show" v-if="show" :order_id="order_id"></order-detail> <site-detail v-model="show" v-if="show" :site_id="site_id"></site-detail>
</transition> </transition>
</div> </div>
</template> </template>
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
map:null, map:null,
timer:null, timer:null,
show:true, show:true,
order_id:'', site_id:'',
time:myPublic.dateFormat.format(Date.now(), 'HH:mm:ss YYYY年MM月DD日'), time:myPublic.dateFormat.format(Date.now(), 'HH:mm:ss YYYY年MM月DD日'),
list:[ list:[
{ {
...@@ -173,7 +173,7 @@ ...@@ -173,7 +173,7 @@
} }
function seeDetail(item){ function seeDetail(item){
state.show = true; state.show = true;
state.order_id = item.order_id||'12'; state.site_id = item.site_id||'12';
} }
onMounted(()=>{ onMounted(()=>{
nextTick(()=>{ nextTick(()=>{
...@@ -195,7 +195,7 @@ ...@@ -195,7 +195,7 @@
next(); next();
}, },
components:{ components:{
orderDetail:defineAsyncComponent(()=>import("@/views/order-detail.vue")) siteDetail:defineAsyncComponent(()=>import("@/views/site-detail.vue"))
} }
}) })
</script> </script>
......
pc/src/views/order-detail.vue
View file @ b4b204e8
<template> <template>
<div class="order-detail"> <div class="order-detail">
<div class="detail-header"> <div class="order-title">
<span class="detail-title">公厕点位详情【{{detail.name}}】</span> <span>工单详情</span>
<span class="btn" @click="close">退出</span> <el-icon class="close" :size="20" color="#333" @click="closeBox"><Close /></el-icon>
</div> </div>
<div class="tabs"> <div class="order-body">
<span class="tab-one" :class="{selected:tab==item.value}" v-for="(item,index) in tabs" :key="index" <div class="row-one">
@click="tabActive(item)">{{item.name}}</span> <span class="row-name">工单标题</span>
<span class="row-content">{{detail.title}}</span>
</div> </div>
<div class="detail-body"> <div class="row-one">
<div class="body-one" v-if="tab=='base'"> <span class="row-name">巡检公厕单位</span>
<div class="poster"> <span class="row-content">{{detail.name}}</span>
<div class="blur-mask" :style="`background-image:url('${detail.poster[detail.index]}')`"></div>
<div class="banner">
<el-carousel :interval="5000" arrow="never" style="height: 480px;"
@change="(val)=>{detail.index=val}">
<el-carousel-item style="height: 480px;" v-for="item in detail.poster" :key="item">
<div class="banner-bg" :style="`background-image:url('${item}')`"></div>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div class="info">
<p class="info-title">公厕点位基本信息</p>
<div class="info-content">
<div class="table">
<div class="table-left">
<div class="table-row">
<div class="table-header-cell cell">
点位名称
</div>
<div class="table-content-cell cell">
</div>
</div>
<div class="table-row">
<div class="table-header-cell cell">
公厕类型
</div>
<div class="table-content-cell cell">
</div>
</div>
<div class="table-row">
<div class="table-header-cell cell">
管理人员
</div>
<div class="table-content-cell cell">
</div>
</div>
<div class="table-row">
<div class="table-header-cell cell">
联系电话
</div>
<div class="table-content-cell cell">
</div>
</div>
<div class="table-row">
<div class="table-header-cell cell">
地址
</div>
<div class="table-content-cell cell">
</div>
</div>
</div>
<div class="table-right">
<div class="table-row">
<div class="table-header-cell cell">
液位
</div>
<div class="table-content-cell cell">
<div class="chart" ref="chart"></div>
</div> </div>
<div class="row-one">
<span class="row-name">巡检类型</span>
<span class="row-content">{{typeChange(detail.type).text}}</span>
</div> </div>
<div class="row-one">
<span class="row-name">巡检内容</span>
<div class="row-content">
<template v-for="item in detail.content">
<div class="check-one">
<el-checkbox v-model="item.check" :label="item.title" size="large" />
</div> </div>
</template>
</div> </div>
</div> </div>
<div class="row-one">
<span class="row-name">异常描述</span>
<span class="row-content">{{detail.description}}</span>
</div> </div>
<div class="row-one">
<span class="row-name">站点巡检人</span>
<span class="row-content">{{detail.staff}}</span>
</div> </div>
<div class="body-one history" v-else-if="tab=='history'"> <div class="row-one">
<div class="filter"> <span class="row-name">提交时间</span>
<div class="filter-one"> <span class="row-content">{{detail.create_time}}</span>
<p class="filter-name">类型筛选</p>
<div class="filter-content">
<el-select v-model="filter.type" class="m-2" placeholder="请选择类型" @change="()=>getList()">
<el-option
v-for="item in [{name:'全部类型',value:'',prop:''},...typeList]"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="filter-one">
<p class="filter-name">时间筛选</p>
<div class="filter-content">
<el-date-picker
v-model="filter.time"
type="datetimerange"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:teleported="false"
:editable="true"
@change="()=>getList()"
/>
</div>
</div>
</div>
</div>
<div class="body-one monitor" v-else-if="tab=='monitor'">
</div>
<div class="body-one process" v-else-if="tab=='process'">
</div>
<div class="body-one order" v-else-if="tab=='order'">
</div> </div>
</div> </div>
</div> </div>
...@@ -130,8 +45,9 @@ ...@@ -130,8 +45,9 @@
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import {ref,reactive, toRefs, onMounted,nextTick} from "vue" import {reactive, toRefs, onMounted} from "vue"
import {ElMessage} from "element-plus" import {ElMessage} from "element-plus"
import {Close} from "@element-plus/icons-vue"
import api from "@/api/methods/index" import api from "@/api/methods/index"
export default { export default {
name: 'order-detail', name: 'order-detail',
...@@ -149,449 +65,237 @@ ...@@ -149,449 +65,237 @@
setup(props, {emit}) { setup(props, {emit}) {
const state = reactive({ const state = reactive({
detail: { detail: {
name: '三号路公共厕所GC-004', title:'2022年6月22日公厕巡检工作',
poster: [ type:1,
require("@/assets/img/banner-1.png"), name:'三号路公共厕所【GC-004】',
require("@/assets/img/banner-1.png"), staff:'罗小飞',
require("@/assets/img/banner-1.png"), content:[
require("@/assets/img/banner-1.png"), {
require("@/assets/img/banner-1.png"), title:'检查格栅井',
require("@/assets/img/banner-1.png"), check:true
], },
index: 0, {
yewei:0.7 title:'格栅井照片',
check:false
},
{
title:'检查调节池',
check:true
},
{
title:'检查厌氧池',
check:false
},
{
title:'检查缺氧池',
check:true
}, },
tabs: [
{ {
name: '点位基本信息', title:'检查好氧池',
value: 'base' check:true
}, },
{ {
name: '历史数据', title:'检查清水池',
value: 'history' check:true
}, },
{ {
name: '监控画面', title:'格栅污泥池',
value: 'monitor' check:false
}, },
{ {
name: '工艺流程', title:'检查出水井',
value: 'process' check:true
}, },
{ {
name: '巡检工单', title:'清水池照片',
value: 'order' check:true
},
{
title:'检查各井口及井盖',
check:false
},
{
title:'检查水泵系统',
check:true
},
{
title:'检查风机系统',
check:false
},
{
title:'检查加药系统',
check:true
},
{
title:'检查监控系统',
check:true
},
{
title:'检查设备房',
check:false
}, },
], ],
tab: 'base', description:'泵站清淤很多、泵站清淤很多、泵站清淤很多、泵站清淤很多、泵站清淤很多、泵站清淤很多、\n' +
myChart:null, '泵站清淤很多。',
filter:{ create_time:'2022-06-22 10:00'
type:'',
time:['','']
}, },
typeList:[ typeList:[
{ {
name:'液位', name:'液位',
value:'a1', prop:'a1',
color:'#09a8ae' value:0,
unit:'m',
color:'#09a8ae',
create_time:'2022-09-01 10:00'
}, },
{ {
name:'调解池流量', name:'调解池流量',
value:'a2', prop:'a2',
color:'#ff6b6b' value:0,
unit:'m^3/h',
color:'#ff6b6b',
create_time:'2022-09-01 10:00'
}, },
{ {
name:'出水池流量', name:'出水池流量',
value:'a3', prop:'a3',
color:'#946fd0' value:0,
unit:'m^3/h',
color:'#946fd0',
create_time:'2022-09-01 10:00'
}, },
{ {
name:'厌氧池PH值', name:'厌氧池PH值',
value:'a4', prop:'a4',
color:'#3396fb' value:0,
unit:'',
color:'#3396fb',
create_time:'2022-09-01 10:00'
}, },
{ {
name:'好氧池PH值', name:'好氧池PH值',
value:'a5', prop:'a5',
color:'#28ae09' value:0,
unit:'',
color:'#28ae09',
create_time:'2022-09-01 10:00'
}, },
{ {
name:'出水池PH值', name:'出水池PH值',
value:'a6', prop:'a6',
color:'#ffc019' value:0,
unit:'',
color:'#ffc019',
create_time:'2022-09-01 10:00'
}, },
{ {
name:'好氧池DO值', name:'好氧池DO值',
value:'a7', prop:'a7',
color:'#f8893f' value:0,
unit:'mg/l',
color:'#f8893f',
create_time:'2022-09-01 10:00'
}, },
{ {
name:'MBR池DO值', name:'MBR池DO值',
value:'a8', prop:'a8',
color:'#eb509d' value:0,
unit:'mg/l',
color:'#eb509d',
create_time:'2022-09-01 10:00'
} }
] ]
}); });
const chart = ref(null); function typeChange(type=1) {
function getDetail() { switch (type) {
case 1:
return {text:'一体化设备',color:'#3396fb'};
case 2:
return {text:'玻璃钢',color:'#f78131'};
default:
return {text:'...',color:'#f78131'};
} }
function close() {
emit('update:modelValue', false);
} }
function getDetail(){
function tabActive(item) {
if (state.tab != item.value) {
state.tab = item.value;
if(item.value=='history'){
getList();
} }
} function closeBox(){
} emit('update:modelValue',false)
function initGauge(){
state.myChart = echarts.init(chart.value);
let option = {
series: [
{
type: 'gauge',
progress: {
show: true,
width: 18,
itemStyle:{
color:'#3396fb',
}
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 4,
length: '60%',
offsetCenter: [0, '8%']
},
itemStyle:{
color:'#3396fb'
},
axisLine: {
lineStyle: {
width: 18
}
},
axisTick: {
show: true,
distance: 0,
},
splitLine: {
distance: 5,
length: 8,
lineStyle: {
width: 1,
color: '#999'
}
},
axisLabel: {
distance: 22,
color: '#999',
fontSize: 12
},
anchor: {
show: true,
showAbove: true,
size: 20,
itemStyle: {
borderWidth: 4,
borderColor: '#3396fb',
color:'#fff',
}
},
title: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 24,
offsetCenter: [0, '70%'],
formatter(p){
return `{a|${p}m}\n{b|液位}`
},
rich: {
a: {
color: '#333',
lineHeight: 20,
fontSize:18
},
b: {
color: '#666',
lineHeight: 20,
fontSize:14
}
}
},
data: [
{
value: state.detail.yewei
}
],
radius:"95%",
startAngle:210,
endAngle:-30,
max:1
}
]
};
state.myChart.setOption(option);
}
function getList(){
} }
onMounted(async () => { onMounted(async () => {
getDetail(); getDetail();
await nextTick(()=>{
initGauge();
})
}); });
return { return {
...toRefs(state), ...toRefs(state),
close, Close,
tabActive, closeBox,
chart, typeChange
getList
} }
}, },
components: {} components:{
}
} }
</script> </script>
<style lang="less"> <style lang="less">
.order-detail { .order-detail {
position: absolute; position: absolute;
width: 100%; right: 0;
width: 800px;
height: 100%; height: 100%;
-webkit-user-select: none; -webkit-user-select: none;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
box-shadow: 0 0 20px rgba(0,0,0,.2);
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
z-index: 11; z-index: 12;
.order-title{
.detail-header {
flex-shrink: 0; flex-shrink: 0;
height: 70px;
display: flex; display: flex;
align-items: center; align-items: center;
height: 60px;
justify-content: space-between; justify-content: space-between;
background-color: #2d71e2; padding: 0 20px 0 30px;
color: #fff; border-bottom: 1px solid #efefef;
padding: 0 30px 0 20px; .close{
.detail-title {
font-size: 20px;
}
.btn {
width: 80px;
line-height: 36px;
text-align: center;
background-color: #6c9ef1;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
&:hover {
opacity: .8;
}
}
}
.tabs {
flex-shrink: 0;
padding: 0 40px;
.tab-one {
display: inline-flex;
align-items: center;
height: 70px;
color: #666;
cursor: pointer; cursor: pointer;
padding: 0 10px;
margin-right: 10px;
&:hover{ &:hover{
position: relative; opacity: .8;
color: #3396fb;
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #3396fb;
}
}
}
.selected {
position: relative;
color: #3396fb;
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #3396fb;
}
}
}
.detail-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #ebedef;
padding: 20px;
.body-one {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #fff;
padding: 20px;
border-radius: 6px;
.poster {
flex-shrink: 0;
position: relative;
overflow: hidden;
.banner {
position: relative;
height: 480px;
z-index: 3;
.banner-bg {
display: block;
width: 1140px;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
}
} }
.blur-mask {
position: absolute;
width: 100%;
display: block;
height: 480px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
filter: blur(5px);
z-index: 2;
} }
} }
.order-body{
.info {
flex: 1;
display: flex;
flex-direction: column;
background-color: #fff;
padding-top: 10px;
overflow: hidden;
.info-title {
flex-shrink: 0;
font-weight: bolder;
padding: 15px 0;
}
.info-content{
flex: 1; flex: 1;
padding: 10px 20px 10px 30px;
overflow-y: auto; overflow-y: auto;
.table { .row-one{
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
.table-left, .table-right {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
border-top: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
.table-header-cell {
min-width: 120px;
max-width: 180px;
font-weight: bolder;
}
.table-content-cell {
flex: 1;
min-width: 120px;
}
}
.table-right {
border-left: none
}
.table-row {
height: 100%;
display: flex;
overflow: hidden;
&:nth-child(even) {
background-color: #f7f8f8;
}
}
.cell {
display: inline-flex;
align-items: center; align-items: center;
min-height: 45px; padding: 10px 0;
border-right: 1px solid #dfdfdf; .row-name{
border-bottom: 1px solid #dfdfdf; flex-shrink: 0;
padding: 0 14px; width: 100px;
color: #666;
margin-right: 15px;
} }
.row-content{
.chart{
flex: 1; flex: 1;
height: 100%; min-height: 30px;
} background-color: #f8f8f8;
} border-radius: 6px;
} color: #333;
}
}
.history{
padding: 0;
.filter{
display: flex; display: flex;
border-bottom: 1px solid #efefef; flex-wrap: wrap;
padding: 18px 30px;
.filter-one{
display: inline-flex;
align-items: center; align-items: center;
margin-right: 55px; padding: 10px 20px;
.filter-name{ .check-one{
color: #666; width: 33.3%;
margin-right: 20px; padding: 5px 0;
}
}
} }
} }
.monitor{
}
.process{
}
.order{
} }
} }
} }
......
pc/src/views/site-detail.vue 0 → 100644
View file @ b4b204e8
<template>
<div class="site-detail">
<div class="detail-header">
<span class="detail-title">公厕点位详情【{{detail.name}}】</span>
<span class="btn" @click="close">退出</span>
</div>
<div class="tabs">
<span class="tab-one" :class="{selected:tab==item.value}" v-for="(item,index) in tabs.filter(one=>one.show)" :key="index"
@click="tabActive(item)">{{item.name}}</span>
</div>
<div class="detail-body">
<div class="body-one base" v-if="tab=='base'">
<div class="poster">
<div class="blur-mask" :style="`background-image:url('${detail.poster[detail.index]}')`"></div>
<div class="banner">
<el-carousel :interval="5000" arrow="never" style="height: 480px;"
@change="(val)=>{detail.index=val}">
<el-carousel-item style="height: 480px;" v-for="item in detail.poster" :key="item">
<div class="banner-bg" :style="`background-image:url('${item}')`"></div>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div class="info">
<p class="info-title">公厕点位基本信息</p>
<div class="info-content">
<div class="table">
<div class="table-left">
<div class="table-row">
<div class="table-header-cell cell">
点位名称
</div>
<div class="table-content-cell cell">
</div>
</div>
<div class="table-row">
<div class="table-header-cell cell">
公厕类型
</div>
<div class="table-content-cell cell">
</div>
</div>
<div class="table-row">
<div class="table-header-cell cell">
管理人员
</div>
<div class="table-content-cell cell">
</div>
</div>
<div class="table-row">
<div class="table-header-cell cell">
联系电话
</div>
<div class="table-content-cell cell">
</div>
</div>
<div class="table-row">
<div class="table-header-cell cell">
地址
</div>
<div class="table-content-cell cell">
</div>
</div>
</div>
<div class="table-right">
<div class="table-row">
<div class="table-header-cell cell">
液位
</div>
<div class="table-content-cell cell">
<div class="chart" ref="chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="body-one history" v-else-if="tab=='history'">
<div class="filter">
<div class="filter-one">
<p class="filter-name">类型筛选</p>
<div class="filter-content">
<el-select v-model="filter.type" class="m-2" placeholder="请选择类型" @change="()=>getList()">
<el-option
v-for="item in [{name:'全部类型',value:'',prop:''},...typeList]"
:key="item.prop"
:label="item.name"
:value="item.prop"
/>
</el-select>
</div>
</div>
<div class="filter-one">
<p class="filter-name">时间筛选</p>
<div class="filter-content">
<el-date-picker
v-model="filter.time"
type="datetimerange"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:teleported="false"
:editable="true"
@change="()=>getList()"
/>
</div>
</div>
</div>
<div class="history-table">
<div class="table-header">
<div class="row">
<div class="cell flex_2">数据类型</div>
<div class="cell flex_3">数据结果</div>
<div class="cell">检测时间</div>
</div>
</div>
<div class="table-body">
<div class="row" v-for="(item,index) in typeList" :key="index">
<div class="cell flex_2">
<span class="point" :style="`background-color:${item.color}`"></span>
<span :style="`color:${item.color}`">{{item.name}}</span>
</div>
<div class="cell flex_3">{{item.value}} {{item.unit}}</div>
<div class="cell">{{item.create_time}}</div>
</div>
</div>
</div>
</div>
<div class="body-one monitor" v-else-if="tab=='monitor'">
</div>
<div class="body-one process" v-else-if="tab=='process'">
<div class="process-box">
<div class="process-table">
<div class="table-header">
<div class="row">
<div class="cell">数据类型</div>
<div class="cell">数据结果</div>
</div>
</div>
<div class="table-body">
<div class="row" v-for="(item,index) in typeList.slice(0,4)" :key="index">
<div class="cell">
<span class="value">{{item.name}}</span>
</div>
<div class="cell">{{item.value}} {{item.unit}}</div>
</div>
</div>
</div>
<div class="process-table">
<div class="table-header">
<div class="row">
<div class="cell flex_2">数据类型</div>
<div class="cell flex_3">数据结果</div>
</div>
</div>
<div class="table-body">
<div class="row" v-for="(item,index) in typeList.slice(4)" :key="index">
<div class="cell flex_2">
<span class="value">{{item.name}}</span>
</div>
<div class="cell flex_3">{{item.value}} {{item.unit}}</div>
</div>
</div>
</div>
</div>
<video class="video" src="~@/assets/process.mp4" autoplay loop></video>
</div>
<div class="body-one order" v-else-if="tab=='order'">
<div class="filter">
<div class="filter-one">
<p class="filter-name">类型筛选</p>
<div class="filter-content">
<el-select v-model="filter.type" class="m-2" placeholder="请选择类型" @change="()=>getList()">
<el-option
v-for="item in [{name:'全部类型',value:'',prop:''},...typeList]"
:key="item.prop"
:label="item.name"
:value="item.prop"
/>
</el-select>
</div>
</div>
<div class="filter-one">
<p class="filter-name">时间筛选</p>
<div class="filter-content">
<el-date-picker
v-model="filter.time"
type="datetimerange"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:teleported="false"
:editable="true"
@change="()=>getList()"
/>
</div>
</div>
</div>
<div class="order-table">
<div class="table-header">
<div class="row">
<div class="cell">序号</div>
<div class="cell flex_2">巡检标题</div>
<div class="cell flex_2">巡检类型</div>
<div class="cell flex_2">提交人员</div>
<div class="cell flex_2">提交时间</div>
<div class="cell">操作</div>
</div>
</div>
<div class="table-body">
<div class="row" v-for="(item,index) in list.data" :key="index">
<div class="cell">{{index+1}}</div>
<div class="cell flex_2">{{item.title}}</div>
<div class="cell flex_2">
<span class="type" :style="{backgroundColor:typeChange(item.type).color}">{{typeChange(item.type).text}}</span>
</div>
<div class="cell flex_2">{{item.staff}}</div>
<div class="cell flex_2">{{item.create_time}}</div>
<div class="cell">
<span class="opt" @click="seeDetail(item)">查看</span>
</div>
</div>
</div>
<div class="pagination">
<el-pagination
v-model:currentPage="list.page"
v-model:page-size="list.pageSize"
:page-sizes="[10, 15, 20, 25]"
:small="small"
:disabled="disabled"
:background="background"
layout="sizes, prev, pager, next"
:total="list.total"
@size-change="()=>getOrderList(list.page)"
@current-change="()=>getOrderList()"
/>
</div>
</div>
</div>
</div>
<transition name="el-zoom-in-right">
<order-detail v-model="show" v-if="show" :order_id="order_id"></order-detail>
</transition>
</div>
</template>
<script>
// @ is an alias to /src
import {ref,reactive, toRefs, onMounted,nextTick,defineAsyncComponent} from "vue"
import {ElMessage} from "element-plus"
import api from "@/api/methods/index"
export default {
name: 'site-detail',
emits: ['update:modelValue'],
props: {
modelValue: {
type: Boolean,
default: false
},
site_id: {
type: String,
default: ''
},
},
setup(props, {emit}) {
const state = reactive({
show:false,
order_id:'',
detail: {
name: '三号路公共厕所GC-004',
poster: [
require("@/assets/img/banner-1.png"),
require("@/assets/img/banner-1.png"),
require("@/assets/img/banner-1.png"),
require("@/assets/img/banner-1.png"),
require("@/assets/img/banner-1.png"),
require("@/assets/img/banner-1.png"),
],
index: 0,
yewei:0.7,
type:1
},
tabs: [
{
name: '点位基本信息',
value: 'base',
show:true
},
{
name: '历史数据',
value: 'history',
show:true
},
{
name: '监控画面',
value: 'monitor',
show:true
},
{
name: '工艺流程',
value: 'process',
show:false
},
{
name: '巡检工单',
value: 'order',
show:true
},
],
tab: 'base',
myChart:null,
filter:{
type:'',
time:['','']
},
typeList:[
{
name:'液位',
prop:'a1',
value:0,
unit:'m',
color:'#09a8ae',
create_time:'2022-09-01 10:00'
},
{
name:'调解池流量',
prop:'a2',
value:0,
unit:'m^3/h',
color:'#ff6b6b',
create_time:'2022-09-01 10:00'
},
{
name:'出水池流量',
prop:'a3',
value:0,
unit:'m^3/h',
color:'#946fd0',
create_time:'2022-09-01 10:00'
},
{
name:'厌氧池PH值',
prop:'a4',
value:0,
unit:'',
color:'#3396fb',
create_time:'2022-09-01 10:00'
},
{
name:'好氧池PH值',
prop:'a5',
value:0,
unit:'',
color:'#28ae09',
create_time:'2022-09-01 10:00'
},
{
name:'出水池PH值',
prop:'a6',
value:0,
unit:'',
color:'#ffc019',
create_time:'2022-09-01 10:00'
},
{
name:'好氧池DO值',
prop:'a7',
value:0,
unit:'mg/l',
color:'#f8893f',
create_time:'2022-09-01 10:00'
},
{
name:'MBR池DO值',
prop:'a8',
value:0,
unit:'mg/l',
color:'#eb509d',
create_time:'2022-09-01 10:00'
}
],
list:{
page:1,
pageSize:15,
total:20,
data:[
{
title:'2022年6月22日公厕巡检工作',
type:1,
name:'三号路公共厕所【GC-004】',
staff:'罗小飞',
create_time:'2022-06-22 10:00'
},
{
title:'2022年6月21日公厕巡检工作',
type:1,
name:'三号路公共厕所【GC-004】',
staff:'罗小飞',
create_time:'2022-06-21 10:00'
},
{
title:'2022年6月20日公厕巡检工作',
type:1,
name:'三号路公共厕所【GC-004】',
staff:'罗小飞',
create_time:'2022-06-20 10:00'
},
{
title:'2022年6月19日公厕巡检工作',
type:2,
name:'三号路公共厕所【GC-004】',
staff:'罗小飞',
create_time:'2022-06-19 10:00'
},
{
title:'2022年6月18日公厕巡检工作',
type:1,
name:'三号路公共厕所【GC-004】',
staff:'罗小飞',
create_time:'2022-06-18 10:00'
},
{
title:'2022年6月17日公厕巡检工作',
type:1,
name:'三号路公共厕所【GC-004】',
staff:'罗小飞',
create_time:'2022-06-17 10:00'
},
{
title:'2022年6月16日公厕巡检工作',
type:2,
name:'三号路公共厕所【GC-004】',
staff:'罗小飞',
create_time:'2022-06-16 10:00'
},
{
title:'2022年6月14日公厕巡检工作',
type:1,
name:'三号路公共厕所【GC-004】',
staff:'罗小飞',
create_time:'2022-06-14 10:00'
},
{
title:'2022年6月13日公厕巡检工作',
type:1,
name:'三号路公共厕所【GC-004】',
staff:'罗小飞',
create_time:'2022-06-13 10:00'
},
]
}
});
const chart = ref(null);
function getDetail() {
if(state.detail.type==1){
state.tabs.find(one=>one.value=='process').show = true;
}
}
function typeChange(type=1) {
switch (type) {
case 1:
return {text:'一体化设备',color:'#3396fb'};
case 2:
return {text:'玻璃钢',color:'#f78131'};
default:
return {text:'...',color:'#f78131'};
}
}
function close() {
emit('update:modelValue', false);
}
function tabActive(item) {
if (state.tab != item.value) {
state.tab = item.value;
if(item.value=='history'){
getList();
}
if(item.value=='order'){
getOrderList();
}
}
}
function initGauge(){
state.myChart = echarts.init(chart.value);
let option = {
series: [
{
type: 'gauge',
progress: {
show: true,
width: 18,
itemStyle:{
color:'#3396fb',
}
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 4,
length: '60%',
offsetCenter: [0, '8%']
},
itemStyle:{
color:'#3396fb'
},
axisLine: {
lineStyle: {
width: 18
}
},
axisTick: {
show: true,
distance: 0,
},
splitLine: {
distance: 5,
length: 8,
lineStyle: {
width: 1,
color: '#999'
}
},
axisLabel: {
distance: 22,
color: '#999',
fontSize: 12
},
anchor: {
show: true,
showAbove: true,
size: 20,
itemStyle: {
borderWidth: 4,
borderColor: '#3396fb',
color:'#fff',
}
},
title: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 24,
offsetCenter: [0, '70%'],
formatter(p){
return `{a|${p}m}\n{b|液位}`
},
rich: {
a: {
color: '#333',
lineHeight: 20,
fontSize:18
},
b: {
color: '#666',
lineHeight: 20,
fontSize:14
}
}
},
data: [
{
value: state.detail.yewei
}
],
radius:"95%",
startAngle:210,
endAngle:-30,
max:1
}
]
};
state.myChart.setOption(option);
}
function getList(){
}
function getOrderList(page=1){
let p = {
page:page,
pageSize:state.list.pageSize
};
state.list.page = page;
}
function seeDetail(item){
state.order_id = item.order_id;
state.show = true;
}
onMounted(async () => {
getDetail();
await nextTick(()=>{
initGauge();
})
});
return {
...toRefs(state),
chart,
close,
tabActive,
typeChange,
getList,
getOrderList,
seeDetail
}
},
components: {
orderDetail:defineAsyncComponent(()=>import("@/views/order-detail.vue"))
}
}
</script>
<style lang="less">
.site-detail {
position: absolute;
width: 100%;
height: 100%;
-webkit-user-select: none;
background-color: #fff;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 11;
.detail-header {
flex-shrink: 0;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #2d71e2;
color: #fff;
padding: 0 30px 0 20px;
.detail-title {
font-size: 20px;
}
.btn {
width: 80px;
line-height: 36px;
text-align: center;
background-color: #6c9ef1;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
&:hover {
opacity: .8;
}
}
}
.tabs {
flex-shrink: 0;
padding: 0 40px;
.tab-one {
display: inline-flex;
align-items: center;
height: 70px;
color: #666;
cursor: pointer;
padding: 0 10px;
margin-right: 10px;
&:hover{
position: relative;
color: #3396fb;
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #3396fb;
}
}
}
.selected {
position: relative;
color: #3396fb;
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #3396fb;
}
}
}
.detail-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #ebedef;
padding: 20px;
.body-one {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #fff;
padding: 20px;
border-radius: 6px;
}
.base{
.poster {
flex-shrink: 0;
position: relative;
overflow: hidden;
.banner {
position: relative;
height: 480px;
z-index: 3;
.banner-bg {
display: block;
width: 1140px;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
}
}
.blur-mask {
position: absolute;
width: 100%;
display: block;
height: 480px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
filter: blur(5px);
z-index: 2;
}
}
.info {
flex: 1;
display: flex;
flex-direction: column;
background-color: #fff;
padding-top: 10px;
overflow: hidden;
.info-title {
flex-shrink: 0;
font-weight: bolder;
padding: 15px 0;
}
.info-content{
flex: 1;
overflow-y: auto;
.table {
flex-shrink: 0;
display: flex;
.table-left, .table-right {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
border-top: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
.table-header-cell {
min-width: 120px;
max-width: 180px;
font-weight: bolder;
}
.table-content-cell {
flex: 1;
min-width: 120px;
}
}
.table-right {
border-left: none
}
.table-row {
height: 100%;
display: flex;
overflow: hidden;
&:nth-child(even) {
background-color: #f7f8f8;
}
}
.cell {
display: inline-flex;
align-items: center;
min-height: 45px;
border-right: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
padding: 0 14px;
}
.chart{
flex: 1;
height: 100%;
}
}
}
}
}
.history{
padding: 0;
.filter{
flex-shrink: 0;
display: flex;
border-bottom: 1px solid #efefef;
padding: 18px 30px;
.filter-one{
display: inline-flex;
align-items: center;
margin-right: 55px;
.filter-name{
color: #666;
margin-right: 20px;
}
}
}
.history-table{
flex: 1;
display: flex;
flex-direction: column;
padding:20px 20px;
overflow: hidden;
.table-header{
flex-shrink: 0;
width: 100%;
border-radius: 4px;
color: #fff;
background-color: #7d848b;
}
.table-body{
flex: 1;
overflow-y: auto;
}
.row{
height: 60px;
display: flex;
align-items: center;
padding: 0 20px 0 100px;
&:nth-child(even) {
background-color: #f7f8f8;
}
}
.cell{
flex: 1;
display: flex;
align-items: center;
}
.flex_2{
flex: 2;
}
.flex_3{
flex: 3;
}
.point{
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 10px;
}
}
}
.monitor{
}
.process{
position: relative;
.process-box{
position: relative;
left: 40px;
top: 70px;
display: flex;
width: 720px;
z-index: 2;
}
.process-table{
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
border-left: 1px solid #efefef;
border-top: 1px solid #efefef;
.table-header{
flex-shrink: 0;
width: 100%;
color: #fff;
background-color: #056f2f;
}
.table-body{
flex: 1;
}
.row{
height: 48px;
display: flex;
align-items: center;
&:nth-child(even) {
background-color: #f7f8f8;
}
}
.cell{
height: 100%;
flex: 1;
display: flex;
align-items: center;
border-bottom: 1px solid #efefef;
border-right: 1px solid #efefef;
padding: 0 10px 0 20px;
.value{
font-weight: bolder;
}
}
.flex_2{
flex: 2;
}
.flex_3{
flex: 3;
}
.point{
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 10px;
}
}
.video{
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
object-fit: fill;
z-index: 1;
}
}
.order{
padding: 0;
.filter{
flex-shrink: 0;
display: flex;
border-bottom: 1px solid #efefef;
padding: 18px 30px;
.filter-one{
display: inline-flex;
align-items: center;
margin-right: 55px;
.filter-name{
color: #666;
margin-right: 20px;
}
}
}
.order-table{
flex: 1;
display: flex;
flex-direction: column;
padding:20px 20px;
overflow: hidden;
.table-header{
flex-shrink: 0;
width: 100%;
border-radius: 4px;
color: #fff;
background-color: #7d848b;
}
.table-body{
flex: 1;
overflow-y: auto;
}
.pagination{
margin:0 auto;
}
.row{
height: 60px;
display: flex;
align-items: center;
padding: 0 20px 0 100px;
&:nth-child(even) {
background-color: #f7f8f8;
}
}
.cell{
flex: 1;
display: flex;
align-items: center;
}
.flex_2{
flex: 2;
}
.flex_3{
flex: 3;
}
.point{
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 10px;
}
.type{
color: #fff;
border-radius: 4px;
padding:5px 5px;
font-size: 12px;
}
.opt{
color: #2c70e2;
cursor: pointer;
&:hover{
opacity: .8;
}
}
}
}
}
}
</style>
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