master
loveflow 6 months ago
parent a2f7f22a1c
commit d547e6ef21

@ -7,6 +7,7 @@
:rowKey="rowKey ? rowKey : ''" :rowKey="rowKey ? rowKey : ''"
@selection-change="selectionChange" @selection-change="selectionChange"
v-bind="$attrs" v-bind="$attrs"
style="width: 100%"
> >
<!-- 多选批量操作 --> <!-- 多选批量操作 -->
<el-table-column <el-table-column
@ -113,9 +114,17 @@ export default {
.el-table__body-wrapper { .el-table__body-wrapper {
height: calc(100% - 50px); height: calc(100% - 50px);
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; &::-webkit-scrollbar-corner{
background: transparent;
}
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
background: rgba(93, 106, 105, 1);
border-radius: 6px;
} }
} }
} }

@ -1,5 +1,5 @@
<template> <template>
<div style="height: 100%; width: 100%"> <div style="height: 100%; width: 100%" id="dpieWrap">
<g-chart :echartdata="option"></g-chart> <g-chart :echartdata="option"></g-chart>
</div> </div>
</template> </template>
@ -16,6 +16,7 @@ export default {
data() { data() {
return { return {
option: {}, option: {},
fontSize: 10,
}; };
}, },
mounted() { mounted() {
@ -23,6 +24,17 @@ export default {
}, },
methods: { methods: {
setOption() { setOption() {
let temp = this.getHeight();
let height = parseInt(temp / 4);
console.log(height);
if (height > 40) {
this.fontSize = 12;
}
if (this.fontSize > 60) {
this.fontSize = 14;
}
let dataList = this.chartObj.data; let dataList = this.chartObj.data;
let maxArr = []; let maxArr = [];
let maxValue = 0; let maxValue = 0;
@ -71,7 +83,7 @@ export default {
textStyle: { textStyle: {
verticalAlign: "bottom", verticalAlign: "bottom",
color: "#299CD4", color: "#299CD4",
fontSize: 14, fontSize: this.fontSize + 2,
fontFamily: "Microsoft YaHei", fontFamily: "Microsoft YaHei",
align: "left", align: "left",
padding: [0, 0, 5, 7], padding: [0, 0, 5, 7],
@ -93,12 +105,12 @@ export default {
value: { value: {
padding: [4, 0, 0, 4], padding: [4, 0, 0, 4],
color: "#9CE0FF", color: "#9CE0FF",
fontSize: 16, fontSize: this.fontSize + 4,
}, },
rate: { rate: {
align: "right", align: "right",
color: "rgba(255,255,255,0.9)", color: "rgba(255,255,255,0.9)",
fontSize: 12, fontSize: this.fontSize,
}, },
}, },
}, },
@ -169,7 +181,7 @@ export default {
rich: { rich: {
a: { a: {
color: "#9CE0FF", color: "#9CE0FF",
fontSize: 16, fontSize: this.fontSize + 4,
align: "right", align: "right",
}, },
}, },
@ -201,6 +213,10 @@ export default {
], ],
}; };
}, },
getHeight() {
let div = document.getElementById("dpieWrap");
return div.clientHeight;
},
}, },
watch: { watch: {
chartObj: { chartObj: {

@ -21,7 +21,9 @@ export default {
}, },
methods: { methods: {
resize() { resize() {
this.dom.resize(); console.log(11111);
console.log( this.dom);
this.dom && this.dom.resize();
}, },
}, },
mounted() { mounted() {

@ -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 <div
@ -11,7 +11,14 @@
</div> </div>
</div> </div>
<div style="flex: 1"> <div style="flex: 1">
<div class="dpiebg"> <div
class="dpiebg"
:style="{
height: parseInt(viewH) + 'px',
width: 2 * viewH + 'px',
marginLeft: parseInt(0.5 * viewH) + 'px',
}"
>
<div ref="dpieWrapRef" class="dpieWrap"></div> <div ref="dpieWrapRef" class="dpieWrap"></div>
</div> </div>
</div> </div>
@ -40,6 +47,7 @@ export default {
}, },
], ],
total: 1, total: 1,
viewH: 1,
}; };
}, },
mounted() { mounted() {
@ -48,12 +56,17 @@ export default {
this.total += this.data[i].value; this.total += this.data[i].value;
} }
this.setOption(); let temp = this.getHeight();
let height = parseInt(temp / 3);
this.viewH = 2 * height;
console.log(height);
setTimeout(() => {
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) => {
@ -144,7 +157,7 @@ export default {
show: false, show: false,
boxHeight: boxHeight, // boxHeight: boxHeight, //
left: 0, left: 0,
top: -20, //3d top: -18, //3d
viewControl: { viewControl: {
//3d //3d
alpha: 24, // alpha: 24, //
@ -267,6 +280,10 @@ export default {
}); });
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
getHeight() {
let div = document.getElementById("dpieWrap");
return div.clientHeight;
},
}, },
watch: { watch: {
chartObj: { chartObj: {
@ -284,10 +301,16 @@ export default {
position: relative; position: relative;
flex: 1; flex: 1;
height: 100%; height: 100%;
display: flex;
align-items: center;
.dpieLegend { .dpieLegend {
position: absolute; position: absolute;
right: 40px; right: vw(30);
top: 28px; height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
.dpieRow { .dpieRow {
display: flex; display: flex;
align-items: center; align-items: center;
@ -311,11 +334,10 @@ export default {
} }
} }
.dpieWrap { .dpieWrap {
width: 240px; width: 100%;
height: 120px; height: 100%;
} }
.dpiebg { .dpiebg {
margin-top: 10px;
width: 240px; width: 240px;
height: 120px; height: 120px;
background: url("~@/assets/images/screen/dpie.png"); background: url("~@/assets/images/screen/dpie.png");

@ -16,6 +16,7 @@ export default {
data() { data() {
return { return {
option: {}, option: {},
fontSize: 12,
}; };
}, },
mounted() { mounted() {
@ -23,6 +24,10 @@ export default {
}, },
methods: { methods: {
setOption() { setOption() {
let temp = this.getHeight();
let height = parseInt(temp / 5);
this.viewH = 2 * height;
console.log(height);
let point = this.chartObj.point; // let point = this.chartObj.point; //
let total = this.chartObj.total; let total = this.chartObj.total;
@ -37,14 +42,14 @@ export default {
text: this.chartObj.name, text: this.chartObj.name,
textStyle: { fontSize: 12, lineHeight: 12, color: "#D0DEEE" }, textStyle: { fontSize: 12, lineHeight: 12, color: "#D0DEEE" },
subtextStyle: { subtextStyle: {
fontSize: 18, fontSize: 16,
fontWeight: 500, fontWeight: 500,
lineHeight: 10, lineHeight: 10,
color: "#E3FEFF", color: "#E3FEFF",
}, },
textAlign: "center", textAlign: "center",
left: "47%", left: "47%",
top: 140, top: 4 * height - 16,
}, },
color: this.chartObj.color, color: this.chartObj.color,
graphic: { graphic: {
@ -53,8 +58,8 @@ export default {
type: "image", type: "image",
style: { style: {
image: this.chartObj.icon, image: this.chartObj.icon,
width: 160, width: 4 * height,
height: 160, height: 4 * height,
zIndex: 1, zIndex: 1,
}, },
left: "center", left: "center",
@ -66,8 +71,8 @@ export default {
{ {
// name: '访1', // name: '访1',
type: "pie", type: "pie",
radius: [30, 40], radius: [height - 6, height],
center: ["center", 80], center: ["center", 2 * height],
data: [ data: [
{ {
value: 100, //100% value: 100, //100%
@ -93,9 +98,10 @@ export default {
// name: '访2', // name: '访2',
type: "pie", type: "pie",
showEmptyCircle: true, // showEmptyCircle: true, //
radius: [30, 40], radius: [height - 6, height],
center: ["center", 2 * height],
avoidLabelOverlap: true, // avoidLabelOverlap: true, //
center: ["center", 80],
data: [ data: [
{ {
value: (point / total) * 100, value: (point / total) * 100,

@ -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,14 @@
</div> </div>
</div> </div>
<div class="" style="flex: 1"> <div class="" style="flex: 1">
<div class="dpiebg"> <div
class="dpiebg"
:style="{
height: parseInt(viewH) + 'px',
width: 2 * viewH + 'px',
marginLeft: parseInt(0.5 * viewH) + 'px',
}"
>
<div ref="dpieWrapRef" class="dpieWrap"></div> <div ref="dpieWrapRef" class="dpieWrap"></div>
</div> </div>
</div> </div>
@ -25,6 +32,7 @@ import "echarts-gl";
export default { export default {
data() { data() {
return { return {
fontSize: 12,
data: [ data: [
{ {
name: "资质正常企业数", name: "资质正常企业数",
@ -42,6 +50,7 @@ export default {
}, },
], ],
total: 1, total: 1,
viewH: 1,
}; };
}, },
mounted() { mounted() {
@ -50,12 +59,18 @@ export default {
this.total += this.data[i].value; this.total += this.data[i].value;
} }
this.setOption(); let temp = this.getHeight();
let height = parseInt(temp / 3);
this.viewH = 2 * height;
console.log(height);
setTimeout(() => {
this.setOption();
//window.addEventListener("resize", this.setOption(), false);
}, 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) => {
@ -269,6 +284,10 @@ export default {
}); });
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
getHeight() {
let div = document.getElementById("dpieWrap");
return div.clientHeight;
},
}, },
watch: { watch: {
chartObj: { chartObj: {
@ -287,7 +306,7 @@ export default {
flex: 1; flex: 1;
.dpieLegend { .dpieLegend {
position: absolute; position: absolute;
top: 20px; top: vw(20);
right: 20px; right: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -297,8 +316,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
width: vw(200); margin-bottom: vw(6);
margin-bottom: vw(16);
//background-color: rgba(108, 128, 151, 0.1); //background-color: rgba(108, 128, 151, 0.1);
.dpieIcon { .dpieIcon {
margin-right: 6px; margin-right: 6px;
@ -319,8 +337,8 @@ export default {
} }
} }
.dpieWrap { .dpieWrap {
width: 160px; width: 100%;
height: 70; height: 100%;
} }
.dpiebg { .dpiebg {
margin-top: vw(14); margin-top: vw(14);

@ -18,6 +18,7 @@
:style="{ :style="{
height: parseInt(viewH) + 'px', height: parseInt(viewH) + 'px',
width: 2 * viewH + 'px', width: 2 * viewH + 'px',
marginTop: parseInt(0.6 * viewH) + 'px',
}" }"
> >
<div ref="dpieWrapRef" class="dpieWrap"></div> <div ref="dpieWrapRef" class="dpieWrap"></div>
@ -67,7 +68,7 @@ export default {
} }
let temp = this.getHeight(); let temp = this.getHeight();
let height = parseInt(temp / 4); let height = parseInt(temp / 3);
this.viewH = 2 * height; this.viewH = 2 * height;
console.log(height); console.log(height);
this.fontSize = 12; this.fontSize = 12;

@ -35,7 +35,7 @@ export default {
.value { .value {
margin-left: vw(76); margin-left: vw(76);
font-family: AlibabaPuHuiTiM; font-family: AlibabaPuHuiTiM;
font-size: vw(24); font-size: vw(22);
color: #ffffff; color: #ffffff;
} }
.name { .name {

@ -1,6 +1,6 @@
<template> <template>
<div style="height: 100%; width: 100%" id="pieWrap"> <div style="height: 100%; width: 100%" id="pieWrap">
<g-chart :echartdata="option"></g-chart> <g-chart ref="gChartRef" :echartdata="option"></g-chart>
</div> </div>
</template> </template>
<script> <script>
@ -23,6 +23,7 @@ export default {
}, },
mounted() { mounted() {
this.setOption(); this.setOption();
window.addEventListener("resize", this.$refs.gChartRef.resize(), false);
}, },
methods: { methods: {
setOption() { setOption() {

@ -16,6 +16,7 @@ export default {
data() { data() {
return { return {
option: {}, option: {},
fontSize: 12,
}; };
}, },
mounted() { mounted() {
@ -23,6 +24,16 @@ export default {
}, },
methods: { methods: {
setOption() { setOption() {
let temp = this.getHeight();
let height = parseInt(temp / 4);
console.log(height);
this.fontSize = 12;
if (height < 30) {
this.fontSize = 8;
}
if (height > 40) {
this.fontSize = 12;
}
let point = this.chartObj.point; // let point = this.chartObj.point; //
let total = this.chartObj.total; let total = this.chartObj.total;
this.option = { this.option = {
@ -31,11 +42,11 @@ export default {
show: true, // show: true, //
text: this.chartObj.name, text: this.chartObj.name,
textStyle: { textStyle: {
fontSize: 12, fontSize: this.fontSize,
color: "#D0DEEE", color: "#D0DEEE",
}, },
subtextStyle: { subtextStyle: {
fontSize: 14, fontSize: this.fontSize,
fontWeight: 400, fontWeight: 400,
lineHeight: 10, lineHeight: 10,
color: "#E3FEFF", color: "#E3FEFF",
@ -132,12 +143,12 @@ export default {
rich: { rich: {
b_style: { b_style: {
padding: [0, 0, -8, 0], padding: [0, 0, -8, 0],
fontSize: 12, fontSize: this.fontSize,
fontWeight: 400, fontWeight: 400,
color: "#D0DEEE", color: "#D0DEEE",
}, },
c_style: { c_style: {
fontSize: 14, fontSize: this.fontSize,
fontWeight: 400, fontWeight: 400,
color: "#D0DEEE", color: "#D0DEEE",
}, },
@ -150,6 +161,10 @@ export default {
], ],
}; };
}, },
getHeight() {
let div = document.getElementById("pieWrap");
return div.clientHeight;
},
}, },
watch: { watch: {
chartObj: { chartObj: {

@ -78,7 +78,7 @@ export default {
this.option = { this.option = {
tooltip: { tooltip: {
show: false, trigger: "item",
}, },
legend: { legend: {
data: legend, data: legend,

@ -68,7 +68,8 @@ export default {
}, },
}; };
</script> </script>
<style lang="less"> <style lang="scss">
@import "@/loveflow/assets/index.scss";
.enterpriseTopicPanel { .enterpriseTopicPanel {
padding: 20px; padding: 20px;
height: 100%; height: 100%;
@ -118,7 +119,7 @@ export default {
); );
border: 1px solid #5b748c; border: 1px solid #5b748c;
.filterBtnWrap { .filterBtnWrap {
padding: 2px; padding: vw(2);
&:last-child { &:last-child {
.el-divider { .el-divider {
display: none; display: none;
@ -129,10 +130,10 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0 10px; padding: 0 vw(10);
height: 34px; height: vw(34);
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: vw(14);
color: #eaf6ff; color: #eaf6ff;
&.filterActive { &.filterActive {
font-weight: 500; font-weight: 500;
@ -149,12 +150,3 @@ export default {
} }
} }
</style> </style>
<style lang="scss" scoped>
@import "@/loveflow/assets/index.scss";
.enterpriseTopicPanel {
.personSafetyWrap {
.enterpriseTopicResult {
}
}
}
</style>

@ -140,10 +140,16 @@ export default {
{ {
prop: "phone", prop: "phone",
label: "户口详址", label: "户口详址",
attrs: {
width: 180,
},
}, },
{ {
prop: "cmy", prop: "cmy",
label: "归属企业", label: "归属企业",
attrs: {
width: 180,
},
}, },
{ {
prop: "address", prop: "address",
@ -153,10 +159,16 @@ export default {
slot: "gwSlot", slot: "gwSlot",
prop: "address", prop: "address",
label: "文化程度", label: "文化程度",
attrs: {
width: 120,
},
}, },
{ {
prop: "personType", prop: "personType",
label: "暂住地址", label: "暂住地址",
attrs: {
width: 180,
},
}, },
{ {
prop: "date", prop: "date",
@ -173,10 +185,16 @@ export default {
{ {
prop: "address", prop: "address",
label: "所属派出所", label: "所属派出所",
attrs: {
width: 120,
},
}, },
{ {
prop: "address", prop: "address",
label: "所属委员会", label: "所属委员会",
attrs: {
width: 120,
},
}, },
{ {
prop: "date", prop: "date",

@ -119,7 +119,6 @@ export default {
data() { data() {
return { return {
total: 53981 + "", total: 53981 + "",
tl1Obj: { tl1Obj: {
name: "危险品领用人员", name: "危险品领用人员",
total: 3400, total: 3400,
@ -148,7 +147,6 @@ export default {
icon: require("@/assets/images/topic/pie4b.png"), icon: require("@/assets/images/topic/pie4b.png"),
color: ["#FFE3E3", "#FF2C2C", "#FF6D6D"], color: ["#FFE3E3", "#FF2C2C", "#FF6D6D"],
}, },
tmObj: { tmObj: {
l1: { l1: {
icon: require("@/assets/images/topic/l1.png"), icon: require("@/assets/images/topic/l1.png"),
@ -333,8 +331,11 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
.topWrap {
height: 30%;
}
.btmWrap { .btmWrap {
flex: 1; height: 70%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.flowHead { .flowHead {

@ -5,10 +5,10 @@
<div class="screenRow screenRowTop mb14"> <div class="screenRow screenRowTop mb14">
<div class="mr16 screenColOne"> <div class="mr16 screenColOne">
<div <div
class="topCol mb14 pointer" class="topCol pointer mb14"
@click="gotoPage('/topic/personSafety/screen')" @click="gotoPage('/topic/personSafety/screen')"
> >
<colWrap title="人员安全风险评估"> <colWrap class="" title="人员安全风险评估">
<pieTwo :chartObj="tlObj"></pieTwo> <pieTwo :chartObj="tlObj"></pieTwo>
</colWrap> </colWrap>
</div> </div>
@ -503,6 +503,9 @@ export default {
display: flex; display: flex;
.left { .left {
flex: 1; flex: 1;
display: flex;
flex-direction: column;
height: calc(100% - 14px);
.wxHead { .wxHead {
background: url("~@/assets/images/screen/wxl.png") no-repeat background: url("~@/assets/images/screen/wxl.png") no-repeat
center center; center center;
@ -511,6 +514,9 @@ export default {
} }
.right { .right {
flex: 1; flex: 1;
display: flex;
flex-direction: column;
height: calc(100% - 14px);
.wxHead { .wxHead {
background: url("~@/assets/images/screen/wxr.png") no-repeat background: url("~@/assets/images/screen/wxr.png") no-repeat
center center; center center;
@ -519,7 +525,7 @@ export default {
} }
.wxHead { .wxHead {
padding: 0 10px; padding: 0 10px;
height: 40px; height: vw(40);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -538,7 +544,7 @@ export default {
} }
.wxBody { .wxBody {
padding: 0 10px; padding: 0 10px;
height: calc(100% - 48px); flex: 1;
background-color: rgba(108, 128, 151, 0.1); background-color: rgba(108, 128, 151, 0.1);
overflow-y: scroll; overflow-y: scroll;
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -563,7 +569,7 @@ export default {
.btmCol { .btmCol {
height: 60%; height: 60%;
.tableInfoWrap { .tableInfoWrap {
height: calc(100% - 40px); height: calc(100% - 30px);
} }
} }
} }
@ -572,12 +578,13 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
.screenChart { .screenChart {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.topCol { .topCol {
height: 120px; height: 22%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.xfssWrap { .xfssWrap {
@ -589,14 +596,14 @@ export default {
} }
} }
.midCol { .midCol {
flex: 1; height: 20%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.xfzdWrap { .xfzdWrap {
height: 68px; height: 68%;
margin-bottom: 10px; margin-bottom: 10px;
flex: 1; flex: 1;
padding: 4px; padding: vw(4);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -605,11 +612,11 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid #495461; border: 1px solid #495461;
padding: 2px 8px; padding: vw(2) vw(8);
.icon { .icon {
margin-right: 4px; margin-right: 4px;
width: 37px; width: vw(37);
height: 40px; height: vw(40);
img { img {
width: 100%; width: 100%;
} }
@ -628,7 +635,7 @@ export default {
} }
} }
.btmCol { .btmCol {
flex: 2; height: 36%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.xfsjWrap { .xfsjWrap {
@ -644,7 +651,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 2px 8px; padding: vw(2) vw(8);
.icon { .icon {
margin-right: 4px; margin-right: 4px;
width: vh(78); width: vh(78);

Loading…
Cancel
Save