From a669adb3e80e58aee84be37d865311717ea61990 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: Thu, 14 Aug 2025 08:38:37 +0800
Subject: [PATCH] 修改
---
src/views/hazardousChemicals/homePage/index.vue | 210 +++++++++++++++++++++++++++++-----------------------
1 files changed, 116 insertions(+), 94 deletions(-)
diff --git a/src/views/hazardousChemicals/homePage/index.vue b/src/views/hazardousChemicals/homePage/index.vue
index ea7e813..77daae5 100644
--- a/src/views/hazardousChemicals/homePage/index.vue
+++ b/src/views/hazardousChemicals/homePage/index.vue
@@ -43,65 +43,53 @@
</el-row>
</div>
<div>
- <el-row :gutter="20" justify="space-between" style="margin-bottom: 15px">
- <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
- <el-card>
- <span style="font-size: 18px;font-weight: 600;margin-left: 45%">超期预警</span>
- <el-table height="320" v-loading="data.wloading" :data="data.warningData" style="margin-top: 15px">
- <el-table-column label="序号" type="index" align="center" width="80" />
- <el-table-column label="生成时间" prop="createTime" align="center" />
- <el-table-column label="领用人" prop="createName" align="center" />
- <el-table-column label="领用时间" prop="useTime" align="center" />
- <el-table-column label="最后流转时间" prop="updateTime" align="center" width="180" />
- <el-table-column label="处理时间" prop="handleTime" align="center" />
- <el-table-column label="状态" prop="name" align="center" >
- <template #default="scope">
- <span>{{scope.row.state === 0 ? '未处理':'已处理'}}</span>
- </template>
- </el-table-column>
- </el-table>
- <pagination
- :total="data.wTotal"
- v-model:page="data.warningQueryParams.pageNum"
- v-model:limit="data.warningQueryParams.pageSize"
- @pagination="getWarningData"
- />
+ <el-row :gutter="20" justify="space-between" >
+ <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" style="margin-bottom: 15px">
+ <el-card style="height: 500px;overflow: auto">
+ <span style="font-size: 18px;font-weight: 600;margin-bottom: -5px">危化品动态</span>
+ <el-divider style="margin: 15px 0"></el-divider>
+ <div style="padding: 10px;" v-if="data.hazmatData && data.hazmatData.length >0">
+ <div v-for="(item,index) in data.hazmatData" :key="index" style="display: flex;flex-direction: column">
+ <div style="display: flex">
+ <img :src="avator" style="width: 25px;height: 25px" />
+ <div style="display: flex;flex-direction: column;margin-left: 20px">
+ <span style="font-size: 16px;font-weight: 600">{{item.description}}
+ <span style="color: #03752e;font-weight: 600" v-if="item.num > 0">{{item.stateName}}</span>
+ <span style="color: #f6828e;font-weight: 600" v-else>{{item.stateName}}</span>
+ <span style="color: #03752e" v-if="item.num > 0">{{item.num >0 ? '+' + item.num: item.num}}{{item.unit}}</span>
+ <span style="color: #f6828e" v-else>{{item.num}}{{item.unit}}</span>
+ </span>
+ <span style="font-size: 14px;color: #8a8f97;margin-top: 5px">{{item.updateTime}}</span>
+ </div>
+ </div>
+ <el-divider style="margin: 15px 0" v-if="index != data.hazmatData.length-1"></el-divider>
+ </div>
+ </div>
+ <div v-else>
+ <el-empty description="暂无数据" style="margin-top: 10%"></el-empty>
+ </div>
</el-card>
-
</el-col>
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
- <el-card>
- <span style="font-size: 18px;font-weight: 600;margin-left: 45%">危化品使用</span>
- <el-table height="320" v-loading="data.hloading" :data="data.hazmatData" style="margin-top: 15px">
- <el-table-column label="名称" prop="name" align="center" />
- <el-table-column label="产品编号" prop="hazmatBasic.productSn" align="center" />
- <el-table-column label="CAS" prop="hazmatBasic.cas" align="center"/>
- <el-table-column label="试剂类型" prop="hazmatBasic.hazmatType" align="center"/>
- <el-table-column label="危险性质" prop="hazmatBasic.hazmatCharacter" align="center"/>
- <el-table-column label="供应商" prop="hazmatBasic.supplier" align="center"/>
- <el-table-column label="厂家" prop="hazmatBasic.manufacturer" align="center"/>
- <el-table-column label="规格" prop="hazmatBasic.hazmatCharacter" align="center"/>
- <el-table-column label="包装" prop="hazmatBasic.metering" align="center">
- <template #default="scope">
- <span>{{scope.row.hazmatBasic.metering}}{{scope.row.hazmatBasic.unit}}</span>
- </template>
- </el-table-column>
- <el-table-column label="含税售价" prop="hazmatBasic.price" align="center"/>
- <el-table-column label="每箱数量" prop="hazmatBasic.perBox" align="center"/>
- <el-table-column label="最小包装类型" prop="minPackage" align="center" width="220">
- <template #default="scope">
- <span>{{scope.row.hazmatBasic.minPackage == 0 ? '瓶' :scope.row.hazmatBasic.minPackage == 1?'袋':scope.row.hazmatBasic.minPackage == 2?'桶 ':scope.row.hazmatBasic.minPackage == 3?'盒':scope.row.hazmatBasic.minPackage == 4?'箱':'其他'}}</span>
- </template>
- </el-table-column>
- <el-table-column label="安全库存" prop="hazmatBasic.safeNum" align="center"/>
- <el-table-column label="超期阈值（小时）" prop="hazmatBasic.threshold" align="center" width="220"/>
- </el-table>
- <pagination
- :total="data.hTotal"
- v-model:page="data.hazmatQueryParams.pageNum"
- v-model:limit="data.hazmatQueryParams.pageSize"
- @pagination="getHazmatUseData"
- />
+ <el-card style="height: 500px;overflow: auto">
+ <span style="font-size: 18px;font-weight: 600;margin-bottom: -5px">超期预警</span>
+ <el-divider style="margin: 15px 0"></el-divider>
+ <div style="padding: 10px;" v-if="data.warningData && data.warningData.length >0">
+ <div v-for="(item,index) in data.warningData" :key="index" style="display: flex;flex-direction: column">
+ <div style="display: flex">
+ <img :src="avator" style="width: 25px;height: 25px" />
+ <div style="display: flex;flex-direction: column;margin-left: 20px">
+ <span style="font-size: 16px;font-weight: 600">{{item.description}}
+ </span>
+ <span style="font-size: 14px;color: #8a8f97;margin-top: 5px">{{item.createTime}}</span>
+ </div>
+ </div>
+ <el-divider style="margin: 15px 0" v-if="index != data.hazmatData.length-1"></el-divider>
+ </div>
+ </div>
+ <div v-else>
+ <el-empty description="暂无数据" style="margin-top: 10%"></el-empty>
+ </div>
</el-card>
</el-col>
</el-row>
@@ -110,7 +98,7 @@
</template>
<script setup>
import { CountTo } from 'vue3-count-to'
-import img1 from '@/assets/images/file.png'
+import avator from '@/assets/images/avator.png'
import hazmat from '@/assets/logo/hazmat.png'
import warehouse from '@/assets/logo/warehouse.png'
import warning from '@/assets/logo/warning1.png'
@@ -121,6 +109,7 @@
import {ElMessage} from "element-plus";
import {getEntryData, getHazmatUseList, getHoData, getMaxUseData, getUseData} from "@/api/hazardousChemicals/count";
import {getWarning} from "@/api/hazardousChemicals/warning";
+import {getRawFlow} from "@/api/hazardousChemicals/rawRecord";
const data = reactive({
cardList: [
{
@@ -153,6 +142,7 @@
},
],
maxUseList: [],
+ maxUseName: [],
useXData: [],
useYData: [],
entryXData: [],
@@ -160,7 +150,7 @@
warningData: [],
warningQueryParams: {
pageNum: 1,
- pageSize: 5
+ pageSize: 10
},
wTotal: 0,
wloading: false,
@@ -170,7 +160,7 @@
pageNum: 1,
pageSize: 10
},
- hazmatData: []
+ hazmatData: [],
});
const myChart = shallowRef(null)
@@ -186,25 +176,37 @@
await useData()
await maxUseData()
await getWarningData()
- await getHazmatUseData()
+ await getHazmatFlowData()
});
const getWarningData = async () => {
data.wloading = true
const res = await getWarning(data.warningQueryParams)
if(res.code == 200){
- data.warningData =res.data.list
- data.wTotal = res.data.total
+ data.warningData =res.data.list.map(item => {
+ return {
+ ...item,
+ description: `${item.createName} 领用了 ${item.hazmatBasic.name} 状态：${item.state ==0?'未处理':'已处理' }`
+ }
+ })
+ data.warningData = data.warningData.filter(item => item.state === 0)
}else{
ElMessage.warning(res.message)
}
data.wloading = false
}
-const getHazmatUseData = async () => {
+const getHazmatFlowData = async () => {
data.hloading = true
- const res = await getHazmatUseList(data.hazmatQueryParams)
+ const res = await getRawFlow(data.hazmatQueryParams)
if(res.code == 200){
- data.hazmatData =res.data.list
- data.hTotal = res.data.total
+ data.hazmatData =res.data.list.map(item => {
+ return {
+ ...item,
+ unit:item.hazmatBasic.unit,
+ stateName: item.state ==0 ?'入库': item.state ==1 ? '取用' :item.state ==2 ? '归还': item.state ==3 ? '标签作废' : item.state ==4 ? '用尽登记':item.state ==5 ? '销售' : '',
+ description: `${item.user.departName ? item.user.departName +'部门' : ''} ${item.user.name} 进行了 `
+ }
+ })
+ console.log('data.hazmatData',data.hazmatData)
}else{
ElMessage.warning(res.message)
}
@@ -250,6 +252,7 @@
name: item.name
}
})
+ data.maxUseName = res.data.map(item => item.name)
await getPieChart()
}else{
ElMessage.warning(res.message)
@@ -260,34 +263,39 @@
myChart.value.dispose();
}
myChart.value = echarts.init(document.getElementById(pieChart.value));
- const option = {
- title: {
- text: '近一周频繁使用的危化品量',
- left: 'center'
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- orient: 'vertical',
- left: 'left'
- },
- series: [
- {
- name: 'Access From',
- type: 'pie',
- radius: '50%',
- data: data.maxUseList,
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
+ let option;
+ option = {
+ title: {
+ text: '近一周频繁使用的危化品量',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left'
+ },
+ series: [
+ {
+ name: '',
+ type: 'pie',
+ radius: '50%',
+ data: data.maxUseList,
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ },
+ // showEmptyCircle: false,
}
- }
- ]
- };
+ ]
+ };
+
+
+
// 使用刚指定的配置项和数据显示图表。
myChart.value.setOption(option,true);
//自适应宽度
@@ -422,7 +430,21 @@
}
}
-
+ ::-webkit-scrollbar {
+ width: 5px;
+ height: 5px;
+ background-color: #ffffff;
+ opacity: 0;
+ }
+ ::-webkit-scrollbar-track {
+ border-radius: 10px;
+ background-color: #ffffff;
+ }
+ ::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ /*-webkit-box-shadow: inset 0 0 6px rgba(154,154,154,.3);*/
+ background-color: #ffffff;
+ }
}
</style>
--
Gitblit v1.9.2