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

首页大屏前端1.0

main
不爱学习的石同学 1 year ago
parent
1a84db92de
commit
1aab61ab13
4 changed files with 148 additions and 176 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. 16
      src/api/data/basicScreen.ts
  2. 1
      src/views/data/Mail12337.vue
  3. 205
      src/views/datav/Gobal.vue
  4. 20
      src/views/datav/SceneInsp.vue

16
src/api/data/basicScreen.ts
Unescape View File

@ -6,6 +6,9 @@ import request from "@/api/request";
* @date: 2024-011-7 * @date: 2024-011-7
*/ */
/*
* 获取信息大屏统计数据
*/
export function getAllGobalCount(times) { export function getAllGobalCount(times) {
return request.get({ return request.get({
url: `/datav/dataGobalScreen?beginTime=${times[0]}&endTime=${times[1]}` url: `/datav/dataGobalScreen?beginTime=${times[0]}&endTime=${times[1]}`
@ -13,6 +16,19 @@ export function getAllGobalCount(times) {
} }
/**
* 获取问题趋势数据
*/
export function getGobalRecentlyTrendByMonth(year) {
return request.get({
url: `/datav/dataGobalScreen/getGobalRecentlyTrendByMonth?year=${year}`
});
}

1
src/views/data/Mail12337.vue
Unescape View File

@ -246,6 +246,7 @@ const query = ref({
current: 1, current: 1,
responderKey: "name", responderKey: "name",
problemSourcesCode: ProblemSources.XF12337, problemSourcesCode: ProblemSources.XF12337,
checkStatus: 1
}); });
const list = ref([]); const list = ref([]);

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

@ -6,7 +6,6 @@
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="6"> <el-col :span="6">
<datav-card title="机构问题排名" sub-title="问题数"> <datav-card title="机构问题排名" sub-title="问题数">
<datav-tabs <datav-tabs
v-model="activeOrgTab" v-model="activeOrgTab"
type="bottom-button" type="bottom-button"
@ -14,7 +13,7 @@
<datav-tab-item label="分县市局" name="1"> <datav-tab-item label="分县市局" name="1">
<el-scrollbar height="300px"> <el-scrollbar height="300px">
<datav-chart-bar <datav-chart-bar
:data="data1" :data="fxsjlist"
size="large" size="large"
:max="11" :max="11"
:color="colors" :color="colors"
@ -24,7 +23,7 @@
<datav-tab-item label="局属单位" name="2"> <datav-tab-item label="局属单位" name="2">
<el-scrollbar height="300px"> <el-scrollbar height="300px">
<datav-chart-bar <datav-chart-bar
:data="data1" :data="jsdwlist"
:max="11" :max="11"
size="large" size="large"
:color="colors" :color="colors"
@ -33,60 +32,12 @@
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-card> </datav-card>
<datav-card title="警务评议"> <datav-card title="业务类型占比">
<el-row class="mb-32"> <v-charts
<el-col :span="6"> style="height: 320px"
<div class="descriptions_cell text-center"> :option="zfbaPieOption"
<div class="descriptions_content"> autoresize
4323
</div>
<div class="descriptions_label">
样本总数
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
4323
</div>
<div class="descriptions_label">
满意/共本满意数
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
2356
</div>
<div class="descriptions_label">
不满意数
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
91%
</div>
<div class="descriptions_label">
满意率
</div>
</div>
</el-col>
</el-row>
<datav-chart-bar
title="满意率排名"
sub-title="满意样本数/样本总数"
:data="data1"
/> />
<div class="flex tab-title flex center mt-16">
<div class="tab-title-item active">
分县市局
</div>
<div class="tab-title-item">局属单位</div>
</div>
</datav-card> </datav-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@ -133,7 +84,7 @@
<datav-card title="问题趋势"> <datav-card title="问题趋势">
<v-charts <v-charts
style="height: 300px" style="height: 300px"
:option="option1" :option="proTrend"
autoresize autoresize
/> />
</datav-card> </datav-card>
@ -194,55 +145,18 @@
<div class="tab-title-item">局属单位</div> <div class="tab-title-item">局属单位</div>
</div> </div>
</datav-card> </datav-card>
<datav-card title="案件核查"> <datav-card title="问题类型占比">
<el-row class="mb-32"> <v-charts
<el-col :span="8"> style="height: 320px"
<div class="descriptions_cell text-center"> :option="zfbaPieOption"
<div class="descriptions_content"> autoresize
4323
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
<el-col :span="8">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
4323
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
<el-col :span="8">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
91%
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
</el-row>
<datav-chart-bar
title="满意率排名"
sub-title="满意样本数/样本总数"
:data="data1"
/> />
<div class="flex tab-title flex center mt-16">
<div class="tab-title-item active">
分县市局
</div>
<div class="tab-title-item">局属单位</div>
</div>
</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>
@ -251,7 +165,7 @@ import changshaMap from "@/assets/data/changsha.json";
import * as echarts from "echarts/core"; import * as echarts from "echarts/core";
import moment from "moment/moment"; import moment from "moment/moment";
import {getCaseVerifData} from "@/api/datav"; import {getCaseVerifData} from "@/api/datav";
import {getAllGobalCount} from "@/api/data/basicScreen.ts"; import {getAllGobalCount, getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts";
const router = useRouter(); const router = useRouter();
@ -301,26 +215,12 @@ const option = {
], ],
}; };
const option1 = ref({ // 问题趋势线状图
const proTrend =ref({
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: [ data: [],
"9/10",
"9/11",
"9/12",
"9/13",
"9/14",
"9/15",
"9/16",
"9/17",
"9/18",
"9/19",
"9/20",
"9/21",
"9/22",
"9/23",
],
}, },
yAxis: { yAxis: {
type: "value", type: "value",
@ -329,14 +229,23 @@ const option1 = ref({
lineStyle: { lineStyle: {
color: "#193775", color: "#193775",
}, },
}
}, },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#6a7985'
}
}
}, },
series: [ series: [
{ {
type: "line", type: "line",
smooth: true, smooth: true,
label: { label: {
show: false, show: false
}, },
lineStyle: { lineStyle: {
color: "#28E6FF", color: "#28E6FF",
@ -354,10 +263,7 @@ const option1 = ref({
}, },
]), ]),
}, },
data: [ data: [],
2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
3000, 3100, 3100, 3100,
],
}, },
], ],
}); });
@ -399,7 +305,49 @@ function go() {
// region 机构问题排名 // region 机构问题排名
const activeOrgTab = ref("1"); const activeOrgTab = ref("1");
const fxsjlist = ref([]);
const jsdwlist = ref([]);
const ywzblist = ref([]);
const wtlxlist = ref([]);
// endregion
// region 环形图
// 业务类型占比
const zfbaPieOption = computed(() => {
return {
tooltip: {
trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: ywzblist.value,
},
],
};
});
// 问题类型占比
const wtlxPieOption = computed(() => {
return {
tooltip: {
trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: wtlxlist.value,
},
],
};
});
// endregion // endregion
// region 初始化数据 // region 初始化数据
@ -418,10 +366,16 @@ const time = ref([
]); ]);
function getData() { function getData() {
getAllGobalCount(time.value).then((res) => { getAllGobalCount(time.value).then((res) => {
console.log(res);
console.log(res.overview)
overview.value = res.overview; overview.value = res.overview;
fxsjlist.value = res.fxsjlist;
jsdwlist.value = res.jsdwlist;
ywzblist.value = res.ywzblist;
});
getGobalRecentlyTrendByMonth(new Date().getFullYear()).then((res) => {
proTrend.value.xAxis.data = res.monthList;
proTrend.value.series[0].data = res.totalList;
}); });
} }
@ -430,6 +384,7 @@ watch(time, () => {
}); });
onMounted(() => { onMounted(() => {
getData(); getData();
}); });
const colors = [ const colors = [

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

@ -136,9 +136,15 @@
</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">
<!-- <el-row class="mb-32">
<datav-tab-item label="枪支管理" name="1">
<datav-tabs
v-model="activeMailTabRight"
type="bottom-button"
>
<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">
@ -179,12 +185,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> --> </el-row>
<datav-tab-item label="枪支管理" name="1">
<datav-tabs
v-model="activeMailTabRight"
type="bottom-button"
>
<datav-tab-item label="分县市局" name="1"> <datav-tab-item label="分县市局" name="1">
<el-scrollbar height="300px"> <el-scrollbar height="300px">
<datav-chart-bar-mail <datav-chart-bar-mail
@ -192,7 +193,6 @@
size="large" size="large"
/> />
</el-scrollbar> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="局属单位" name="2"> <datav-tab-item label="局属单位" name="2">
<el-scrollbar height="300px"> <el-scrollbar height="300px">
@ -307,7 +307,7 @@
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
<!-- <datav-chart-bar <!-- <datav-chart-bar
title="问题数排名" title="问题数排名"
sub-title="问题数" sub-title="问题数"
:data="data2" :data="data2"

Write Preview
Loading…
Cancel
Save