Skip to content

F
founder_vue
Commit 8631cfad by liuguorong93
Options

Merge branch 'dev_gabjq' into dev_gabjq_dev2

parents aa471a04 1af574de
Showing with 550 additions and 75 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/dogMajor.vue
......@@ -5,7 +5,7 @@
</div>
<div class="dogMajor_co">
<div
style="width: 420px; height: 320px"
style="width: 420px; height: 320px;"
id="dogMajors"
></div>
</div>
......@@ -13,6 +13,8 @@
</template>
<script>
import "echarts-gl";
export default {
props: {
qzCount: {
......@@ -50,11 +52,16 @@ export default {
},
methods: {
getData() {
let index = 0;
for (let key in this.qzCount.major) {
this.seriesDatas.push({
name: key,
value: this.qzCount.major[key],
itemStyle: {
color: this.colorDatas[index],
},
});
index++;
}
setTimeout(() => {
this.drawEcharts();
......@@ -64,68 +71,299 @@ export default {
if (this.myChart) this.myChart.dispose();
this.myChart = this.$echarts.init(document.getElementById("dogMajors"));
let options = {
color: this.colorDatas,
tooltip: {
trigger: "item",
backgroundColor: "#FFFFFF",
padding: [12, 8],
extraCssText:
"box-shadow: 0px 8px 24px -8px rgba(0,0,0,0.08), 0px 16px 24px 0px rgba(0,0,0,0.08), 0px 8px 24px 0px rgba(0,0,0,0.08);",
textStyle: {
color: "#242424",
fontSize: 12,
let option = this.getPie3D(this.seriesDatas, 0.79);
this.myChart.setOption(option);
},
// 生成扇形的曲面参数方程
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
// 计算
const midRatio = (startRatio + endRatio) / 2;
const startRadian = startRatio * Math.PI * 2;
const endRadian = endRatio * Math.PI * 2;
const midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
// eslint-disable-next-line no-param-reassign
isSelected = false;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
// eslint-disable-next-line no-param-reassign
k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
const hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x(u, v) {
if (u < startRadian) {
return (
offsetX +
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y(u, v) {
if (u < startRadian) {
return (
offsetY +
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z(u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u) * h * 0.1;
}
// 当前图形的高度是Z根据h（每个value的值决定的）
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
},
getPie3D(pieData, internalDiameterRatio) {
let that = this;
let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let legendBfb = [];
let k = 1 - internalDiameterRatio;
pieData.sort((a, b) => {
return b.value - a.value;
});
// 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
//系统名称
name:
typeof pieData[i].name === "undefined"
? `series${i}`
: pieData[i].name,
type: "surface",
//是否为参数曲面（是）
parametric: true,
//曲面图网格线（否）上面一根一根的
wireframe: {
show: false,
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: k,
},
//设置饼图在容器中的位置(目前没发现啥用)
// center: ['50%', '100%']
};
//曲面的颜色、不透明度等样式。
if (typeof pieData[i].itemStyle != "undefined") {
let itemStyle = {};
typeof pieData[i].itemStyle.color != "undefined"
? (itemStyle.color = pieData[i].itemStyle.color)
: null;
typeof pieData[i].itemStyle.opacity != "undefined"
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
: null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
legendData = [];
legendBfb = [];
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value;
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = this.getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
false,
false,
k,
series[i].pieData.value
);
startValue = endValue;
let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
legendData.push({
name: series[i].name,
value: bfb,
});
legendBfb.push({
name: series[i].name,
value: bfb,
});
}
//(第二个参数可以设置你这个环形的高低程度)
let boxHeight = this.getHeight3D(series, 13); //通过传参设定3d饼/环的高度
// 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = {
//图例组件
legend: {
type: "scroll",
orient: "horizontal",
left: "center",
align: "left",
bottom: 30,
data: legendData,
//图例列表的布局朝向。
orient: "vertical",
right: "8%",
top: "13%",
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
itemGap: 15,
textStyle: {
fontSize: 12,
color: "#fff",
fontFamily: "Microsoft YaHei",
color: "#FFFFFF",
},
width: 250,
pageIconColor: "#fff",
pageIconInactiveColor: "#fff",
pageTextStyle: {
color: "#fff",
},
},
series: [
{
name: "工作犬专业方向统计",
type: "pie",
radius: "60%",
center: ["50%", "42%"],
label: {
show: false,
show: true,
icon: "circle",
//格式化图例文本（我是数值什么显示什么）
// formatter: function (name) {
// var target;
// for (var i = 0, l = pieData.length; i < l; i++) {
// if (pieData[i].name == name) {
// target = pieData[i].value;
// }
// }
// return `${name}: ${target}`;
// },
// 这个可以显示百分比那种（可以根据你想要的来配置）
formatter: function (param) {
let item = legendBfb.filter((item) => item.name == param)[0];
let bfs = that.fomatFloat(item.value * 100, 2) + "%";
// console.log(item.name);
return `${item.name} ${bfs}`;
},
emphasis: {
scale: false,
},
itemStyle: {
borderColor: "#fff",
borderWidth: 2,
//移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
tooltip: {
formatter: (params) => {
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
// let bfb = (
// (option.series[params.seriesIndex].pieData.endRatio -
// option.series[params.seriesIndex].pieData.startRatio) *
// 100
// ).toFixed(2);
let bfb = `${option.series[params.seriesIndex].pieData.value}`;
return (
`${params.seriesName}<br/>` +
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
`${bfb}`
);
}
},
data: this.seriesDatas,
},
],
//这个可以变形
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
//此处是修改样式的重点
grid3D: {
show: false,
boxHeight: boxHeight, //圆环的高度
//这是饼图的位置
top: "5%",
left: "-3%",
width: 250,
height: 250,
viewControl: {
//3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 30, //角度(这个很重要 调节角度的)
distance: 200, //调整视角到主体的距离，类似调整zoom(这是整体大小)
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
};
this.myChart.setOption(options);
return option;
},
//这是一个自定义计算的方法
fomatFloat(num, n) {
var f = parseFloat(num);
if (isNaN(f)) {
return false;
}
f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
var s = f.toString();
var rs = s.indexOf(".");
//判定如果是整数，增加小数点再补0
if (rs < 0) {
rs = s.length;
s += ".";
}
while (s.length <= rs + n) {
s += "0";
}
return s;
},
//获取3d丙图的最高扇区的高度
getHeight3D(series, height) {
series.sort((a, b) => {
return b.pieData.value - a.pieData.value;
});
return (height * 25) / series[0].pieData.value;
},
},
};
</script>
<style lang="scss" scoped>
* {
box-sizing: border-box;
}
.dogMajor {
&_title {
width: 400px;
......
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