From 20b0ce2db27b64a60de60aee05dedd448099e330 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 08 七月 2024 10:12:16 +0800
Subject: [PATCH] xiugai
---
src/views/riskWarningSys/warningBigScreen/components/stock.vue | 684 ++++++++------------------------------------------------
1 files changed, 107 insertions(+), 577 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/stock.vue b/src/views/riskWarningSys/warningBigScreen/components/stock.vue
index 1feb3db..70f8696 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/stock.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/stock.vue
@@ -1,9 +1,6 @@
<template>
<div class="charts-cont">
- <div v-show="curValue===true" class="stock" :id="stock1">
-
- </div>
- <div v-show="curValue===false" class="stock" :id="stock2"></div>
+ <div class="stock" :id="stock1"></div>
</div>
</template>
@@ -19,9 +16,11 @@
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import * as echarts from 'echarts';
import '/@/theme/bigScreen.css'
+ import {riskWarningApi} from "/@/api/riskWarning";
interface stateType {
- curValue: boolean
+ stockData: []
+ changeCharts: any
}
export default defineComponent({
name: 'stock',
@@ -29,595 +28,127 @@
props:{
size: Number
},
- setup(props) {
+ setup(props,context) {
const userInfo = useUserInfo()
const { userInfos } = storeToRefs(userInfo);
const stock1 = ref("eChartStock1" + Date.now() + Math.random())
- const stock2 = ref("eChartStock2" + Date.now() + Math.random())
const state = reactive<stateType>({
- curValue: true
+ stockData: [],
+ changeCharts: null
})
- const swit = setInterval(()=>{
- state.curValue = !state.curValue
- if(state.curValue == true){
- nextTick(()=>{
- initStock1()
- })
- }else{
- nextTick(()=>{
- initStock2()
- })
- }
- },5000)
+ const getSupplies = async () => {
+ let res = await riskWarningApi().getEmergencySupplies();
+ if (res.data.code === '200') {
+ state.stockData = res.data.data
+ const chartData = state.stockData.reduce((acc, curr, index) => {
+ if (index % 4 === 0) acc.push([]);
+ acc[acc.length - 1].push(curr);
+ return acc;
+ }, [])
+ const maxNum = Math.max(...state.stockData.map(i=>i.count))
+ let curIndex = 0
+ const renderCharts = () => {
+ const data = chartData[curIndex]
+ initStock(data,maxNum)
+ curIndex = (curIndex + 1) % chartData.length
+ }
+ renderCharts()
+ state.changeCharts = setInterval(renderCharts,5000)
+ context.emit('getData',state.stockData)
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
+
+
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
- const initStock1 =()=>{
+ const initStock =(data,maxNum)=>{
let dom = document.getElementById(stock1.value);
let myChart = echarts.init(dom);
let option: EChartsOption;
option = {
- series: [
- {
- name: '消防耗材',
- type: 'pie',
- radius: [fontSize(40), fontSize(50)],
- data: [
- { value: 2103, name: '消防耗材'},
- { value: 2310, name: '消防耗材未使用'}
- ],
- label: {
- show: true,
- position: 'center',
- formatter: '{total|{a}}' + '\n\r' + '{active|2103}',
- rich: {
- total:{
- fontSize: fontSize(12),
- color:'#999',
- lineHeight: fontSize(16)
- },
- active: {
- fontSize: fontSize(16),
- color:'#999',
- },
- }
- },
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#2D74C0" // 0% 处的颜色
- }, {
- offset: 1, color: "#21D9DC" // 100% 处的颜色
- }]
- },
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#333" // 0% 处的颜色
- }, {
- offset: 1, color: "#333" // 100% 处的颜色
- }]
- }
- ],
- center: ['20%','25%']
- },
- {
- name: '安全帽',
- type: 'pie',
- radius: [fontSize(40), fontSize(50)],
- data: [
- { value: 23509, name: '安全帽'},
- { value: 34312, name: '安全帽未使用'}
- ],
- label: {
- show: true,
- position: 'center',
- formatter: '{total|{a}}' + '\n\r' + '{active|23509}',
- rich: {
- total:{
- fontSize: fontSize(12),
- color:'#999',
- lineHeight: fontSize(16)
- },
- active: {
- fontSize: fontSize(16),
- color:'#999',
- },
- }
- },
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#0DAA2E" // 0% 处的颜色
- }, {
- offset: 1, color: "#4CF475" // 100% 处的颜色
- }]
- },
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#333" // 0% 处的颜色
- }, {
- offset: 1, color: "#333" // 100% 处的颜色
- }]
- }
- ],
- center: ['50%','25%']
- },
- {
- name: '防护服',
- type: 'pie',
- radius: [fontSize(40), fontSize(50)],
- data: [
- { value: 12830, name: '防护服'},
- { value: 22140, name: '防护服未使用'}
- ],
- label: {
- show: true,
- position: 'center',
- formatter: '{total|{a}}' + '\n\r' + '{active|12830}',
- rich: {
- total:{
- fontSize: fontSize(12),
- color:'#999',
- lineHeight: fontSize(16)
- },
- active: {
- fontSize: fontSize(16),
- color:'#999',
- },
- }
- },
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#E8B21D" // 0% 处的颜色
- }, {
- offset: 1, color: "#E5DC44" // 100% 处的颜色
- }],
- global: false // 缺省为 false
- },
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#333" // 0% 处的颜色
- }, {
- offset: 1, color: "#333" // 100% 处的颜色
- }],
- global: false // 缺省为 false
- }
- ],
- center: ['80%','25%']
- },
- {
- name: '劳保鞋',
- type: 'pie',
- radius: [fontSize(40), fontSize(50)],
- data: [
- { value: 5492, name: '劳保鞋'},
- { value: 10842, name: '劳保鞋未使用'}
- ],
- label: {
- show: true,
- position: 'center',
- formatter: '{total|{a}}' + '\n\r' + '{active|5492}',
- rich: {
- total:{
- fontSize: fontSize(12),
- color:'#999',
- lineHeight: fontSize(16)
- },
- active: {
- fontSize: fontSize(16),
- color:'#999',
- },
- }
- },
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#D65146" // 0% 处的颜色
- }, {
- offset: 1, color: "#F58C28" // 100% 处的颜色
- }]
- },
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#333" // 0% 处的颜色
- }, {
- offset: 1, color: "#333" // 100% 处的颜色
- }]
- }
- ],
- center: ['33.33%','75%']
- },
- {
- name: '动火护具',
- type: 'pie',
- radius: [fontSize(40), fontSize(50)],
- data: [
- { value: 44043, name: '动火护具'},
- { value: 68102, name: '动火护具未使用' }
- ],
- label: {
- show: true,
- position: 'center',
- formatter: '{total|{a}}' + '\n\r' + '{active|44043}',
- rich: {
- total:{
- fontSize: fontSize(12),
- color:'#999',
- lineHeight: fontSize(16)
- },
- active: {
- fontSize: fontSize(16),
- color:'#999',
- },
- }
- },
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#4449D1" // 0% 处的颜色
- }, {
- offset: 1, color: "#A86DE5" // 100% 处的颜色
- }]
- },
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#333" // 0% 处的颜色
- }, {
- offset: 1, color: "#333" // 100% 处的颜色
- }]
- }
- ],
- center: ['66.66%','75%']
- }
- ],
+ series: data.map((item,index)=>{
+ const centerList = [
+ ['30%','25%'],['70%','25%'],['30%','75%'],['70%','75%']
+ ]
+ const i = {
+ type: 'gauge',
+ radius: '40%',
+ startAngle: 90,
+ endAngle: -270,
+ pointer: {
+ show: false
+ },
+ progress: {
+ show: true,
+ overlap: false,
+ roundCap: true,
+ clip: false,
+ itemStyle: {
+ borderWidth: 0,
+ borderColor: '#464646'
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ width: fontSize(10),
+ color: [[1,'#666']]
+ },
+ show: true
+ },
+ splitLine: {
+ show: false,
+ distance: 0,
+ length: 10
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false,
+ distance: 50
+ },
+ data: [
+ {
+ value: item.count,
+ name: item.name,
+ title: {
+ offsetCenter: ['0%', '-25%'],
+ color: '#fff'
+ },
+ },
+ ],
+ center: centerList[index],
+ // max: maxNum,
+ title: {
+ fontSize: fontSize(11),
+ },
+ detail: {
+ width: 50,
+ height: fontSize(20),
+ fontSize: fontSize(24),
+ color: 'inherit',
+ borderColor: 'inherit',
+ borderRadius: 20,
+ borderWidth: 0,
+ formatter: '{value}'
+ }
+ }
+ return i
+ })
};
option && myChart.setOption(option);
window.addEventListener("resize",function (){
myChart.resize();
});
- echarts.init(document.getElementById(stock2.value)).dispose()
- }
-
- const initStock2 =()=>{
- let dom = document.getElementById(stock2.value);
- let myChart = echarts.init(dom);
-
- let option: EChartsOption;
-
- option = {
- series: [
- {
- name: '急救包',
- type: 'pie',
- radius: [fontSize(40), fontSize(50)],
- data: [
- { value: 8603, name: '急救包'},
- { value: 12032, name: '急救包未使用'}
- ],
- label: {
- show: true,
- position: 'center',
- formatter: '{total|{a}}' + '\n\r' + '{active|8603}',
- rich: {
- total:{
- fontSize: fontSize(12),
- color:'#999',
- lineHeight: fontSize(16)
- },
- active: {
- fontSize: fontSize(16),
- color:'#999',
- },
- }
- },
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#2D74C0" // 0% 处的颜色
- }, {
- offset: 1, color: "#21D9DC" // 100% 处的颜色
- }],
- global: false // 缺省为 false
- },
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#333" // 0% 处的颜色
- }, {
- offset: 1, color: "#333" // 100% 处的颜色
- }],
- global: false // 缺省为 false
- }
- ],
- center: ['20%','25%']
- },
- {
- name: '人员培训资料',
- type: 'pie',
- radius: [fontSize(40), fontSize(50)],
- data: [
- { value: 8960, name: '人员培训资料'},
- { value: 9890, name: '人员培训资料未使用'}
- ],
- label: {
- show: true,
- position: 'center',
- formatter: '{total|{a}}' + '\n\r' + '{active|8960}',
- rich: {
- total:{
- fontSize: fontSize(12),
- color:'#999',
- lineHeight: fontSize(16)
- },
- active: {
- fontSize: fontSize(16),
- color:'#999',
- },
- }
- },
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#0DAA2E" // 0% 处的颜色
- }, {
- offset: 1, color: "#4CF475" // 100% 处的颜色
- }],
- global: false // 缺省为 false
- },
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#333" // 0% 处的颜色
- }, {
- offset: 1, color: "#333" // 100% 处的颜色
- }],
- global: false // 缺省为 false
- }
- ],
- center: ['50%','25%']
- },
- {
- name: '安全护具',
- type: 'pie',
- radius: [fontSize(40), fontSize(50)],
- data: [
- { value: 12302, name: '安全护具'},
- { value: 20130, name: '安全护具未使用'}
- ],
- label: {
- show: true,
- position: 'center',
- formatter: '{total|{a}}' + '\n\r' + '{active|12302}',
- rich: {
- total:{
- fontSize: fontSize(12),
- color:'#999',
- lineHeight: fontSize(16)
- },
- active: {
- fontSize: fontSize(16),
- color:'#999',
- },
- }
- },
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#E8B21D" // 0% 处的颜色
- }, {
- offset: 1, color: "#E5DC44" // 100% 处的颜色
- }],
- global: false // 缺省为 false
- },
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#333" // 0% 处的颜色
- }, {
- offset: 1, color: "#333" // 100% 处的颜色
- }],
- global: false // 缺省为 false
- }
- ],
- center: ['80%','25%']
- },
- {
- name: '高空护具',
- type: 'pie',
- radius: [fontSize(40), fontSize(50)],
- data: [
- { value: 42948, name: '高空护具'},
- { value: 89342, name: '高空护具未使用'}
- ],
- label: {
- show: true,
- position: 'center',
- formatter: '{total|{a}}' + '\n\r' + '{active|42948}',
- rich: {
- total:{
- fontSize: fontSize(12),
- color:'#999',
- lineHeight: fontSize(16)
- },
- active: {
- fontSize: fontSize(16),
- color:'#999',
- },
- }
- },
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#D65146" // 0% 处的颜色
- }, {
- offset: 1, color: "#F58C28" // 100% 处的颜色
- }],
- global: false // 缺省为 false
- },
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#333" // 0% 处的颜色
- }, {
- offset: 1, color: "#333" // 100% 处的颜色
- }],
- global: false // 缺省为 false
- }
- ],
- center: ['33.33%','75%']
- },
- {
- name: '防尘护具',
- type: 'pie',
- radius: [fontSize(40), fontSize(50)],
- data: [
- { value: 1220, name: '防尘护具'},
- { value: 5034, name: '防尘护具未使用' }
- ],
- label: {
- show: true,
- position: 'center',
- formatter: '{total|{a}}' + '\n\r' + '{active|1220}',
- rich: {
- total:{
- fontSize: fontSize(12),
- color:'#999',
- lineHeight: fontSize(16)
- },
- active: {
- fontSize: fontSize(16),
- color:'#999',
- },
- }
- },
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#4449D1" // 0% 处的颜色
- }, {
- offset: 1, color: "#A86DE5" // 100% 处的颜色
- }],
- global: false // 缺省为 false
- },
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: "#333" // 0% 处的颜色
- }, {
- offset: 1, color: "#333" // 100% 处的颜色
- }],
- global: false // 缺省为 false
- }
- ],
- center: ['66.66%','75%']
- }
- ],
- };
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- echarts.init(document.getElementById(stock1.value)).dispose()
}
function fontSize(val){
@@ -627,14 +158,13 @@
// 页面载入时执行方法
onMounted(() => {
- initStock1();
+ getSupplies()
});
onBeforeUnmount(() =>{
- clearInterval(swit)
+ clearInterval(state.changeCharts)
})
return {
stock1,
- stock2,
Search,
fontSize,
...toRefs(state)
--
Gitblit v1.9.2