supervision
/
supervision-vue
4
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

督察情况大屏11/16/16：33

main
不爱学习的石同学 1 year ago
parent
abd7688abe
commit
5302ba92e5
4 changed files with 153 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/components/datav/chart-bar-pro.vue
  2. 258
      src/components/datav/chart-bar.vue
  3. 21
      src/views/datav/Gobal.vue
  4. 6
      src/views/datav/SceneInsp.vue

1
src/components/datav/chart-bar-pro.vue
Unescape View File

@ -132,6 +132,7 @@ function getColor(val) {
.bar-item_content { .bar-item_content {
.bar-item_content-bar { .bar-item_content-bar {
height: 13px; height: 13px;
} }
} }
} }

258
src/components/datav/chart-bar.vue
Unescape View File

@ -1,172 +1,190 @@
<template> <template>
<div class="flex between v-center mb-10"> <div class="flex between v-center mb-10">
<span class="bar-title">{{ title }}</span> <span class="bar-title">{{ title }}</span>
<span class="bar-sub-title">{{ subTitle }}</span> <span class="bar-sub-title">{{ subTitle }}</span>
</div> </div>
<div> <div>
<div <div
class="flex v-center bar-item wrap between" class="flex v-center bar-item wrap between"
v-for="item in data" v-for="item in data"
:size="size" :size="size"
:style="{ '--label-width': `${labelWidth}px` }" :style="{ '--label-width': `${labelWidth}px` }"
:position="labelPosition" :position="labelPosition"
> >
<span class="bar-item-label mr-8"> <span class="bar-item-label mr-8">
{{ item.label }} {{ item.label }}
</span> </span>
<div class="bar-item_content mr-8" :long="!item.denominator"> <div class="bar-item_content " :long="!item.denominator">
<div <div
class="bar-item_content-bar" class="bar-item_content-bar"
:style="{ :style="{
width: `${(item.value / max) * 100}%`, width: `${(item.value / max) * 100}%`,
background: getColor((item.value / max) * 100), background: getColor((item.value / max) * 100),
}" }"
></div> ></div>
</div> </div>
<span >{{ item.value }}</span> <span>{{ item.value }}</span>
<span <span
class="bar-item_remark text-right ml-8" class="bar-item_remark text-right ml-8"
v-if="item.denominator" v-if="item.denominator"
style="min-width: 40px" style="min-width: 40px"
> >
<span class="text-success">{{ item.numerator }}</span> <span class="text-success">{{ item.numerator }}</span>
<span>/</span> <span>/</span>
<span>{{ item.denominator }}</span> <span>{{ item.denominator }}</span>
</span> </span>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { onMounted } from "vue"; import {onMounted} from "vue";
const props = defineProps({ const props = defineProps({
title: { title: {
type: String, type: String,
default: "", default: "",
}, },
subTitle: { subTitle: {
type: String, type: String,
default: "", default: "",
}, },
data: { data: {
type: Array, type: Array,
default: [], default: [],
}, },
size: { size: {
type: String, type: String,
default: "", default: "",
}, },
unit: { unit: {
type: String, type: String,
default: "", default: "",
}, },
color: { color: {
type: Object, type: Object,
default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)", default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)",
}, },
labelWidth: { labelWidth: {
type: Number, type: Number,
default: 80, default: 80,
}, },
labelPosition: { labelPosition: {
type: String, type: String,
default: "left", default: "left",
}, },
}); });
const max = ref(100); const max = ref(100);
watch( watch(
() => props.data, () => props.data,
() => { () => {
getMax(); getMax();
} }
); );
function getMax() { function getMax() {
if (props.unit !== "%") { if (props.unit !== "%") {
max.value = Math.max(...props.data.map((item) => item.value)); max.value = Math.max(...props.data.map((item) => item.value));
} }
} }
onMounted(() => { onMounted(() => {
getMax(); getMax();
}); });
function getColor(val) { function getColor(val) {
if (props.color instanceof String) { if (props.color instanceof String) {
return props.color; return props.color;
}
if (props.color instanceof Array) {
const colors = [...props.color];
colors.sort((a, b) => b.percentage - a.percentage);
for (let i = 0; i < colors.length; i++) {
if (val > colors[i].percentage) {
return colors[i].color;
}
} }
if (props.color instanceof Array) { }
const colors = [...props.color]; return "linear-gradient(270deg, #63e700 0%, #19674c 100%)";
colors.sort((a, b) => b.percentage - a.percentage);
for (let i = 0; i < colors.length; i++) {
if (val > colors[i].percentage) {
return colors[i].color;
}
}
}
return "linear-gradient(270deg, #63e700 0%, #19674c 100%)";
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bar-title { .bar-title {
font-size: 19px; font-size: 19px;
} }
.bar-sub-title { .bar-sub-title {
color: #597ae9; color: #597ae9;
font-size: 14px; font-size: 14px;
} }
.bar-item { .bar-item {
font-size: 17px; font-size: 17px;
&[size="large"] {
.bar-item_content { &[size="large"] {
.bar-item_content-bar { .bar-item_content {
height: 13px; .bar-item_content-bar {
} height: 13px;
} }
} }
&[size="small"] { }
font-size: 12px;
&[size="small"] {
font-size: 12px;
.bar-item_content {
width: calc(100% - 180px);
} }
}
.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 { .bar-item-label {
text-align: right; width: 100%;
width: var(--label-width); text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
&[position="left"] {
height: 32px; .bar-item_content {
line-height: 32px; width: calc(100% - 80px);
} }
&[position="top"] { }
margin-bottom: 4px;
.bar-item-label { .bar-item_content {
width: 100%; width: calc(100% - var(--label-width) - 16px - 30px);
text-align: left;
} &[long=false] {
.bar-item_content { width: calc(100% - var(--label-width) - 36px - 110px);
width: calc(100% - 80px);
}
} }
.bar-item_content {
width: calc(100% - var(--label-width) - 16px - 30px); .bar-item_content-bar {
&[long=false] { width: 0;
width: calc(100% - var(--label-width) - 36px - 58px); height: 9px;
} background: linear-gradient(270deg, #63e700 0%, #19674c 100%);
.bar-item_content-bar { transition: width 0.3s;
width: 0;
height: 9px;
background: linear-gradient(270deg, #63e700 0%, #19674c 100%);
transition: width 0.3s;
}
} }
.bar-item_remark { }
font-size: 14px;
.text-success { .bar-item_remark {
color: #09c700; font-size: 14px;
}
.text-success {
color: #09c700;
} }
}
} }
</style> </style>

21
src/views/datav/Gobal.vue
Unescape View File

@ -47,32 +47,32 @@
<datav-statistic <datav-statistic
:value="overview.totalPro" :value="overview.totalPro"
title="问题总数" title="问题总数"
style="width: 16.66%" style="width: 13.66%; margin-left: 20px"
/> />
<datav-statistic <datav-statistic
:value="overview.supervisionPro" :value="overview.supervisionPro"
title="督察问题" title="督察问题"
style="width: 16.66%" style="width: 13.66%; margin-left: 30px"
/> />
<datav-statistic <datav-statistic
:value="overview.caseVerificationPro" :value="overview.caseVerificationPro"
title="案件核查问题" title="案件核查问题"
style="width: 16.66%" style="width: 13.66%; margin-left: 30px"
/> />
<datav-statistic <datav-statistic
:value="overview.complaintPro" :value="overview.complaintPro"
title="信访投诉问题" title="信访投诉问题"
style="width: 16.66%;" style="width: 13.66%; margin-left: 30px"
/> />
<datav-statistic <datav-statistic
:value="overview.talkPro" :value="overview.talkPro"
title="警务评议问题" title="警务评议问题"
style="width: 16.66%" style="width: 13.66%; margin-left: 30px"
/> />
<datav-statistic <datav-statistic
:value="overview.auditPro" :value="overview.auditPro"
title="审计监督问题" title="审计监督问题"
style="width: 16.66%" style="width: 13.66%; margin-left: 10px"
/> />
</div> </div>
<v-charts <v-charts
@ -360,6 +360,7 @@ const zfbaPieOption = computed(() => {
color: "#fff", color: "#fff",
}, },
data: ywzblist.value, data: ywzblist.value,
}, },
], ],
}; };
@ -378,8 +379,7 @@ const wtlxPieOption = computed(() => {
color: "#fff", color: "#fff",
}, },
data: wtlxlist.value, data: wtlxlist.value,
width: 350,
height: 300
}, },
], ],
}; };
@ -439,7 +439,6 @@ const colors = [
]; ];
// endregion // endregion
@ -502,9 +501,9 @@ const colors = [
// 数字的span // 数字的span
.tooltip-ul span { .tooltip-ul span {
float: right; float: right;
width: 30px; width: 50px;
text-align: right; text-align: right;
margin-right: 15px; margin-right: 35px;
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
} }

6
src/views/datav/SceneInsp.vue
Unescape View File

@ -60,6 +60,7 @@
<datav-chart-bar <datav-chart-bar
:data="data1" :data="data1"
:color="colors" :color="colors"
:size="small"
title="整改率排名" title="整改率排名"
sub-title="已整改/问题数" sub-title="已整改/问题数"
/> />
@ -484,7 +485,7 @@ const option1 = ref({
}); });
const data1 = ref([ const data1 = ref([
{ /*{
label: "开福分局", label: "开福分局",
value: 90, value: 90,
unit: "%", unit: "%",
@ -532,7 +533,7 @@ const data1 = ref([
unit: "%", unit: "%",
numerator: 3, numerator: 3,
denominator: 3, denominator: 3,
}, },*/
]); ]);
const data2 = [ const data2 = [
@ -619,6 +620,7 @@ function getData() {
}); });
getChangedRank(time.value, 3).then((res) => { getChangedRank(time.value, 3).then((res) => {
rankOverview.value = res.rankOverview; rankOverview.value = res.rankOverview;
data1.value = res.changedRankList;
}); });
} }

Write Preview
Loading…
Cancel
Save