|
|
|
|
@ -38,10 +38,8 @@
|
|
|
|
|
<span style="margin-left: -25px">反馈举报人</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div id="processRotate"></div> -->
|
|
|
|
|
<!-- <div class="processCenter">
|
|
|
|
|
|
|
|
|
|
</div> -->
|
|
|
|
|
<div id="processRotate"></div>
|
|
|
|
|
<div class="processCenter"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="section">
|
|
|
|
|
@ -663,8 +661,8 @@ export default {
|
|
|
|
|
radius: ["45%", "60%"],
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
length: 30,
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
length: 60,
|
|
|
|
|
fontSize: 26,
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
@ -672,6 +670,7 @@ export default {
|
|
|
|
|
formatter: "{b}{c} ",
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
fontSize: 28,
|
|
|
|
|
rich: {
|
|
|
|
|
a: {
|
|
|
|
|
color: "#6E7079",
|
|
|
|
|
@ -686,8 +685,9 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
b: {
|
|
|
|
|
color: "#4C5058",
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
fontStyle: {
|
|
|
|
|
fontSize: 32,
|
|
|
|
|
},
|
|
|
|
|
lineHeight: 33,
|
|
|
|
|
},
|
|
|
|
|
per: {
|
|
|
|
|
@ -696,6 +696,11 @@ export default {
|
|
|
|
|
padding: [3, 4],
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
},
|
|
|
|
|
c: {
|
|
|
|
|
fontStyle: {
|
|
|
|
|
fontSize: 32,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: this.pieData,
|
|
|
|
|
@ -703,12 +708,16 @@ export default {
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
length: 30,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
lineStyle: {
|
|
|
|
|
width: 2,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "outside",
|
|
|
|
|
formatter: "{b}{c} ",
|
|
|
|
|
fontSize: 32,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
rich: {
|
|
|
|
|
@ -725,7 +734,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
b: {
|
|
|
|
|
color: "#4C5058",
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
fontSize: 26,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
lineHeight: 33,
|
|
|
|
|
},
|
|
|
|
|
@ -752,8 +761,8 @@ export default {
|
|
|
|
|
style: {
|
|
|
|
|
width: 60,
|
|
|
|
|
height: 60,
|
|
|
|
|
x: -5,
|
|
|
|
|
y: -5,
|
|
|
|
|
x: 15,
|
|
|
|
|
y: 15,
|
|
|
|
|
image: require("@/assets/sentimeent/警告.png"),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
@ -761,8 +770,8 @@ export default {
|
|
|
|
|
type: "image",
|
|
|
|
|
z: 99,
|
|
|
|
|
style: {
|
|
|
|
|
width: 100,
|
|
|
|
|
height: 100,
|
|
|
|
|
width: 140,
|
|
|
|
|
height: 140,
|
|
|
|
|
x: -25,
|
|
|
|
|
y: -25,
|
|
|
|
|
image: require("@/assets/sentimeent/椭圆.png"),
|
|
|
|
|
@ -776,111 +785,6 @@ export default {
|
|
|
|
|
|
|
|
|
|
echartsJump(myChart, optionSecond);
|
|
|
|
|
},
|
|
|
|
|
// 生成图例项
|
|
|
|
|
generateLegendItems() {
|
|
|
|
|
// 色彩映射（与饼图扇区颜色对应）
|
|
|
|
|
const colorMap = ["#37a4ff", "#00ffde", "#ff7e2b", "#fbe84f"];
|
|
|
|
|
|
|
|
|
|
// 计算总和，用于百分比计算
|
|
|
|
|
const total = this.pieData.reduce((sum, item) => sum + item.value, 0);
|
|
|
|
|
|
|
|
|
|
// 循环创建图例项
|
|
|
|
|
return this.pieData.map((item, index) => {
|
|
|
|
|
// 计算百分比
|
|
|
|
|
const percent = ((item.value / total) * 100).toFixed(1);
|
|
|
|
|
|
|
|
|
|
// 计算位置 (每个图例宽度大约190px，包括间距)
|
|
|
|
|
const left = index * 180;
|
|
|
|
|
|
|
|
|
|
// 创建图例组
|
|
|
|
|
const legendItem = {
|
|
|
|
|
type: "group",
|
|
|
|
|
left: left,
|
|
|
|
|
top: "85%",
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
// 内部深色背景
|
|
|
|
|
type: "rect",
|
|
|
|
|
z: 91,
|
|
|
|
|
shape: {
|
|
|
|
|
x: 2,
|
|
|
|
|
y: 2,
|
|
|
|
|
width: 166,
|
|
|
|
|
height: 61,
|
|
|
|
|
r: 0,
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
backgroundImage: `url(${require("@/assets/sentimeent/" +
|
|
|
|
|
(item.name === "小程序" ? "其他" : item.name) +
|
|
|
|
|
".png")})`,
|
|
|
|
|
backgroundSize: "100% 100%",
|
|
|
|
|
// stroke: 'transparent'
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
// 百分比文字
|
|
|
|
|
type: "text",
|
|
|
|
|
z: 95,
|
|
|
|
|
left: 40,
|
|
|
|
|
top: 10,
|
|
|
|
|
style: {
|
|
|
|
|
text: percent + "%",
|
|
|
|
|
fill: colorMap[index],
|
|
|
|
|
fontSize: 24,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
fontFamily: "Arial",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
// 描述文字
|
|
|
|
|
type: "text",
|
|
|
|
|
z: 95,
|
|
|
|
|
left: 85,
|
|
|
|
|
top: 35,
|
|
|
|
|
style: {
|
|
|
|
|
text: item.name,
|
|
|
|
|
fill: "#ffffff",
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 为"无效"类型添加特殊的红圈标注
|
|
|
|
|
if (item.name === "无效" && this.showNotifications) {
|
|
|
|
|
legendItem.children.push(
|
|
|
|
|
{
|
|
|
|
|
type: "circle",
|
|
|
|
|
z: 100,
|
|
|
|
|
shape: {
|
|
|
|
|
cx: 160,
|
|
|
|
|
cy: -25,
|
|
|
|
|
r: 20,
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
fill: "#ff3131",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: "text",
|
|
|
|
|
z: 101,
|
|
|
|
|
left: 141,
|
|
|
|
|
top: -33,
|
|
|
|
|
style: {
|
|
|
|
|
text: "3.44%",
|
|
|
|
|
fill: "#ffffff",
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
fontFamily: "Arial",
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return legendItem;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 定时器旋转+字体颜色变
|
|
|
|
|
reportingProcessTimer() {
|
|
|
|
|
let index = 0;
|
|
|
|
|
@ -1274,7 +1178,9 @@ export default {
|
|
|
|
|
height: calc(100% - 76px);
|
|
|
|
|
background: url("~@/assets/sentimeent/举报流程环形图.png") no-repeat
|
|
|
|
|
center,
|
|
|
|
|
url("~@/assets/sentimeent/举报流程(环形中间).png") no-repeat center;
|
|
|
|
|
url("~@/assets/sentimeent/举报流程(环型).png") no-repeat center,
|
|
|
|
|
|
|
|
|
|
url("~@/assets/sentimeent/举报流程(中间).png") no-repeat center;
|
|
|
|
|
// background-size: 430px 410px, 215px 210px;
|
|
|
|
|
.processTitle {
|
|
|
|
|
width: 90px;
|
|
|
|
|
@ -1292,6 +1198,7 @@ export default {
|
|
|
|
|
#feffff 0%,
|
|
|
|
|
rgba(111, 226, 251, 1) 100%
|
|
|
|
|
);
|
|
|
|
|
background: url("~@/assets/sentimeent/举报流程(环型).png") no-repeat center;
|
|
|
|
|
background-clip: text;
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
@ -1315,18 +1222,7 @@ export default {
|
|
|
|
|
text-transform: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
#processRotate {
|
|
|
|
|
top: 86px;
|
|
|
|
|
left: 213px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 259px;
|
|
|
|
|
width: 259px;
|
|
|
|
|
background: url("~@/assets/ecosphere/高亮箭头.png") no-repeat;
|
|
|
|
|
transform-origin: center;
|
|
|
|
|
transition: transform 0.5s ease-in 0s;
|
|
|
|
|
}
|
|
|
|
|
@keyframes rotate {
|
|
|
|
|
}@keyframes rotate {
|
|
|
|
|
0% {
|
|
|
|
|
transform: rotateZ(0deg);
|
|
|
|
|
transform-origin: center;
|
|
|
|
|
@ -1380,16 +1276,27 @@ export default {
|
|
|
|
|
transform-origin: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.processCenter {
|
|
|
|
|
#processRotate {
|
|
|
|
|
top: 180px;
|
|
|
|
|
left: 350px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 30%;
|
|
|
|
|
left: 39%;
|
|
|
|
|
width: 180px;
|
|
|
|
|
height: 180px;
|
|
|
|
|
background: url("~@/assets/sentimeent/举报流程(环形中间).png")
|
|
|
|
|
no-repeat center;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
height: 240px;
|
|
|
|
|
width: 140px;
|
|
|
|
|
background: url("~@/assets/sentimeent/举报流程（旋转高亮）.png") no-repeat;
|
|
|
|
|
transform-origin: center;
|
|
|
|
|
transition: transform 0.5s ease-in 0s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// .processCenter {
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// top: 30%;
|
|
|
|
|
// left: 39%;
|
|
|
|
|
// width: 240px;
|
|
|
|
|
// height: 240px;
|
|
|
|
|
// background: url("~@/assets/sentimeent/举报流程(环形中间).png")
|
|
|
|
|
// no-repeat center;
|
|
|
|
|
// background-size: 100% 100%;
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
