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/index.vue | 8
src/views/hazardousChemicals/bigScreen/components/leftBottom.vue | 102 ++++++-
src/views/hazardousChemicals/bigScreen/components/midTop.vue | 174 +++++++++----
src/views/hazardousChemicals/bigScreen/components/rightBottom.vue | 185 +++++++++++---
src/api/monitor/screenCharts.js | 37 +++
src/views/hazardousChemicals/traceableQuery/index.vue | 3
src/views/hazardousChemicals/bigScreen/components/rightTop.vue | 38 ++-
src/views/hazardousChemicals/bigScreen/components/leftTop.vue | 148 +++++++----
src/views/hazardousChemicals/bigScreen/components/midBottom.vue | 25 +
9 files changed, 511 insertions(+), 209 deletions(-)
diff --git a/src/api/monitor/screenCharts.js b/src/api/monitor/screenCharts.js
new file mode 100644
index 0000000..a583e64
--- /dev/null
+++ b/src/api/monitor/screenCharts.js
@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 大屏接口
+export function getDayUseStatistic(id) {
+ return request({
+ url: '/statistic/dayUseStatistic?companyId=' + id,
+ method: 'get'
+ })
+}
+
+export function getTaBooWarning(type) {
+ return request({
+ url: '/taBooWarning/listCount?state=' + type,
+ method: 'get'
+ })
+}
+
+export function getBasicCount() {
+ return request({
+ url: '/hazmat-basic/basicCount',
+ method: 'get'
+ })
+}
+
+export function getCompanyMessage(type) {
+ return request({
+ url: '/statistic/companyMessage?type=' + type,
+ method: 'get'
+ })
+}
+
+export function getDailywarningCount() {
+ return request({
+ url: '/warning/dailywarningCount',
+ method: 'get'
+ })
+}
\ No newline at end of file
diff --git a/src/views/hazardousChemicals/bigScreen/components/leftBottom.vue b/src/views/hazardousChemicals/bigScreen/components/leftBottom.vue
index de6ee03..b7f6789 100644
--- a/src/views/hazardousChemicals/bigScreen/components/leftBottom.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/leftBottom.vue
@@ -1,19 +1,57 @@
<template>
<div class="charts-container">
<div id="dangerPie"></div>
+ <el-radio-group v-model="data.state" size="small" class="state-button" @change="getTopList">
+ <el-radio-button :label="1">已处理</el-radio-button>
+ <el-radio-button :label="0">未处理</el-radio-button>
+ </el-radio-group>
<div id="dangerBar"></div>
</div>
</template>
<script setup>
import * as echarts from 'echarts';
-import {onMounted} from "vue";
-
+import {onMounted, reactive} from "vue";
+import {getAvoidInfoPage} from "@/api/hazardousChemicals/avoid";
+import {ElMessage} from "element-plus";
+import {getTaBooWarning} from "@/api/monitor/screenCharts";
onMounted(()=>{
- initDangerPie()
- initDangerBar()
+ getListPage()
+ getTopList()
})
-const initDangerPie =()=>{
+const data = reactive({
+ queryParams: {
+ pageNum: 1,
+ pageSize: 9999,
+ warningType: '',
+ companyId: null
+ },
+ state: 1
+})
+
+const getListPage = async () => {
+ const res = await getAvoidInfoPage(data.queryParams)
+ if(res.code == 200){
+ let data = []
+ if(res.data && Array.isArray(res.data.list) && res.data.list.length>0){
+ data[0] = {
+ name: '未处理',
+ value: res.data.list.filter(i=>i.state == 0).length
+ }
+ data[1] = {
+ name: '已处理',
+ value: res.data.list.filter(i=>i.state == 1).length
+ }
+ initDangerPie(data)
+ }else{
+ initDangerPie([])
+ }
+ }else{
+ ElMessage.warning(res.message)
+ }
+}
+
+const initDangerPie =(data)=>{
var chartDom = document.getElementById('dangerPie');
var myChart = echarts.init(chartDom);
var option;
@@ -42,10 +80,7 @@
show: true
},
color: ['#1890FF','#FACC14'],
- data: [
- { value: 1048, name: '未整改' },
- { value: 735, name: '已整改' }
- ],
+ data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
@@ -59,7 +94,19 @@
option && myChart.setOption(option);
}
-const initDangerBar =()=>{
+
+const getTopList=async ()=>{
+ const res = await getTaBooWarning(data.state)
+ if (res.code == 200) {
+ if(res.data && Array.isArray(res.data) && res.data.length>0){
+ initDangerBar(res.data.reverse())
+ }
+ } else {
+ ElMessage.warning(res.message)
+ }
+}
+
+const initDangerBar =(data)=>{
var chartDom = document.getElementById('dangerBar');
var myChart = echarts.init(chartDom);
var option;
@@ -83,16 +130,6 @@
color: 'rgba(255,255,255,.6)',
fontWeight: 'normal'
}
- },
- {
- text: '已整改/未整改',
- right: '0',
- top: '0%',
- textStyle: {
- fontSize: 12,
- color: 'rgba(255,255,255,.6)',
- fontWeight: 'normal'
- }
}
],
xAxis: {
@@ -108,7 +145,7 @@
}
},
yAxis: {
- data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
+ data: data.map(i=>i.companyName),
axisLine: {
show: false
},
@@ -124,7 +161,7 @@
name: '2011',
type: 'bar',
barWidth: '15',
- data: [203, 489, 134, 970, 744, 230]
+ data: data.map(i=>i.count)
}
]
};
@@ -146,6 +183,25 @@
display: flex;
flex-direction: column;
}
+:deep(.el-radio-group.state-button){
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+ margin-bottom: -20px;
+ position: relative;
+ z-index: 9999;
+}
+:deep(.el-radio-button--small .el-radio-button__inner){
+ height: 20px;
+ line-height: 10px;
+ background: rgba(0,0,0,0);
+ border: 1px solid #11FEEE;
+}
+:deep(.el-radio-button__original-radio:checked+.el-radio-button__inner){
+ color: #02CDE6
+}
+
#dangerPie{
width: 100%;
flex: 1;
@@ -155,4 +211,4 @@
width: 100%;
flex: 2;
}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/hazardousChemicals/bigScreen/components/leftTop.vue b/src/views/hazardousChemicals/bigScreen/components/leftTop.vue
index 1c95347..d787bd5 100644
--- a/src/views/hazardousChemicals/bigScreen/components/leftTop.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/leftTop.vue
@@ -1,25 +1,89 @@
<template>
<div class="charts-container">
- <div class="top">
- 共计<span>41515152</span>人/次
- </div>
- <el-select v-model="lineQuery.companyId" :teleported="false" placeholder="Select" size="small">
- <el-option :key="1" label="公司一" :value="1"/>
+ <el-select
+ clearable
+ v-model="data.queryParams.companyId"
+ filterable
+ remote
+ :teleported="false"
+ reserve-keyword
+ placeholder="请选择企业"
+ remote-show-suffix
+ :remote-method="getData"
+ style="width: 100%"
+ >
+ <el-option
+ v-for="item in data.companyList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
</el-select>
+ <div class="top">
+ 共计<span>{{data.totalCount}}</span>人/次
+ </div>
<div id="main"></div>
</div>
</template>
<script setup>
import * as echarts from 'echarts';
-import {onMounted} from "vue";
+import {onMounted, reactive} from "vue";
+import {getCompany} from "@/api/hazardousChemicals/company";
+import {ElMessage} from "element-plus";
+import {getDayUseStatistic} from "@/api/monitor/screenCharts";
-onMounted(() => {
- initChart()
+onMounted(async () => {
+ await getCompanyList()
+ await getData()
})
-const lineQuery = {
- companyId: 1
+
+const data = reactive({
+ queryParams: {
+ companyId: null
+ },
+ companyList: [],
+ totalCount: 0
+})
+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
+ if(data.queryParams.companyId == null){
+ data.queryParams.companyId = data.companyList[0].id
+ }
+ } else {
+ ElMessage.warning(res.message)
+ }
+ }
}
-const initChart = () => {
+
+
+const getData = async ()=>{
+const res = await getDayUseStatistic(data.queryParams.companyId)
+ if (res.code == 200) {
+ initChart(res.data || [])
+ data.totalCount = res.data.find(i=>i.totalCount >0)?.totalCount || 0
+ } else {
+ ElMessage.warning(res.message)
+ }
+}
+
+const initChart = (data) => {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
@@ -39,7 +103,7 @@
],
xAxis: {
type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: data.map(i=>i.hour + ':00'),
axisLabel: {
color: '#fff'
},
@@ -68,7 +132,7 @@
],
series: [
{
- data: [150, 230, 224, 218, 135, 147, 260],
+ data: data.map(i=>i.count),
type: 'line',
label: {
show: true,
@@ -137,58 +201,24 @@
width: 100%;
}
:deep(.el-input__wrapper){
- height: 24px;
+ height: 28px;
box-shadow: none;
border: 1px solid #11FEEE;
background: rgba(6,24,88,.6);
color: #fff;
-
- .el-icon{
- display: none;
- color: #fff;
- }
}
-</style>
-<style lang="scss">
-.charts-container{
- :deep(.el-input__wrapper){
- height: 24px;
- box-shadow: none;
- border: 1px solid #11FEEE;
- background: rgba(6,24,88,.6);
+: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;
- }
- .el-select {
- width: 100%;
- height: 24px;
- input.el-input__inner{
- font-size: 10px;
- color: #fff !important
- }
- .el-icon{
- display: none;
- color: #fff;
- }
- }
- :deep(.el-popper){
- background: rgba(10,31,92,1) !important;
- border: 1px solid rgba(17,254,238,.4);
- color: #11FEEE;
-
- .el-icon{
- color: #11FEEE;
- }
- .el-select-dropdown__item{
- color: #11FEEE;
- }
- .el-select-dropdown__item.hover{
- background: #0049af;
- }
- }
- ::v-deep(.el-popper__arrow){
- &::before{
- background-color: rgba(10,31,92,.6) !important;
- border: 1px solid rgba(17,254,238,.4);
+ &:hover{
+ background: #015fb0;
}
}
}
diff --git a/src/views/hazardousChemicals/bigScreen/components/midBottom.vue b/src/views/hazardousChemicals/bigScreen/components/midBottom.vue
index 43ffc1f..eca8b81 100644
--- a/src/views/hazardousChemicals/bigScreen/components/midBottom.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/midBottom.vue
@@ -6,12 +6,29 @@
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
+import {getCompanyMessage, getDailywarningCount} from "@/api/monitor/screenCharts";
+import {ElMessage} from "element-plus";
onMounted(()=>{
- initChart()
+ getList()
+
})
-const initChart =()=>{
+
+const getList = async () => {
+ const res = await getDailywarningCount()
+ if(res.code == 200){
+ if(res.data && Array.isArray(res.data) && res.data.length>0){
+ initChart(res.data)
+ }else{
+ initChart([])
+ }
+ }else{
+ ElMessage.warning(res.message)
+ }
+}
+
+const initChart =(data)=>{
var chartDom = document.getElementById('preWarning');
var myChart = echarts.init(chartDom);
var option;
@@ -31,7 +48,7 @@
],
xAxis: {
type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: data.map(i=>i.day) || [],
axisLabel:{
color: '#fff'
},
@@ -60,7 +77,7 @@
],
series: [
{
- data: [150, 230, 224, 218, 135, 147, 260],
+ data: data.map(i=>i.count) || [],
type: 'line',
label:{
show: true,
diff --git a/src/views/hazardousChemicals/bigScreen/components/midTop.vue b/src/views/hazardousChemicals/bigScreen/components/midTop.vue
index 2895e47..4a26014 100644
--- a/src/views/hazardousChemicals/bigScreen/components/midTop.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/midTop.vue
@@ -1,34 +1,56 @@
<template>
<div class="charts-container">
- <div class="table-wrapper">
- <table class="scrollable-table">
- <thead>
- <tr>
- <th>排名</th>
- <th>企业名称</th>
- <th>危化品仓库</th>
- <th>预警信息</th>
- </tr>
- </thead>
- </table>
- <div class="scroll-viewport" ref="viewport">
- <div class="scroll-content" :style="contentStyle">
- <table class="scrollable-table">
- <tbody>
- <tr v-for="item in companyData" :key="item.id">
- <td>{{ item.rank }}</td>
- <td>{{ item.company }}</td>
- <td>{{ item.warehouse }}</td>
- <td :class="{'warning': item.warning}">{{ item.warning || '无' }}</td>
- </tr>
- <tr v-for="item in loopData" :key="`loop-${item.id}`">
- <td>{{ item.rank }}</td>
- <td>{{ item.company }}</td>
- <td>{{ item.warehouse }}</td>
- <td :class="{'warning': item.warning}">{{ item.warning || '无' }}</td>
- </tr>
- </tbody>
- </table>
+ <div class="container-left">
+ <div class="filter">
+ <el-select
+ clearable
+ :teleported="false"
+ v-model="companyType"
+ filterable
+ placeholder="请选择企业类型"
+ style="width: 100%"
+ remote
+ remote-show-suffix
+ :remote-method="getList"
+ >
+ <el-option
+ v-for="item in typeList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </div>
+ <div class="table-wrapper">
+ <table class="scrollable-table">
+ <thead>
+ <tr>
+ <th>序号</th>
+ <th>企业名称</th>
+ <th>危化品仓库</th>
+ <th>预警信息</th>
+ </tr>
+ </thead>
+ </table>
+ <div class="scroll-viewport" ref="viewport">
+ <div class="scroll-content" :style="contentStyle">
+ <table class="scrollable-table">
+ <tbody>
+ <tr v-for="(item,index) in companyData" :key="item.id">
+ <td>{{ index + 1 }}</td>
+ <td>{{ item.companyName }}</td>
+ <td>{{ item.warehouseCount }}</td>
+ <td>{{ item.warningCount }}</td>
+ </tr>
+ <tr v-for="(item,index) in loopData" :key="`loop-${item.id}`">
+ <td>{{ index + 1 }}</td>
+ <td>{{ item.companyName }}</td>
+ <td>{{ item.warehouseCount }}</td>
+ <td>{{ item.warningCount }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
</div>
@@ -41,32 +63,19 @@
import SUZHOU from './map.json'
import {getAvoidList} from "@/api/hazardousChemicals/avoid";
import {ElMessage} from "element-plus";
+import {getCompanyMessage} from "@/api/monitor/screenCharts";
// 表格数据
-const companyData = [
- { id: 1, rank: 1, company: '化工企业A', warehouse: '仓库1', warning: '相忌预警' },
- { id: 2, rank: 2, company: '化工企业B', warehouse: '仓库2', warning: '' },
- { id: 3, rank: 3, company: '化工企业C', warehouse: '仓库3', warning: '超期预警' },
- { id: 4, rank: 4, company: '化工企业D', warehouse: '仓库4', warning: '' },
- { id: 5, rank: 5, company: '化工企业E', warehouse: '仓库5', warning: '' },
- { id: 6, rank: 6, company: '化工企业F', warehouse: '仓库6', warning: '超期预警' },
- { id: 7, rank: 7, company: '化工企业G', warehouse: '仓库7', warning: '' },
- { id: 8, rank: 8, company: '化工企业H', warehouse: '仓库8', warning: '' },
- { id: 9, rank: 9, company: '化工企业I', warehouse: '仓库9', warning: '' },
- { id: 10, rank: 10, company: '化工企业J', warehouse: '仓库10', warning: '' },
- { id: 11, rank: 11, company: '化工企业K', warehouse: '仓库11', warning: '' },
- { id: 12, rank: 12, company: '化工企业L', warehouse: '仓库12', warning: '' },
-]
-// const companyData = ref([])
+const companyData = ref([])
// 配置参数
const visibleRows = 8 // 显示的行数
-const scrollSpeed = 1 // 每次滚动的像素数
+const scrollSpeed = 0.5 // 每次滚动的像素数
const rowHeight = 40 // 行高，与CSS一致
const viewport = ref(null)
const scrollPosition = ref(0)
let animationFrame = null
onMounted(()=>{
- // getList()
+ getList()
initChart()
// 设置视口高度
if (viewport.value) {
@@ -84,19 +93,35 @@
}
})
-// const getList = async () => {
-// const res = await getAvoidList({warningType: '', companyId: null})
-// if(res.code == 200){
-// companyData.value = res.data
-// console.log(companyData.value,555)
-// }else{
-// ElMessage.warning(res.message)
-// }
-// }
+const companyType = ref('')
+const typeList = [
+ {
+ id: 0,
+ name: '研发类'
+ },
+ {
+ id: 1,
+ name: '生产类'
+ },
+ {
+ id: 2,
+ name: '中试类'
+ }
+]
+
+const getList = async () => {
+ const res = await getCompanyMessage(companyType.value)
+ if(res.code == 200){
+ companyData.value = res.data
+ // console.log(companyData.value,555)
+ }else{
+ ElMessage.warning(res.message)
+ }
+}
// 复制前几行数据用于循环
const loopData = computed(() => {
- return companyData.slice(0, visibleRows)
+ return companyData.value.slice(0, visibleRows)
})
// 内容区域样式
@@ -108,7 +133,7 @@
// 滚动动画
const scrollAnimation = () => {
- const totalHeight = companyData.length * rowHeight
+ const totalHeight = companyData.value.length * rowHeight
const loopHeight = loopData.value.length * rowHeight
// 更新滚动位置
scrollPosition.value += scrollSpeed
@@ -265,10 +290,43 @@
display: flex;
align-items: flex-start;
}
+
+.container-left{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 300px;
+}
+
+.filter{
+ width: 300px;
+}
+: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 {
position: relative;
width: 300px;
- margin-top: 30px;
+ margin-top: 10px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 2px;
overflow: hidden;
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;
}
diff --git a/src/views/hazardousChemicals/bigScreen/components/rightTop.vue b/src/views/hazardousChemicals/bigScreen/components/rightTop.vue
index 6b5a76f..9132f16 100644
--- a/src/views/hazardousChemicals/bigScreen/components/rightTop.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/rightTop.vue
@@ -6,12 +6,33 @@
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
+import {ElMessage} from "element-plus";
+import {getBasicCount} from "@/api/monitor/screenCharts";
onMounted(()=>{
- initChart()
+ getPieData()
})
-const initChart =()=>{
+const getPieData = async ()=>{
+ const res = await getBasicCount()
+ if (res.code == 200) {
+ if(res.data && Array.isArray(res.data) && res.data.length>0){
+ let data = res.data.map(i=>{
+ return {
+ name: i.hazmatCharacter,
+ value: i.count,
+ }
+ })
+ initChart(data)
+ }else{
+ initChart([])
+ }
+ } else {
+ ElMessage.warning(res.message)
+ }
+}
+
+const initChart =(data)=>{
var chartDom = document.getElementById('typePie');
var myChart = echarts.init(chartDom);
var option;
@@ -35,7 +56,7 @@
{
type: 'pie',
radius: [20, 100],
- center: ['50%', '45%'],
+ center: ['50%', '40%'],
roseType: 'area',
itemStyle: {
borderRadius: 5
@@ -45,16 +66,7 @@
textBorderWidth: 0,
formatter: '{d}%'
},
- data: [
- { value: 30, name: 'rose 1' },
- { value: 28, name: 'rose 2' },
- { value: 26, name: 'rose 3' },
- { value: 24, name: 'rose 4' },
- { value: 22, name: 'rose 5' },
- { value: 20, name: 'rose 6' },
- { value: 18, name: 'rose 7' },
- { value: 16, name: 'rose 8' }
- ]
+ data: data
}
]
};
diff --git a/src/views/hazardousChemicals/bigScreen/index.vue b/src/views/hazardousChemicals/bigScreen/index.vue
index 346df89..d052e83 100644
--- a/src/views/hazardousChemicals/bigScreen/index.vue
+++ b/src/views/hazardousChemicals/bigScreen/index.vue
@@ -9,10 +9,10 @@
<h1 class="dashboard-title">独墅湖科教创新区危化品智慧管控平台</h1>
</div>
<div class="header-right">
- <div class="weather-info">
- <span class="weather-icon">☀</span>
- <span class="weather-text">晴 26°C</span>
- </div>
+<!-- <div class="weather-info">-->
+<!-- <span class="weather-icon">☀</span>-->
+<!-- <span class="weather-text">晴 26°C</span>-->
+<!-- </div>-->
</div>
</header>
diff --git a/src/views/hazardousChemicals/traceableQuery/index.vue b/src/views/hazardousChemicals/traceableQuery/index.vue
index 138058c..b8e94f5 100644
--- a/src/views/hazardousChemicals/traceableQuery/index.vue
+++ b/src/views/hazardousChemicals/traceableQuery/index.vue
@@ -86,9 +86,6 @@
}else {
ElMessage.warning('请先输入二维码编号')
}
-
-
-
}
const getCompanyList = async (val)=>{
if(val){
--
Gitblit v1.9.2