Skip to content

F
founder_vue
Commit 8631cfad by liuguorong93
Options

Merge branch 'dev_gabjq' into dev_gabjq_dev2

parents aa471a04 1af574de
Showing with 267 additions and 30 deletions
package.json
......@@ -12,6 +12,7 @@
"core-js": "^3.6.5",
"driver.js": "^0.9.8",
"echarts": "^5.4.1",
"echarts-gl": "^2.0.9",
"element-ui": "^2.4.5",
"file-saver": "^2.0.5",
"jquery": "^3.6.0",
......
src/views/dataJq/dataV.vue
......@@ -25,9 +25,9 @@
<mapCount :qzCount="qzCount"></mapCount>
</div>
<div>
<!-- <mapBox></mapBox> -->
<mapBox></mapBox>
<!-- <mapBoxForBingTu></mapBoxForBingTu> -->
<mapBoxForZhuZhuangTu></mapBoxForZhuZhuangTu>
<!-- <mapBoxForZhuZhuangTu></mapBoxForZhuZhuangTu> -->
</div>
</div>
<div class="jqBoxS_con_rightCon">
......@@ -66,8 +66,8 @@ import dogMajor from "./dogMajor.vue";
import mapCount from "./mapCount.vue";
// 地图
import mapBox from "./mapBox.vue";
import mapBoxForBingTu from "./mapBoxForBingTu.vue";
import mapBoxForZhuZhuangTu from "./mapBoxForZhuZhuangTu.vue";
// import mapBoxForBingTu from "./mapBoxForBingTu.vue";
// import mapBoxForZhuZhuangTu from "./mapBoxForZhuZhuangTu.vue";
import { postRequest } from "@/api/dogView.js";
export default {
components: {
......@@ -79,8 +79,8 @@ export default {
dogMajor,
mapCount,
mapBox,
mapBoxForBingTu,
mapBoxForZhuZhuangTu,
// mapBoxForBingTu,
// mapBoxForZhuZhuangTu,
},
data() {
return {
......
src/views/dataJq/dogCount.vue
......@@ -147,7 +147,7 @@ export default {
// },
// },
itemStyle: {
borderRadius: "50%",
// borderRadius: "50%",
// normal: {
// //饼状图上的文本显示
// label: {
......
src/views/dataJq/dogPh.vue
......@@ -10,6 +10,29 @@
>
</div>
</div>
<div class="dogPh_centerNum">
<p class="top_t">人员总数</p>
<p class="bot_n">{{totalNum}}</p>
</div>
<ul class="dogPh_Ul">
<li
class="dogPh_Li spaceBetween"
v-for="(item, i) in seriesDatas"
:key="i"
>
<span>
<span
class="leftBg"
:style="`background: linear-gradient(${color2[i]}, ${color1[i]});`"
></span>
<span class="leftName ellipsis1">{{item.name}}</span>
</span>
<span>
<span class="rightNum ellipsis1">{{item.value}}</span>
<span class="rightBaiFenBi ellipsis1">{{(totalNum && item.value) ? ((item.value / totalNum) * 100).toFixed(0) : '0'}}%</span>
</span>
</li>
</ul>
</div>
</template>
......@@ -18,7 +41,11 @@ import { postRequest } from "@/api/dogView.js";
export default {
data() {
return {
color1: ["#7D40FF", "#9292C1", "#FF922D"],
color2: ["#02A4FF", "#9292C1", "#FF2D2E"],
seriesDatas: [],
totalNum: 0,
};
},
mounted() {
......@@ -27,6 +54,7 @@ export default {
methods: {
getData() {
this.seriesDatas = [];
this.totalNum = 0;
postRequest("/policeDogScreen/selectJwjsxlFlCount").then((res) => {
if (
res.code === 200 &&
......@@ -36,11 +64,28 @@ export default {
res.data.jwjsxlFl.length
) {
let datas = res.data.jwjsxlFl;
datas.forEach((item) => {
datas.forEach((item, index) => {
if (index >= 0 && index < 3) {
this.totalNum = this.totalNum + item.counts;
this.seriesDatas.push({
value: item.counts,
name: item.name,
itemStyle: {
//颜色渐变
color: new this.$echarts.graphic.LinearGradient(
1,
1,
1,
0, //(上-下 渐变)
[
{ offset: 0, color: this.color1[index] },
{ offset: 1, color: this.color2[index] },
]
),
},
});
}
});
this.setEcharts();
}
......@@ -48,7 +93,6 @@ export default {
},
setEcharts() {
let myChart = this.$echarts.init(document.getElementById("dogPhId"));
const colorList = ["#4D88FE", "#50CCCB", "#FFBF3C"];
let option = {
tooltip: {
trigger: "item",
......@@ -61,32 +105,31 @@ export default {
fontSize: 12,
},
},
legend: {
bottom: 10,
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
textStyle: {
fontSize: 12,
color: "#fff",
fontFamily: "Microsoft YaHei",
},
},
series: [
{
name: "技术人员序列统计",
type: "pie",
top: -30,
radius: "60%",
center: ["50%", "35%"],
radius: ["45%", "55%"],
avoidLabelOverlap: false,
// roseType: 'area',
label: {
show: false,
},
// labelLine: {
// show: true,
// normal: {
// lineStyle: {
// color: "rgba(255, 255, 255, 0.3)",
// },
// // smooth: 0.2,
// length: 30,
// },
// },
itemStyle: {
borderColor: "#fff",
borderWidth: 2,
color: function (params) {
return colorList[params.dataIndex];
},
borderRadius: "50%",
// borderWidth: 5,
// borderColor: "#060C1E",
},
data: this.seriesDatas,
},
......@@ -102,7 +145,18 @@ export default {
* {
box-sizing: border-box;
}
.spaceBetween {
display: flex;
justify-content: space-between;
}
.ellipsis1 {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.dogPh {
position: relative;
&_title {
width: 400px;
height: 36px;
......@@ -169,6 +223,68 @@ export default {
}
}
}
&_centerNum {
width: 70px;
height: 70px;
border-radius: 50%;
background: #131529;
position: absolute;
left: 50%;
top: 33%;
transform: translateX(-50%);
text-align: center;
padding: 10px 0;
.top_t {
font-size: 12px;
color: #ffffff;
}
.bot_n {
font-size: 24px;
line-height: 26px;
color: #ffffff;
font-family: DIN;
}
}
&_Ul {
position: absolute;
width: 70%;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
.dogPh_Li {
width: 100%;
margin: 4px 0;
position: relative;
span {
display: inline-block;
}
.leftBg {
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
left: 0;
top: 9px;
}
.leftName {
font-size: 14px;
color: #ffffff;
margin-left: 18px;
width: 120px;
}
.rightNum {
font-size: 14px;
color: #ffffff;
width: 70px;
}
.rightBaiFenBi {
font-size: 14px;
color: #ffffff;
width: 50px;
margin-left: 10px;
}
}
}
// 滚动条
*::-webkit-scrollbar {
/*滚动条整体样式*/
......
src/views/dataJq/mapBox.vue
......@@ -17,6 +17,38 @@
id="myEacherForMap"
style="width:66.08333rem;height: 50.3333rem"
></div>
<!-- 左下角信息 -->
<div
class="infoClass"
v-show="showBack && currentInfo && Object.keys(currentInfo).length"
>
<div class="topClass">
<span class="span01">{{currentInfo.name}}</span>
<span class="span02">{{currentInfo.count}}</span>
</div>
<ul class="botUl">
<li class="botLi">
<span class="left_span bg1"></span>
<span class="center_span">一级工作犬</span>
<span class="right_span">{{currentInfo.dognum1}}</span>
</li>
<li class="botLi">
<span class="left_span bg2"></span>
<span class="center_span">二级工作犬</span>
<span class="right_span">{{currentInfo.dognum2}}</span>
</li>
<li class="botLi">
<span class="left_span bg3"></span>
<span class="center_span">三级工作犬</span>
<span class="right_span">{{currentInfo.dognum3}}</span>
</li>
<li class="botLi">
<span class="left_span bg4"></span>
<span class="center_span">普通工作犬</span>
<span class="right_span">{{currentInfo.dognum4}}</span>
</li>
</ul>
</div>
</div>
</template>
......@@ -30,6 +62,8 @@ export default {
showBack: false,
loading: false,
currentInfo: {},
fileName: "china",
myChart: null,
colorDatas: [
......@@ -197,6 +231,27 @@ export default {
}
}
});
this.myChart.on("mouseover", async (param) => {
if (levelFlag === "2" || levelFlag === "3") {
if (this.dataArr && this.dataArr.length) {
this.dataArr.some((itemArr) => {
if (param.name.indexOf(itemArr.name) != -1) {
this.currentInfo = itemArr;
return true;
}
});
} else {
this.currentInfo = {};
}
} else {
this.currentInfo = {};
}
});
this.myChart.on("mouseout", async (param) => {
this.currentInfo = {};
});
}
});
},
......@@ -267,6 +322,9 @@ export default {
</script>
<style lang="scss" scoped>
* {
box-sizing: border-box;
}
.back {
position: absolute;
top: 20px;
......@@ -276,4 +334,66 @@ export default {
z-index: 999;
cursor: pointer;
}
.infoClass {
position: absolute;
bottom: 10px;
left: 0;
// width: 176px;
height: 154px;
background: #1d3e75;
border-radius: 5px;
padding: 12px 16px;
.topClass {
.span01 {
display: inline-block;
font-size: 16px;
color: #ffffff;
}
.span02 {
display: inline-block;
font-size: 16px;
color: #ffffff;
height: 16px;
line-height: 16px;
background: #537cc1;
border-radius: 4px;
padding: 0 3px;
margin-left: 8px;
}
}
.botUl {
.botLi {
span {
display: inline-block;
}
.left_span {
width: 10px;
height: 10px;
border-radius: 3px;
}
.bg1 {
background: rgb(255, 84, 84);
}
.bg2 {
background: rgb(255, 158, 84);
}
.bg3 {
background: rgb(49, 255, 162);
}
.bg4 {
background: rgb(49, 174, 255);
}
.center_span {
font-size: 14px;
color: #87b4e2;
margin-left: 10px;
}
.right_span {
font-size: 14px;
color: #ffffff;
margin-left: 10px;
}
}
}
}
</style>
src/views/poDogJobManage/components/poDogJobManageEdit.vue
......@@ -202,7 +202,7 @@
:prop="'propKaoHe' + index"
>
<template slot="label">
<span class="labelNameClass">考核分数</span>
<span class="labelNameClass">专业方向</span>
<span class="yuandianClass"></span>
<span class="numClass">{{ index + 1}}</span>
</template>
......@@ -480,7 +480,7 @@ export default {
this.sylbOptions = await getJsonDataApi("CODE_BASEDATA");
this.gzqdjOptions = await getJsonDataApi("CODE_GZQDJ");
this.jyjqOptions = await getJsonDataApi("CODE_SPECIES");
this.zyfxOptions = await getJsonDataApi("CODE_WORKINGDOGCLASSIFICA");
this.zyfxOptions = await getJsonDataApi("CODE_BASEDATA");
},
methods: {
resetPerNameAndUnitName() {
......
src/views/poDogJobManage/index.vue
......@@ -351,7 +351,7 @@ export default {
},
mounted() {},
async activated() {
this.zyfxOptions = await getJsonDataApi("CODE_WORKINGDOGCLASSIFICA");
this.zyfxOptions = await getJsonDataApi("CODE_BASEDATA");
this.gzqdjOptions = await getJsonDataApi("CODE_GZQDJ");
this.jyjqOptions = await getJsonDataApi("CODE_SPECIES");
this.genderOptions = await getJsonDataApi("CODE_DOG_GENDER");
......
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