580 lines
13 KiB
Vue
580 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<container2 title="综合计划/绩效计划">
|
|
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
|
|
<div style="display: flex; height: 100%" v-if="index == 0">
|
|
<div style="height: 100%; width: 75%" ref="chart"></div>
|
|
<div
|
|
style="
|
|
height: 100%;
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div class="box"><span style="font-size: 25px">·</span><span style="font-size: 18px">总体完成率</span></div>
|
|
<progressBar :percentage="80" style="margin: 10px 0 20px" />
|
|
<i class="num">80%</i>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; height: 100%" v-else>
|
|
<div style="height: 100%; width: 75%" ref="chart2"></div>
|
|
<div
|
|
style="
|
|
height: 100%;
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div class="box"><span style="font-size: 25px">·</span><span style="font-size: 18px">总体完成率</span></div>
|
|
<progressBar :percentage="80" style="margin: 10px 0 20px" />
|
|
<i class="num">80%</i>
|
|
</div>
|
|
</div>
|
|
</container2>
|
|
<container2 title="信息公示" style="margin-top: 10px">
|
|
<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['民用产业项目信息', '信息公示']"></bigScreenTabs>
|
|
<el-row style="height: 100%; width: 100%; padding: 0 10px 0 20px" v-show="index2 == 0">
|
|
<el-col :span="24" style="margin-bottom: 1px">
|
|
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
|
<el-col style="text-align: center" :span="3">序号</el-col>
|
|
<el-col style="text-align: center" :span="5">项目名称</el-col>
|
|
<el-col style="text-align: center" :span="5">负责人</el-col>
|
|
<el-col style="text-align: center" :span="7">团队</el-col>
|
|
<el-col style="text-align: center" :span="4">完成情况</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<vue-seamless-scroll
|
|
:data="listData"
|
|
class="warp-scroll"
|
|
:class-option="{
|
|
singleHeight: 43,
|
|
}"
|
|
style="height: 168px"
|
|
>
|
|
<ul class="item">
|
|
<li v-for="item in scrollList" :key="item.id">
|
|
<el-row>
|
|
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
|
<el-col style="text-align: center" :span="5">XX开发项目</el-col>
|
|
<el-col style="text-align: center" :span="5"> 闵茗 </el-col>
|
|
<el-col style="text-align: center" :span="7">部门一 </el-col>
|
|
<el-col style="text-align: center" :span="4">
|
|
<section class="box">
|
|
<span v-if="item.status == 1" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
|
<span v-else-if="item.status == 3" style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
|
>·</span
|
|
>
|
|
<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span>
|
|
<span v-if="item.status == 1">已完成</span>
|
|
<span v-else-if="item.status == 3">未完成</span>
|
|
<span v-else>进行中</span>
|
|
</section>
|
|
</el-col>
|
|
</el-row>
|
|
</li>
|
|
</ul>
|
|
</vue-seamless-scroll>
|
|
</el-row>
|
|
<el-row style="height: 100%; width: 100%; padding: 0 10px 0 20px" v-show="index2 == 1">
|
|
<el-col :span="24" style="margin-bottom: 1px">
|
|
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
|
<el-col style="text-align: center" :span="3">序号</el-col>
|
|
<el-col style="text-align: center" :span="7">部门</el-col>
|
|
<el-col style="text-align: center" :span="7">公示内容</el-col>
|
|
<el-col style="text-align: center" :span="7">时间</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<vue-seamless-scroll
|
|
:data="listData"
|
|
class="warp-scroll"
|
|
:class-option="{
|
|
singleHeight: 43,
|
|
}"
|
|
style="height: 168px"
|
|
>
|
|
<ul class="item">
|
|
<li v-for="item in scrollList" :key="item.id">
|
|
<el-row>
|
|
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
|
<el-col style="text-align: center" :span="7">部门一 </el-col>
|
|
<el-col style="text-align: center" :span="7">易燃作业 </el-col>
|
|
<el-col style="text-align: center" :span="7">2021-12-12 </el-col>
|
|
</el-row>
|
|
</li>
|
|
</ul>
|
|
</vue-seamless-scroll>
|
|
</el-row>
|
|
</container2>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import rocketTit from '../components/rocketTit/index.vue'
|
|
import container2 from './components/container2/index.vue'
|
|
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
|
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
import colorList from '@/utils/colorPalette'
|
|
// import {Liquid} from '@antv/g2plot';
|
|
// import resize from '../../dashboard/mixins/resize'
|
|
import echarts from 'echarts'
|
|
require('echarts/theme/macarons') // echarts theme
|
|
export default {
|
|
// mixins: [resize],
|
|
name: 'right1',
|
|
components: {
|
|
rocketTit,
|
|
container2,
|
|
bigScreenTabs,
|
|
progressBar,
|
|
vueSeamlessScroll,
|
|
},
|
|
data() {
|
|
return {
|
|
index: 0,
|
|
index2: 0,
|
|
colorList,
|
|
chart: null,
|
|
chart2: null,
|
|
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
|
scrollList: [
|
|
{
|
|
id: 1,
|
|
name: '计划一',
|
|
level: '一级',
|
|
status: 1,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '计划二',
|
|
level: '二级',
|
|
status: 2,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '计划三',
|
|
level: '三级',
|
|
status: 3,
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '计划四',
|
|
level: '二级',
|
|
status: 2,
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '计划五',
|
|
level: '三级',
|
|
status: 3,
|
|
},
|
|
],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.initChart()
|
|
})
|
|
},
|
|
beforeDestroy() {},
|
|
watch: {
|
|
index(newVal, oldVal) {
|
|
if (newVal == 0) {
|
|
this.chart2.dispose()
|
|
this.chart2 = null
|
|
this.$nextTick(() => {
|
|
this.initChart()
|
|
})
|
|
} else {
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
this.$nextTick(() => {
|
|
this.initLine()
|
|
})
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
this.chart = echarts.init(this.$refs.chart)
|
|
this.setOptions()
|
|
},
|
|
setOptions() {
|
|
this.chart.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
legend: {
|
|
data: ['综合', '绩效'],
|
|
textStyle: {
|
|
color: '#fff', //legend字体颜色
|
|
},
|
|
},
|
|
grid: {
|
|
left: 20,
|
|
right: 20,
|
|
top: 30,
|
|
bottom: 50,
|
|
containLabel: true,
|
|
},
|
|
dataZoom: {
|
|
type: 'slider',
|
|
// start: 0,
|
|
// end: 50,
|
|
textStyle: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255, 255, 255)',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '个',
|
|
splitLine: {
|
|
show: true,
|
|
// 改变轴线颜色
|
|
lineStyle: {
|
|
// 使用深浅的间隔色
|
|
color: ['rgba(255, 255, 255,.5)'],
|
|
},
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255, 255, 255)',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
type: 'value',
|
|
min: 0,
|
|
max: 100,
|
|
interval: 20,
|
|
axisLabel: {
|
|
formatter: '{value} %',
|
|
},
|
|
splitLine: {
|
|
show: false, //不显示网格线
|
|
},
|
|
splitArea: {
|
|
show: false, //不显示网格区域
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255, 255, 255)',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '绩效',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
emphasis: {
|
|
focus: 'series',
|
|
},
|
|
itemStyle: {
|
|
color: '#F64F58',
|
|
},
|
|
barWidth: 30,
|
|
data: [150, 232, 201, 154, 190, 330, 410],
|
|
},
|
|
{
|
|
name: '综合',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
emphasis: {
|
|
focus: 'series',
|
|
},
|
|
itemStyle: {
|
|
color: '#F6D97E',
|
|
},
|
|
barWidth: 30,
|
|
data: [150, 232, 201, 154, 190, 330, 410],
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
smooth: false,
|
|
data: [500, 550, 700, 520, 650, 520, 550],
|
|
itemStyle: {
|
|
color: '#F6D97E',
|
|
},
|
|
symbol: 'none',
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
smooth: false,
|
|
itemStyle: {
|
|
color: '#F64F58',
|
|
},
|
|
data: [600, 500, 700, 620, 750, 800, 600],
|
|
symbol: 'none',
|
|
},
|
|
],
|
|
})
|
|
},
|
|
initLine() {
|
|
this.chart2 = echarts.init(this.$refs.chart2)
|
|
this.setOptions2()
|
|
},
|
|
setOptions2() {
|
|
this.chart2.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
legend: {
|
|
data: ['综合', '绩效'],
|
|
textStyle: {
|
|
color: '#fff', //legend字体颜色
|
|
},
|
|
},
|
|
grid: {
|
|
left: 20,
|
|
right: 20,
|
|
top: 30,
|
|
bottom: 50,
|
|
containLabel: true,
|
|
},
|
|
dataZoom: {
|
|
type: 'slider',
|
|
// start: 0,
|
|
// end: 50,
|
|
textStyle: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255, 255, 255)',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '个',
|
|
splitLine: {
|
|
show: true,
|
|
// 改变轴线颜色
|
|
lineStyle: {
|
|
// 使用深浅的间隔色
|
|
color: ['rgba(255, 255, 255,.5)'],
|
|
},
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255, 255, 255)',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
type: 'value',
|
|
min: 0,
|
|
max: 100,
|
|
interval: 20,
|
|
axisLabel: {
|
|
formatter: '{value} %',
|
|
},
|
|
splitLine: {
|
|
show: false, //不显示网格线
|
|
},
|
|
splitArea: {
|
|
show: false, //不显示网格区域
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255, 255, 255)',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '绩效',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
emphasis: {
|
|
focus: 'series',
|
|
},
|
|
itemStyle: {
|
|
color: '#F64F58',
|
|
},
|
|
barWidth: 30,
|
|
data: [150, 232, 201, 154, 190, 330, 410],
|
|
},
|
|
{
|
|
name: '综合',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
emphasis: {
|
|
focus: 'series',
|
|
},
|
|
itemStyle: {
|
|
color: '#F6D97E',
|
|
},
|
|
barWidth: 30,
|
|
data: [150, 232, 201, 154, 190, 330, 410],
|
|
},
|
|
{
|
|
name: '完成率',
|
|
type: 'scatter',
|
|
symbol: 'rect',
|
|
symbolSize: [30, 4],
|
|
symbolOffset: [0, 0],
|
|
position: [0, 0],
|
|
itemStyle: {
|
|
color: '#7EA7FC',
|
|
},
|
|
data: [600, 650, 700, 750, 800, 750, 700],
|
|
},
|
|
// {
|
|
// name: '',
|
|
// type: 'line',
|
|
// smooth: false,
|
|
// data: [500, 550, 700, 520, 650, 520, 550],
|
|
// itemStyle: {
|
|
// color: '#F6D97E',
|
|
// },
|
|
// symbol: 'none',
|
|
// },
|
|
// {
|
|
// name: '',
|
|
// type: 'line',
|
|
// smooth: false,
|
|
// itemStyle: {
|
|
// color: '#F64F58',
|
|
// },
|
|
// data: [600, 500, 700, 620, 750, 800, 600],
|
|
// symbol: 'none',
|
|
// },
|
|
],
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.warp-scroll {
|
|
height: 126px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 auto;
|
|
li,
|
|
a {
|
|
display: block;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 15px;
|
|
}
|
|
li {
|
|
display: block;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
background: rgba(42, 67, 125, 0.25);
|
|
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
|
margin-bottom: 1px;
|
|
img {
|
|
vertical-align: sub;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
// .box {
|
|
// display: flex;
|
|
// align-items: center;
|
|
// }
|
|
.num {
|
|
font-size: 24px;
|
|
color: #91d5fe;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.content1 {
|
|
// height: 200px;
|
|
height: 100%;
|
|
|
|
.chart1 {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
height: 192px;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.content2 {
|
|
padding: 20px;
|
|
flex: 1;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.chart2 {
|
|
height: 100%;
|
|
}
|
|
|
|
.tit {
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
line-height: 22px;
|
|
position: relative;
|
|
padding-left: 15px;
|
|
}
|
|
.tit::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 0px;
|
|
width: 4px;
|
|
height: 16px;
|
|
background: #00ffff;
|
|
}
|
|
}
|
|
</style>
|