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

首页大屏前端1.5

main
不爱学习的石同学 1 year ago
parent
77ca1a1182
commit
73f4ad086b
4 changed files with 198 additions and 164 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. 20
      src/api/data/supervisionNotify.ts
  2. 274
      src/components/datav/chart-bar-pro.vue
  3. 6
      src/components/datav/tabs.vue
  4. 62
      src/views/datav/SceneInsp.vue

20
src/api/data/supervisionNotify.ts
Unescape View File

@ -1,17 +1,5 @@
import request from "@/api/request"; 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) { export function getAllSupervisionNotifyCount(times) {
@ -19,3 +7,11 @@ export function getAllSupervisionNotifyCount(times) {
url: `/datav/supervisonNotify?beginTime=${times[0]}&endTime=${times[1]}` url: `/datav/supervisonNotify?beginTime=${times[0]}&endTime=${times[1]}`
}); });
} }
export function getChangedRank(times, groupType) {
return request.get({
url: `/datav/supervisonNotify/rank?beginTime=${times[0]}&endTime=${times[1]}&groupType=${groupType}`
});
}

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

@ -1,180 +1,194 @@
<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"
style="height: 40px" style="height: 40px"
> >
<span style="margin-left: 18px"> <span style="margin-left: 18px">
{{ item.sort }} {{ item.sort }}
</span> </span>
<div class="bar-item_content mr-8 " :long="!item.denominator" > <div class="bar-item_content mr-8 " :long="!item.denominator">
<span>{{item.label}}</span> <span>{{ item.label }}</span>
<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: 60, default: 60,
}, },
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) { if (props.color instanceof Array) {
const colors = [...props.color]; const colors = [...props.color];
colors.sort((a, b) => b.percentage - a.percentage); colors.sort((a, b) => b.percentage - a.percentage);
for (let i = 0; i < colors.length; i++) { for (let i = 0; i < colors.length; i++) {
if (val > colors[0].percentage) { if (val > colors[0].percentage) {
return colors[0].color; return colors[0].color;
} }
}
} }
return "linear-gradient(270deg, #63e700 0%, #19674c 100%)"; }
// if (val >= 0.7) { return "linear-gradient(270deg, #63e700 0%, #19674c 100%)";
// return "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)"; // if (val >= 0.7) {
// } // return "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)";
// return "linear-gradient( 270deg, #FB002D 0%, #822232 100%)"; // }
// return "linear-gradient( 270deg, #FB002D 0%, #822232 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-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 - 58px);
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>

6
src/components/datav/tabs.vue
Unescape View File

@ -8,7 +8,7 @@
:key="item.props.name" :key="item.props.name"
:active="item.props.name === activeTab" :active="item.props.name === activeTab"
@click="handleChangeActiveTab(item.props.name)" @click="handleChangeActiveTab(item.props.name)"
> >
{{ item.props.label }} {{ item.props.label }}
</div> </div>
@ -86,10 +86,10 @@ function handleChangeActiveTab(name) {
&[size=small] { &[size=small] {
gap: 12px; gap: 12px;
.tab-title-item { .tab-title-item {
font-size: 19px; font-size: 19px;
} }
} }
} }
.tab-title { .tab-title {

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

@ -4,13 +4,14 @@
<datav-header/> <datav-header/>
<main> <main>
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="6"> <el-col :span="6">
<datav-card title="日常督察情况"> <datav-card title="日常督察情况">
<el-row class="mb-32"> <el-row class="mb-32">
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
56 {{rankOverview.proTotal}}
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
问题数 问题数
@ -20,7 +21,7 @@
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
0 {{rankOverview.changing}}
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
整改中 整改中
@ -30,7 +31,7 @@
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
56 {{ rankOverview.changed }}
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
已整改 已整改
@ -40,7 +41,7 @@
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
100% {{ rankOverview.correctionRate }}%
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
整改率 整改率
@ -53,18 +54,17 @@
type="bottom-button" type="bottom-button"
v-model="activeTabLeft" v-model="activeTabLeft"
> >
<datav-tab-item label="分县市局" name="1"> <datav-tab-item label="分县市局" name="3">
<el-scrollbar height="350px"> <el-scrollbar height="350px">
<datav-chart-bar <datav-chart-bar
:data="data1" :data="data1"
size="large"
:color="colors" :color="colors"
title="整改率排名" title="整改率排名"
sub-title="完成数/问题数" sub-title="已整改/问题数"
/> />
</el-scrollbar> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="局属单位" name="2"> <datav-tab-item label="局属单位" name="4">
<el-scrollbar height="350px"> <el-scrollbar height="350px">
<datav-chart-bar <datav-chart-bar
:data="jsdwBarList" :data="jsdwBarList"
@ -79,6 +79,7 @@
</datav-tabs> </datav-tabs>
</datav-card> </datav-card>
<datav-card title="问题类型占比"> <datav-card title="问题类型占比">
<v-charts <v-charts
style="height: 300px" style="height: 300px"
@ -87,6 +88,7 @@
/> />
</datav-card> </datav-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<datav-date-picker v-model="time"/> <datav-date-picker v-model="time"/>
<div class="flex gap-42"> <div class="flex gap-42">
@ -135,10 +137,10 @@
/> />
</datav-card> </datav-card>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<datav-card> <datav-card>
<datav-tabs v-model="activeTabRight" size="small"> <!-- <datav-tabs v-model="activeTabRight" size="small">
<datav-tab-item label="枪支管理" name="1"> <datav-tab-item label="枪支管理" name="1">
<datav-tabs <datav-tabs
v-model="activeMailTabRight" v-model="activeMailTabRight"
@ -305,7 +307,7 @@
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>-->
<!-- <datav-chart-bar <!-- <datav-chart-bar
title="问题数排名" title="问题数排名"
@ -350,17 +352,19 @@
</el-scrollbar> </el-scrollbar>
</datav-card> </datav-card>
</el-col> </el-col>
</el-row> </el-row>
</main> </main>
</div> </div>
</el-scrollbar> </el-scrollbar>
</template> </template>
<script setup> <script setup>
import vCharts from "vue-echarts"; import vCharts from "vue-echarts";
import changshaMap from "@/assets/data/changsha.json"; import changshaMap from "@/assets/data/changsha.json";
import * as echarts from "echarts/core"; import * as echarts from "echarts/core";
import moment from "moment"; import moment from "moment";
import {getAllSupervisionNotifyCount} from "@/api/data/supervisionNotify.ts"; import {getAllSupervisionNotifyCount, getChangedRank} from "@/api/data/supervisionNotify.ts";
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
const option = { const option = {
@ -488,42 +492,42 @@ const data1 = ref([
}, },
{ {
label: "芙蓉分局", label: "芙蓉分局",
value: 100, value: 80,
unit: "%", unit: "%",
numerator: 11, numerator: 11,
denominator: 11, denominator: 11,
}, },
{ {
label: "岳麓分局", label: "岳麓分局",
value: 100, value: 80,
unit: "%", unit: "%",
numerator: 10, numerator: 10,
denominator: 10, denominator: 10,
}, },
{ {
label: "雨花分局", label: "雨花分局",
value: 100, value: 80,
unit: "%", unit: "%",
numerator: 9, numerator: 9,
denominator: 9, denominator: 9,
}, },
{ {
label: "望城分局", label: "望城分局",
value: 100, value: 80,
unit: "%", unit: "%",
numerator: 4, numerator: 4,
denominator: 4, denominator: 4,
}, },
{ {
label: "浏阳市局", label: "浏阳市局",
value: 100, value: 80,
unit: "%", unit: "%",
numerator: 3, numerator: 3,
denominator: 3, denominator: 3,
}, },
{ {
label: "长沙县局", label: "长沙县局",
value: 100, value: 80,
unit: "%", unit: "%",
numerator: 3, numerator: 3,
denominator: 3, denominator: 3,
@ -586,7 +590,7 @@ const option2 = {
// region 初始化数据 // region 初始化数据
const activeTabLeft = ref("1"); const activeTabLeft = ref("3");
const overview = ref({ const overview = ref({
supervisionNotifyTotal: 0, supervisionNotifyTotal: 0,
supervisionNotifyOrgTotal: 0, supervisionNotifyOrgTotal: 0,
@ -595,6 +599,13 @@ const overview = ref({
supervisionNotifyChangedTotal: 0, supervisionNotifyChangedTotal: 0,
correctionRate: 0, correctionRate: 0,
}); });
const rankOverview = ref({
proTotal: 0,
changing: 0,
changed: 0,
correctionRate: 0,
});
const time = ref([ const time = ref([
moment().startOf("year").format("YYYY-MM-DD"), moment().startOf("year").format("YYYY-MM-DD"),
@ -605,11 +616,23 @@ function getData() {
getAllSupervisionNotifyCount(time.value).then((res) => { getAllSupervisionNotifyCount(time.value).then((res) => {
overview.value = res.overview; overview.value = res.overview;
}); });
getChangedRank(time.value, 3).then((res) => {
rankOverview.value = res.rankOverview;
});
} }
watch(time, () => { watch(time, () => {
getData(); getData();
}); });
watch(activeTabLeft, () => {
alert(activeTabLeft.value)
getChangedRank(time.value, activeTabLeft.value).then((res) => {
rankOverview.value = res.rankOverview;
});
});
onMounted(() => { onMounted(() => {
getData(); getData();
}); });
@ -632,6 +655,7 @@ const colors = [
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/style/datav.scss"; @import "@/style/datav.scss";

Write Preview
Loading…
Cancel
Save