From 91f2640c8919e7cbe41c8c437e4f7fd60345e062 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期二, 22 四月 2025 10:47:00 +0800
Subject: [PATCH] 修改大屏
---
src/views/hazardousChemicals/bigScreen/components/rightBottom.vue | 185 +++++++++++++++++++++++++++++++++++-----------
1 files changed, 140 insertions(+), 45 deletions(-)
diff --git a/src/views/hazardousChemicals/bigScreen/components/rightBottom.vue b/src/views/hazardousChemicals/bigScreen/components/rightBottom.vue
index 9b90629..06c9624 100644
--- a/src/views/hazardousChemicals/bigScreen/components/rightBottom.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/rightBottom.vue
@@ -1,14 +1,25 @@
<template>
<div class="charts-container">
<div class="filter">
- <el-input
- v-model="queryParams.code"
- placeholder="请输入流向码"
+ <el-select
clearable
- />
- <div class="search-btn">
- 查询
- </div>
+ v-model="data.queryParams.companyId"
+ filterable
+ placeholder="请选择企业"
+ style="flex: 3"
+ :teleported="false"
+ >
+ <el-option
+ v-for="item in data.companyList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ <el-input v-model="data.queryParams.code" placeholder="请输入流向码"></el-input>
+ <div class="search-btn" @click="getList">
+ 查询
+ </div>
</div>
<div class="table-wrapper">
<table class="data-table">
@@ -21,11 +32,11 @@
</tr>
</thead>
<tbody>
- <tr v-for="(item, index) in dataList" :key="index">
- <td>{{ item.company }}</td>
- <td>{{ item.flowType }}</td>
- <td>{{ item.person }}</td>
- <td>{{ item.time }}</td>
+ <tr v-for="(item, index) in data.dataList" :key="index">
+ <td>{{ data.companyList.find(i=>i.id == item.companyId)?.name }}</td>
+ <td class="state-describe" :class="{'orange': item.stateName == '取用' || item.stateName == '销售','red': item.stateName == '标签作废'|| item.stateName == '用尽登记'}">{{ item.stateName }}</td>
+ <td>{{ item.user.name }}</td>
+ <td>{{ item.updateTime }}</td>
</tr>
</tbody>
</table>
@@ -33,15 +44,80 @@
</div>
</template>
<script setup>
-import {onMounted, reactive} from "vue";
+import {nextTick, onMounted, reactive} from "vue";
+import {ElMessage} from "element-plus";
+import {getBasicCount} from "@/api/monitor/screenCharts";
+import {getAllRawFlow} from "@/api/hazardousChemicals/rawRecord";
+import {getFlowByCode} from "@/api/hazardousChemicals/productRecord";
+import {getCompany} from "@/api/hazardousChemicals/company";
-onMounted(()=>{
- getList()
+onMounted(async()=>{
+ await getCompanyList()
})
-const queryParams = reactive({
- code: ''
+const data = reactive({
+ companyList: [],
+ queryParams: {
+ companyId: null,
+ code: ''
+ },
+ dataList: []
})
+
+const getCompanyList = async (val)=>{
+ if(val){
+ const queryParams = {
+ name: val
+ }
+ const res = await getCompany(queryParams)
+ if (res.code == 200) {
+ data.companyList = res.data.list
+ } else {
+ ElMessage.warning(res.message)
+ }
+ }else {
+ const queryParams = {
+ pageNum: 1,
+ pageSize: 999
+ }
+ const res = await getCompany(queryParams)
+ if (res.code == 200) {
+ data.companyList = res.data.list
+ } else {
+ ElMessage.warning(res.message)
+ }
+ }
+}
+
+const getList = async () => {
+ if(!data.queryParams.companyId){
+ ElMessage.warning('请输入企业名称')
+ return
+ }
+ if(data.queryParams.code==''){
+ ElMessage.warning('请输入二维码编号')
+ return
+ }
+ const res = await getFlowByCode(data.queryParams)
+ if(res.code == 200){
+ if(res.data && res.data.length>0){
+ if(res.data[0].hazmatBasic){
+ console.log(res.data,'data')
+ data.dataList = res.data.map(item => {
+ return {
+ ...item,
+ stateName: item.state ==0 ?'入库': item.state ==1 ? '取用' :item.state ==2 ? '归还': item.state ==3 ? '标签作废' : item.state ==4 ? '用尽登记':item.state ==5 ? '销售' : item.state ==6? '零头入库':'',
+ }
+ })
+ }
+ }else {
+ data.dataList = []
+ }
+ }else{
+ ElMessage.warning(res.message)
+ }
+}
+
const dataList = [
{ company: '化工企业A', flowType: '出库', person: '张三', time: '2023-05-10 09:30' },
{ company: '化工企业B', flowType: '入库', person: '李四', time: '2023-05-10 10:15' },
@@ -53,9 +129,6 @@
{ company: '化工企业H', flowType: '入库', person: '吴十', time: '2023-05-10 17:05' },
{ company: '化工企业I', flowType: '出库', person: '郑十一', time: '2023-05-11 08:30' }
]
-const getList = ()=>{
-
-}
const reset=()=>{
}
@@ -78,12 +151,6 @@
margin-bottom: 20px;
.el-input{
flex: 3;
- border: 1px solid blue !important;
- border-color: blue !important;
- }
- :deep(.el-input__wrapper){
- background-color: rgba(0,0,0,0);
- border-color: blue !important;
}
.search-btn{
flex: 1;
@@ -98,6 +165,28 @@
color: #fff
}
}
+ :deep(.el-input__wrapper){
+ height: 28px;
+ box-shadow: none;
+ border: 1px solid #11FEEE;
+ background: rgba(6,24,88,.6);
+ color: #fff;
+ }
+ :deep(.el-input__inner){
+ color: #02CDE6;
+ }
+ :deep(.el-input .el-select__caret){
+ color: #02CDE6
+ }
+ :deep(.el-popper.is-light){
+ background: rgb(8,44,97);
+ .el-select-dropdown__item{
+ color: #fff;
+ &:hover{
+ background: #015fb0;
+ }
+ }
+ }
.table-wrapper {
width: 100%;
height: 320px;
@@ -108,29 +197,35 @@
.data-table {
width: 100%;
- height: 100%;
border-collapse: collapse;
font-size: 14px;
+
+ th,td {
+ padding: 10px;
+ font-size: 12px;
+ color: #fff;
+ text-align: left;
+ height: 24px;
+ border-bottom: 1px solid rgba(255,255,255,.1);
+ }
+ .state-describe{
+ color: #00ff00
+ }
+ .red{
+ color: #ff4848
+ }
+ .orange{
+ color: #aeff00
+ }
+ th {
+ position: sticky;
+ top: 0;
+ background-color: rgb(6,38,87); /* 无背景色 */
+ font-weight: normal;
+ color: #fff;
+ }
}
- .data-table th,
- .data-table td {
- padding: 10px;
- font-size: 12px;
- color: #fff;
- text-align: left;
- border-bottom: 1px solid rgba(255,255,255,.1);
- }
-
- .data-table th {
- position: sticky;
- top: 0;
- background-color: rgb(6,38,87); /* 无背景色 */
- font-weight: normal;
- color: #fff;
- }
-
- /* 精简滚动条样式 */
.table-wrapper::-webkit-scrollbar {
width: 0;
}
--
Gitblit v1.9.2