From 3bbfa337c5b3a79220c66a65c22f8277099b6074 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123456 <zxx19900626>
Date: 星期二, 12 四月 2022 18:41:55 +0800
Subject: [PATCH] 企业职工社保及弹框
---
src/libs/nowSize.js | 7 ++
src/main.js | 2
src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue | 121 +++++++++++++++++++++++++++++++++++++++
.postcssrc.js | 2
4 files changed, 129 insertions(+), 3 deletions(-)
diff --git a/.postcssrc.js b/.postcssrc.js
index 4c82428..6e8fedd 100644
--- a/.postcssrc.js
+++ b/.postcssrc.js
@@ -8,7 +8,7 @@
"autoprefixer": {},
"postcss-px2rem-exclude": { // 娣诲姞鐨勪唬鐮�
remUnit: 256,
- // exclude: /node_modules|element/i // 蹇界暐node_modules鐩綍涓嬬殑鏂囦欢
+ exclude: /node_modules|element/i // 蹇界暐node_modules鐩綍涓嬬殑鏂囦欢
}
}
diff --git a/src/libs/nowSize.js b/src/libs/nowSize.js
new file mode 100644
index 0000000..00621b3
--- /dev/null
+++ b/src/libs/nowSize.js
@@ -0,0 +1,7 @@
+
+function nowSize(val,initWidth=2560) { //鐜板湪寰堝娴忚鍣ㄩ兘鏄�1920*1080锛宨nitWidth鍊煎彲鏍规嵁鑷繁闇�姹傝繘琛屼慨鏀�
+ var nowClientWidth = document.documentElement.clientWidth
+ return val * (nowClientWidth / initWidth);
+}
+
+export default nowSize
diff --git a/src/main.js b/src/main.js
index 55769b4..095dcc6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,8 @@
import { getStore, setStore, removeStore } from "./libs/store"
import store from './store'
import 'lib-flexible/flexible.js'
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
import Plugin from 'v-fit-columns';
diff --git a/src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue b/src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue
index dfaae68..7cfef4c 100644
--- a/src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue
+++ b/src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue
@@ -11,6 +11,8 @@
</template>
<script>
+ import echarts from "echarts/lib/echarts";
+ import nowSize from '../../../libs/nowSize'
export default {
name: "zhigongshebaoForm",
data() {
@@ -21,6 +23,110 @@
methods: {
init() {
this.dialogVisible = true
+ this.$nextTick(() => {
+ 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: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
+ 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: [370, 332, 401, 534, 490, 530, 910]
+ },
+ {
+ name: '鍦ㄨ亴鑱屽伐',
+ type: 'line',
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: '绂婚��浼�',
+ type: 'line',
+ data: [150, 132, 201, 154, 190, 330, 410]
+ }
+ ]
+ };
+ myEchart.setOption(option)
+ window.addEventListener('resize',function () {
+ myEchart.resize()
+ })
},
handleClose() {
this.dialogVisible = false
@@ -42,14 +148,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 +183,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