ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

update

Browse Source
master
loveflow 12 months ago
parent 04c0f7ad21
commit a2f7f22a1c
15 changed files with 210 additions and 142 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/images/topic/dtpie.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

2
src/loveflow/components/menu/aside.vue
Unescape View File

@ -56,7 +56,7 @@ export default {
} }
} }
} }
console.log(this.menuList); //console.log(this.menuList);
}, },
// 点击跳转路由 // 点击跳转路由
clickMenu(val) { clickMenu(val) {

2
src/loveflow/components/menu/head.vue
Unescape View File

@ -116,7 +116,7 @@ export default {
}); });
} }
} }
console.log(this.menuList); //console.log(this.menuList);
}, },
handleSelect(key) { handleSelect(key) {
sessionStorage.setItem("activeIndex", key); sessionStorage.setItem("activeIndex", key);

55
src/loveflow/mixins/tableListMixins.js
Unescape View File

@ -41,15 +41,60 @@ export const tableListMixins = {
let params = this.getQueryParams(); let params = this.getQueryParams();
//模拟接口返回数据总数total //模拟接口返回数据总数total
let total = 60; let total = 40;
this.ipagination.total = total; this.ipagination.total = total;
console.log(this.ipagination);
//console.log(params); let nameArr = [
"杨怡伶",
"林亚蓉",
"李家伟",
"陈皓茜",
"杨郁婷",
"张旺茹",
"李彦志",
"张雅玫",
"郭育维",
"吴兰木",
"江松兰",
"吴淑霞",
"许育海",
"赖雅婷",
"谢宜恩",
"储世昌",
"张雅泰",
"周左达",
"林馨仪",
"史怡静",
"苏思翰",
"赵美绍",
"黄崇舜",
"杨季生",
"陈一柏",
"杨信宏",
"叶忠翰",
"林子竹",
"黄千倩",
"蔡冠宇",
"张玉萍",
"丁宜芳",
"谢伟元",
"林婉婷",
"刘冠良",
"侯盈如",
"王薇宣",
"臧杰良",
"陈雅惠",
"叶依婷",
];
for (let i = 0; i < params.pageSize; i++) { console.log(nameArr.length);
let nameIndex = (this.ipagination.currentPage - 1) * 10;
for (let i = 0; i < 40; i++) {
this.dataSource.push({ this.dataSource.push({
id: params.pageNo + "_" + i, id: i + 1,
name: "姓名_" + params.pageNo, name: nameArr[nameIndex + i],
card: "32032119879876321" + i, card: "32032119879876321" + i,
phone: "186678879" + i, phone: "186678879" + i,
cmy: "测试公司名称" + i, cmy: "测试公司名称" + i,

40
src/views/enterpriseTopic/components/dPieTwo.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<div class="dpiePanel"> <div class="dpiePanel" id="dpieWrap">
<div class="dpieLegend"> <div class="dpieLegend">
<div class="dpieRow" v-for="item in data" :key="item.name"> <div class="dpieRow" v-for="item in data" :key="item.name">
<div class="flex-center"> <div class="flex-center">
@ -13,7 +13,13 @@
</div> </div>
</div> </div>
<div class="flex-center" style="flex: 1"> <div class="flex-center" style="flex: 1">
<div class="dpiebg"> <div
class="dpiebg"
:style="{
height: parseInt(viewH) + 'px',
width: 2 * viewH + 'px',
}"
>
<div ref="dpieWrapRef" class="dpieWrap"></div> <div ref="dpieWrapRef" class="dpieWrap"></div>
</div> </div>
</div> </div>
@ -25,6 +31,7 @@ import "echarts-gl";
export default { export default {
data() { data() {
return { return {
fontSize: 12,
data: [ data: [
{ {
name: "竞技体育用枪", name: "竞技体育用枪",
@ -49,20 +56,34 @@ export default {
}, },
], ],
total: 1, total: 1,
viewH: 1,
}; };
}, },
created() {},
mounted() { mounted() {
this.total = 1; this.total = 1;
for (let i = 0; i < this.data.length; i++) { for (let i = 0; i < this.data.length; i++) {
this.total += this.data[i].value; this.total += this.data[i].value;
} }
let temp = this.getHeight();
let height = parseInt(temp / 4);
this.viewH = 2 * height;
console.log(height);
this.fontSize = 12;
if (height < 30) {
this.fontSize = 8;
}
if (height > 40) {
this.fontSize = 14;
}
setTimeout(() => {
this.setOption(); this.setOption();
}, 500);
}, },
methods: { methods: {
setOption() { setOption() {
let optionsData = this.data;
let hoveredIndex = "";
let chartDom = this.$refs["dpieWrapRef"]; let chartDom = this.$refs["dpieWrapRef"];
let myChart = echarts.init(chartDom); let myChart = echarts.init(chartDom);
const getPie3D = (pieData, internalDiameterRatio) => { const getPie3D = (pieData, internalDiameterRatio) => {
@ -276,6 +297,10 @@ export default {
}); });
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
getHeight() {
let div = document.getElementById("dpieWrap");
return div.clientHeight;
},
}, },
watch: { watch: {
chartObj: { chartObj: {
@ -295,8 +320,8 @@ export default {
height: 100%; height: 100%;
.dpieLegend { .dpieLegend {
position: absolute; position: absolute;
top: 100px;
display: flex; display: flex;
bottom: vw(10);
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -305,7 +330,6 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 8px;
width: 150px; width: 150px;
//background-color: rgba(108, 128, 151, 0.1); //background-color: rgba(108, 128, 151, 0.1);
.dpieIcon { .dpieIcon {
@ -327,8 +351,8 @@ export default {
} }
} }
.dpieWrap { .dpieWrap {
width: 160px; width: 100%;
height: 80px; height: 100%;
} }
.dpiebg { .dpiebg {
margin-top: vw(14); margin-top: vw(14);

69
src/views/enterpriseTopic/components/pieFive.vue
Unescape View File

@ -18,6 +18,7 @@ export default {
data() { data() {
return { return {
option: {}, option: {},
fontSize: 12,
}; };
}, },
mounted() { mounted() {
@ -26,8 +27,15 @@ export default {
methods: { methods: {
setOption() { setOption() {
let temp = this.getHeight(); let temp = this.getHeight();
let height = parseInt(temp / 2) - 20; let height = parseInt(temp / 4);
//console.log(height); console.log(height);
this.fontSize = 12;
if (height < 30) {
this.fontSize = 8;
}
if (height > 40) {
this.fontSize = 14;
}
let total = 0; let total = 0;
let data = []; let data = [];
let barChartList = this.chartObj.data; let barChartList = this.chartObj.data;
@ -72,40 +80,18 @@ export default {
tooltip: { tooltip: {
show: false, show: false,
}, },
title: [
{
text: "放射源总数",
top: 44,
textAlign: "center",
left: "48%",
textStyle: {
color: "#D0DEEE",
fontSize: 10,
},
},
{
text: total,
top: 60,
textAlign: "center",
left: "48%",
textStyle: {
fontWeight: "400",
color: "#92E0FF",
fontSize: 18,
},
},
],
legend: { legend: {
data: legend, data: legend,
orient: "vertical", orient: "vertical",
bottom: 20, bottom: parseInt(height / 2),
icon: "diamond", icon: "diamond",
left: "center", left: "center",
width: "100%", width: "100%",
height: 40, height: 40,
itemHeight: 8, itemHeight: 8,
itemWidth: 8, itemWidth: 8,
itemGap: 10, itemGap: parseInt(this.fontSize / 2),
padding: 0, padding: 0,
//backgroundColor: "rgba(108,128,151,0.2)", //backgroundColor: "rgba(108,128,151,0.2)",
textStyle: { textStyle: {
@ -129,7 +115,7 @@ export default {
formatter: function (name) { formatter: function (name) {
const item = barChartList.filter((item) => item.name === name)[0]; const item = barChartList.filter((item) => item.name === name)[0];
let rate = ((100 * item.value) / total).toFixed(0); let rate = ((100 * item.value) / total).toFixed(0);
console.log(rate); //console.log(rate);
return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`; return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`;
}, },
}, },
@ -140,8 +126,8 @@ export default {
type: "image", type: "image",
style: { style: {
image: bgImg, image: bgImg,
width: 80, width: 2 * height - 20,
height: 80, height: 2 * height - 20,
zIndex: 1, zIndex: 1,
}, },
left: "center", left: "center",
@ -153,18 +139,31 @@ export default {
{ {
name: this.chartObj.name, name: this.chartObj.name,
type: "pie", type: "pie",
radius: [38, 48], radius: [height - 8, height],
center: ["center", 60], center: ["center", height + 10],
clockWise: false, clockWise: false,
hoverAnimation: false, hoverAnimation: false,
itemStyle: {}, itemStyle: {},
label: { label: {
show: false, show: true,
position: "right", position: "center",
rich: {
label: {
color: "#D0DEEE",
fontSize: 10,
},
value: {
padding: [4, 0, 0, 0],
color: "#92E0FF",
fontSize: 12,
},
},
formatter: `{label|放射源总数}\n{value|${total}}`,
}, },
emphasis: { emphasis: {
label: { label: {
show: false, show: true,
formatter: `{label|放射源总数}\n{value|${total}}`,
}, },
}, },
labelLine: { labelLine: {

6
src/views/enterpriseTopic/components/pieFour.vue
Unescape View File

@ -47,7 +47,7 @@ export default {
{ {
// name: '访问来源1', // name: '访问来源1',
type: "pie", type: "pie",
radius: ["50%", "62%"], radius: ["45%", "56%"],
center: ["50%", "45%"], center: ["50%", "45%"],
data: [ data: [
{ {
@ -79,7 +79,7 @@ export default {
// name: '访问来源2', // name: '访问来源2',
type: "pie", type: "pie",
showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。 showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
radius: ["50%", "62%"], radius: ["45%", "56%"],
avoidLabelOverlap: true, // 标签重叠时进行调整 avoidLabelOverlap: true, // 标签重叠时进行调整
center: ["50%", "45%"], center: ["50%", "45%"],
data: [ data: [
@ -138,7 +138,7 @@ export default {
}, },
c_style: { c_style: {
fontSize: 14, fontSize: 14,
fontWeight: 500, fontWeight: 400,
color: "#D0DEEE", color: "#D0DEEE",
}, },
}, },

6
src/views/enterpriseTopic/components/pieOne.vue
Unescape View File

@ -31,17 +31,17 @@ export default {
show: true, // 是否显示 show: true, // 是否显示
text: this.chartObj.name, text: this.chartObj.name,
textStyle: { textStyle: {
fontSize: 14, fontSize: 12,
color: "#D0DEEE", color: "#D0DEEE",
}, },
subtextStyle: { subtextStyle: {
fontSize: 16, fontSize: 14,
fontWeight: 500, fontWeight: 500,
lineHeight: 10, lineHeight: 10,
color: "#E3FEFF", color: "#E3FEFF",
}, },
left: "center", left: "center",
top: "36%", top: "38%",
}, },
series: [ series: [
{ {

27
src/views/enterpriseTopic/components/pieThree.vue
Unescape View File

@ -23,6 +23,9 @@ export default {
}, },
methods: { methods: {
setOption() { setOption() {
let temp = this.getHeight();
let height = parseInt(temp / 5);
console.log(height);
let point = this.chartObj.point; //环形图的具体 百分比 let point = this.chartObj.point; //环形图的具体 百分比
let total = this.chartObj.total; let total = this.chartObj.total;
@ -35,15 +38,9 @@ export default {
show: true, // 是否显示 show: true, // 是否显示
text: this.chartObj.name, text: this.chartObj.name,
textStyle: { fontSize: 12, color: "#D0DEEE" }, textStyle: { fontSize: 12, color: "#D0DEEE" },
/* subtextStyle: {
fontSize: 18,
fontWeight: 500,
lineHeight: 10,
color: "#E3FEFF",
}, */
textAlign: "center", textAlign: "center",
left: "47%", left: "47%",
top: 84, top: 2 * height + 16,
}, },
color: this.chartObj.color, color: this.chartObj.color,
graphic: { graphic: {
@ -52,12 +49,12 @@ export default {
type: "image", type: "image",
style: { style: {
image: this.chartObj.icon, image: this.chartObj.icon,
width: 120, width: 4 * height,
height: 120, height: 4 * height,
zIndex: 1, zIndex: 1,
}, },
left: "center", left: "center",
top: -15, top: 8-height,
}, },
], ],
}, },
@ -65,8 +62,8 @@ export default {
{ {
// name: '访问来源1', // name: '访问来源1',
type: "pie", type: "pie",
radius: [25, 30], radius: [height - 6, height],
center: ["center", 45], center: ["center", height + 8],
data: [ data: [
{ {
value: total, //对应显示的部分数据即100% value: total, //对应显示的部分数据即100%
@ -92,14 +89,13 @@ export default {
// name: '访问来源2', // name: '访问来源2',
type: "pie", type: "pie",
showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。 showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
radius: [25, 30], radius: [height - 6, height],
center: ["center", 45], center: ["center", height + 8],
avoidLabelOverlap: true, // 标签重叠时进行调整 avoidLabelOverlap: true, // 标签重叠时进行调整
data: [ data: [
{ {
value: total, value: total,
itemStyle: { itemStyle: {
normal: {
borderRadius: 15, //圆角 borderRadius: 15, //圆角
color: { color: {
// 设置渐变色 // 设置渐变色
@ -117,7 +113,6 @@ export default {
}, },
}, },
}, },
},
{ {
value: total, //百分比 value: total, //百分比

70
src/views/enterpriseTopic/components/pieTwo.vue
Unescape View File

@ -18,6 +18,7 @@ export default {
data() { data() {
return { return {
option: {}, option: {},
fontSize: 12,
}; };
}, },
mounted() { mounted() {
@ -26,8 +27,15 @@ export default {
methods: { methods: {
setOption() { setOption() {
let temp = this.getHeight(); let temp = this.getHeight();
let height = parseInt(temp / 2) - 20; let height = parseInt(temp / 4);
//console.log(height); console.log(height);
this.fontSize = 12;
if (height < 30) {
this.fontSize = 8;
}
if (height > 40) {
this.fontSize = 14;
}
let total = 0; let total = 0;
let data = []; let data = [];
let barChartList = this.chartObj.data; let barChartList = this.chartObj.data;
@ -72,38 +80,15 @@ export default {
tooltip: { tooltip: {
show: false, show: false,
}, },
title: [
{
text: "总数量",
top: "38%",
textAlign: "center",
left: 68,
textStyle: {
color: "#D0DEEE",
fontSize: 12,
},
},
{
text: total,
top: "48%",
textAlign: "center",
left: 66,
textStyle: {
fontWeight: "400",
color: "#92E0FF",
fontSize: 22,
},
},
],
legend: { legend: {
data: legend, data: legend,
orient: "vertical", orient: "vertical",
top: "center", top: "center",
icon: "diamond", icon: "diamond",
right: "5%", right: height - 10,
itemHeight: 8, itemHeight: 8,
itemWidth: 8, itemWidth: 8,
itemGap: 8, itemGap: parseInt(this.fontSize / 2),
padding: 0, padding: 0,
//backgroundColor: "rgba(108,128,151,0.2)", //backgroundColor: "rgba(108,128,151,0.2)",
textStyle: { textStyle: {
@ -127,7 +112,7 @@ export default {
formatter: function (name) { formatter: function (name) {
const item = barChartList.filter((item) => item.name === name)[0]; const item = barChartList.filter((item) => item.name === name)[0];
let rate = ((100 * item.value) / total).toFixed(2); let rate = ((100 * item.value) / total).toFixed(2);
console.log(rate); //console.log(rate);
return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`; return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`;
}, },
}, },
@ -138,11 +123,11 @@ export default {
type: "image", type: "image",
style: { style: {
image: bgImg, image: bgImg,
width: 100, width: 3 * height - 16,
height: 100, height: 3 * height - 16,
zIndex: 1, zIndex: 1,
}, },
left: 20, left: parseInt(0.5 * height) + 8,
top: "center", top: "center",
}, },
], ],
@ -151,18 +136,31 @@ export default {
{ {
name: this.chartObj.name, name: this.chartObj.name,
type: "pie", type: "pie",
radius: [48, 58], radius: [parseInt(1.5 * height) - 8, parseInt(1.5 * height)],
center: [70, "center"], center: [2 * height, "center"],
clockWise: false, clockWise: false,
hoverAnimation: false, hoverAnimation: false,
itemStyle: {}, itemStyle: {},
label: { label: {
show: false, show: true,
position: "right", position: "center",
rich: {
label: {
color: "#D0DEEE",
fontSize: this.fontSize,
},
value: {
padding: [4, 0, 0, 0],
color: "#92E0FF",
fontSize: this.fontSize + 6,
},
},
formatter: `{label|总数量}\n{value|${total}}`,
}, },
emphasis: { emphasis: {
label: { label: {
show: false, show: true,
formatter: `{label|总数量}\n{value|${total}}`,
}, },
}, },
labelLine: { labelLine: {

6
src/views/enterpriseTopic/inSecurity/cmyDetail.vue
Unescape View File

@ -309,7 +309,7 @@ export default {
}; };
}, },
mounted() { mounted() {
this.companyName = this.$route.query.car; this.companyName = this.$route.query.cmy;
}, },
created() {}, created() {},
}; };
@ -424,6 +424,7 @@ export default {
} }
.screenRowBtm { .screenRowBtm {
height: 40%; height: 40%;
overflow: hidden;
.screenLeft { .screenLeft {
display: flex; display: flex;
.left { .left {
@ -436,7 +437,7 @@ export default {
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
.rfsjWrap { .rfsjWrap {
height: calc(100% - 28px); height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
@ -458,6 +459,7 @@ export default {
} }
} }
.name { .name {
margin-top: -4px;
font-weight: 500; font-weight: 500;
font-size: vw(12); font-size: vw(12);
color: #ffffff; color: #ffffff;

2
src/views/enterpriseTopic/inSecurity/jfTable.vue
Unescape View File

@ -53,7 +53,7 @@ export default {
height: 100%; height: 100%;
.jfTableWrap { .jfTableWrap {
height: calc(100% - 30px); height: calc(100% - 36px);
overflow: scroll; overflow: scroll;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;

2
src/views/enterpriseTopic/inSecurity/ycTable.vue
Unescape View File

@ -66,7 +66,7 @@ export default {
height: 100%; height: 100%;
.ycTableWrap { .ycTableWrap {
height: calc(100% - 40px); height: calc(100% - 36px);
overflow: scroll; overflow: scroll;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;

2
src/views/enterpriseTopic/roadSafety/pie.vue
Unescape View File

@ -129,7 +129,7 @@ export default {
formatter: function (name) { formatter: function (name) {
const item = barChartList.filter((item) => item.name === name)[0]; const item = barChartList.filter((item) => item.name === name)[0];
let rate = ((100 * item.value) / total).toFixed(0); let rate = ((100 * item.value) / total).toFixed(0);
console.log(rate); //console.log(rate);
return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`; return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`;
}, },
}, },

33
src/views/enterpriseTopic/screen.vue
Unescape View File

@ -524,12 +524,12 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.name { .name {
font-size: vw(14); font-size: vh(14);
color: #e2fbff; color: #e2fbff;
} }
.value { .value {
font-weight: bold; font-weight: bold;
font-size: vw(20); font-size: vh(20);
color: #e3fffd; color: #e3fffd;
line-height: 22px; line-height: 22px;
letter-spacing: 1px; letter-spacing: 1px;
@ -545,16 +545,16 @@ export default {
display: none; display: none;
} }
.item { .item {
margin: vw(8) 0; margin: vh(8) 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.name { .name {
font-size: vw(12); font-size: vh(12);
color: #d0deee; color: #d0deee;
} }
.value { .value {
font-size: vw(16); font-size: vh(16);
color: #ffffff; color: #ffffff;
} }
} }
@ -572,6 +572,10 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.screenChart {
display: flex;
flex-direction: column;
}
.topCol { .topCol {
height: 120px; height: 120px;
display: flex; display: flex;
@ -585,6 +589,7 @@ export default {
} }
} }
.midCol { .midCol {
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.xfzdWrap { .xfzdWrap {
@ -611,11 +616,11 @@ export default {
} }
.nameWrap { .nameWrap {
.value { .value {
font-size: vw(18); font-size: vh(18);
color: #ffffff; color: #ffffff;
} }
.name { .name {
font-size: vw(12); font-size: vh(12);
color: #d0deee; color: #d0deee;
} }
} }
@ -623,14 +628,14 @@ export default {
} }
} }
.btmCol { .btmCol {
flex: 1; flex: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.xfsjWrap { .xfsjWrap {
flex: 1; flex: 1;
margin-bottom: 10px; margin-bottom: 10px;
flex: 1; flex: 1;
padding: vw(12); padding: vh(12);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -642,20 +647,20 @@ export default {
padding: 2px 8px; padding: 2px 8px;
.icon { .icon {
margin-right: 4px; margin-right: 4px;
width: vw(78); width: vh(78);
height: vw(78); height: vh(78);
img { img {
width: 100%; width: 100%;
} }
} }
.nameWrap { .nameWrap {
.value { .value {
font-size: vw(18); font-size: vh(18);
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
} }
.name { .name {
font-size: vw(12); font-size: vh(12);
color: #d0deee; color: #d0deee;
} }
} }
@ -732,7 +737,7 @@ export default {
} }
.midCol { .midCol {
height: 100%; height: 100%;
width: vw(316); width: vh(316);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

Write Preview
Loading…
Cancel
Save