init

pc/src/main.js

@@ -3,12 +3,15 @@ import App from './App.vue'
 import router from './router'
 import { store } from '@/store'
 import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn'
 import 'element-plus/dist/index.css'
 import vue3PhotoPreview from 'vue3-photo-preview';
 import 'vue3-photo-preview/dist/index.css';
 const app = createApp(App);
 app.use(vue3PhotoPreview);
 app.use(store);
-app.use(ElementPlus);
+app.use(ElementPlus, {
+	locale: zhCn
+});
 app.use(router);
 app.mount('#app');

pc/src/views/order-detail.vue

@@ -9,7 +9,7 @@
 				  @click="tabActive(item)">{{item.name}}</span>
 		</div>
 		<div class="detail-body">
-			<div class="body-one">
+			<div class="body-one" v-if="tab=='base'">
 				<div class="poster">
 					<div class="blur-mask" :style="`background-image:url('${detail.poster[detail.index]}')`"></div>
 					<div class="banner">
@@ -81,6 +81,49 @@
 					</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.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>
 </template>
@@ -141,7 +184,53 @@
 					},
 				],
 				tab: 'base',
-				myChart:null
+				myChart:null,
+				filter:{
+					type:'',
+					time:['','']
+				},
+				typeList:[
+					{
+						name:'液位',
+						value:'a1',
+						color:'#09a8ae'
+					},
+					{
+						name:'调解池流量',
+						value:'a2',
+						color:'#ff6b6b'
+					},
+					{
+						name:'出水池流量',
+						value:'a3',
+						color:'#946fd0'
+					},
+					{
+						name:'厌氧池PH值',
+						value:'a4',
+						color:'#3396fb'
+					},
+					{
+						name:'好氧池PH值',
+						value:'a5',
+						color:'#28ae09'
+					},
+					{
+						name:'出水池PH值',
+						value:'a6',
+						color:'#ffc019'
+					},
+					{
+						name:'好氧池DO值',
+						value:'a7',
+						color:'#f8893f'
+					},
+					{
+						name:'MBR池DO值',
+						value:'a8',
+						color:'#eb509d'
+					}
+				]
 			});
 			const chart = ref(null);
 			function getDetail() {
@@ -155,6 +244,9 @@
 			function tabActive(item) {
 				if (state.tab != item.value) {
 					state.tab = item.value;
+					if(item.value=='history'){
+						getList();
+					}
 				}
 			}
 			function initGauge(){
@@ -248,6 +340,9 @@
 					]
 				};
 				state.myChart.setOption(option);
+			}
+			function getList(){
+
 			}
 			onMounted(async () => {
 				getDetail();
@@ -259,7 +354,8 @@
 				...toRefs(state),
 				close,
 				tabActive,
-				chart
+				chart,
+				getList
 			}
 		},
 		components: {}
@@ -317,6 +413,21 @@
 				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 {
@@ -456,6 +567,32 @@
 					}
 				}
 			}
+			.history{
+				padding: 0;
+				.filter{
+					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;
+						}
+					}
+				}
+			}
+			.monitor{
+
+			}
+			.process{
+
+			}
+			.order{
+
+			}
 		}
 	}
 </style>