williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
熊丽君
2022-01-18 10:34:50 +08:00
parent 7b3f975bd4
commit def5cf6d2f
6 changed files with 1549 additions and 1261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/views/bigScreen/drivingCabin/center.vue
View File

@ -5,31 +5,76 @@
<rocketTit class="tit">全年目标</rocketTit> <rocketTit class="tit">全年目标</rocketTit>
<div class="data"> <div class="data">
<div class="data-item"> <div class="data-item">
<div><img src="./icon1.png" alt="" /><span style="font-weight: bold">收入</span></div> <div>
<div class="box"><i>{{val.completedIncome}}/</i><i class="num">{{val.targetIncome}}</i><span class="num2">万</span></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%"> <div style="width: 100%">
<progressBar :percentage="val.completedIncome/val.targetIncome*100" /> <progressBar
:percentage="(val.completedIncome / val.targetIncome) * 100"
/>
</div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><img src="./icon2.png" alt="" /><span style="font-weight: bold">利润</span></div> <div>
<div class="box"><i>{{val.completedProfit}}/</i><i class="num">{{val.targetProfit}}</i><span class="num2">万</span></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%"> <div style="width: 100%">
<progressBar :percentage="val.completedProfit/val.targetProfit*100" /> <progressBar
:percentage="(val.completedProfit / val.targetProfit) * 100"
/>
</div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><img src="./icon3.png" alt="" /><span style="font-weight: bold">装药量</span></div> <div>
<div class="box"><i>{{val.completedChargeQuantity}}/</i><i class="num">{{val.targetChargeQuantity}}</i><span class="num2">万件</span></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%"> <div style="width: 100%">
<progressBar :percentage="val.completedChargeQuantity/val.targetChargeQuantity*100" /> <progressBar
:percentage="
(val.completedChargeQuantity / val.targetChargeQuantity) * 100
"
/>
</div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><img src="./icon4.png" alt="" /><span style="font-weight: bold">交付数量</span></div> <div>
<div class="box"><i>{{val.completedDeliveryQuantity}}/</i><i class="num">{{val.targetDeliveryQuantity}}</i><span class="num2">万件</span></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%"> <div style="width: 100%">
<progressBar :percentage="(val.completedDeliveryQuantity/val.targetDeliveryQuantity)*100" /> <progressBar
:percentage="
(val.completedDeliveryQuantity / val.targetDeliveryQuantity) *
100
"
/>
</div> </div>
</div> </div>
</div> </div>
@ -38,23 +83,23 @@
</template> </template>
<script> <script>
import container3 from '../components/container3/index.vue' import container3 from "../components/container3/index.vue";
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import progressBar from './../components/progress/index.vue' import progressBar from "./../components/progress/index.vue";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from "../../dashboard/mixins/resize";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left1', name: "left1",
components: { components: {
container3, container3,
rocketTit, rocketTit,
progressBar, progressBar,
}, },
data () { data() {
return { return {
val: { val: {
bigPic: "", bigPic: "",
@ -68,31 +113,30 @@ export default {
targetIncome: "0", targetIncome: "0",
targetProfit: "0", targetProfit: "0",
year: "0", year: "0",
} },
} };
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.getData() this.getData();
}) });
}, },
beforeDestroy () { }, beforeDestroy() {},
methods: { methods: {
getData () { getData() {
this.request({ this.request({
url: '/hx/cockpitOverview/annualTargetAndPic', url: "/hx/cockpitOverview/annualTargetAndPic",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
this.val = res.data[0]; this.val = res.data[0];
} else { } else {
this.$message.error(res.msg); this.$message.error(res.msg);
} }
}) });
} },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

683
src/views/bigScreen/drivingCabin/left1.vue
View File

@ -1,370 +1,379 @@
<template> <template>
<div> <div>
<container2 title="经营责任书完成概况"> <container2 title="经营责任书完成概况">
<div class="wrap"> <div class="wrap">
<el-row class="content1"> <el-row class="content1">
<el-col :span="24"> <el-col :span="24">
<div id="left1" ref="left1" class="chart1"></div> <div id="left1" ref="left1" class="chart1"></div>
</el-col> </el-col>
</el-row> </el-row>
<div class="box"> <div class="box">
<span style="font-size: 25px; margin-right: 3px">·</span> <span style="font-size: 25px; margin-right: 3px">·</span>
<span>总完成任务/完成率</span> <span>总完成任务/完成率</span>
<i class="num">{{res.map.completedTasks}}/{{(res.map.cate).toFixed(2)}}%</i> <i class="num"
<progressBar :percentage="res.map.cate" /> >{{ res.map.completedTasks }}/{{ res.map.cate.toFixed(2) }}%</i
</div> >
</div> <progressBar :percentage="res.map.cate" />
</container2> </div>
<container2 title="收入概况" style="margin-top: 10px"> </div>
<div style="height: 100%; width: 100%" ref="left2"></div> </container2>
<!-- <div class="wrap"> <container2 title="收入概况" style="margin-top: 10px">
<div style="height: 100%; width: 100%" ref="left2"></div>
<!-- <div class="wrap">
<el-row class="content2"> <el-row class="content2">
<el-col :span="24" style="height: 100%"> <el-col :span="24" style="height: 100%">
<div id="left2" ref="left2" class="chart2"></div> <div id="left2" ref="left2" class="chart2"></div>
</el-col> </el-col>
</el-row> </el-row>
</div> --> </div> -->
</container2> </container2>
</div> </div>
</template> </template>
<script> <script>
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import container2 from './components/container2/index.vue' import container2 from "./components/container2/index.vue";
import bigScreenTabs from '../components/bigScreenTabs/index.vue' import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import progressBar from '@/views/bigScreen/components/progress/index.vue' import progressBar from "@/views/bigScreen/components/progress/index.vue";
import colorList from '@/utils/colorPalette' import colorList from "@/utils/colorPalette";
// import {Liquid} from '@antv/g2plot'; // import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize' // import resize from '../../dashboard/mixins/resize'
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import request from '@/utils/request' import request from "@/utils/request";
//hx/cockpitOverview/businessResponsibility //hx/cockpitOverview/businessResponsibility
export default { export default {
// mixins: [resize], // mixins: [resize],
name: 'left1', name: "left1",
components: { components: {
rocketTit, rocketTit,
container2, container2,
bigScreenTabs, bigScreenTabs,
progressBar, progressBar,
}, },
data() { data() {
return { return {
data: [ data: [
{ value: 154, name: '类别一' }, { value: 154, name: "类别一" },
{ value: 775, name: '类别二' }, { value: 775, name: "类别二" },
{ value: 679, name: '类别三' }, { value: 679, name: "类别三" },
{ value: 679, name: '类别四' }, { value: 679, name: "类别四" },
{ value: 679, name: '类别五' }, { value: 679, name: "类别五" },
{ value: 679, name: '类别六' }, { value: 679, name: "类别六" },
{ value: 679, name: '类别七' }, { value: 679, name: "类别七" },
{ value: 679, name: '类别八' }, { value: 679, name: "类别八" },
], ],
colorList, colorList,
res: { res: {
map: { map: {
cate: 0, cate: 0,
completedTasks: 0, completedTasks: 0,
targetTasks: 0, targetTasks: 0,
} },
}, },
} };
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
this.initLine() this.initLine();
}) });
}, },
beforeDestroy() {}, beforeDestroy() {},
methods: { methods: {
initChart() { initChart() {
this.setOptions() this.setOptions();
}, },
setOptions() { setOptions() {
request({ request({
url: '/hx/cockpitOverview/businessResponsibility', url: "/hx/cockpitOverview/businessResponsibility",
method: 'get', method: "get",
}).then(res=> { }).then((res) => {
this.res = res.data; this.res = res.data;
let titData = []; let titData = [];
let valData = []; let valData = [];
for (let i = 0; i < this.res.list.length; i++) { for (let i = 0; i < this.res.list.length; i++) {
const item = this.res.list[i]; const item = this.res.list[i];
titData.push(item.indicator_name); titData.push(item.indicator_name);
valData.push( valData.push({ value: item.cate, name: item.indicator_name });
{ value: item.cate, name: item.indicator_name }, }
); this.chart = echarts.init(this.$refs.left1, "macarons");
} this.chart.setOption({
this.chart = echarts.init(this.$refs.left1, 'macarons') tooltip: {
this.chart.setOption({ trigger: "item",
tooltip: { formatter: "{a} <br/>{b}: {c} ({d}%)",
trigger: 'item', },
formatter: '{a} <br/>{b}: {c} ({d}%)', color: this.colorList,
}, legend: {
color: this.colorList, type: "scroll",
legend: { data: titData,
data: titData, orient: "vertical",
orient: 'vertical', // left: '60%',
// left: '60%', right: "2%",
right: '2%', y: "center",
y: 'center', textStyle: {
textStyle: { //图例文字的样式
//图例文字的样式 color: "#fff",
color: '#fff', fontSize: 16,
fontSize: 16, },
}, // formatter: value => {
// formatter: value => { // return value + calcAverageValue(this.data, value)
// return value + calcAverageValue(this.data, value) // },
// }, },
}, series: [
series: [ {
{ name: "概括",
name: '概括', type: "pie",
type: 'pie', radius: [0, "85%"],
radius: [0, '85%'], center: ["35%", "50%"],
center: ['35%', '50%'], label: {
label: { formatter: "",
formatter: '', position: "inner",
position: 'inner', fontSize: 14,
fontSize: 14, },
}, labelLine: {
labelLine: { show: false,
show: false, },
}, data: valData,
data: valData, },
}, ],
], });
}) });
})
const calcAverageValue = (data, name) => { const calcAverageValue = (data, name) => {
const items = data.filter(d => d.name === name) const items = data.filter((d) => d.name === name);
return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-' return items.length
} ? items.reduce((a, b) => a + b.value, 0) / items.length
}, : "-";
initLine() { };
request({ },
url: '/hx/cockpitOverview/revenueProfile', initLine() {
method: 'get', request({
}).then(res=> { url: "/hx/cockpitOverview/revenueProfile",
this.chart = echarts.init(this.$refs.left2) method: "get",
let titData = []; }).then((res) => {
let COMPLETEDREVENUE = []; this.chart = echarts.init(this.$refs.left2);
let FORECASTREVENUE = []; let titData = [];
let TARGETREVENUE = []; let COMPLETEDREVENUE = [];
for (let i = 0; i < res.data.length; i++) { let FORECASTREVENUE = [];
const item = res.data[i]; let TARGETREVENUE = [];
titData.push(item.month); for (let i = 0; i < res.data.length; i++) {
COMPLETEDREVENUE.push(item.COMPLETEDREVENUE); const item = res.data[i];
FORECASTREVENUE.push(item.FORECASTREVENUE); titData.push(item.month);
TARGETREVENUE.push((item.COMPLETEDREVENUE/item.TARGETREVENUE * 100).toFixed(2)); COMPLETEDREVENUE.push(item.COMPLETEDREVENUE);
} FORECASTREVENUE.push(item.FORECASTREVENUE);
this.setOptions2(titData,COMPLETEDREVENUE,FORECASTREVENUE,TARGETREVENUE) TARGETREVENUE.push(
}) ((item.COMPLETEDREVENUE / item.TARGETREVENUE) * 100).toFixed(2)
}, );
setOptions2(titData,COMPLETEDREVENUE,FORECASTREVENUE,TARGETREVENUE) { }
this.chart.setOption({ this.setOptions2(
tooltip: { titData,
trigger: 'axis', COMPLETEDREVENUE,
// formatter: '{a1}<br/>{b1}：{c1}', FORECASTREVENUE,
}, TARGETREVENUE
legend: { );
data: ['收入', '预测', '目标完成率'], });
textStyle: { },
color: '#fff', //legend字体颜色 setOptions2(titData, COMPLETEDREVENUE, FORECASTREVENUE, TARGETREVENUE) {
}, this.chart.setOption({
// selectedMode: false, tooltip: {
}, trigger: "axis",
grid: { // formatter: '{a1}<br/>{b1}：{c1}',
containLabel: true, },
left: 30, legend: {
right: 10, data: ["收入", "预测", "目标完成率"],
top: 30, textStyle: {
bottom: 50, color: "#fff", //legend字体颜色
}, },
xAxis: { // selectedMode: false,
// data :[ },
// '2021-01', grid: {
// '2021-02', containLabel: true,
// '2021-03', left: 30,
// '2021-04', right: 10,
// '2021-05', top: 30,
// '2021-06', bottom: 50,
// '2021-07', },
// '2021-08', xAxis: {
// '2021-09', // data :[
// '2021-10', // '2021-01',
// '2021-11', // '2021-02',
// '2021-12', // '2021-03',
// ], // '2021-04',
data: titData, // '2021-05',
axisLine: { // '2021-06',
lineStyle: { // '2021-07',
color: 'rgb(255, 255, 255)', // '2021-08',
}, // '2021-09',
}, // '2021-10',
}, // '2021-11',
dataZoom: { // '2021-12',
type: 'slider', // ],
start: 0, data: titData,
end: this.dataZoomEnd(titData.length,7), axisLine: {
}, lineStyle: {
color: ['#ccc', 'red'], color: "rgb(255, 255, 255)",
yAxis: [ },
{ },
name: '件', },
splitLine: { dataZoom: {
show: true, type: "slider",
// 改变轴线颜色 start: 0,
lineStyle: { end: this.dataZoomEnd(titData.length, 7),
// 使用深浅的间隔色 },
color: ['rgba(255, 255, 255,.5)'], color: ["#ccc", "red"],
}, yAxis: [
}, {
axisLabel: { name: "件",
formatter: '{value}', splitLine: {
}, show: true,
axisLine: { // 改变轴线颜色
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', // 使用深浅的间隔色
}, color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
{ axisLabel: {
type: 'value', formatter: "{value}",
min: 0, },
max: Math.max.apply(null, TARGETREVENUE), axisLine: {
interval: 20, lineStyle: {
axisLabel: { color: "rgb(255, 255, 255)",
formatter: '{value} %', },
}, },
splitLine: { },
show: false, //不显示网格线 {
}, type: "value",
splitArea: { min: 0,
show: false, //不显示网格区域 max: Math.max.apply(null, TARGETREVENUE),
}, interval: 20,
axisLine: { axisLabel: {
lineStyle: { formatter: "{value} %",
color: 'rgb(255, 255, 255)', },
}, splitLine: {
}, show: false, //不显示网格线
}, },
], splitArea: {
series: [ show: false, //不显示网格区域
{ },
name: '预测', axisLine: {
type: 'bar', lineStyle: {
z: '-1', color: "rgb(255, 255, 255)",
barGap: '-75%', },
barWidth: 30, },
itemStyle: { },
color: 'rgba(85, 197, 162, .3)', ],
}, series: [
data: FORECASTREVENUE, {
}, name: "预测",
{ type: "bar",
name: '收入', z: "-1",
type: 'bar', barGap: "-75%",
barWidth: 15, barWidth: 30,
position: [0, 0], itemStyle: {
itemStyle: { color: "rgba(85, 197, 162, .3)",
color: 'rgba(90, 216, 166, 0.85)', },
}, data: FORECASTREVENUE,
data: COMPLETEDREVENUE, },
}, {
{ name: "收入",
name: '目标完成率', type: "bar",
type: 'scatter', barWidth: 15,
symbol: 'rect', position: [0, 0],
symbolSize: [30, 4], itemStyle: {
symbolOffset: [3, 0], color: "rgba(90, 216, 166, 0.85)",
position: [0, 0], },
itemStyle: { data: COMPLETEDREVENUE,
color: '#F6D97E', },
}, {
yAxisIndex: 1, name: "目标完成率",
data: TARGETREVENUE, type: "scatter",
}, symbol: "rect",
], symbolSize: [30, 4],
}) symbolOffset: [3, 0],
}, position: [0, 0],
}, itemStyle: {
} color: "#F6D97E",
},
yAxisIndex: 1,
data: TARGETREVENUE,
},
],
});
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 100%; width: 100%;
.box { .box {
padding: 0 0 5px 15px; padding: 0 0 5px 15px;
display: flex; display: flex;
align-items: center; align-items: center;
.num { .num {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
margin: 0 10px; margin: 0 10px;
} }
} }
} }
.content1 { .content1 {
// height: 200px; // height: 200px;
height: 100%; height: 100%;
.chart1 { .chart1 {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
height: 192px; height: 192px;
background: transparent; background: transparent;
} }
} }
.num { .num {
font-size: 30px; font-size: 30px;
font-family: Roboto-BlackItalic, Roboto; font-family: Roboto-BlackItalic, Roboto;
font-weight: normal; font-weight: normal;
color: #91d5fe; color: #91d5fe;
vertical-align: sub; vertical-align: sub;
// margin-right: 3px; // margin-right: 3px;
} }
.content2 { .content2 {
padding: 20px; padding: 20px;
flex: 1; flex: 1;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.chart2 { .chart2 {
height: 100%; height: 100%;
} }
.tit { .tit {
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #ffffff; color: #ffffff;
line-height: 22px; line-height: 22px;
position: relative; position: relative;
padding-left: 15px; padding-left: 15px;
} }
.tit::after { .tit::after {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: 3px; top: 3px;
left: 0px; left: 0px;
width: 4px; width: 4px;
height: 16px; height: 16px;
background: #00ffff; background: #00ffff;
} }
} }
</style> </style>

978
src/views/bigScreen/information/left1.vue
View File

File diff suppressed because it is too large Load Diff

418
src/views/bigScreen/management/right1.vue
View File

@ -1,49 +1,92 @@
<template> <template>
<div> <div>
<container2 title="综合计划/绩效计划"> <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="display: flex; height: 100%" v-if="index == 0">
<div style="height: 100%; width: 75%" ref="chart"></div> <div style="height: 100%; width: 75%" ref="chart"></div>
<div style=" <div
height: 100%; style="
width: 25%; height: 100%;
display: flex; width: 25%;
flex-direction: column; display: flex;
justify-content: center; flex-direction: column;
align-items: center; 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
v-model="month"
value-format="yyyy-MM"
v-if="index == 0"
type="month"
size="mini"
placeholder="选择月"
>
</el-date-picker> </el-date-picker>
<div class="box"><span style="font-size: 25px">·</span><span style="font-size: 18px">综合完成率</span></div> <div class="box">
<progressBar :percentage="rate.comprehensiveRate" style="margin: 10px 0 20px" /> <span style="font-size: 25px">·</span
<i class="num">{{rate.comprehensiveRate.toFixed(2) || 0}}%</i> ><span style="font-size: 18px">综合完成率</span>
<div style="height:10px"></div> </div>
<div class="box"><span style="font-size: 25px">·</span><span style="font-size: 18px">绩效完成率</span></div> <progressBar
<progressBar :percentage="rate.performanceRate" style="margin: 10px 0 20px" /> :percentage="rate.comprehensiveRate"
<i class="num">{{rate.performanceRate.toFixed(2) || 0}}%</i> 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> </div>
<div style="display: flex; height: 100%" v-else> <div style="display: flex; height: 100%" v-else>
<div style="height: 100%; width: 75%" ref="chart2"></div> <div style="height: 100%; width: 75%" ref="chart2"></div>
<div style=" <div
height: 100%; style="
width: 25%; height: 100%;
display: flex; width: 25%;
flex-direction: column; display: flex;
justify-content: center; flex-direction: column;
align-items: center; justify-content: center;
"> align-items: center;
<div class="box"><span style="font-size: 25px">·</span><span style="font-size: 18px">总体完成率</span></div> "
>
<div class="box">
<span style="font-size: 25px">·</span
><span style="font-size: 18px">总体完成率</span>
</div>
<progressBar :percentage="80" style="margin: 10px 0 20px" /> <progressBar :percentage="80" style="margin: 10px 0 20px" />
<i class="num">80%</i> <i class="num">80%</i>
</div> </div>
</div> </div>
</container2> </container2>
<container2 title="信息公示" style="margin-top: 10px"> <container2 title="信息公示" style="margin-top: 10px">
<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['民用产业项目信息', '信息公示']"></bigScreenTabs> <bigScreenTabs
<el-row style="height: 100%; width: 100%; padding: 0 10px 0 20px" v-show="index2 == 0"> 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-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="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="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-col style="text-align: center" :span="4">完成情况</el-col>
</el-row> </el-row>
</el-col> </el-col>
<vue-seamless-scroll ref="seamlessScroll1" :data="listData" class="warp-scroll" :class-option="{ <vue-seamless-scroll
singleHeight: 43, ref="seamlessScroll1"
}" style="height: 168px"> :data="listData"
class="warp-scroll"
:class-option="{
singleHeight: 43,
}"
style="height: 168px"
>
<ul class="item"> <ul class="item">
<li v-for="item in scrollList1" :key="item.id"> <li v-for="item in scrollList1" :key="item.id">
<el-row> <el-row>
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col> <el-col style="text-align: center" :span="3">{{
<el-col style="text-align: center" :title="item.projectName" :span="5">{{item.projectName}}</el-col> item.id
<el-col style="text-align: center" :span="5"> {{item.director}} </el-col> }}</el-col>
<el-col style="text-align: center" :span="7">{{item.deptName}} </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"> <el-col style="text-align: center" :span="4">
<section class="box"> <section class="box">
<span v-if="item.completedStatus == '已完成'" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span> <span
<span v-else-if="item.completedStatus == '未完成'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span> v-if="item.completedStatus == '已完成'"
<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span> style="color: #6fd1b4; font-size: 25px; margin-right: 3px"
<span>{{item.completedStatus}}</span> >·</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> </section>
</el-col> </el-col>
</el-row> </el-row>
@ -74,25 +146,51 @@
</ul> </ul>
</vue-seamless-scroll> </vue-seamless-scroll>
</el-row> </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-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="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-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-row>
</el-col> </el-col>
<vue-seamless-scroll ref="seamlessScroll2" :data="listData" class="warp-scroll" :class-option="{ <vue-seamless-scroll
singleHeight: 43, ref="seamlessScroll2"
}" style="height: 168px"> :data="listData"
class="warp-scroll"
:class-option="{
singleHeight: 43,
}"
style="height: 168px"
>
<ul class="item"> <ul class="item">
<li v-for="item in scrollList2" :key="item.id"> <li v-for="item in scrollList2" :key="item.id">
<el-row> <el-row>
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col> <el-col style="text-align: center" :span="3">{{
<el-col style="text-align: center" :span="7">{{item.deptName}}</el-col> item.id
<el-col style="text-align: center" :title="item.publicityContent" :span="7">{{item.publicityContent}}</el-col> }}</el-col>
<el-col style="text-align: center" :span="7">{{item.todayDate}}</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> </el-row>
</li> </li>
</ul> </ul>
@ -103,19 +201,19 @@
</template> </template>
<script> <script>
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import container2 from './components/container2/index.vue' import container2 from "./components/container2/index.vue";
import bigScreenTabs from '../components/bigScreenTabs/index.vue' import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import progressBar from '@/views/bigScreen/components/progress/index.vue' import progressBar from "@/views/bigScreen/components/progress/index.vue";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from "vue-seamless-scroll";
import colorList from '@/utils/colorPalette' import colorList from "@/utils/colorPalette";
// import {Liquid} from '@antv/g2plot'; // import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize' // import resize from '../../dashboard/mixins/resize'
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
export default { export default {
// mixins: [resize], // mixins: [resize],
name: 'right1', name: "right1",
components: { components: {
rocketTit, rocketTit,
container2, container2,
@ -123,7 +221,7 @@ export default {
progressBar, progressBar,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data () { data() {
return { return {
rate: { rate: {
comprehensiveRate: 0, comprehensiveRate: 0,
@ -137,47 +235,48 @@ export default {
listData: [1, 2, 3, 4, 5, 6, 7, 8], listData: [1, 2, 3, 4, 5, 6, 7, 8],
scrollList1: [], scrollList1: [],
scrollList2: [], scrollList2: [],
month: '', month: "",
} };
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
this.getData(1); this.getData(1);
}) });
}, },
beforeDestroy () { }, beforeDestroy() {},
watch: { watch: {
month (newVal) { month(newVal) {
this.initChart(newVal) this.initChart(newVal);
}, },
index (newVal, oldVal) { index(newVal, oldVal) {
if (newVal == 0) { if (newVal == 0) {
this.chart2.dispose() this.chart2.dispose();
this.chart2 = null this.chart2 = null;
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
}) });
} else { } else {
this.chart.dispose() this.chart.dispose();
this.chart = null this.chart = null;
this.$nextTick(() => { this.$nextTick(() => {
this.initLine() this.initLine();
}) });
} }
}, },
index2 (newVal, oldVal) { index2(newVal, oldVal) {
this.getData(1 + newVal); this.getData(1 + newVal);
}, },
}, },
methods: { methods: {
getData (type) { getData(type) {
this.request({ this.request({
url: '/hx/operating/getInformationPublicityPic', url: "/hx/operating/getInformationPublicityPic",
method: 'get', method: "get",
params: { type: type } params: { type: type },
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
console.log(res);
if (type == 1) { if (type == 1) {
this.scrollList1 = res.data.list; this.scrollList1 = res.data.list;
this.listData = Array(this.scrollList1.length).fill(0); this.listData = Array(this.scrollList1.length).fill(0);
@ -189,39 +288,39 @@ export default {
} }
// this.resData = res.data; // this.resData = res.data;
} }
}) });
}, },
initChart (month) { initChart(month) {
let params = { type: 1 }; let params = { type: 1 };
if (month) { if (month) {
params['month'] = month params["month"] = month;
} }
if (this.chart) { if (this.chart) {
this.chart.dispose(); this.chart.dispose();
this.chart = null; this.chart = null;
} }
this.request({ this.request({
url: '/hx/operating/getComprehensivePlanPic', url: "/hx/operating/getComprehensivePlanPic",
method: 'get', method: "get",
params: params params: params,
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let { rate, list } = res.data; let { rate, list } = res.data;
if (rate) { if (rate) {
this.rate = rate; this.rate = rate;
} }
this.chart = echarts.init(this.$refs.chart) this.chart = echarts.init(this.$refs.chart);
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
}, },
legend: { legend: {
data: ['综合', '绩效'], data: ["综合", "绩效"],
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: "#fff", //legend字体颜色
}, },
}, },
grid: { grid: {
@ -232,49 +331,49 @@ export default {
containLabel: true, containLabel: true,
}, },
dataZoom: { dataZoom: {
type: 'slider', type: "slider",
start: 0, start: 0,
end: this.dataZoomEnd(list.length, 5), end: this.dataZoomEnd(list.length, 5),
textStyle: { textStyle: {
color: '#fff', color: "#fff",
}, },
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: list.map(e => e.deptName), data: list.map((e) => e.deptName),
// data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'], // data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
name: '个', name: "个",
splitLine: { splitLine: {
show: true, show: true,
// 改变轴线颜色 // 改变轴线颜色
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'], color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -284,38 +383,38 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
series: [ series: [
{ {
name: '绩效', name: "绩效",
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
itemStyle: { itemStyle: {
color: '#F64F58', color: "#F64F58",
}, },
barWidth: 30, barWidth: 30,
data: list.map(e => e.performancePlanCompleted), data: list.map((e) => e.performancePlanCompleted),
// data: [150, 232, 201, 154, 190, 330, 410], // data: [150, 232, 201, 154, 190, 330, 410],
}, },
{ {
name: '综合', name: "综合",
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
itemStyle: { itemStyle: {
color: '#F6D97E', color: "#F6D97E",
}, },
barWidth: 30, barWidth: 30,
data: list.map(e => e.comprehensivePlanCompleted), data: list.map((e) => e.comprehensivePlanCompleted),
// data: [150, 232, 201, 154, 190, 330, 410], // data: [150, 232, 201, 154, 190, 330, 410],
}, },
// { // {
@ -339,29 +438,28 @@ export default {
// symbol: 'none', // symbol: 'none',
// }, // },
], ],
}) });
} }
}) });
}, },
// setOptions () { // setOptions () {
// }, // },
initLine () { initLine() {
this.chart2 = echarts.init(this.$refs.chart2) this.chart2 = echarts.init(this.$refs.chart2);
this.setOptions2() this.setOptions2();
}, },
setOptions2 () { setOptions2() {
this.chart2.setOption({ this.chart2.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
}, },
legend: { legend: {
data: ['综合', '绩效'], data: ["综合", "绩效"],
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: "#fff", //legend字体颜色
}, },
}, },
grid: { grid: {
@ -372,48 +470,56 @@ export default {
containLabel: true, containLabel: true,
}, },
dataZoom: { dataZoom: {
type: 'slider', type: "slider",
start: 0, start: 0,
end: 50, end: 50,
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'], data: [
"部门一",
"部门二",
"部门三",
"部门四",
"部门五",
"部门六",
"部门七",
],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
name: '个', name: "个",
splitLine: { splitLine: {
show: true, show: true,
// 改变轴线颜色 // 改变轴线颜色
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'], color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
min: 0, min: 0,
max: 100, max: 100,
interval: 20, interval: 20,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -423,47 +529,47 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
series: [ series: [
{ {
name: '绩效', name: "绩效",
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
itemStyle: { itemStyle: {
color: '#F64F58', color: "#F64F58",
}, },
barWidth: 30, barWidth: 30,
data: [150, 232, 201, 154, 190, 330, 410], data: [150, 232, 201, 154, 190, 330, 410],
}, },
{ {
name: '综合', name: "综合",
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
itemStyle: { itemStyle: {
color: '#F6D97E', color: "#F6D97E",
}, },
barWidth: 30, barWidth: 30,
data: [150, 232, 201, 154, 190, 330, 410], data: [150, 232, 201, 154, 190, 330, 410],
}, },
{ {
name: '完成率', name: "完成率",
type: 'scatter', type: "scatter",
symbol: 'rect', symbol: "rect",
symbolSize: [30, 4], symbolSize: [30, 4],
symbolOffset: [0, 0], symbolOffset: [0, 0],
position: [0, 0], position: [0, 0],
itemStyle: { itemStyle: {
color: '#7EA7FC', color: "#7EA7FC",
}, },
data: [600, 650, 700, 750, 800, 750, 700], data: [600, 650, 700, 750, 800, 750, 700],
}, },
@ -488,10 +594,10 @@ export default {
// symbol: 'none', // symbol: 'none',
// }, // },
], ],
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

426
src/views/bigScreen/qualityManage/center.vue
View File

@ -1,96 +1,110 @@
<template> <template>
<div> <div>
<center1> <center1>
<div class="data"> <div class="data">
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">质量体系整改率</span></div> <div><span style="font-weight: bold">质量体系整改率</span></div>
<div class="box"> <div class="box">
<span>{{ percentage }}%</span> <span>{{ percentage }}%</span>
</div> </div>
<div style="width: 100%"> <div style="width: 100%">
<progressBar :percentage="percentage" /> <progressBar :percentage="percentage" />
</div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">产品合格率</span></div> <div><span style="font-weight: bold">产品合格率</span></div>
<div class="box"> <div class="box">
<span>{{ dataInfo.productCate }}%</span> <span>{{ dataInfo.productCate || 0 }}%</span>
</div> </div>
<div style="width: 100%"><progressBar :percentage="dataInfo.productCate" /></div> <div style="width: 100%">
</div> <progressBar :percentage="dataInfo.productCate" />
<div class="data-item"> </div>
<div><span style="font-weight: bold">一般性质量问题数量</span></div> </div>
<div class="box" style="font-size: 18px"><span style="color: #55c5a2; margin: 0 5px">↓</span>20%</div> <div class="data-item">
<div class="box"> <div><span style="font-weight: bold">一般性质量问题数量</span></div>
<i>{{ dataInfo.commonlyProblemTotal }}</i <div class="box" style="font-size: 18px">
><span class="num2"></span> <span style="color: #55c5a2; margin: 0 5px">↓</span>20%
</div> </div>
</div> <div class="box">
<div class="data-item"> <i>{{ dataInfo.commonlyProblemTotal }}</i
<div><span style="font-weight: bold">低层次问题数</span></div> ><span class="num2"></span>
<div class="box"> </div>
<i>{{ dataInfo.lowProblemTotal }}</i </div>
><span class="num2"></span> <div class="data-item">
</div> <div><span style="font-weight: bold">低层次问题数</span></div>
</div> <div class="box">
<div class="data-item"> <i>{{ dataInfo.lowProblemTotal }}</i
<div><span style="font-weight: bold">小型产品合格率</span></div> ><span class="num2"></span>
<div class="box"> </div>
<span>{{ dataInfo.smallProductCate }}</span </div>
>% <div class="data-item">
</div> <div><span style="font-weight: bold">小型产品合格率</span></div>
<div style="width: 100%"><progressBar :percentage="dataInfo.smallProductCate" /></div> <div class="box">
</div> <span>{{ dataInfo.smallProductCate || 0 }}</span
<div class="data-item"> >%
<div><span style="font-weight: bold">产品错/漏检率</span></div> </div>
<div class="box"> <div style="width: 100%">
<span>{{ dataInfo.errorCheckRate }}%/{{ dataInfo.leakCheckRate }}%</span> <progressBar :percentage="dataInfo.smallProductCate" />
</div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">质量计划完成率</span></div> <div><span style="font-weight: bold">产品错、漏检率</span></div>
<div class="box"> <div class="box">
<span>{{ dataInfo.planCompleteRate }}</span <span
>%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">{{ >{{ dataInfo.errorCheckRate.toFixed(2) }}%/{{
dataInfo.qualityPlanCompleteTotal dataInfo.leakCheckRate.toFixed(2)
}}</span> }}%</span
</div> >
<div style="width: 100%"><progressBar :percentage="dataInfo.planCompleteRate" /></div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">质量检查完成率</span></div> <div><span style="font-weight: bold">质量计划完成率</span></div>
<div class="box"> <div class="box">
<span>{{ dataInfo.checkCompleteRate }}</span <span>{{ dataInfo.planCompleteRate.toFixed(2) }}</span
>%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">{{ >%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">{{
dataInfo.qualityNotificationCompleteTotal dataInfo.qualityPlanCompleteTotal
}}</span> }}</span>
</div> </div>
<div style="width: 100%"><progressBar :percentage="dataInfo.checkCompleteRate" /></div> <div style="width: 100%">
</div> <progressBar :percentage="dataInfo.planCompleteRate" />
</div> </div>
</center1> </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> </template>
<script> <script>
import center1 from './components/center1/index.vue' import center1 from "./components/center1/index.vue";
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import progressBar from './../components/progress/index.vue' import progressBar from "./../components/progress/index.vue";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from "../../dashboard/mixins/resize";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left1', name: "left1",
components: { components: {
center1, center1,
rocketTit, rocketTit,
progressBar, progressBar,
}, },
data() { data() {
return { return {
dataInfo: { dataInfo: {
rectificationRate: 0, rectificationRate: 0,
productCate: 0, productCate: 0,
commonlyProblemTotal: 0, commonlyProblemTotal: 0,
@ -104,135 +118,135 @@ export default {
checkCompleteRate: 0, checkCompleteRate: 0,
qualityNotificationCompleteTotal: 0, qualityNotificationCompleteTotal: 0,
}, },
} };
}, },
computed: { computed: {
percentage() { percentage() {
return Math.floor(this.dataInfo.rectificationRate * 100) / 100 || 0 return Math.floor(this.dataInfo.rectificationRate * 100) / 100 || 0;
}, },
}, },
mounted() { mounted() {
this.getData() this.getData();
}, },
beforeDestroy() {}, beforeDestroy() {},
methods: { methods: {
getData() { getData() {
this.request({ this.request({
url: '/hx/qualityAssurance/getQualityManage', url: "/hx/qualityAssurance/getQualityManage",
method: 'get', method: "get",
}).then(({ data }) => { }).then(({ data }) => {
this.dataInfo = data this.dataInfo = data;
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tit { .tit {
padding: 16px 24px; padding: 16px 24px;
} }
.img { .img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.data { .data {
display: flex; display: flex;
// justify-content: space-around; // justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
background: rgba(2, 18, 63, 0.33); background: rgba(2, 18, 63, 0.33);
color: #ffffff; color: #ffffff;
font-size: 18px; font-size: 18px;
.data-item { .data-item {
width: 24%; width: 24%;
height: 147px; height: 147px;
padding: 10px; padding: 10px;
margin: 7px 7px 0 0; margin: 7px 7px 0 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
background-color: rgba(145, 213, 254, 0.09); background-color: rgba(145, 213, 254, 0.09);
> div { > div {
margin: 5px 0; margin: 5px 0;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
img { img {
// width: 10px; // width: 10px;
// height: 10px; // height: 10px;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;
} }
} }
.box { .box {
font-size: 26px; font-size: 26px;
font-family: Roboto-BlackItalic, Roboto; font-family: Roboto-BlackItalic, Roboto;
font-weight: 600; font-weight: 600;
color: #91d5fe; color: #91d5fe;
} }
.num { .num {
font-size: 14px; font-size: 14px;
} }
.num2 { .num2 {
font-size: 16px; font-size: 16px;
margin-left: 5px; margin-left: 5px;
color: #fff; color: #fff;
} }
} }
} }
.center1 { .center1 {
position: relative; position: relative;
.con_right { .con_right {
width: 138px; width: 138px;
position: absolute; position: absolute;
top: 41%; top: 41%;
right: 43%; right: 43%;
color: #fff; color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.con_title { .con_title {
width: 100%; width: 100%;
height: 42px; height: 42px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-right: 3px; margin-right: 3px;
} }
} }
.con_title_bg1 { .con_title_bg1 {
background: url('./img/left1/1.png') no-repeat; background: url("./img/left1/1.png") no-repeat;
} }
.con_title_bg2 { .con_title_bg2 {
background: url('./img/left1/2.png') no-repeat; background: url("./img/left1/2.png") no-repeat;
} }
.con_title_bg3 { .con_title_bg3 {
background: url('./img/left1/3.png') no-repeat; background: url("./img/left1/3.png") no-repeat;
} }
.com_img { .com_img {
margin-top: 5px; margin-top: 5px;
width: 40px; width: 40px;
height: 40px; height: 40px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
.con_two { .con_two {
top: 37%; top: 37%;
left: 13%; left: 13%;
} }
.con_three { .con_three {
top: 70%; top: 70%;
right: 16%; right: 16%;
} }
} }
</style> </style>

193
src/views/bigScreen/securityManage/center.vue
View File

@ -1,29 +1,57 @@
<template> <template>
<div> <div>
<container3> <container3>
<img v-if="pic.length" class="img" :src="pic" style="width: 100%; height: 100%"> <img
<img v-else class="img" src="./center.png" style="width: 100%; height: 100%" /> v-if="pic.length"
<section v-for="(v,index) in points" :key="index"> class="img"
<div v-if="v.level == '一级'" class="con_right" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}"> :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"> <div class="con_title con_title_bg1">
<img src="./img/left1/icon.png" alt="" /> <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>
<div class="com_img" @click="handleItem(v)"><img src="./img/left1/icon1.png" alt="" /></div>
</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"> <div class="con_title con_title_bg2">
<img src="./img/left1/icon.png" alt="" /> <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>
<div class="com_img" @click="handleItem(v)"><img src="./img/left1/icon2.png" alt="" /></div>
</div> </div>
<div v-if="v.level == '三级'" class="con_right con_three" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}"> <div
<div class="con_title con_title_bg3"> v-if="v.level == '三级'"
<img src="./img/left1/icon.png" alt="" /> class="con_right con_three"
<span style="margin-left: 2px">三级：{{v.pointName}}</span> :style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
</div> >
<div class="com_img" @click="handleItem(v)"><img src="./img/left1/icon3.png" alt="" /></div> <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> </div>
</section> </section>
<!-- <div class="con_right"> <!-- <div class="con_right">
@ -49,23 +77,47 @@
</div> --> </div> -->
<div class="data"> <div class="data">
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">一级危险点/危险源数量</span></div> <div>
<div class="box"><i>{{getItem(pointLevelCount,'一级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'一级').COUNTNUMBER}}</i><span <span style="font-weight: bold">一级危险点/危险源数量</span>
class="num2">个</span></div> </div>
<div class="box">
<i
>{{ getItem(pointLevelCount, "一级").COUNTNUMBER }}/{{
getItem(sourceLevelCount, "一级").COUNTNUMBER
}}</i
><span class="num2">个</span>
</div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">二级危险点/危险源数量</span></div> <div>
<div class="box"><i>{{getItem(pointLevelCount,'二级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'二级').COUNTNUMBER}}</i><span <span style="font-weight: bold">二级危险点/危险源数量</span>
class="num2">个</span></div> </div>
<div class="box">
<i
>{{ getItem(pointLevelCount, "二级").COUNTNUMBER }}/{{
getItem(sourceLevelCount, "二级").COUNTNUMBER
}}</i
><span class="num2">个</span>
</div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">三级危险点/危险源数量</span></div> <div>
<div class="box"><i>{{getItem(pointLevelCount,'三级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'三级').COUNTNUMBER}}</i><span <span style="font-weight: bold">三级危险点/危险源数量</span>
class="num2">个</span></div> </div>
<div class="box">
<i
>{{ getItem(pointLevelCount, "三级").COUNTNUMBER }}/{{
getItem(sourceLevelCount, "三级").COUNTNUMBER
}}</i
><span class="num2">个</span>
</div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">四级危险源数量</span></div> <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>
</div> </div>
</container3> </container3>
@ -73,70 +125,70 @@
</template> </template>
<script> <script>
import container3 from '../components/container3/index.vue' import container3 from "../components/container3/index.vue";
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import progressBar from './../components/progress/index.vue' import progressBar from "./../components/progress/index.vue";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from "../../dashboard/mixins/resize";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left1', name: "left1",
components: { components: {
container3, container3,
rocketTit, rocketTit,
progressBar, progressBar,
}, },
data () { data() {
return { return {
pic: '', pic: "",
pointLevelCount: [ pointLevelCount: [
{ {
"name": "二级", name: "二级",
"COUNTNUMBER": 0 COUNTNUMBER: 0,
}, },
{ {
"name": "三级", name: "三级",
"COUNTNUMBER": 0 COUNTNUMBER: 0,
}, },
{ {
"name": "一级", name: "一级",
"COUNTNUMBER": 0 COUNTNUMBER: 0,
} },
], ],
sourceLevelCount: [ sourceLevelCount: [
{ {
"name": "二级", name: "二级",
"COUNTNUMBER": 0 COUNTNUMBER: 0,
}, },
{ {
"name": "三级", name: "三级",
"COUNTNUMBER": 0 COUNTNUMBER: 0,
}, },
{ {
"name": "四级", name: "四级",
"COUNTNUMBER": 0 COUNTNUMBER: 0,
}, },
{ {
"name": "一级", name: "一级",
"COUNTNUMBER": 0 COUNTNUMBER: 0,
} },
], ],
points: [] points: [],
} };
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.getData() this.getData();
// this.initChart3() // this.initChart3()
}) });
}, },
methods: { methods: {
handleItem(item) { handleItem(item) {
this.$bus.emit("getTarget", item); this.$bus.emit("getTarget", item);
}, },
getItem (list, name) { getItem(list, name) {
for (let index = 0; index < list.length; index++) { for (let index = 0; index < list.length; index++) {
const item = list[index]; const item = list[index];
if (name == item.name) { if (name == item.name) {
@ -144,33 +196,33 @@ export default {
} }
} }
}, },
getData () { getData() {
this.request({ this.request({
url: '/hx/securityManagement/dangerousMap', url: "/hx/securityManagement/dangerousMap",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
this.pointLevelCount = res.data.pointLevelCount; this.pointLevelCount = res.data.pointLevelCount;
this.sourceLevelCount = res.data.sourceLevelCount; this.sourceLevelCount = res.data.sourceLevelCount;
this.points = res.data.points; this.points = res.data.points;
} }
}) });
this.request({ this.request({
url: '/hx/bigPic/getByType', url: "/hx/bigPic/getByType",
method: 'get', method: "get",
params: { type: 1} params: { type: 1 },
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
this.pic = res.data.pic; this.pic = res.data.pic;
} }
}) });
} },
}, },
beforeDestroy() { beforeDestroy() {
//销毁监听事件 //销毁监听事件
this.$bus.off("getTarget"); this.$bus.off("getTarget");
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -228,6 +280,9 @@ export default {
.container3 { .container3 {
position: relative; position: relative;
.con_right { .con_right {
&:hover {
z-index: 10;
}
width: 138px; width: 138px;
position: absolute; position: absolute;
top: 41%; top: 41%;