suzhou-jichuang-lanhai
/
jin_ji_hu
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

生产环境工作台样式+1

Browse Source
lijinlong
吕天方 5 months ago
parent 8586c7b41d
commit dad0034760
6 changed files with 233 additions and 37 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape View File

@ -1,6 +1,6 @@
{
"name": "ruoyi",
"version": "1.0.202408291841",
"version": "1.0.202408300856",
"description": "金鸡湖现代服务业品牌管理系统",
"author": "若依",
"license": "MIT",

137
src/assets/styles/publicPro.scss
Unescape View File

@ -263,6 +263,8 @@
.service-left {
padding: 10px;
display: flex;
flex-direction: column;
.home-mainPro-top,
.home-mainPro-middle,
@ -289,7 +291,8 @@
.home-mainPro-top {
height: 35%;
// height: 32%;
height: 250px;
.home-mainPro-top-box {
width: 100%;
height: 100%;
@ -304,14 +307,14 @@
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-gap: 15px;
grid-gap: 10px;
padding-top: 10px;
.AFuwufazhanzonglan-listbox {
width: 100%;
background: #FFFFFF;
border-radius: 10px;
// margin: 2% 0;
padding: 5px 5px;
// padding: 5px 5px;
display: flex;
align-items: center;
@ -409,14 +412,120 @@
}
}
//近三年
//近三年资金拨付情况
.BJinsannianzijin-box {
width: 100%;
height: calc(100% - 25px);
.BJinsannianzijin {
width: 100%;
.BJinsannianzijinchart-left{
height: 100%;
padding-top: 10px;
display: flex;
.echart_boxs {
width: 50%;
height: 25vh;
height: 100%;
// display: grid;
// grid-template-columns: 1fr;
// grid-gap: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
.echart_boxs_top {
.echart_boxs_title {
text-align: center;
font-family: PingFang-SC;
font-weight: bold;
font-size: 14px;
color: #666666;
margin-bottom: 5px;
}
.echart_boxs_btn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 25px;
span {
padding: 3px 10px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-family: ArialB;
font-weight: normal;
font-size: 14px;
color: #999999;
cursor: pointer;
}
.changeFuwuyeYear_span {
background: #0086FF;
color: #FEFEFE;
border: 1px solid #0086FF;
}
}
}
.echart_boxs_middle {
width: 100%;
height: calc(100% - 94px);
// flex: 1;
margin: 10px 0;
display: flex;
.BJinsannianzijinchart-left, .zongbuzhuanxing-box{
width: 75%;
height: 100%;
}
.BJinsannianzijinchart-right {
padding: 5px 0;
display: flex;
flex-direction: column;
justify-content: center;
.yushuan {
span {
font-family: PingFang-SC;
font-weight: bold;
font-size: 12px;
color: #666666;
}
.number-box {
font-family: DINCondensed;
font-weight: bold;
font-size: 28px;
color: #00AEFF;
line-height: 25px;
.number-unit-box {
font-family: PingFang-SC;
font-weight: bold;
font-size: 12px;
color: #666666;
line-height: 25px;
}
}
.bottom_number {
color: #FFA42B ;
}
}
}
}
.echart_boxs_bottom {
text-align: center;
font-family: PingFang-SC;
font-weight: bold;
font-size: 14px;
color: #666666;
// margin-top: 10px;
span {
font-family: DINCondensed;
font-size: 20px;
color: #333;
}
}
}
.echart_boxs_right {
margin-right: 0px;
}
}
}
@ -424,7 +533,8 @@
.home-mainPro-middle {
margin: 10px 0;
height: 40%;
// height: 45%;
flex: 2;
// 企业获得资金拨付排名TOP5
.capitalConditionTOP5-box,.wancheng-project {
flex: 1;
@ -494,7 +604,8 @@
}
.home-mainPro-bottom {
height: 22.5%;
// height: 25.5%;
flex: 1.3;
.wancheng-project {
flex: 1;
section {
@ -509,6 +620,16 @@
cursor: pointer;
}
.orange {
color: #ff8929;
}
.green {
color: #5cbc69;
}
.red {
color: #ff6349;
}
.project-trace-table {
width: 11em;
overflow: hidden;

108
src/views/workbenchPro/components/BJinsannianzijin/index.vue
Unescape View File

@ -1,17 +1,60 @@
<template>
<div class="BJinsannianzijin">
<div class="BJinsannianzijinchart-left" id="BJinsannianzijinchart-left"></div>
<div class="echart_boxs">
<div class="echart_boxs_top">
<div class="echart_boxs_title">【服务业专项资金】</div>
<div class="echart_boxs_btn">
<span v-for="item,index in fuwuyeYear" :class="changeFuwuyeYear == index ? 'changeFuwuyeYear_span': ''" @click="changeFuwuyeYear = index">{{ item.year }}</span>
</div>
</div>
<div class="echart_boxs_middle">
<div class="BJinsannianzijinchart-left" id="BJinsannianzijinchart-left"></div>
<div class="BJinsannianzijinchart-right">
<div class="yushuan">
<span>资金预算</span>
<div class="number-box">60 <span class="number-unit-box">万元</span></div>
</div>
<div class="yushuan">
<span>追加预算</span>
<div class="bottom_number number-box">40 <span class="number-unit-box">万元</span></div>
</div>
</div>
</div>
<div class="echart_boxs_bottom">拨付资金 <span>80</span>万元 (执行率 <span>80</span>% )</div>
</div>
<div class="echart_boxs echart_boxs_right">
<div class="echart_boxs_top">
<div class="echart_boxs_title">【总部专项资金】</div>
<div class="echart_boxs_btn">
<span v-for="item,index in fuwuyeYear" :class="changeFuwuyeYear == index ? 'changeFuwuyeYear_span': ''" @click="changeFuwuyeYear = index">{{ item.year }}</span>
</div>
</div>
<div class="echart_boxs_middle">
<div class="zongbuzhuanxing-box" id="zongbuzhuanxing-box"></div>
<div class="BJinsannianzijinchart-right">
<div class="yushuan">
<span>资金预算</span>
<div class="number-box">60 <span class="number-unit-box">万元</span></div>
</div>
<div class="yushuan">
<span>追加预算</span>
<div class="bottom_number number-box">40 <span class="number-unit-box">万元</span></div>
</div>
</div>
</div>
<div class="echart_boxs_bottom">拨付资金 <span>80</span>万元 (执行率 <span>80</span>% )</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
// import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
// mixins: [resize],
props: {
className: {
type: String,
@ -27,25 +70,46 @@ export default {
}
},
data() {
let date = new Date();
const currentYear = date.getFullYear();
return {
chart: null
chart: null,
chartTwo:null,
changeFuwuyeYear: 0,
fuwuyeYear:[
{
year: currentYear - 1,
},{
year: currentYear - 2,
},{
year: currentYear - 3,
},
]
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
window.addEventListener('resize', this.cancalDebounce);
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
// if (!this.chart) {
// return
// }
// this.chart.dispose()
// this.chart = null
window.removeEventListener('resize', this.cancalDebounce);
},
methods: {
cancalDebounce(){
console.log("11111");
window.onresize = this.chart.resize();
window.onresize = this.chartTwo.resize();
},
initChart() {
this.chart = echarts.init(document.getElementById('BJinsannianzijinchart-left'))
this.chartTwo = echarts.init(document.getElementById('zongbuzhuanxing-box'))
var value1 = Math.random() * 100; // 生成第一个随机值
var value2 = 300 - value1; // 第二个随机值，保证总和为100
@ -58,32 +122,31 @@ export default {
{
type: 'gauge',
splitNumber: 3,
radius: '93%',
center: ["50%", "70%"],
radius: 70,
center: ["45%", "95%"],
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
pointer: {
show: true,
width: 7,
length: "60%",
borderColor: '#000',
borderWidth: '10',
icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVpJREFUWEftlr1KxEAURu9NsBLRDGJh7bqbpBJx3yCJ4KJgp4WFINjaCFZaCoIvIdrZKZhEn8AtFiFZ/AHBwkbMaiGuRXIlnUqWTMbVFZkp5975vsOpBuGb58Uqj/b7l/eiMSj6MH0XWcYqAlQ1P1wWzREGeJgtDyht9QYBRlQFpwdPAlcEQhigZeu7BLiWliJQXfOaU78G8GRXJhNQ6p8LaZ15zZ2iEEIGIsc8AqKZj2UI8EYJjLPT8K4IRGGAyDEXgWg/s4Rwj/nB0s8C2MY1AIx1LEGqMbd5zAtRyMCjbWwhwGZOeIN54UTXAZ4tvRQjXnEGbzAv3ObZ5TYQOfoBEC7whAJQrEBfaci7uM3b5wKI7EoNUZ3LCNPSOyJsI9Lr17nmBitdAegUEtkGpbMkxurwWXCeV5Y15zLwZwFajnlIRPM9MyABpAFpQBqQBqQBaaDnBv7Fj+gdzkcMMPGkRt0AAAAASUVORK5CYII=",
width: 20,
length: "80%",
},
axisLine: {
show: true,
lineStyle: {
width: 35,
width: 10,
color: [
[0.5, '#7BB2FF'], // 第一个颜色
[0.6, '#000'],
[1, '#4186FF'] // 第二个颜色
[0.6, '#00AEFF'], // 第一个颜色
[0.63, '#F5F8FA'],
[1, '#FFA42B '] // 第二个颜色
],
},
},
axisLabel: {
show: true,
show: false,
color: "#666",
fontSize: 16,
formatter: function (value) {
@ -109,7 +172,7 @@ export default {
},
data: [
{
value: value1,
value: 61.5,
name: '决策层国际化导向'
}
],
@ -121,6 +184,9 @@ export default {
this.chart.setOption(
option
)
this.chartTwo.setOption(
option
)
}
}
}

3
src/views/workbenchPro/components/BJinsannianzijin/mixins/resize.js
Unescape View File

@ -49,8 +49,9 @@ export default {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
},
resize() {
const { chart } = this
const { chart, chartTwo } = this
chart && chart.resize()
chartTwo && chartTwo.resize()
}
}
}

2
src/views/workbenchPro/components/capitalConditionTOP5/index.vue
Unescape View File

@ -43,7 +43,7 @@ export default {
props:{
typeValue:{
type:Number,
default:1,
default:2,
},
yearsValue:{
type:Number,

18
src/views/workbenchPro/index.vue
Unescape View File

@ -52,7 +52,7 @@
<span class="garden"></span>
<span class="box-header-title">企业获得资金拨付排名TOP5</span>
<div class="left-box-select">
<el-select v-model="yearsChange" class="years-select" placeholder="请选择">
<!-- <el-select v-model="yearsChange" class="years-select" placeholder="请选择">
<el-option
label="当年"
:value="1">
@ -61,8 +61,16 @@
label="近三年"
:value="2">
</el-option>
</el-select>
<el-select v-model="typeValue" placeholder="请选择">
</el-select> -->
<el-radio-group v-model="yearsChange" class="years-select" size="small" fill="#1890FF">
<el-radio-button :label="1">当年</el-radio-button>
<el-radio-button :label="2">近三年</el-radio-button>
</el-radio-group>
<el-radio-group v-model="typeValue" size="small" fill="#1890FF">
<el-radio-button :label="2">服务业专项</el-radio-button>
<el-radio-button :label="1">总部专项</el-radio-button>
</el-radio-group>
<!-- <el-select v-model="typeValue" placeholder="请选择">
<el-option
label="总部专项"
:value="1">
@ -71,7 +79,7 @@
label="服务业专项"
:value="2">
</el-option>
</el-select>
</el-select> -->
</div>
</div>
<div class="capitalConditionTOP5-box">
@ -338,7 +346,7 @@ export default {
info:{},
time:"",
yearsChange: 1,
typeValue: 1,
typeValue: 2,
tableData:[],
tabHeader:null,
tableDataTWo:[],

Write Preview
Loading…
Cancel
Save