From 73a9ae225888adae528d9b06233f65da04d883db Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期五, 20 五月 2022 13:42:22 +0800
Subject: [PATCH] 其他业务
---
src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue | 140 +++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 136 insertions(+), 4 deletions(-)
diff --git a/src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue b/src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue
index dfaae68..7539944 100644
--- a/src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue
+++ b/src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue
@@ -6,21 +6,142 @@
:before-close="handleClose">
<div class="zhigongshebaoEcharts" ref="zhigongshebaoEcharts"></div>
</el-dialog>
-
</div>
</template>
<script>
+ import {getSecurityDetailChart} from '@/api/shehuiBaozhang'
+ import echarts from "echarts/lib/echarts";
+ import nowSize from '../../../libs/nowSize'
export default {
name: "zhigongshebaoForm",
data() {
return {
dialogVisible: false,
+ xdata:[],
+ totalData: [],
+ inJobData: [],
+ outJobData: []
}
},
methods: {
- init() {
+ init(type,area) {
this.dialogVisible = true
+ this.$nextTick(() => {
+ this.getSecurityDetailChart(type,area)
+ })
+ },
+ getSecurityDetailChart(type,area) {
+ getSecurityDetailChart({type:type,area:area}).then(res => {
+ if(res.code == 1000) {
+ this.xdata = res.obj.data
+ this.totalData = res.obj.total
+ this.inJobData = res.obj.inJob
+ this.outJobData = res.obj.outJob
+ this.zhigongshebaoEcharts()
+ }
+ })
+ },
+ zhigongshebaoEcharts() {
+ let myEchart = this.$echarts.init(this.$refs.zhigongshebaoEcharts)
+ let option = {
+ color : ['#FF5151','#51FF5D','#FFD151'],
+ title: {
+ text: '杩戜竴骞村叏甯備紒涓氳亴宸ュ吇鑰佷繚闄╁弬淇濅汉鏁拌秼鍔垮浘',
+ left: 'center',
+ top: '5%',
+ textStyle: {
+ color: '#FFFFFF',
+ fontSize: nowSize(30)
+ },
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'],
+ itemWidth: nowSize(30),
+ itemHeight: nowSize(4),
+ itemGap: nowSize(20),
+ right:'8%',
+ top: '5%',
+ textStyle: {
+ color: '#FFFFFF',
+ fontSize: nowSize(24),
+ }
+ },
+ grid: {
+ top: '10%',
+ left: '3%',
+ right: '5%',
+ bottom: '6%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: this.xdata,
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff",
+ fontSize:nowSize(24)
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#999999",
+ width: 1,
+ type: "solid"
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff",
+ fontSize:nowSize(24)
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#999999",
+ width: 1,
+ type: "solid"
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ series: [
+ {
+ name: '鎬绘暟',
+ type: 'line',
+ stack: 'Total',
+ data: this.totalData
+ },
+ {
+ name: '鍦ㄨ亴鑱屽伐',
+ type: 'line',
+ data: this.inJobData
+ },
+ {
+ name: '绂婚��浼�',
+ type: 'line',
+ data: this.outJobData
+ }
+ ]
+ };
+ myEchart.setOption(option)
+ window.addEventListener('resize',function () {
+ myEchart.resize()
+ })
},
handleClose() {
this.dialogVisible = false
@@ -42,14 +163,17 @@
height: 4.375rem;
}
.el-icon-close:before {
- content: url(../../../assets/images/businessPolicy/dialogClose@2x.png);
+ content: '';
+ display: inline-block;
width: 0.1875rem /* 48/256 */;
height: 0.1875rem;
+ background:url(../../../assets/images/businessPolicy/dialogClose@2x.png) no-repeat center;
background-size: 100% 100%;
+ z-index: 9999;
}
.el-dialog__headerbtn{
position: absolute;
- top: 0.3125rem /* 80/256 */;
+ top: 0.234375rem /* 60/256 */;
right: 0.3125rem /* 80/256 */;
}
.el-dialog__header {
@@ -74,3 +198,11 @@
}
}
</style>
+
+<style lang="scss" scoped>
+ .zhigongshebaoEcharts{
+ width:calc(100% - 0.15625rem /* 40/256 */);
+ height: 3.75rem /* 960/256 */;
+ margin: 0.234375rem /* 60/256 */ auto 0;
+ }
+</style>
--
Gitblit v1.9.1