8 changed files with 849 additions and 510 deletions
@ -0,0 +1,18 @@ |
|||||||
|
import request from "@/api/request"; |
||||||
|
|
||||||
|
/** |
||||||
|
* 信息大屏api |
||||||
|
* @author: sh |
||||||
|
* @date: 2024-011-7 |
||||||
|
*/ |
||||||
|
|
||||||
|
export function getAllGobalCount(times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/dataGobalScreen?beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import request from "@/api/request"; |
||||||
|
export function importCaseVerif(body) { |
||||||
|
return request.post({ |
||||||
|
url: '/data/caseVerif/import', |
||||||
|
body |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function listCaseVerif(query) { |
||||||
|
return request.get({ |
||||||
|
url: '/data/caseVerif', |
||||||
|
query |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export function getAllSupervisionNotifyCount(times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/supervisonNotify?beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,194 @@ |
|||||||
|
<template> |
||||||
|
<!-- 顶部标题和子标题 --> |
||||||
|
<div class="flex between v-center mb-10"> |
||||||
|
<span class="bar-title">{{ title }}</span> |
||||||
|
<span class="bar-sub-title">{{ subTitle }}</span> |
||||||
|
</div> |
||||||
|
<!-- 条目列表 --> |
||||||
|
<div> |
||||||
|
<div |
||||||
|
class="flex v-center bar-item between wrap" |
||||||
|
v-for="item in data" |
||||||
|
:size="size" |
||||||
|
:style="{ '--label-width': `${labelWidth}px` }" |
||||||
|
:position="labelPosition" |
||||||
|
> |
||||||
|
<!-- 条目标签 --> |
||||||
|
<span class="bar-item-label mr-10"> |
||||||
|
{{ item.label }} |
||||||
|
</span> |
||||||
|
<!-- 条目内容 --> |
||||||
|
<div class="bar-item_content mr-16"> |
||||||
|
<div |
||||||
|
class="bar-item_content-bar" |
||||||
|
:style="{ |
||||||
|
width: `${(item.value / max) * 100}%`, |
||||||
|
background: getColor((item.value / max) * 100), |
||||||
|
}" |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
<!-- 条目值 --> |
||||||
|
<span class="mr-16">{{ item.value }}</span> |
||||||
|
<!-- 条目备注 --> |
||||||
|
<span |
||||||
|
class="bar-item_remark text-right" |
||||||
|
v-if="item.denominator" |
||||||
|
style="min-width: 40px" |
||||||
|
> |
||||||
|
<span class="text-success">{{ item.numerator }}</span> |
||||||
|
<span>/</span> |
||||||
|
<span>{{ item.denominator }}</span> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import {onMounted, ref, watch} from "vue"; |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
subTitle: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
data: { |
||||||
|
type: Array, |
||||||
|
default: [], |
||||||
|
}, |
||||||
|
size: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
unit: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
color: { |
||||||
|
type: [Object, String], |
||||||
|
default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)", |
||||||
|
}, |
||||||
|
labelWidth: { |
||||||
|
type: Number, |
||||||
|
default: 80, |
||||||
|
}, |
||||||
|
labelPosition: { |
||||||
|
type: String, |
||||||
|
default: "left", |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
const max = ref(100); |
||||||
|
|
||||||
|
// 监听 data 变化，并更新 max 值 |
||||||
|
watch( |
||||||
|
() => props.data, |
||||||
|
() => { |
||||||
|
getMax(); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
// 获取最大值 |
||||||
|
function getMax() { |
||||||
|
if (props.unit !== "%") { |
||||||
|
max.value = Math.max(...props.data.map((item) => item.value)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 组件挂载时计算最大值 |
||||||
|
onMounted(() => { |
||||||
|
getMax(); |
||||||
|
}); |
||||||
|
|
||||||
|
// 根据值获取对应的颜色 |
||||||
|
function getColor(val) { |
||||||
|
if (typeof props.color === "string") { |
||||||
|
return props.color; |
||||||
|
} |
||||||
|
if (Array.isArray(props.color)) { |
||||||
|
const colors = [...props.color]; |
||||||
|
colors.sort((a, b) => b.percentage - a.percentage); |
||||||
|
for (let i = 0; i < colors.length; i++) { |
||||||
|
if (val > colors[0].percentage) { |
||||||
|
return colors[0].color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return "linear-gradient(270deg, #63e700 0%, #19674c 100%)"; |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.bar-title { |
||||||
|
font-size: 19px; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-sub-title { |
||||||
|
color: #597ae9; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-item { |
||||||
|
font-size: 17px; |
||||||
|
|
||||||
|
&[size="large"] { |
||||||
|
.bar-item_content { |
||||||
|
.bar-item_content-bar { |
||||||
|
height: 13px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&[size="small"] { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-item-label { |
||||||
|
text-align: right; |
||||||
|
width: var(--label-width); |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
|
||||||
|
&[position="left"] { |
||||||
|
height: 32px; |
||||||
|
line-height: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
&[position="top"] { |
||||||
|
margin-bottom: 4px; |
||||||
|
|
||||||
|
.bar-item-label { |
||||||
|
width: 100%; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-item_content { |
||||||
|
width: calc(100% - 80px); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bar-item_content { |
||||||
|
width: calc(100% - var(--label-width) - 80px); |
||||||
|
|
||||||
|
.bar-item_content-bar { |
||||||
|
width: 0; |
||||||
|
height: 9px; |
||||||
|
background: linear-gradient(270deg, #63e700 0%, #19674c 100%); |
||||||
|
transition: width 0.3s; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bar-item_remark { |
||||||
|
font-size: 14px; |
||||||
|
|
||||||
|
.text-success { |
||||||
|
color: #09c700; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue