loveflow
12 months ago
parent
6c4a86f760
commit
beff76831b
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="totalWrap">
|
||||||
|
<div>{{ dataObj.name }}</div>
|
||||||
|
<div class="totalText">{{ dataObj.value }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
dataObj: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/loveflow/assets/index.scss";
|
||||||
|
.totalWrap {
|
||||||
|
width: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: vw(46);
|
||||||
|
background: url("~@/assets/images/screen/total.png") no-repeat center center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-size: vw(18);
|
||||||
|
font-weight: 500;
|
||||||
|
color: #d0deee;
|
||||||
|
.totalText {
|
||||||
|
margin-left: 16px;
|
||||||
|
font-size: vw(26);
|
||||||
|
color: #ebf9ff;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
text-shadow: 0px 0px 9px #159aff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,5 +1,61 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="fireSafetyWrap">
|
||||||
<!-- 消防安全 -->
|
<!-- 消防安全 -->
|
||||||
|
<div class="screenRow screenRowTop">
|
||||||
|
<div class="screenLeft mb14 mr16">
|
||||||
|
<colWrap class="mr16" title="消防设施数据"> </colWrap>
|
||||||
|
<colWrap title="消防事件发生"> </colWrap>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="screenRight mb14">
|
||||||
|
<colWrap title="消防制度执行"> </colWrap>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenRow screenRowBtm">
|
||||||
|
<div class="screenLeft mr16">
|
||||||
|
<colWrap class="" title="企业台账数据"> </colWrap>
|
||||||
|
</div>
|
||||||
|
<div class="screenRight">
|
||||||
|
<colWrap title="异常企业台账"> </colWrap>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script>
|
||||||
|
import colWrap from "../components/colWrap.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
colWrap,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/loveflow/assets/index.scss";
|
||||||
|
.fireSafetyWrap {
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
.screenRow {
|
||||||
|
display: flex;
|
||||||
|
.screenLeft {
|
||||||
|
flex: 3.4;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.screenRight {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.screenRowTop {
|
||||||
|
height: 62%;
|
||||||
|
}
|
||||||
|
.screenRowBtm {
|
||||||
|
height: 38%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,123 @@
|
|||||||
|
<template>
|
||||||
|
<div style="height: 100%; width: 100%">
|
||||||
|
<g-chart :echartdata="option"></g-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
chartObj: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setOption() {
|
||||||
|
this.option = {
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "18%",
|
||||||
|
bottom: "15%",
|
||||||
|
left: "6%",
|
||||||
|
right: "5%",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: this.chartObj.xData,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#6C8097",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#D0DEEE",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "单位：件",
|
||||||
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed",
|
||||||
|
color: "#6C8097",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#6C8097",
|
||||||
|
fontSize: 12,
|
||||||
|
interval: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: this.chartObj.name,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 20,
|
||||||
|
color: "#5ED0A3",
|
||||||
|
data: this.chartObj.yData,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "top",
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#66E1DF",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: " rgba(0,89,84,0)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "外圆",
|
||||||
|
type: "scatter",
|
||||||
|
emphasis: {
|
||||||
|
scale: false,
|
||||||
|
},
|
||||||
|
symbol: "roundRect",
|
||||||
|
symbolSize: [26, 4], // 进度条白点
|
||||||
|
itemStyle: {
|
||||||
|
show: true,
|
||||||
|
barBorderRadius: [10, 10, 10, 10],
|
||||||
|
color: "#FFF",
|
||||||
|
shadowColor: "rgba(255, 255, 255, 1)",
|
||||||
|
shadowBlur: 8,
|
||||||
|
borderWidth: 1,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
z: 2,
|
||||||
|
data: this.chartObj.yData,
|
||||||
|
animationDelay: 500,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -1,5 +1,465 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="roadSafetyWrap loveflowscreen">
|
||||||
<!-- 道路安全 -->
|
<!-- 道路安全 -->
|
||||||
|
<div class="screenRow screenRowTop">
|
||||||
|
<div class="screenLeft mr16 mb14">
|
||||||
|
<colWrap class="" title="源头检查数据">
|
||||||
|
<total-head :dataObj="ytObj"></total-head>
|
||||||
|
<div class="dpieWrap">
|
||||||
|
<dpie :chartObj="ytPie"></dpie>
|
||||||
|
</div>
|
||||||
|
<div class="ytTableWrap">
|
||||||
|
<ytTable></ytTable>
|
||||||
|
</div>
|
||||||
|
</colWrap>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="screenRight mb14">
|
||||||
|
<colWrap class="mr16" title="交通设施检查数据">
|
||||||
|
<total-head :dataObj="ytObj"></total-head>
|
||||||
|
<div class="dpieWrap">
|
||||||
|
<dpie :chartObj="jtssPie"></dpie>
|
||||||
|
</div>
|
||||||
|
<div class="ytTableWrap">
|
||||||
|
<el-tabs v-model="jtssTab" @tab-click="handleClick">
|
||||||
|
<el-tab-pane label="设施完善企业" name="ws">
|
||||||
|
<tableWrap :columns="column"></tableWrap>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="设施损失企业" name="ss">
|
||||||
|
<tableWrap :columns="column"></tableWrap>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</colWrap>
|
||||||
|
<colWrap title="违章数据">
|
||||||
|
<div class="wzsjWrap">
|
||||||
|
<div class="top">
|
||||||
|
<barOne :chartObj="tlObj"></barOne>
|
||||||
|
</div>
|
||||||
|
<div class="btm">
|
||||||
|
<div class="left mr14">
|
||||||
|
<sub-col title="车辆异常状态分析"></sub-col>
|
||||||
|
<pieWrap :chartObj="carlObj"></pieWrap>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<sub-col title="人员异常状态分析"></sub-col>
|
||||||
|
<pieWrap :chartObj="carrObj"></pieWrap>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</colWrap>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenRow screenRowBtm">
|
||||||
|
<div class="screenLeft mr16">
|
||||||
|
<colWrap title="交通事故">
|
||||||
|
<div class="jtsgHead">
|
||||||
|
<div class="left">
|
||||||
|
<div class="icon"></div>
|
||||||
|
<div class="nameWrap">
|
||||||
|
<div class="name">交通事故数</div>
|
||||||
|
<div class="value">1323</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="icon"></div>
|
||||||
|
<div class="nameWrap">
|
||||||
|
<div class="name">关联车辆数</div>
|
||||||
|
<div class="value">2134</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="jtsgBody">
|
||||||
|
<dpie :chartObj="jtPie"></dpie>
|
||||||
|
</div>
|
||||||
|
</colWrap>
|
||||||
|
</div>
|
||||||
|
<div class="screenRight">
|
||||||
|
<colWrap title="企业整改数据">
|
||||||
|
<div class="qyzgWrap">
|
||||||
|
<div class="left">
|
||||||
|
<sub-col title="企业整改进度"></sub-col>
|
||||||
|
<div class="flex-center" style="flex: 1">
|
||||||
|
<dpie :chartObj="qyzgPie"></dpie>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<sub-col title="企业整改详情"></sub-col>
|
||||||
|
<div class="qyzgTable">
|
||||||
|
<el-tabs v-model="qyzgTab" @tab-click="handleClick">
|
||||||
|
<el-tab-pane label="待整改" name="dzg">
|
||||||
|
<qyzgTable></qyzgTable>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="整改中" name="zgz">
|
||||||
|
<qyzgTable></qyzgTable>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="整改完成" name="zgwc">
|
||||||
|
<qyzgTable></qyzgTable>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</colWrap>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script>
|
||||||
|
import colWrap from "../components/colWrap.vue";
|
||||||
|
import SubCol from "../components/subCol.vue";
|
||||||
|
import TotalHead from "../components/totalHead.vue";
|
||||||
|
import totalHead from "../components/totalHead.vue";
|
||||||
|
import dpie from "./dpie.vue";
|
||||||
|
import pieWrap from "./pie.vue";
|
||||||
|
|
||||||
|
import ytTable from "./ytTable.vue";
|
||||||
|
import qyzgTable from "./qyzgTable.vue";
|
||||||
|
import tableWrap from "../components/tableWrap.vue";
|
||||||
|
import barOne from "./bar.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
dpie,
|
||||||
|
colWrap,
|
||||||
|
totalHead,
|
||||||
|
SubCol,
|
||||||
|
TotalHead,
|
||||||
|
ytTable,
|
||||||
|
tableWrap,
|
||||||
|
barOne,
|
||||||
|
pieWrap,
|
||||||
|
qyzgTable,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
qyzgTab: "dzg",
|
||||||
|
tlObj: {
|
||||||
|
xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
|
||||||
|
yData: [3, 4, 3, 1, 3, 4, 2],
|
||||||
|
name: "违章数据",
|
||||||
|
},
|
||||||
|
ytObj: {
|
||||||
|
name: "源头检查总数",
|
||||||
|
value: 31876,
|
||||||
|
},
|
||||||
|
ytPie: [
|
||||||
|
{
|
||||||
|
name: "区内检查数据",
|
||||||
|
value: 128,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#2B82F3",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "资质异常企业数",
|
||||||
|
value: 86,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#49ECC9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
qyzgPie: [
|
||||||
|
{
|
||||||
|
name: "待整改",
|
||||||
|
value: 128,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#2B82F3",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "整改中",
|
||||||
|
value: 86,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#FEF699",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "整改完成",
|
||||||
|
value: 86,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#49ECC9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
jtPie: [
|
||||||
|
{
|
||||||
|
name: "经济损失事故",
|
||||||
|
value: 128,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#2B82F3",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "伤亡事故",
|
||||||
|
value: 86,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#E15A4E",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
jtssPie: [
|
||||||
|
{
|
||||||
|
name: "设施完善企业",
|
||||||
|
value: 128,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#2B82F3",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "设施损失企业数",
|
||||||
|
value: 86,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#E15A4E",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
jtssTab: "ws",
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
prop: "id",
|
||||||
|
label: "序号",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "date",
|
||||||
|
label: "时间",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "name",
|
||||||
|
label: "超载查处点",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "isQ",
|
||||||
|
label: "超载比例",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "personType",
|
||||||
|
label: "处理详情",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "address",
|
||||||
|
label: "处理单位",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
carlObj: {
|
||||||
|
color: ["#2B82F3", "#66C3FF", "#FEF699"],
|
||||||
|
data: [
|
||||||
|
{ value: 484, name: "超速" },
|
||||||
|
{ value: 567, name: "闯禁" },
|
||||||
|
{ value: 489, name: "违停" },
|
||||||
|
],
|
||||||
|
name: "车辆违规总数",
|
||||||
|
},
|
||||||
|
carrObj: {
|
||||||
|
color: ["#2B82F3", "#66C3FF", "#FEF699"],
|
||||||
|
data: [
|
||||||
|
{ value: 484, name: "超速" },
|
||||||
|
{ value: 567, name: "闯禁" },
|
||||||
|
{ value: 489, name: "违停" },
|
||||||
|
],
|
||||||
|
name: "驾驶员违章总数",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(tab) {
|
||||||
|
console.log(tab);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
@import "@/loveflow/assets/index.scss";
|
||||||
|
.roadSafetyWrap {
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
.screenRow {
|
||||||
|
display: flex;
|
||||||
|
.screenLeft {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
.dpieWrap {
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.screenChart {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.ytTableWrap {
|
||||||
|
height: calc(100% - 200px);
|
||||||
|
flex: 1;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.jtsgHead {
|
||||||
|
display: flex;
|
||||||
|
.left {
|
||||||
|
margin-right: vw(20);
|
||||||
|
flex: 1;
|
||||||
|
height: vw(82);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: url("~@/assets/images/topic/gunb3.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.icon {
|
||||||
|
width: vw(90);
|
||||||
|
height: vw(70);
|
||||||
|
background: url("~@/assets/images/topic/dljtl.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.nameWrap {
|
||||||
|
.name {
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-size: vw(16);
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
color: #ebf9ff;
|
||||||
|
font-size: vw(18);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
height: vw(82);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: url("~@/assets/images/topic/gunb2.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.icon {
|
||||||
|
width: vw(90);
|
||||||
|
height: vw(70);
|
||||||
|
background: url("~@/assets/images/topic/dljtr.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.nameWrap {
|
||||||
|
.name {
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-size: vw(16);
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
color: #ebf9ff;
|
||||||
|
font-size: vw(18);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.jtsgBody {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.screenRight {
|
||||||
|
flex: 2;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.screenRowTop {
|
||||||
|
height: 60%;
|
||||||
|
.screenRight {
|
||||||
|
.screenChart {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.dpieWrap {
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.ytTableWrap {
|
||||||
|
height: calc(100% - 200px);
|
||||||
|
flex: 1;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
.el-tabs {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.el-tabs__content {
|
||||||
|
flex: 1;
|
||||||
|
.el-tab-pane {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.wzsjWrap {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.top {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.btm {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
.left {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: rgba(108, 128, 151, 0.1);
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: rgba(108, 128, 151, 0.1);
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.screenRowBtm {
|
||||||
|
height: 40%;
|
||||||
|
|
||||||
|
.qyzgWrap {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
.left {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
margin-right: 14px;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: rgba(108, 128, 151, 0.1);
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
padding: 14px;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.qyzgTable {
|
||||||
|
background-color: rgba(108, 128, 151, 0.1);
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px 10px 0;
|
||||||
|
.el-tabs {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.el-tabs__content {
|
||||||
|
flex: 1;
|
||||||
|
.el-tab-pane {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,193 @@
|
|||||||
|
<template>
|
||||||
|
<div style="height: 100%; width: 100%" id="pieWrap">
|
||||||
|
<g-chart :echartdata="option"></g-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
let bgImg = require("@/assets/images/topic/pie.png");
|
||||||
|
let iconImg = require("@/assets/images/topic/pieIcon.png");
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
chartObj: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setOption() {
|
||||||
|
let temp = this.getHeight();
|
||||||
|
let height = parseInt(temp / 2) - 20;
|
||||||
|
//console.log(height);
|
||||||
|
let total = 0;
|
||||||
|
let data = [];
|
||||||
|
let barChartList = this.chartObj.data;
|
||||||
|
let legend = [];
|
||||||
|
for (var i = 0; i < barChartList.length; i++) {
|
||||||
|
legend.push(barChartList[i]["name"]);
|
||||||
|
total = total + barChartList[i].value;
|
||||||
|
data.push(
|
||||||
|
{
|
||||||
|
value: barChartList[i].value,
|
||||||
|
name: barChartList[i].name,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderWidth: 6,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 20,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
color: "rgba(0, 0, 0, 0)",
|
||||||
|
borderColor: "rgba(0, 0, 0, 0)",
|
||||||
|
borderWidth: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (!total) {
|
||||||
|
total = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
tooltip: {
|
||||||
|
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: {
|
||||||
|
data: legend,
|
||||||
|
orient: "vertical",
|
||||||
|
bottom: 20,
|
||||||
|
icon: "diamond",
|
||||||
|
left: "center",
|
||||||
|
width: "100%",
|
||||||
|
height: 80,
|
||||||
|
itemHeight: 8,
|
||||||
|
itemWidth: 8,
|
||||||
|
itemGap: 10,
|
||||||
|
padding: 0,
|
||||||
|
//backgroundColor: "rgba(108,128,151,0.2)",
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
fontSize: 10,
|
||||||
|
padding: [0, 4, 0, 0],
|
||||||
|
color: "#D0DEEE",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
width: 32,
|
||||||
|
color: "#FFFFFF;",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
rate: {
|
||||||
|
color: "#FFFFFF;",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formatter: function (name) {
|
||||||
|
const item = barChartList.filter((item) => item.name === name)[0];
|
||||||
|
let rate = ((100 * item.value) / total).toFixed(0);
|
||||||
|
console.log(rate);
|
||||||
|
return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: this.chartObj.color,
|
||||||
|
graphic: {
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
type: "image",
|
||||||
|
style: {
|
||||||
|
image: bgImg,
|
||||||
|
width: 80,
|
||||||
|
height: 80,
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
|
left: "center",
|
||||||
|
top: 20,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: this.chartObj.name,
|
||||||
|
type: "pie",
|
||||||
|
radius: [38, 48],
|
||||||
|
center: ["center", 60],
|
||||||
|
clockWise: false,
|
||||||
|
hoverAnimation: false,
|
||||||
|
itemStyle: {},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "right",
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: data,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getHeight() {
|
||||||
|
let div = document.getElementById("pieWrap");
|
||||||
|
return div.clientHeight;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartObj: {
|
||||||
|
handler(newval) {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue