Skip to content

F
founder_vue
Commit ec5c3842 by liuguorong93
Options

更新

parent f0a589e5
Showing with 315 additions and 263 deletions
src/views/dataJq/dataV.vue
......@@ -15,7 +15,7 @@
<div style="margin-top: 20px">
<dogAte></dogAte>
</div>
<!-- 一级工作犬犬种排行 -->
<!-- 技术人员序列统计 -->
<div style="margin-top: 20px">
<dogPh></dogPh>
</div>
......@@ -51,7 +51,7 @@ import headerCon from "./header.vue";
import dogCount from "./dogCount.vue";
// 工作犬年龄
import dogAte from "./dogAte.vue";
// 一级工作犬犬种排行
// 技术人员序列统计
import dogPh from "./dogPh.vue";
// 全国总数排行
import qgPhTop from "./qgPhTop.vue";
......@@ -60,8 +60,8 @@ import dogMajor from "./dogMajor.vue";
// 中间内容
import mapCount from "./mapCount.vue";
// 地图
import mapBox from './mapBox.vue'
import { postRequest } from '@/api/dogView.js'
import mapBox from "./mapBox.vue";
import { postRequest } from "@/api/dogView.js";
export default {
components: {
headerCon,
......@@ -71,12 +71,12 @@ export default {
qgPhTop,
dogMajor,
mapCount,
mapBox
mapBox,
},
data() {
return {
// 犬种数量统计
qzCount: {}
qzCount: {},
};
},
mounted() {
......@@ -85,54 +85,54 @@ export default {
window.addEventListener("resize", function () {
zoom("jqBox");
});
this.getQzCount()
this.getQzCount();
},
methods: {
// 犬种数量统计
getQzCount() {
postRequest('/policeDogScreen/qzCount').then(res => {
console.log(res)
postRequest("/policeDogScreen/qzCount").then((res) => {
// console.log(res);
if (res.code == 200) {
console.log(res.data)
this.qzCount = res.data
this.qzCount.workDog = []
this.qzCount.Grade = []
// console.log(res.data);
this.qzCount = res.data;
this.qzCount.workDog = [];
this.qzCount.Grade = [];
for (let item in res.data.workDogClass) {
this.qzCount.workDog.push({
name: item,
count: res.data.workDogClass[item]
})
count: res.data.workDogClass[item],
});
// 等级
if (item == '一级工作犬') {
if (item == "一级工作犬") {
this.qzCount.Grade[0] = {
name: item,
value: res.data.workDogClass[item]
}
value: res.data.workDogClass[item],
};
}
if (item == '二工作犬') {
if (item == "二工作犬") {
this.qzCount.Grade[1] = {
name: '二级工作犬',
value: res.data.workDogClass[item]
}
name: "二级工作犬",
value: res.data.workDogClass[item],
};
}
if (item == '三级工作犬') {
if (item == "三级工作犬") {
this.qzCount.Grade[2] = {
name: item,
value: res.data.workDogClass[item]
}
value: res.data.workDogClass[item],
};
}
if (item == '其他工作犬') {
if (item == "其他工作犬") {
this.qzCount.Grade[3] = {
name: item,
value: res.data.workDogClass[item]
}
value: res.data.workDogClass[item],
};
}
}
}
})
}
}
});
},
},
};
</script>
......
src/views/dataJq/dogCount.vue
<template>
<div class="dog">
<div class="dog_title">
<span>犬种数量统计</span>
<span>警用警犬数量统计</span>
</div>
<div class="dog_co">
<div class="dog_co_left">
<div style="width: 200px; height: 200px" id="dogCount"></div>
<div
style="width: 200px; height: 200px"
id="dogCount"
></div>
</div>
<div class="dog_co_right">
<div class="dog_co_right_one">
<div><span class="dog_co_right_one_left"></span>工作犬</div>
<div>{{qzCount.workingDog}}<span class="dog_co_right_one_nao">头</span></div>
</div>
<div class="dog_co_right_one" style="margin-top: 20px">
<div
class="dog_co_right_one"
style="margin-top: 20px"
>
<div>
<span
class="dog_co_right_one_left"
style="background: #fa654f"
></span
>退役犬
></span>退役犬
</div>
<div>0<span class="dog_co_right_one_nao">头</span></div>
</div>
<div class="dog_co_right_one" style="margin-top: 20px">
<div
class="dog_co_right_one"
style="margin-top: 20px"
>
<div>
<span
class="dog_co_right_one_left"
style="background: #ffc64e"
></span
>种犬
></span>种犬
</div>
<div>0<span class="dog_co_right_one_nao">头</span></div>
</div>
......@@ -42,8 +49,8 @@ export default {
props: {
qzCount: {
type: Object,
default: () => {}
}
default: () => {},
},
},
data() {
return {};
......@@ -146,7 +153,7 @@ export default {
// },
// },
itemStyle: {
borderRadius: '50%',
borderRadius: "50%",
// normal: {
// //饼状图上的文本显示
// label: {
......
src/views/dataJq/dogMajor.vue
......@@ -4,26 +4,29 @@
<span>工作犬专业方向top5统计</span>
</div>
<div class="dogMajor_co">
<div style="width: 420px; height: 320px" id="dogMajors"></div>
<div
style="width: 420px; height: 320px"
id="dogMajors"
></div>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
import echarts from "echarts";
export default {
props: {
qzCount: {
type: Object,
default: () => {}
}
default: () => {},
},
},
data() {
return {};
},
methods: {
xyrzyRender(_name, _value) {
console.log('_name, _value',_name)
// console.log('_name, _value',_name)
//案件性质发案分析
// debugger;
// 基于准备好的dom，初始化echarts实例
......@@ -42,7 +45,7 @@ export default {
show: true,
interval: 0,
// rotate: '-60px',
margin: 6
margin: 6,
},
axisLine: {
lineStyle: {
......@@ -77,22 +80,27 @@ export default {
normal: {
//柱体的颜色
//右，下，左，上（1，0，0，0）表示从正右开始向左渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#4EBBFF',
},
{
offset: 0.5,
color: '#3a749b',
},
{
offset: 1,
color: '#0c2b47',
},
],
false
),
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#4EBBFF",
},
{
offset: 0.5,
color: "#3a749b",
},
{
offset: 1,
color: "#0c2b47",
},
],
false
),
label: {
formatter: "{c}",
show: true,
......@@ -100,8 +108,8 @@ export default {
textStyle: {
fontWeight: "bolder",
fontSize: "12",
color: "#fff"
}
color: "#fff",
},
},
},
},
......@@ -120,13 +128,13 @@ export default {
mounted() {
setTimeout(() => {
let _name = [],
_value = []
_value = [];
for (let item in this.qzCount.major) {
_name.push(item)
_value.push(this.qzCount.major[item])
_name.push(item);
_value.push(this.qzCount.major[item]);
}
this.xyrzyRender(_name, _value);
},1000)
}, 1000);
},
};
</script>
......
src/views/dataJq/dogPh.vue
<template>
<div class="dogPh">
<div class="dogPh_title">
<span>一级工作犬犬种排行</span>
<span>技术人员序列统计</span>
</div>
<div class="dogPh_co">
<div class="dogPh_co_ov">
......@@ -12,8 +12,7 @@
>
<div class="dogPh_co_ov_for_name">{{ item.name }}</div>
<div class="dogPh_co_ov_for_value">
<span class="dogPh_co_ov_for_value_count">{{ item.count }}</span
><span class="dogPh_co_ov_for_value_tou">头</span>
<span class="dogPh_co_ov_for_value_count">{{ item.count }}</span><span class="dogPh_co_ov_for_value_tou">头</span>
</div>
</div>
</div>
......@@ -22,7 +21,7 @@
</template>
<script>
import { postRequest } from '@/api/dogView.js'
import { postRequest } from "@/api/dogView.js";
export default {
data() {
return {
......@@ -31,17 +30,17 @@ export default {
},
methods: {},
mounted() {
postRequest('/policeDogScreen/oneworkDogqz').then(res => {
postRequest("/policeDogScreen/oneworkDogqz").then((res) => {
if (res.data) {
for (let item in res.data.一级工作犬犬种排行) {
this.dogRankingList.push({
name: item,
count: res.data.一级工作犬犬种排行[item]
})
count: res.data.一级工作犬犬种排行[item],
});
}
console.log(this.dogRankingList,'this.dogRankingList')
// console.log(this.dogRankingList, "this.dogRankingList");
}
})
});
},
};
</script>
......
src/views/dataJq/header.vue
<template>
<div class="hearder">
<img class="hearder_one" src="./img/title.png" alt="" />
<img
class="hearder_one"
src="./img/title.png"
alt=""
/>
<div class="hearder_two">
<div class="hearder_two_input">
<el-input v-model="input" placeholder="综合检索、输入查询条件"></el-input>
<el-input
v-model="input"
placeholder="综合检索、输入查询条件"
></el-input>
</div>
<div class="hearder_two_button">检索</div>
</div>
<div class="hearder_three">
<span class="hearder_three_left" @click="getSy">系统首页</span>
<span
class="hearder_three_left"
@click="getSy"
>系统首页</span>
<span class="hearder_three_right">
<img src="../../assets/img/tb1.png" alt="">
<img
src="../../assets/img/tb1.png"
alt=""
>
</span>
</div>
</div>
......
src/views/dataJq/mapCount.vue
......@@ -66,8 +66,7 @@
? '#31FFA2'
: '#31AEFF',
}"
>{{ item.value }}</span
><span class="mapCount_bottom_div_right_tou">头</span>
>{{ item.value }}</span><span class="mapCount_bottom_div_right_tou">头</span>
</div>
</div>
</div>
......@@ -79,16 +78,16 @@ export default {
props: {
qzCount: {
type: Object,
default: () => {}
}
default: () => {},
},
},
data() {
return {
dogList: []
dogList: [],
};
},
mounted() {},
methods: {}
methods: {},
};
</script>
......
src/views/dataJq/qgPhTop.vue
......@@ -26,13 +26,15 @@
: '#31AEFF',
}"
class="yuan"
></span
><span>{{ item.label }}</span>
></span><span>{{ item.label }}</span>
</el-option>
</el-select>
</div>
<div class="qgPhTop_title">
<span>全国总数排行<img src="./img/top10.png" alt="" /></span>
<span>全国总数排行<img
src="./img/top10.png"
alt=""
/></span>
</div>
<div class="qgPhTop_co">
<div class="qgPhTop_co_on">
......@@ -45,13 +47,11 @@
<span v-if="index <= 8">0</span>{{ index + 1 }}
</div>
<div class="qgPhTop_co_on_for_name">{{ item.name }}</div>
<div
:class="
<div :class="
index == 0 || index == 1 || index == 2
? 'qgPhTop_co_on_for_xians'
: 'qgPhTop_co_on_for_xian'
"
>
">
<el-slider
:max="10000"
v-model="value3"
......@@ -66,8 +66,7 @@
}"
class="qgPhTop_co_on_for_count"
>
<span>{{ item.count }}</span
><span class="qgPhTop_co_on_for_count_tou">头</span>
<span>{{ item.count }}</span><span class="qgPhTop_co_on_for_count_tou">头</span>
</div>
</div>
</div>
......@@ -78,7 +77,7 @@
<script>
// import axios from 'axios';
// export let baseUrl = '/api'
import { jsonRequest } from '@/api/dogView.js'
import { jsonRequest } from "@/api/dogView.js";
export default {
data() {
return {
......@@ -148,25 +147,25 @@ export default {
},
methods: {
rankTen(e) {
jsonRequest('/homePage/getQgDogtop10',{
trainingLevelId: e
}).then(res => {
jsonRequest("/homePage/getQgDogtop10", {
trainingLevelId: e,
}).then((res) => {
if (res.code == 200) {
this.qgLsit = res.data.rows.map(item => {
this.qgLsit = res.data.rows.map((item) => {
return {
name: item.dwName,
count: item.dognum
}
})
count: item.dognum,
};
});
}
})
});
},
onSelect(e) {
this.rankTen(e)
}
this.rankTen(e);
},
},
mounted() {
this.rankTen()
this.rankTen();
},
};
</script>
......@@ -426,18 +425,18 @@ export default {
// }
</style>
<style lang="scss">
.qgPhTop_co_on_for_name{
.qgPhTop_co_on_for_name {
white-space: nowrap;
}
.qgPhTopSelect{
border: 1px solid #456296!important;
background: none!important;
.qgPhTopSelect {
border: 1px solid #456296 !important;
background: none !important;
}
.qgPhTopSelect .popper__arrow{
border-bottom-color: transparent!important
.qgPhTopSelect .popper__arrow {
border-bottom-color: transparent !important;
}
.qgPhTopSelect .popper__arrow::after {
content: '';
content: "";
border-width: 0px !important;
}
.qgPhTopSelect .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view {
......@@ -448,14 +447,22 @@ export default {
color: #dbdbdb !important;
line-height: 19px;
border-radius: 4px;
border: 0!important;
border: 0 !important;
top: 107px !important;
}
.qgPhTopSelect .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item.hover{
color: #8B9FC2;
background: #31589C;
.qgPhTopSelect
.el-scrollbar
.el-select-dropdown__wrap
.el-scrollbar__view
.el-select-dropdown__item.hover {
color: #8b9fc2;
background: #31589c;
}
.qgPhTopSelect .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item{
color: #8B9FC2
.qgPhTopSelect
.el-scrollbar
.el-select-dropdown__wrap
.el-scrollbar__view
.el-select-dropdown__item {
color: #8b9fc2;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment