up
This commit is contained in:
熊丽君
@ -5,31 +5,76 @@
|
||||
<rocketTit class="tit">全年目标</rocketTit>
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
<div><img src="./icon1.png" alt="" /><span style="font-weight: bold">收入</span></div>
|
||||
<div class="box"><i>{{val.completedIncome}}/</i><i class="num">{{val.targetIncome}}</i><span class="num2">万</span></div>
|
||||
<div>
|
||||
<img src="./icon1.png" alt="" /><span style="font-weight: bold"
|
||||
>收入</span
|
||||
>
|
||||
</div>
|
||||
<div class="box">
|
||||
<i>{{ val.completedIncome }}/</i
|
||||
><i class="num">{{ val.targetIncome }}</i
|
||||
><span class="num2">万</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="val.completedIncome/val.targetIncome*100" />
|
||||
<progressBar
|
||||
:percentage="(val.completedIncome / val.targetIncome) * 100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon2.png" alt="" /><span style="font-weight: bold">利润</span></div>
|
||||
<div class="box"><i>{{val.completedProfit}}/</i><i class="num">{{val.targetProfit}}</i><span class="num2">万</span></div>
|
||||
<div>
|
||||
<img src="./icon2.png" alt="" /><span style="font-weight: bold"
|
||||
>利润</span
|
||||
>
|
||||
</div>
|
||||
<div class="box">
|
||||
<i>{{ val.completedProfit }}/</i
|
||||
><i class="num">{{ val.targetProfit }}</i
|
||||
><span class="num2">万</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="val.completedProfit/val.targetProfit*100" />
|
||||
<progressBar
|
||||
:percentage="(val.completedProfit / val.targetProfit) * 100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon3.png" alt="" /><span style="font-weight: bold">装药量</span></div>
|
||||
<div class="box"><i>{{val.completedChargeQuantity}}/</i><i class="num">{{val.targetChargeQuantity}}</i><span class="num2">万件</span></div>
|
||||
<div>
|
||||
<img src="./icon3.png" alt="" /><span style="font-weight: bold"
|
||||
>装药量</span
|
||||
>
|
||||
</div>
|
||||
<div class="box">
|
||||
<i>{{ val.completedChargeQuantity }}/</i
|
||||
><i class="num">{{ val.targetChargeQuantity }}</i
|
||||
><span class="num2">万件</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="val.completedChargeQuantity/val.targetChargeQuantity*100" />
|
||||
<progressBar
|
||||
:percentage="
|
||||
(val.completedChargeQuantity / val.targetChargeQuantity) * 100
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon4.png" alt="" /><span style="font-weight: bold">交付数量</span></div>
|
||||
<div class="box"><i>{{val.completedDeliveryQuantity}}/</i><i class="num">{{val.targetDeliveryQuantity}}</i><span class="num2">万件</span></div>
|
||||
<div>
|
||||
<img src="./icon4.png" alt="" /><span style="font-weight: bold"
|
||||
>交付数量</span
|
||||
>
|
||||
</div>
|
||||
<div class="box">
|
||||
<i>{{ val.completedDeliveryQuantity }}/</i
|
||||
><i class="num">{{ val.targetDeliveryQuantity }}</i
|
||||
><span class="num2">万件</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="(val.completedDeliveryQuantity/val.targetDeliveryQuantity)*100" />
|
||||
<progressBar
|
||||
:percentage="
|
||||
(val.completedDeliveryQuantity / val.targetDeliveryQuantity) *
|
||||
100
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,23 +83,23 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container3 from '../components/container3/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import progressBar from './../components/progress/index.vue'
|
||||
import container3 from "../components/container3/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import progressBar from "./../components/progress/index.vue";
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
import echarts from "echarts";
|
||||
require("echarts/theme/macarons"); // echarts theme
|
||||
import resize from "../../dashboard/mixins/resize";
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
name: "left1",
|
||||
components: {
|
||||
container3,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
val: {
|
||||
bigPic: "",
|
||||
@ -68,31 +113,30 @@ export default {
|
||||
targetIncome: "0",
|
||||
targetProfit: "0",
|
||||
year: "0",
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
this.getData();
|
||||
});
|
||||
},
|
||||
beforeDestroy () { },
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
getData () {
|
||||
getData() {
|
||||
this.request({
|
||||
url: '/hx/cockpitOverview/annualTargetAndPic',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
url: "/hx/cockpitOverview/annualTargetAndPic",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
this.val = res.data[0];
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,370 +1,379 @@
|
||||
<template>
|
||||
<div>
|
||||
<container2 title="经营责任书完成概况">
|
||||
<div class="wrap">
|
||||
<el-row class="content1">
|
||||
<el-col :span="24">
|
||||
<div id="left1" ref="left1" class="chart1"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="box">
|
||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span>总完成任务/完成率</span>
|
||||
<i class="num">{{res.map.completedTasks}}/{{(res.map.cate).toFixed(2)}}%</i>
|
||||
<progressBar :percentage="res.map.cate" />
|
||||
</div>
|
||||
</div>
|
||||
</container2>
|
||||
<container2 title="收入概况" style="margin-top: 10px">
|
||||
<div style="height: 100%; width: 100%" ref="left2"></div>
|
||||
<!-- <div class="wrap">
|
||||
<div>
|
||||
<container2 title="经营责任书完成概况">
|
||||
<div class="wrap">
|
||||
<el-row class="content1">
|
||||
<el-col :span="24">
|
||||
<div id="left1" ref="left1" class="chart1"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="box">
|
||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span>总完成任务/完成率</span>
|
||||
<i class="num"
|
||||
>{{ res.map.completedTasks }}/{{ res.map.cate.toFixed(2) }}%</i
|
||||
>
|
||||
<progressBar :percentage="res.map.cate" />
|
||||
</div>
|
||||
</div>
|
||||
</container2>
|
||||
<container2 title="收入概况" style="margin-top: 10px">
|
||||
<div style="height: 100%; width: 100%" ref="left2"></div>
|
||||
<!-- <div class="wrap">
|
||||
<el-row class="content2">
|
||||
<el-col :span="24" style="height: 100%">
|
||||
<div id="left2" ref="left2" class="chart2"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div> -->
|
||||
</container2>
|
||||
</div>
|
||||
</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 colorList from '@/utils/colorPalette'
|
||||
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 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
|
||||
import echarts from "echarts";
|
||||
require("echarts/theme/macarons"); // echarts theme
|
||||
|
||||
import request from '@/utils/request'
|
||||
import request from "@/utils/request";
|
||||
//hx/cockpitOverview/businessResponsibility
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{ value: 154, name: '类别一' },
|
||||
{ value: 775, name: '类别二' },
|
||||
{ value: 679, name: '类别三' },
|
||||
{ value: 679, name: '类别四' },
|
||||
{ value: 679, name: '类别五' },
|
||||
{ value: 679, name: '类别六' },
|
||||
{ value: 679, name: '类别七' },
|
||||
{ value: 679, name: '类别八' },
|
||||
],
|
||||
colorList,
|
||||
res: {
|
||||
map: {
|
||||
cate: 0,
|
||||
completedTasks: 0,
|
||||
targetTasks: 0,
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
request({
|
||||
url: '/hx/cockpitOverview/businessResponsibility',
|
||||
method: 'get',
|
||||
}).then(res=> {
|
||||
this.res = res.data;
|
||||
let titData = [];
|
||||
let valData = [];
|
||||
for (let i = 0; i < this.res.list.length; i++) {
|
||||
const item = this.res.list[i];
|
||||
titData.push(item.indicator_name);
|
||||
valData.push(
|
||||
{ value: item.cate, name: item.indicator_name },
|
||||
);
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
data: titData,
|
||||
orient: 'vertical',
|
||||
// left: '60%',
|
||||
right: '2%',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
},
|
||||
// formatter: value => {
|
||||
// return value + calcAverageValue(this.data, value)
|
||||
// },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '概括',
|
||||
type: 'pie',
|
||||
radius: [0, '85%'],
|
||||
center: ['35%', '50%'],
|
||||
label: {
|
||||
formatter: '',
|
||||
position: 'inner',
|
||||
fontSize: 14,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: valData,
|
||||
},
|
||||
],
|
||||
})
|
||||
// mixins: [resize],
|
||||
name: "left1",
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{ value: 154, name: "类别一" },
|
||||
{ value: 775, name: "类别二" },
|
||||
{ value: 679, name: "类别三" },
|
||||
{ value: 679, name: "类别四" },
|
||||
{ value: 679, name: "类别五" },
|
||||
{ value: 679, name: "类别六" },
|
||||
{ value: 679, name: "类别七" },
|
||||
{ value: 679, name: "类别八" },
|
||||
],
|
||||
colorList,
|
||||
res: {
|
||||
map: {
|
||||
cate: 0,
|
||||
completedTasks: 0,
|
||||
targetTasks: 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
this.initLine();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.setOptions();
|
||||
},
|
||||
setOptions() {
|
||||
request({
|
||||
url: "/hx/cockpitOverview/businessResponsibility",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
this.res = res.data;
|
||||
let titData = [];
|
||||
let valData = [];
|
||||
for (let i = 0; i < this.res.list.length; i++) {
|
||||
const item = this.res.list[i];
|
||||
titData.push(item.indicator_name);
|
||||
valData.push({ value: item.cate, name: item.indicator_name });
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.left1, "macarons");
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
type: "scroll",
|
||||
data: titData,
|
||||
orient: "vertical",
|
||||
// left: '60%',
|
||||
right: "2%",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
// formatter: value => {
|
||||
// return value + calcAverageValue(this.data, value)
|
||||
// },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "概括",
|
||||
type: "pie",
|
||||
radius: [0, "85%"],
|
||||
center: ["35%", "50%"],
|
||||
label: {
|
||||
formatter: "",
|
||||
position: "inner",
|
||||
fontSize: 14,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: valData,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
const calcAverageValue = (data, name) => {
|
||||
const items = data.filter(d => d.name === name)
|
||||
return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-'
|
||||
}
|
||||
},
|
||||
initLine() {
|
||||
request({
|
||||
url: '/hx/cockpitOverview/revenueProfile',
|
||||
method: 'get',
|
||||
}).then(res=> {
|
||||
this.chart = echarts.init(this.$refs.left2)
|
||||
let titData = [];
|
||||
let COMPLETEDREVENUE = [];
|
||||
let FORECASTREVENUE = [];
|
||||
let TARGETREVENUE = [];
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
const item = res.data[i];
|
||||
titData.push(item.month);
|
||||
COMPLETEDREVENUE.push(item.COMPLETEDREVENUE);
|
||||
FORECASTREVENUE.push(item.FORECASTREVENUE);
|
||||
TARGETREVENUE.push((item.COMPLETEDREVENUE/item.TARGETREVENUE * 100).toFixed(2));
|
||||
}
|
||||
this.setOptions2(titData,COMPLETEDREVENUE,FORECASTREVENUE,TARGETREVENUE)
|
||||
})
|
||||
},
|
||||
setOptions2(titData,COMPLETEDREVENUE,FORECASTREVENUE,TARGETREVENUE) {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
legend: {
|
||||
data: ['收入', '预测', '目标完成率'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
// selectedMode: false,
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
left: 30,
|
||||
right: 10,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
xAxis: {
|
||||
// data :[
|
||||
// '2021-01',
|
||||
// '2021-02',
|
||||
// '2021-03',
|
||||
// '2021-04',
|
||||
// '2021-05',
|
||||
// '2021-06',
|
||||
// '2021-07',
|
||||
// '2021-08',
|
||||
// '2021-09',
|
||||
// '2021-10',
|
||||
// '2021-11',
|
||||
// '2021-12',
|
||||
// ],
|
||||
data: titData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titData.length,7),
|
||||
},
|
||||
color: ['#ccc', 'red'],
|
||||
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: Math.max.apply(null, TARGETREVENUE),
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '预测',
|
||||
type: 'bar',
|
||||
z: '-1',
|
||||
barGap: '-75%',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, .3)',
|
||||
},
|
||||
data: FORECASTREVENUE,
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
},
|
||||
data: COMPLETEDREVENUE,
|
||||
},
|
||||
{
|
||||
name: '目标完成率',
|
||||
type: 'scatter',
|
||||
symbol: 'rect',
|
||||
symbolSize: [30, 4],
|
||||
symbolOffset: [3, 0],
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
},
|
||||
yAxisIndex: 1,
|
||||
data: TARGETREVENUE,
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
const calcAverageValue = (data, name) => {
|
||||
const items = data.filter((d) => d.name === name);
|
||||
return items.length
|
||||
? items.reduce((a, b) => a + b.value, 0) / items.length
|
||||
: "-";
|
||||
};
|
||||
},
|
||||
initLine() {
|
||||
request({
|
||||
url: "/hx/cockpitOverview/revenueProfile",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
this.chart = echarts.init(this.$refs.left2);
|
||||
let titData = [];
|
||||
let COMPLETEDREVENUE = [];
|
||||
let FORECASTREVENUE = [];
|
||||
let TARGETREVENUE = [];
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
const item = res.data[i];
|
||||
titData.push(item.month);
|
||||
COMPLETEDREVENUE.push(item.COMPLETEDREVENUE);
|
||||
FORECASTREVENUE.push(item.FORECASTREVENUE);
|
||||
TARGETREVENUE.push(
|
||||
((item.COMPLETEDREVENUE / item.TARGETREVENUE) * 100).toFixed(2)
|
||||
);
|
||||
}
|
||||
this.setOptions2(
|
||||
titData,
|
||||
COMPLETEDREVENUE,
|
||||
FORECASTREVENUE,
|
||||
TARGETREVENUE
|
||||
);
|
||||
});
|
||||
},
|
||||
setOptions2(titData, COMPLETEDREVENUE, FORECASTREVENUE, TARGETREVENUE) {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
legend: {
|
||||
data: ["收入", "预测", "目标完成率"],
|
||||
textStyle: {
|
||||
color: "#fff", //legend字体颜色
|
||||
},
|
||||
// selectedMode: false,
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
left: 30,
|
||||
right: 10,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
xAxis: {
|
||||
// data :[
|
||||
// '2021-01',
|
||||
// '2021-02',
|
||||
// '2021-03',
|
||||
// '2021-04',
|
||||
// '2021-05',
|
||||
// '2021-06',
|
||||
// '2021-07',
|
||||
// '2021-08',
|
||||
// '2021-09',
|
||||
// '2021-10',
|
||||
// '2021-11',
|
||||
// '2021-12',
|
||||
// ],
|
||||
data: titData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titData.length, 7),
|
||||
},
|
||||
color: ["#ccc", "red"],
|
||||
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: Math.max.apply(null, TARGETREVENUE),
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "预测",
|
||||
type: "bar",
|
||||
z: "-1",
|
||||
barGap: "-75%",
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: "rgba(85, 197, 162, .3)",
|
||||
},
|
||||
data: FORECASTREVENUE,
|
||||
},
|
||||
{
|
||||
name: "收入",
|
||||
type: "bar",
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: "rgba(90, 216, 166, 0.85)",
|
||||
},
|
||||
data: COMPLETEDREVENUE,
|
||||
},
|
||||
{
|
||||
name: "目标完成率",
|
||||
type: "scatter",
|
||||
symbol: "rect",
|
||||
symbolSize: [30, 4],
|
||||
symbolOffset: [3, 0],
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: "#F6D97E",
|
||||
},
|
||||
yAxisIndex: 1,
|
||||
data: TARGETREVENUE,
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.box {
|
||||
padding: 0 0 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.box {
|
||||
padding: 0 0 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content1 {
|
||||
// height: 200px;
|
||||
height: 100%;
|
||||
// height: 200px;
|
||||
height: 100%;
|
||||
|
||||
.chart1 {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 192px;
|
||||
background: transparent;
|
||||
}
|
||||
.chart1 {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 192px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: normal;
|
||||
color: #91d5fe;
|
||||
vertical-align: sub;
|
||||
// margin-right: 3px;
|
||||
font-size: 30px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: normal;
|
||||
color: #91d5fe;
|
||||
vertical-align: sub;
|
||||
// margin-right: 3px;
|
||||
}
|
||||
|
||||
.content2 {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.chart2 {
|
||||
height: 100%;
|
||||
}
|
||||
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;
|
||||
}
|
||||
.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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,49 +1,92 @@
|
||||
<template>
|
||||
<div>
|
||||
<container2 title="综合计划/绩效计划">
|
||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
|
||||
<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;
|
||||
">
|
||||
<el-date-picker v-model="month" value-format="yyyy-MM" v-if="index == 0" type="month" size="mini" placeholder="选择月">
|
||||
<div
|
||||
style="
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="month"
|
||||
value-format="yyyy-MM"
|
||||
v-if="index == 0"
|
||||
type="month"
|
||||
size="mini"
|
||||
placeholder="选择月"
|
||||
>
|
||||
</el-date-picker>
|
||||
<div class="box"><span style="font-size: 25px">·</span><span style="font-size: 18px">综合完成率</span></div>
|
||||
<progressBar :percentage="rate.comprehensiveRate" style="margin: 10px 0 20px" />
|
||||
<i class="num">{{rate.comprehensiveRate.toFixed(2) || 0}}%</i>
|
||||
<div style="height:10px"></div>
|
||||
<div class="box"><span style="font-size: 25px">·</span><span style="font-size: 18px">绩效完成率</span></div>
|
||||
<progressBar :percentage="rate.performanceRate" style="margin: 10px 0 20px" />
|
||||
<i class="num">{{rate.performanceRate.toFixed(2) || 0}}%</i>
|
||||
<div class="box">
|
||||
<span style="font-size: 25px">·</span
|
||||
><span style="font-size: 18px">综合完成率</span>
|
||||
</div>
|
||||
<progressBar
|
||||
:percentage="rate.comprehensiveRate"
|
||||
style="margin: 10px 0 20px"
|
||||
/>
|
||||
<i class="num">{{ rate.comprehensiveRate.toFixed(2) || 0 }}%</i>
|
||||
<div style="height: 10px"></div>
|
||||
<div class="box">
|
||||
<span style="font-size: 25px">·</span
|
||||
><span style="font-size: 18px">绩效完成率</span>
|
||||
</div>
|
||||
<progressBar
|
||||
:percentage="rate.performanceRate"
|
||||
style="margin: 10px 0 20px"
|
||||
/>
|
||||
<i class="num">{{ rate.performanceRate.toFixed(2) || 0 }}%</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>
|
||||
<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">
|
||||
<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-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>
|
||||
@ -51,22 +94,51 @@
|
||||
<el-col style="text-align: center" :span="4">完成情况</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll ref="seamlessScroll1" :data="listData" class="warp-scroll" :class-option="{
|
||||
singleHeight: 43,
|
||||
}" style="height: 168px">
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll1"
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
singleHeight: 43,
|
||||
}"
|
||||
style="height: 168px"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList1" :key="item.id">
|
||||
<el-row>
|
||||
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||
<el-col style="text-align: center" :title="item.projectName" :span="5">{{item.projectName}}</el-col>
|
||||
<el-col style="text-align: center" :span="5"> {{item.director}} </el-col>
|
||||
<el-col style="text-align: center" :span="7">{{item.deptName}} </el-col>
|
||||
<el-col style="text-align: center" :span="3">{{
|
||||
item.id
|
||||
}}</el-col>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:title="item.projectName"
|
||||
:span="5"
|
||||
>{{ item.projectName }}</el-col
|
||||
>
|
||||
<el-col style="text-align: center" :span="5">
|
||||
{{ item.director }}
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="7"
|
||||
>{{ item.deptName }}
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="4">
|
||||
<section class="box">
|
||||
<span v-if="item.completedStatus == '已完成'" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-else-if="item.completedStatus == '未完成'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span>
|
||||
<span>{{item.completedStatus}}</span>
|
||||
<span
|
||||
v-if="item.completedStatus == '已完成'"
|
||||
style="color: #6fd1b4; font-size: 25px; margin-right: 3px"
|
||||
>·</span
|
||||
>
|
||||
<span
|
||||
v-else-if="item.completedStatus == '未完成'"
|
||||
style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
||||
>·</span
|
||||
>
|
||||
<span
|
||||
v-else
|
||||
style="color: #fa8c16; font-size: 25px; margin-right: 3px"
|
||||
>·</span
|
||||
>
|
||||
<span>{{ item.completedStatus }}</span>
|
||||
</section>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -74,25 +146,51 @@
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</el-row>
|
||||
<el-row style="height: 100%; width: 100%; padding: 0 10px 0 20px" v-show="index2 == 1">
|
||||
<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-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 ref="seamlessScroll2" :data="listData" class="warp-scroll" :class-option="{
|
||||
singleHeight: 43,
|
||||
}" style="height: 168px">
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll2"
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
singleHeight: 43,
|
||||
}"
|
||||
style="height: 168px"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList2" :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">{{item.deptName}}</el-col>
|
||||
<el-col style="text-align: center" :title="item.publicityContent" :span="7">{{item.publicityContent}}</el-col>
|
||||
<el-col style="text-align: center" :span="7">{{item.todayDate}}</el-col>
|
||||
<el-col style="text-align: center" :span="3">{{
|
||||
item.id
|
||||
}}</el-col>
|
||||
<el-col style="text-align: center" :span="7">{{
|
||||
item.deptName
|
||||
}}</el-col>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:title="item.publicityContent"
|
||||
:span="7"
|
||||
>{{ item.publicityContent }}</el-col
|
||||
>
|
||||
<el-col style="text-align: center" :span="7">{{
|
||||
item.todayDate
|
||||
}}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
@ -103,19 +201,19 @@
|
||||
</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 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
|
||||
import echarts from "echarts";
|
||||
require("echarts/theme/macarons"); // echarts theme
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
name: 'right1',
|
||||
name: "right1",
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
@ -123,7 +221,7 @@ export default {
|
||||
progressBar,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
rate: {
|
||||
comprehensiveRate: 0,
|
||||
@ -137,47 +235,48 @@ export default {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList1: [],
|
||||
scrollList2: [],
|
||||
month: '',
|
||||
}
|
||||
month: "",
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initChart();
|
||||
this.getData(1);
|
||||
})
|
||||
});
|
||||
},
|
||||
beforeDestroy () { },
|
||||
beforeDestroy() {},
|
||||
watch: {
|
||||
month (newVal) {
|
||||
this.initChart(newVal)
|
||||
month(newVal) {
|
||||
this.initChart(newVal);
|
||||
},
|
||||
index (newVal, oldVal) {
|
||||
index(newVal, oldVal) {
|
||||
if (newVal == 0) {
|
||||
this.chart2.dispose()
|
||||
this.chart2 = null
|
||||
this.chart2.dispose();
|
||||
this.chart2 = null;
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
this.initChart();
|
||||
});
|
||||
} else {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
this.$nextTick(() => {
|
||||
this.initLine()
|
||||
})
|
||||
this.initLine();
|
||||
});
|
||||
}
|
||||
},
|
||||
index2 (newVal, oldVal) {
|
||||
index2(newVal, oldVal) {
|
||||
this.getData(1 + newVal);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getData (type) {
|
||||
getData(type) {
|
||||
this.request({
|
||||
url: '/hx/operating/getInformationPublicityPic',
|
||||
method: 'get',
|
||||
params: { type: type }
|
||||
}).then(res => {
|
||||
url: "/hx/operating/getInformationPublicityPic",
|
||||
method: "get",
|
||||
params: { type: type },
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
console.log(res);
|
||||
if (type == 1) {
|
||||
this.scrollList1 = res.data.list;
|
||||
this.listData = Array(this.scrollList1.length).fill(0);
|
||||
@ -189,39 +288,39 @@ export default {
|
||||
}
|
||||
// this.resData = res.data;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
initChart (month) {
|
||||
initChart(month) {
|
||||
let params = { type: 1 };
|
||||
if (month) {
|
||||
params['month'] = month
|
||||
params["month"] = month;
|
||||
}
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
}
|
||||
this.request({
|
||||
url: '/hx/operating/getComprehensivePlanPic',
|
||||
method: 'get',
|
||||
params: params
|
||||
}).then(res => {
|
||||
url: "/hx/operating/getComprehensivePlanPic",
|
||||
method: "get",
|
||||
params: params,
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
let { rate, list } = res.data;
|
||||
if (rate) {
|
||||
this.rate = rate;
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['综合', '绩效'],
|
||||
data: ["综合", "绩效"],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
color: "#fff", //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
@ -232,49 +331,49 @@ export default {
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(list.length, 5),
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: list.map(e => e.deptName),
|
||||
type: "category",
|
||||
data: list.map((e) => e.deptName),
|
||||
// data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '个',
|
||||
name: "个",
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
color: ["rgba(255, 255, 255,.5)"],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
@ -284,38 +383,38 @@ export default {
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '绩效',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
name: "绩效",
|
||||
type: "bar",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
focus: "series",
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F64F58',
|
||||
color: "#F64F58",
|
||||
},
|
||||
barWidth: 30,
|
||||
data: list.map(e => e.performancePlanCompleted),
|
||||
data: list.map((e) => e.performancePlanCompleted),
|
||||
// data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '综合',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
name: "综合",
|
||||
type: "bar",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
focus: "series",
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
color: "#F6D97E",
|
||||
},
|
||||
barWidth: 30,
|
||||
data: list.map(e => e.comprehensivePlanCompleted),
|
||||
data: list.map((e) => e.comprehensivePlanCompleted),
|
||||
// data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
// {
|
||||
@ -339,29 +438,28 @@ export default {
|
||||
// symbol: 'none',
|
||||
// },
|
||||
],
|
||||
})
|
||||
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
// setOptions () {
|
||||
// },
|
||||
initLine () {
|
||||
this.chart2 = echarts.init(this.$refs.chart2)
|
||||
this.setOptions2()
|
||||
initLine() {
|
||||
this.chart2 = echarts.init(this.$refs.chart2);
|
||||
this.setOptions2();
|
||||
},
|
||||
setOptions2 () {
|
||||
setOptions2() {
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['综合', '绩效'],
|
||||
data: ["综合", "绩效"],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
color: "#fff", //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
@ -372,48 +470,56 @@ export default {
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: 50,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||
type: "category",
|
||||
data: [
|
||||
"部门一",
|
||||
"部门二",
|
||||
"部门三",
|
||||
"部门四",
|
||||
"部门五",
|
||||
"部门六",
|
||||
"部门七",
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '个',
|
||||
name: "个",
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
color: ["rgba(255, 255, 255,.5)"],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
@ -423,47 +529,47 @@ export default {
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '绩效',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
name: "绩效",
|
||||
type: "bar",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
focus: "series",
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F64F58',
|
||||
color: "#F64F58",
|
||||
},
|
||||
barWidth: 30,
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '综合',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
name: "综合",
|
||||
type: "bar",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
focus: "series",
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
color: "#F6D97E",
|
||||
},
|
||||
barWidth: 30,
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'scatter',
|
||||
symbol: 'rect',
|
||||
name: "完成率",
|
||||
type: "scatter",
|
||||
symbol: "rect",
|
||||
symbolSize: [30, 4],
|
||||
symbolOffset: [0, 0],
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: '#7EA7FC',
|
||||
color: "#7EA7FC",
|
||||
},
|
||||
data: [600, 650, 700, 750, 800, 750, 700],
|
||||
},
|
||||
@ -488,10 +594,10 @@ export default {
|
||||
// symbol: 'none',
|
||||
// },
|
||||
],
|
||||
})
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,96 +1,110 @@
|
||||
<template>
|
||||
<div>
|
||||
<center1>
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">质量体系整改率</span></div>
|
||||
<div class="box">
|
||||
<span>{{ percentage }}%</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="percentage" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">产品合格率</span></div>
|
||||
<div class="box">
|
||||
<span>{{ dataInfo.productCate }}%</span>
|
||||
</div>
|
||||
<div style="width: 100%"><progressBar :percentage="dataInfo.productCate" /></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">一般性质量问题数量</span></div>
|
||||
<div class="box" style="font-size: 18px"><span style="color: #55c5a2; margin: 0 5px">↓</span>20%</div>
|
||||
<div class="box">
|
||||
<i>{{ dataInfo.commonlyProblemTotal }}</i
|
||||
><span class="num2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">低层次问题数</span></div>
|
||||
<div class="box">
|
||||
<i>{{ dataInfo.lowProblemTotal }}</i
|
||||
><span class="num2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">小型产品合格率</span></div>
|
||||
<div class="box">
|
||||
<span>{{ dataInfo.smallProductCate }}</span
|
||||
>%
|
||||
</div>
|
||||
<div style="width: 100%"><progressBar :percentage="dataInfo.smallProductCate" /></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">产品错/漏检率</span></div>
|
||||
<div class="box">
|
||||
<span>{{ dataInfo.errorCheckRate }}%/{{ dataInfo.leakCheckRate }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">质量计划完成率</span></div>
|
||||
<div class="box">
|
||||
<span>{{ dataInfo.planCompleteRate }}</span
|
||||
>%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">{{
|
||||
dataInfo.qualityPlanCompleteTotal
|
||||
}}</span>
|
||||
</div>
|
||||
<div style="width: 100%"><progressBar :percentage="dataInfo.planCompleteRate" /></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">质量检查完成率</span></div>
|
||||
<div class="box">
|
||||
<span>{{ dataInfo.checkCompleteRate }}</span
|
||||
>%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">{{
|
||||
dataInfo.qualityNotificationCompleteTotal
|
||||
}}</span>
|
||||
</div>
|
||||
<div style="width: 100%"><progressBar :percentage="dataInfo.checkCompleteRate" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</center1>
|
||||
</div>
|
||||
<div>
|
||||
<center1>
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">质量体系整改率</span></div>
|
||||
<div class="box">
|
||||
<span>{{ percentage }}%</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="percentage" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">产品合格率</span></div>
|
||||
<div class="box">
|
||||
<span>{{ dataInfo.productCate || 0 }}%</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="dataInfo.productCate" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">一般性质量问题数量</span></div>
|
||||
<div class="box" style="font-size: 18px">
|
||||
<span style="color: #55c5a2; margin: 0 5px">↓</span>20%
|
||||
</div>
|
||||
<div class="box">
|
||||
<i>{{ dataInfo.commonlyProblemTotal }}</i
|
||||
><span class="num2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">低层次问题数</span></div>
|
||||
<div class="box">
|
||||
<i>{{ dataInfo.lowProblemTotal }}</i
|
||||
><span class="num2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">小型产品合格率</span></div>
|
||||
<div class="box">
|
||||
<span>{{ dataInfo.smallProductCate || 0 }}</span
|
||||
>%
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="dataInfo.smallProductCate" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">产品错、漏检率</span></div>
|
||||
<div class="box">
|
||||
<span
|
||||
>{{ dataInfo.errorCheckRate.toFixed(2) }}%/{{
|
||||
dataInfo.leakCheckRate.toFixed(2)
|
||||
}}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">质量计划完成率</span></div>
|
||||
<div class="box">
|
||||
<span>{{ dataInfo.planCompleteRate.toFixed(2) }}</span
|
||||
>%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">{{
|
||||
dataInfo.qualityPlanCompleteTotal
|
||||
}}</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="dataInfo.planCompleteRate" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">质量检查完成率</span></div>
|
||||
<div class="box">
|
||||
<span>{{ dataInfo.checkCompleteRate }}</span
|
||||
>%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">{{
|
||||
dataInfo.qualityNotificationCompleteTotal
|
||||
}}</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="dataInfo.checkCompleteRate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</center1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import center1 from './components/center1/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import progressBar from './../components/progress/index.vue'
|
||||
import center1 from "./components/center1/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import progressBar from "./../components/progress/index.vue";
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
import echarts from "echarts";
|
||||
require("echarts/theme/macarons"); // echarts theme
|
||||
import resize from "../../dashboard/mixins/resize";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
center1,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataInfo: {
|
||||
mixins: [resize],
|
||||
name: "left1",
|
||||
components: {
|
||||
center1,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataInfo: {
|
||||
rectificationRate: 0,
|
||||
productCate: 0,
|
||||
commonlyProblemTotal: 0,
|
||||
@ -104,135 +118,135 @@ export default {
|
||||
checkCompleteRate: 0,
|
||||
qualityNotificationCompleteTotal: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
percentage() {
|
||||
return Math.floor(this.dataInfo.rectificationRate * 100) / 100 || 0
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
getData() {
|
||||
this.request({
|
||||
url: '/hx/qualityAssurance/getQualityManage',
|
||||
method: 'get',
|
||||
}).then(({ data }) => {
|
||||
this.dataInfo = data
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
percentage() {
|
||||
return Math.floor(this.dataInfo.rectificationRate * 100) / 100 || 0;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
getData() {
|
||||
this.request({
|
||||
url: "/hx/qualityAssurance/getQualityManage",
|
||||
method: "get",
|
||||
}).then(({ data }) => {
|
||||
this.dataInfo = data;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tit {
|
||||
padding: 16px 24px;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.data {
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
.data-item {
|
||||
width: 24%;
|
||||
height: 147px;
|
||||
padding: 10px;
|
||||
margin: 7px 7px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(145, 213, 254, 0.09);
|
||||
> div {
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
img {
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
font-size: 26px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: 600;
|
||||
color: #91d5fe;
|
||||
}
|
||||
.num {
|
||||
font-size: 14px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
.data-item {
|
||||
width: 24%;
|
||||
height: 147px;
|
||||
padding: 10px;
|
||||
margin: 7px 7px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(145, 213, 254, 0.09);
|
||||
> div {
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
img {
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
font-size: 26px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: 600;
|
||||
color: #91d5fe;
|
||||
}
|
||||
.num {
|
||||
font-size: 14px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center1 {
|
||||
position: relative;
|
||||
.con_right {
|
||||
width: 138px;
|
||||
position: absolute;
|
||||
top: 41%;
|
||||
right: 43%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.con_title {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
.con_title_bg1 {
|
||||
background: url('./img/left1/1.png') no-repeat;
|
||||
}
|
||||
.con_title_bg2 {
|
||||
background: url('./img/left1/2.png') no-repeat;
|
||||
}
|
||||
.con_title_bg3 {
|
||||
background: url('./img/left1/3.png') no-repeat;
|
||||
}
|
||||
.com_img {
|
||||
margin-top: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_two {
|
||||
top: 37%;
|
||||
left: 13%;
|
||||
}
|
||||
.con_three {
|
||||
top: 70%;
|
||||
right: 16%;
|
||||
}
|
||||
position: relative;
|
||||
.con_right {
|
||||
width: 138px;
|
||||
position: absolute;
|
||||
top: 41%;
|
||||
right: 43%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.con_title {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
.con_title_bg1 {
|
||||
background: url("./img/left1/1.png") no-repeat;
|
||||
}
|
||||
.con_title_bg2 {
|
||||
background: url("./img/left1/2.png") no-repeat;
|
||||
}
|
||||
.con_title_bg3 {
|
||||
background: url("./img/left1/3.png") no-repeat;
|
||||
}
|
||||
.com_img {
|
||||
margin-top: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_two {
|
||||
top: 37%;
|
||||
left: 13%;
|
||||
}
|
||||
.con_three {
|
||||
top: 70%;
|
||||
right: 16%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,29 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3>
|
||||
<img v-if="pic.length" class="img" :src="pic" style="width: 100%; height: 100%">
|
||||
<img v-else class="img" src="./center.png" style="width: 100%; height: 100%" />
|
||||
<section v-for="(v,index) in points" :key="index">
|
||||
<div v-if="v.level == '一级'" class="con_right" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
|
||||
<img
|
||||
v-if="pic.length"
|
||||
class="img"
|
||||
:src="pic"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
class="img"
|
||||
src="./center.png"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
<section v-for="(v, index) in points" :key="index">
|
||||
<div
|
||||
v-if="v.level == '一级'"
|
||||
class="con_right"
|
||||
:style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
|
||||
>
|
||||
<div class="con_title con_title_bg1">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">一级：{{v.pointName}}</span>
|
||||
<span style="margin-left: 2px">一级：{{ v.pointName }}</span>
|
||||
</div>
|
||||
<div class="com_img" @click="handleItem(v)">
|
||||
<img src="./img/left1/icon1.png" alt="" />
|
||||
</div>
|
||||
<div class="com_img" @click="handleItem(v)"><img src="./img/left1/icon1.png" alt="" /></div>
|
||||
</div>
|
||||
<div v-if="v.level == '二级'" class="con_right con_two" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
|
||||
<div
|
||||
v-if="v.level == '二级'"
|
||||
class="con_right con_two"
|
||||
:style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
|
||||
>
|
||||
<div class="con_title con_title_bg2">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">二级：{{v.pointName}}</span>
|
||||
<span style="margin-left: 2px">二级：{{ v.pointName }}</span>
|
||||
</div>
|
||||
<div class="com_img" @click="handleItem(v)">
|
||||
<img src="./img/left1/icon2.png" alt="" />
|
||||
</div>
|
||||
<div class="com_img" @click="handleItem(v)"><img src="./img/left1/icon2.png" alt="" /></div>
|
||||
</div>
|
||||
<div v-if="v.level == '三级'" class="con_right con_three" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
|
||||
<div class="con_title con_title_bg3">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">三级：{{v.pointName}}</span>
|
||||
</div>
|
||||
<div class="com_img" @click="handleItem(v)"><img src="./img/left1/icon3.png" alt="" /></div>
|
||||
<div
|
||||
v-if="v.level == '三级'"
|
||||
class="con_right con_three"
|
||||
:style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
|
||||
>
|
||||
<div class="con_title con_title_bg3">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">三级：{{ v.pointName }}</span>
|
||||
</div>
|
||||
<div class="com_img" @click="handleItem(v)">
|
||||
<img src="./img/left1/icon3.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <div class="con_right">
|
||||
@ -49,23 +77,47 @@
|
||||
</div> -->
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">一级危险点/危险源数量</span></div>
|
||||
<div class="box"><i>{{getItem(pointLevelCount,'一级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'一级').COUNTNUMBER}}</i><span
|
||||
class="num2">个</span></div>
|
||||
<div>
|
||||
<span style="font-weight: bold">一级危险点/危险源数量</span>
|
||||
</div>
|
||||
<div class="box">
|
||||
<i
|
||||
>{{ getItem(pointLevelCount, "一级").COUNTNUMBER }}/{{
|
||||
getItem(sourceLevelCount, "一级").COUNTNUMBER
|
||||
}}</i
|
||||
><span class="num2">个</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">二级危险点/危险源数量</span></div>
|
||||
<div class="box"><i>{{getItem(pointLevelCount,'二级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'二级').COUNTNUMBER}}</i><span
|
||||
class="num2">个</span></div>
|
||||
<div>
|
||||
<span style="font-weight: bold">二级危险点/危险源数量</span>
|
||||
</div>
|
||||
<div class="box">
|
||||
<i
|
||||
>{{ getItem(pointLevelCount, "二级").COUNTNUMBER }}/{{
|
||||
getItem(sourceLevelCount, "二级").COUNTNUMBER
|
||||
}}</i
|
||||
><span class="num2">个</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">三级危险点/危险源数量</span></div>
|
||||
<div class="box"><i>{{getItem(pointLevelCount,'三级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'三级').COUNTNUMBER}}</i><span
|
||||
class="num2">个</span></div>
|
||||
<div>
|
||||
<span style="font-weight: bold">三级危险点/危险源数量</span>
|
||||
</div>
|
||||
<div class="box">
|
||||
<i
|
||||
>{{ getItem(pointLevelCount, "三级").COUNTNUMBER }}/{{
|
||||
getItem(sourceLevelCount, "三级").COUNTNUMBER
|
||||
}}</i
|
||||
><span class="num2">个</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">四级危险源数量</span></div>
|
||||
<div class="box"><i>{{getItem(sourceLevelCount,'四级').COUNTNUMBER}}</i><span class="num2">个</span></div>
|
||||
<div class="box">
|
||||
<i>{{ getItem(sourceLevelCount, "四级").COUNTNUMBER }}</i
|
||||
><span class="num2">个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
@ -73,70 +125,70 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container3 from '../components/container3/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import progressBar from './../components/progress/index.vue'
|
||||
import container3 from "../components/container3/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import progressBar from "./../components/progress/index.vue";
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
import echarts from "echarts";
|
||||
require("echarts/theme/macarons"); // echarts theme
|
||||
import resize from "../../dashboard/mixins/resize";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
name: "left1",
|
||||
components: {
|
||||
container3,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
pic: '',
|
||||
pic: "",
|
||||
pointLevelCount: [
|
||||
{
|
||||
"name": "二级",
|
||||
"COUNTNUMBER": 0
|
||||
name: "二级",
|
||||
COUNTNUMBER: 0,
|
||||
},
|
||||
{
|
||||
"name": "三级",
|
||||
"COUNTNUMBER": 0
|
||||
name: "三级",
|
||||
COUNTNUMBER: 0,
|
||||
},
|
||||
{
|
||||
"name": "一级",
|
||||
"COUNTNUMBER": 0
|
||||
}
|
||||
name: "一级",
|
||||
COUNTNUMBER: 0,
|
||||
},
|
||||
],
|
||||
sourceLevelCount: [
|
||||
{
|
||||
"name": "二级",
|
||||
"COUNTNUMBER": 0
|
||||
name: "二级",
|
||||
COUNTNUMBER: 0,
|
||||
},
|
||||
{
|
||||
"name": "三级",
|
||||
"COUNTNUMBER": 0
|
||||
name: "三级",
|
||||
COUNTNUMBER: 0,
|
||||
},
|
||||
{
|
||||
"name": "四级",
|
||||
"COUNTNUMBER": 0
|
||||
name: "四级",
|
||||
COUNTNUMBER: 0,
|
||||
},
|
||||
{
|
||||
"name": "一级",
|
||||
"COUNTNUMBER": 0
|
||||
}
|
||||
name: "一级",
|
||||
COUNTNUMBER: 0,
|
||||
},
|
||||
],
|
||||
points: []
|
||||
}
|
||||
points: [],
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
this.getData();
|
||||
// this.initChart3()
|
||||
})
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleItem(item) {
|
||||
this.$bus.emit("getTarget", item);
|
||||
},
|
||||
getItem (list, name) {
|
||||
getItem(list, name) {
|
||||
for (let index = 0; index < list.length; index++) {
|
||||
const item = list[index];
|
||||
if (name == item.name) {
|
||||
@ -144,33 +196,33 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
getData () {
|
||||
getData() {
|
||||
this.request({
|
||||
url: '/hx/securityManagement/dangerousMap',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
url: "/hx/securityManagement/dangerousMap",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
this.pointLevelCount = res.data.pointLevelCount;
|
||||
this.sourceLevelCount = res.data.sourceLevelCount;
|
||||
this.points = res.data.points;
|
||||
}
|
||||
})
|
||||
});
|
||||
this.request({
|
||||
url: '/hx/bigPic/getByType',
|
||||
method: 'get',
|
||||
params: { type: 1}
|
||||
}).then(res => {
|
||||
url: "/hx/bigPic/getByType",
|
||||
method: "get",
|
||||
params: { type: 1 },
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
this.pic = res.data.pic;
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
//销毁监听事件
|
||||
this.$bus.off("getTarget");
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -228,6 +280,9 @@ export default {
|
||||
.container3 {
|
||||
position: relative;
|
||||
.con_right {
|
||||
&:hover {
|
||||
z-index: 10;
|
||||
}
|
||||
width: 138px;
|
||||
position: absolute;
|
||||
top: 41%;
|
||||
|
||||
Reference in New Issue
Block a user