Merge branch 'bigPic'
This commit is contained in:
熊丽君
12
src/main.js
12
src/main.js
@ -59,6 +59,18 @@ Vue.prototype.dataZoomEnd = (titLength, defaultLength = 7) => {
|
||||
}
|
||||
return ((defaultLength / (titLength + 1)) * 100).toFixed(0)
|
||||
}
|
||||
Vue.prototype.dataZoomStart = (titLength, defaultLength = 4,position) => {
|
||||
if (titLength <= defaultLength) {
|
||||
if(position=='start'){
|
||||
return 0
|
||||
}
|
||||
return titLength - 1
|
||||
}
|
||||
if(position=='start'){
|
||||
return titLength - 4
|
||||
}
|
||||
return titLength - 1
|
||||
}
|
||||
|
||||
// 全局组件挂载
|
||||
Vue.component('DictTag', DictTag)
|
||||
|
||||
@ -1,85 +1,85 @@
|
||||
<template>
|
||||
<div style="background-color: #000; height: 100%; width: 100%">
|
||||
<div
|
||||
class="ScaleBox"
|
||||
ref="ScaleBox"
|
||||
:style="{
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
}"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color: #000; height: 100%; width: 100%">
|
||||
<div
|
||||
class="ScaleBox"
|
||||
ref="ScaleBox"
|
||||
:style="{
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
}"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ScaleBox',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
scale: 0,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setScale()
|
||||
window.addEventListener('resize', this.debounce(this.setScale))
|
||||
},
|
||||
methods: {
|
||||
getScale() {
|
||||
const { width, height } = this
|
||||
const wh = window.innerHeight / height
|
||||
const ww = window.innerWidth / width
|
||||
console.log(ww < wh ? ww : wh)
|
||||
return ww < wh ? ww : wh
|
||||
},
|
||||
setScale() {
|
||||
// if (window.innerHeight == 1080) {
|
||||
// this.height = 1080
|
||||
// } else {
|
||||
// this.height = 937
|
||||
// }
|
||||
this.scale = this.getScale()
|
||||
if (this.$refs.ScaleBox) {
|
||||
this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
|
||||
}
|
||||
},
|
||||
debounce(fn, delay) {
|
||||
const delays = delay || 500
|
||||
let timer
|
||||
return function () {
|
||||
const th = this
|
||||
const args = arguments
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
timer = setTimeout(function () {
|
||||
timer = null
|
||||
fn.apply(th, args)
|
||||
}, delays)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
name: "ScaleBox",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
scale: 0,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setScale();
|
||||
window.addEventListener("resize", this.debounce(this.setScale));
|
||||
},
|
||||
methods: {
|
||||
getScale() {
|
||||
const { width, height } = this;
|
||||
const wh = window.innerHeight / height;
|
||||
const ww = window.innerWidth / width;
|
||||
console.log(ww < wh ? ww : wh);
|
||||
return ww < wh ? ww : wh;
|
||||
},
|
||||
setScale() {
|
||||
// if (window.innerHeight == 1080) {
|
||||
// this.height = 1080
|
||||
// } else {
|
||||
// this.height = 937
|
||||
// }
|
||||
this.scale = this.getScale();
|
||||
if (this.$refs.ScaleBox) {
|
||||
this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
|
||||
}
|
||||
},
|
||||
debounce(fn, delay) {
|
||||
const delays = delay || 500;
|
||||
let timer;
|
||||
return function () {
|
||||
const th = this;
|
||||
const args = arguments;
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
timer = setTimeout(function () {
|
||||
timer = null;
|
||||
fn.apply(th, args);
|
||||
}, delays);
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#ScaleBox {
|
||||
--scale: 1;
|
||||
--scale: 1;
|
||||
}
|
||||
.ScaleBox {
|
||||
position: absolute;
|
||||
transform: scale(var(--scale)) translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform-origin: 0 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transition: 0.3s;
|
||||
z-index: 999;
|
||||
// background: rgba(255, 0, 0, 0.3);
|
||||
position: absolute;
|
||||
transform: scale(var(--scale)) translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform-origin: 0 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transition: 0.3s;
|
||||
z-index: 999;
|
||||
// background: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -26,11 +26,11 @@
|
||||
><i class="num">{{ handleMillion(val.targetIncome) }}</i
|
||||
><span class="num2">亿元</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar
|
||||
:percentage="(val.completedIncome / val.targetIncome) * 100"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>
|
||||
@ -43,11 +43,11 @@
|
||||
><i class="num">{{ handleMillion(val.targetProfit) }}</i
|
||||
><span class="num2">亿元</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar
|
||||
:percentage="(val.completedProfit / val.targetProfit) * 100"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>
|
||||
@ -60,13 +60,13 @@
|
||||
><i class="num">{{ handleMillion(val.targetChargeQuantity) }}</i
|
||||
><span class="num2">亿件</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar
|
||||
:percentage="
|
||||
(val.completedChargeQuantity / val.targetChargeQuantity) * 100
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>
|
||||
@ -79,14 +79,14 @@
|
||||
><i class="num">{{ handleMillion(val.targetDeliveryQuantity) }}</i
|
||||
><span class="num2">亿件</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar
|
||||
:percentage="
|
||||
(val.completedDeliveryQuantity / val.targetDeliveryQuantity) *
|
||||
100
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
@ -168,8 +168,8 @@ export default {
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
.data-item {
|
||||
// flex: 1;
|
||||
width: 20%;
|
||||
flex: 1;
|
||||
// width: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
@ -5,16 +5,28 @@
|
||||
<el-row class="content1">
|
||||
<el-col :span="24">
|
||||
<div id="left1" ref="left1" class="chart1"></div>
|
||||
<div style="text-align: right; padding-right: 20px">
|
||||
<el-pagination
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
background
|
||||
:total="total"
|
||||
:page-size="7"
|
||||
:current-page.sync="currentPage1"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="box">
|
||||
<!-- <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> -->
|
||||
</div>
|
||||
</container2>
|
||||
<container2 title="收入概况" style="margin-top: 10px">
|
||||
@ -54,6 +66,11 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPage1: 1,
|
||||
total: 30,
|
||||
titData: [],
|
||||
valData: [],
|
||||
time: null,
|
||||
data: [
|
||||
{ value: 154, name: "类别一" },
|
||||
{ value: 775, name: "类别二" },
|
||||
@ -78,73 +95,59 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
this.initLine();
|
||||
this.start();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {},
|
||||
beforeDestroy() {
|
||||
this.end();
|
||||
},
|
||||
methods: {
|
||||
start() {
|
||||
this.time = setInterval(() => {
|
||||
let size = this.currentPage1 + 1;
|
||||
if (size * 6 > this.total) size = 1;
|
||||
this.handleCurrentChange(size);
|
||||
}, 5000);
|
||||
},
|
||||
end() {
|
||||
if (this.time) {
|
||||
clearInterval(this.time);
|
||||
}
|
||||
},
|
||||
initChart() {
|
||||
this.setOptions();
|
||||
},
|
||||
setOptions() {
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage1 = val;
|
||||
this.setPageData(val);
|
||||
},
|
||||
setOptions(val) {
|
||||
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.titData.push(item.indicator_name);
|
||||
this.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: "10%",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
pageTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
pageIconColor: "#fff",
|
||||
pageIconInactiveColor: "#ccc",
|
||||
// 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,
|
||||
},
|
||||
],
|
||||
});
|
||||
this.setPageData(val);
|
||||
});
|
||||
},
|
||||
|
||||
setPageData(val) {
|
||||
let titData = [];
|
||||
let valData = [];
|
||||
if (!val) {
|
||||
titData = this.titData.slice(0, 7);
|
||||
// valData = this.valData.slice(0, 7);
|
||||
valData = this.valData;
|
||||
} else {
|
||||
titData = this.titData.slice((val - 1) * 7, 7 * val);
|
||||
// valData = this.valData.slice((val - 1) * 7, 7 * val);
|
||||
valData = this.valData;
|
||||
}
|
||||
|
||||
const calcAverageValue = (data, name) => {
|
||||
const items = data.filter((d) => d.name === name);
|
||||
@ -152,7 +155,54 @@ export default {
|
||||
? items.reduce((a, b) => a + b.value, 0) / items.length
|
||||
: "-";
|
||||
};
|
||||
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: "10%",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
pageTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
pageIconColor: "#fff",
|
||||
pageIconInactiveColor: "#ccc",
|
||||
// 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,
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
|
||||
initLine() {
|
||||
request({
|
||||
url: "/hx/cockpitOverview/revenueProfile",
|
||||
@ -222,11 +272,24 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titData.length, 7),
|
||||
},
|
||||
// dataZoom: {
|
||||
// type: "slider",
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(titData.length, 7),
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(titData.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(titData.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
color: ["#ccc", "red"],
|
||||
yAxis: [
|
||||
{
|
||||
@ -312,6 +375,25 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep.el-pagination button {
|
||||
display: none;
|
||||
color: #fff !important;
|
||||
background-color: unset !important;
|
||||
}
|
||||
::v-deep.el-pagination button:disabled {
|
||||
color: #ccc !important;
|
||||
}
|
||||
::v-deep.el-pagination.is-background .el-pager li {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
background: rgba(145, 213, 254, 0.2) !important;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background: linear-gradient(270deg, #3661a8 0%, #8bb1ed 100%) !important;
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -307,11 +307,24 @@ export default {
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titData.length, 7),
|
||||
},
|
||||
// dataZoom: {
|
||||
// type: "slider",
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(titData.length, 7),
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(titData.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(titData.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "预测",
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="box">
|
||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span>已完成任务/完成率</span>
|
||||
<i class="num">{{rate.completedTotal}}/{{rate.rate}}%</i>
|
||||
<i class="num">{{ rate.completedTotal }}/{{ rate.rate }}%</i>
|
||||
<progressBar :percentage="rate.rate" />
|
||||
</div>
|
||||
</div>
|
||||
@ -29,25 +29,25 @@
|
||||
</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
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
name: "left1",
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
chart1: null,
|
||||
@ -56,79 +56,80 @@ export default {
|
||||
completedTotal: 0,
|
||||
rate: 0,
|
||||
targetTotal: 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
})
|
||||
this.initChart();
|
||||
this.initLine();
|
||||
});
|
||||
},
|
||||
beforeDestroy () { },
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.setOptions()
|
||||
initChart() {
|
||||
this.setOptions();
|
||||
},
|
||||
setOptions () {
|
||||
setOptions() {
|
||||
this.request({
|
||||
url: '/hx/cockpitOverview/productionResponsibility',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
url: "/hx/cockpitOverview/productionResponsibility",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
this.rate = res.data.rate;
|
||||
let valData = [];
|
||||
let titData = [];
|
||||
for (let i = 0; i < res.data.list.length; i++) {
|
||||
const item = res.data.list[i];
|
||||
titData.push(item.translateName)
|
||||
valData.push(
|
||||
{ value: item.completedTaskNumber, name: item.translateName },
|
||||
);
|
||||
titData.push(item.translateName);
|
||||
valData.push({
|
||||
value: item.completedTaskNumber,
|
||||
name: item.translateName,
|
||||
});
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
||||
this.chart = echarts.init(this.$refs.left1, "macarons");
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
// data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七', '型号八'],
|
||||
data: titData,
|
||||
orient: 'vertical',
|
||||
orient: "vertical",
|
||||
// left: '60%',
|
||||
right: '2%',
|
||||
y: 'center',
|
||||
right: "2%",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: '#fff',
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '概括',
|
||||
type: 'pie',
|
||||
radius: ['40%', '80%'],
|
||||
center: ['35%', '50%'],
|
||||
name: "概括",
|
||||
type: "pie",
|
||||
radius: ["40%", "80%"],
|
||||
center: ["35%", "50%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
position: "center",
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold',
|
||||
fontSize: "40",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: valData
|
||||
data: valData,
|
||||
// [
|
||||
// { value: 154, name: '型号一' },
|
||||
// { value: 775, name: '型号二' },
|
||||
@ -139,24 +140,22 @@ export default {
|
||||
// { value: 679, name: '型号七' },
|
||||
// { value: 679, name: '型号八' },
|
||||
// ]
|
||||
,
|
||||
},
|
||||
],
|
||||
})
|
||||
});
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
},
|
||||
initLine () {
|
||||
this.setOptions2()
|
||||
initLine() {
|
||||
this.setOptions2();
|
||||
},
|
||||
setOptions2 () {
|
||||
setOptions2() {
|
||||
this.request({
|
||||
url: '/hx/cockpitOverview/productCompletion',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
url: "/hx/cockpitOverview/productCompletion",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
let titData = [];
|
||||
let completionRate = [];
|
||||
@ -169,17 +168,17 @@ export default {
|
||||
actualDeliveryQuantity.push(item.actualDeliveryQuantity);
|
||||
targetDeliveryQuantity.push(item.targetDeliveryQuantity);
|
||||
}
|
||||
this.chart1 = echarts.init(this.$refs.left2)
|
||||
this.chart1 = echarts.init(this.$refs.left2);
|
||||
|
||||
this.chart1.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a1}<br/>{b1}：{c1}',
|
||||
trigger: "axis",
|
||||
formatter: "{a1}<br/>{b1}：{c1}",
|
||||
},
|
||||
legend: {
|
||||
data: ['预测', '实际', '目标完成率'],
|
||||
data: ["预测", "实际", "目标完成率"],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
color: "#fff", //legend字体颜色
|
||||
},
|
||||
// selectedMode: false,
|
||||
},
|
||||
@ -216,43 +215,56 @@ export default {
|
||||
// ],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titData.length, 7),
|
||||
},
|
||||
color: ['#ccc', 'red'],
|
||||
// dataZoom: {
|
||||
// type: 'slider',
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(titData.length, 7),
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(titData.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(titData.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
color: ["#ccc", "red"],
|
||||
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, //不显示网格线
|
||||
@ -262,57 +274,55 @@ export default {
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '预测',
|
||||
type: 'bar',
|
||||
name: "预测",
|
||||
type: "bar",
|
||||
// z: '-1',
|
||||
barGap: '-75%',
|
||||
barGap: "-75%",
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, .3)',
|
||||
color: "rgba(85, 197, 162, .3)",
|
||||
},
|
||||
data: targetDeliveryQuantity,
|
||||
// data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95, 60, 70, 80, 70, 60, 50, 40, 30],
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
name: "实际",
|
||||
type: "bar",
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
color: "rgba(90, 216, 166, 0.85)",
|
||||
},
|
||||
data: actualDeliveryQuantity,
|
||||
// data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30],
|
||||
},
|
||||
{
|
||||
name: '目标完成率',
|
||||
type: 'scatter',
|
||||
symbol: 'rect',
|
||||
name: "目标完成率",
|
||||
type: "scatter",
|
||||
symbol: "rect",
|
||||
symbolSize: [30, 4],
|
||||
symbolOffset: [3, 0],
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
color: "#F6D97E",
|
||||
},
|
||||
data: completionRate,
|
||||
// data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,59 +1,66 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3 title="装药量概况">
|
||||
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
<el-date-picker
|
||||
slot="datePicker"
|
||||
v-model="dateRange"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</container3>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scalseBox from '../components/scaleBox.vue'
|
||||
import scalseBox from "../components/scaleBox.vue";
|
||||
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import container3 from "./components/container3/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: 'right2',
|
||||
name: "right2",
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container3,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
dateRange: [],
|
||||
chart: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
|
||||
this.request({
|
||||
url: '/hx/cockpitOverview/chargeQuantityList',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
url: "/hx/cockpitOverview/chargeQuantityList",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
|
||||
let titData = [];
|
||||
@ -69,23 +76,23 @@ export default {
|
||||
}
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
data: ['实际', '预测', '目标完成率'],
|
||||
data: ["实际", "预测", "目标完成率"],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
left: "3%",
|
||||
right: "6%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
type: "category",
|
||||
data: titData,
|
||||
// data: [
|
||||
// '2021-01',
|
||||
@ -102,54 +109,54 @@ export default {
|
||||
// '2021-12',
|
||||
// ],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
type: "shadow",
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '万元',
|
||||
type: "value",
|
||||
name: "万元",
|
||||
min: 0,
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
formatter: "{value}",
|
||||
},
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
type: "value",
|
||||
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
@ -158,67 +165,82 @@ export default {
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titData.length, 7),
|
||||
},
|
||||
// dataZoom: {
|
||||
// type: 'slider',
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(titData.length, 7),
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(titData.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(titData.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '预测',
|
||||
type: 'bar',
|
||||
z: '-1',
|
||||
barGap: '-75%',
|
||||
name: "预测",
|
||||
type: "bar",
|
||||
z: "-1",
|
||||
barGap: "-75%",
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(145, 213, 254, .3)',
|
||||
color: "rgba(145, 213, 254, .3)",
|
||||
},
|
||||
data: forecastQuantity,
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
name: "实际",
|
||||
type: "bar",
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
type: "linear", // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#B5D3FE' // 0%处的颜色为红色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#7EA7FC' // 100%处的颜色为蓝
|
||||
}]
|
||||
}
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#B5D3FE", // 0%处的颜色为红色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#7EA7FC", // 100%处的颜色为蓝
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
data: actualQuantity,
|
||||
},
|
||||
{
|
||||
name: '目标完成率',
|
||||
type: 'line',
|
||||
name: "目标完成率",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: targetCompletionRate,
|
||||
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(246, 217, 126, 1)'
|
||||
}
|
||||
color: "rgba(246, 217, 126, 1)",
|
||||
},
|
||||
},
|
||||
symbol: 'none'
|
||||
}
|
||||
symbol: "none",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,223 +1,229 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3>
|
||||
<rocketTit class="tit">信息化指标</rocketTit>
|
||||
<div>
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">全年信息化投入</span></div>
|
||||
<div class="box">
|
||||
<i>{{ dataInfo.informationInvested }}/</i><i class="num">{{ dataInfo.informationTargetInveste }}</i
|
||||
><span class="num2">万</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<div>
|
||||
<container3>
|
||||
<!-- <rocketTit class="tit">信息化指标</rocketTit> -->
|
||||
<div>
|
||||
<div class="data" style="margin-top: 30px">
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">全年信息化投入</span></div>
|
||||
<div class="box">
|
||||
<i>{{ dataInfo.informationInvested }}/</i
|
||||
><i class="num">{{ dataInfo.informationTargetInveste }}</i
|
||||
><span class="num2">万</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">
|
||||
<i>{{ dataInfo.alreadyNetworkOperation }}%/</i
|
||||
><span class="num">{{ dataInfo.targetNetworkOperation }}%</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">全年网络运维率</span></div>
|
||||
<div class="box">
|
||||
<i>{{ dataInfo.alreadyNetworkOperation }}%/</i
|
||||
><span class="num">{{ dataInfo.targetNetworkOperation }}%</span>
|
||||
</div>
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar :percentage="dataInfo.alreadyNetworkOperation" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">全年设备接入率</span></div>
|
||||
<div class="box">
|
||||
<i>{{ dataInfo.alreadyDeviceAccess }}%/</i><span class="num">{{ dataInfo.targetDeviceAccess }}%</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">全年设备接入率</span></div>
|
||||
<div class="box">
|
||||
<i>{{ dataInfo.alreadyDeviceAccess }}%/</i
|
||||
><span class="num">{{ dataInfo.targetDeviceAccess }}%</span>
|
||||
</div>
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar :percentage="dataInfo.alreadyDeviceAccess" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">全年业务覆盖率</span></div>
|
||||
<div class="box">
|
||||
<i>{{ dataInfo.alreadyBusinessCoverage }}%/</i
|
||||
><span class="num">{{ dataInfo.targetBusinessCoverage }}%</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">全年业务覆盖率</span></div>
|
||||
<div class="box">
|
||||
<i>{{ dataInfo.alreadyBusinessCoverage }}%/</i
|
||||
><span class="num">{{ dataInfo.targetBusinessCoverage }}%</span>
|
||||
</div>
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar :percentage="dataInfo.alreadyBusinessCoverage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_img">
|
||||
<img class="img" :src="dataInfo.bigPic" />
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="_img">
|
||||
<img class="img" :src="dataInfo.bigPic" />
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
</div>
|
||||
</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',
|
||||
components: {
|
||||
container3,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataInfo: {
|
||||
informationInvested:0,
|
||||
informationTargetInveste:0,
|
||||
alreadyNetworkOperation:0,
|
||||
targetNetworkOperation:0,
|
||||
alreadyDeviceAccess:0,
|
||||
targetDeviceAccess:0,
|
||||
alreadyBusinessCoverage:0,
|
||||
targetBusinessCoverage:0,
|
||||
mixins: [resize],
|
||||
name: "left1",
|
||||
components: {
|
||||
container3,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataInfo: {
|
||||
informationInvested: 0,
|
||||
informationTargetInveste: 0,
|
||||
alreadyNetworkOperation: 0,
|
||||
targetNetworkOperation: 0,
|
||||
alreadyDeviceAccess: 0,
|
||||
targetDeviceAccess: 0,
|
||||
alreadyBusinessCoverage: 0,
|
||||
targetBusinessCoverage: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
percentage() {
|
||||
return (this.dataInfo.informationInvested / this.dataInfo.informationTargetInveste) * 100 || 0
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
getData() {
|
||||
this.request({
|
||||
url: '/hx/informationManagement/getHxInformationIndex',
|
||||
method: 'get',
|
||||
}).then(({ data }) => {
|
||||
this.dataInfo = data
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
percentage() {
|
||||
return (
|
||||
(this.dataInfo.informationInvested /
|
||||
this.dataInfo.informationTargetInveste) *
|
||||
100 || 0
|
||||
);
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
getData() {
|
||||
this.request({
|
||||
url: "/hx/informationManagement/getHxInformationIndex",
|
||||
method: "get",
|
||||
}).then(({ data }) => {
|
||||
this.dataInfo = data;
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
};
|
||||
</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-evenly;
|
||||
margin: 0 30px;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
.data-item {
|
||||
// flex: 1;
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
> div {
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
img {
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
font-size: 26px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: 600;
|
||||
color: #55c5a2;
|
||||
}
|
||||
.num {
|
||||
font-size: 14px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin: 0 30px;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
.data-item {
|
||||
// flex: 1;
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
> div {
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
img {
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
font-size: 26px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: 600;
|
||||
color: #55c5a2;
|
||||
}
|
||||
.num {
|
||||
font-size: 14px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._img {
|
||||
margin-top: 10px;
|
||||
margin-right: 30px;
|
||||
margin-left: 40px;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
margin-top: 50px;
|
||||
margin-right: 30px;
|
||||
margin-left: 40px;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.container3 {
|
||||
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>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<span>已完成任务/完成率</span>
|
||||
<i class="num"
|
||||
>{{ totalAndRate.total }}/{{
|
||||
Math.floor(totalAndRate.rate * 100) / 100
|
||||
Math.floor(totalAndRate.rate * 100) / 100 || 0
|
||||
}}%</i
|
||||
>
|
||||
<progressBar :percentage="totalAndRate.rate" />
|
||||
@ -351,14 +351,27 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titList.length, 5),
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
// dataZoom: {
|
||||
// type: "slider",
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(titList.length, 5),
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(titList.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(titList.length, 4, "end"),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
color: ["#ccc", "red"],
|
||||
yAxis: [
|
||||
{
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -20,11 +20,11 @@
|
||||
><i class="num">{{ handleMillion(resData.targetIncome) }}</i
|
||||
><span class="num2">亿元</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar
|
||||
:percentage="(resData.realIncome / resData.targetIncome) * 100"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>
|
||||
@ -37,11 +37,11 @@
|
||||
><i class="num">{{ handleMillion(resData.targetProfit) }}</i
|
||||
><span class="num2">亿元</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar
|
||||
:percentage="(resData.realProfit / resData.targetProfit) * 100"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>
|
||||
@ -54,55 +54,72 @@
|
||||
><i class="num">{{ handleMillion(resData.targetEva) }}</i
|
||||
><span class="num2">亿元</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar
|
||||
:percentage="(resData.realEva / resData.targetEva) * 100"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="data-item" style="width: 34%">
|
||||
<div class="data-item" style="width: 37%">
|
||||
<div>
|
||||
<img src="./icon4.png" alt="" /><span style="font-weight: bold"
|
||||
>两金</span
|
||||
>两金<span style="font-size: 14px"
|
||||
>（ 产成品 / 应收账款 ）</span
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div>
|
||||
<div class="box" style="margin-bottom: 0">
|
||||
<div class="box" style="margin-bottom: 0; position: relative">
|
||||
<i>{{ handleMillion(resData.realCollection) }}/</i
|
||||
><i class="num">{{ handleMillion(resData.targetCollection) }}</i
|
||||
><span class="num2">亿元</span>
|
||||
<!-- <div
|
||||
style="
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
"
|
||||
>
|
||||
产成品
|
||||
</div> -->
|
||||
</div>
|
||||
<span style="font-size: 12px; position: relative; top: -6px"
|
||||
>产成品</span
|
||||
>
|
||||
<div style="display: flex">
|
||||
|
||||
<!-- <div style="display: flex">
|
||||
<progressBar
|
||||
:percentage="
|
||||
(resData.realCollection / resData.targetCollection) * 100
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div style="margin-left: 10px">
|
||||
<div class="box" style="margin-bottom: 0">
|
||||
<div class="box" style="margin-bottom: 0; position: relative">
|
||||
<i>{{ handleMillion(resData.realFinishProduct) }}/</i
|
||||
><i class="num">{{
|
||||
handleMillion(resData.targetFinishProduct)
|
||||
}}</i
|
||||
><span class="num2">亿元</span>
|
||||
<!-- <div
|
||||
style="
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
"
|
||||
>
|
||||
应收账款
|
||||
</div> -->
|
||||
</div>
|
||||
<span style="font-size: 12px; position: relative; top: -6px"
|
||||
>应收账款</span
|
||||
>
|
||||
<div style="display: flex">
|
||||
<!-- <div style="display: flex">
|
||||
<progressBar
|
||||
:percentage="
|
||||
(resData.realFinishProduct / resData.targetFinishProduct) *
|
||||
100
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -848,7 +865,8 @@ export default {
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
// justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
> div {
|
||||
margin: 5px 0;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
layout="prev, pager, next"
|
||||
background
|
||||
:total="total"
|
||||
:page-size="2"
|
||||
:page-size="1"
|
||||
:current-page.sync="currentPage1"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
@ -165,6 +165,7 @@ export default {
|
||||
currentPage1: 1,
|
||||
dataList: [],
|
||||
total: 0,
|
||||
time: null,
|
||||
index: 0,
|
||||
chart: null,
|
||||
chart2: null,
|
||||
@ -179,9 +180,12 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
this.initLine();
|
||||
this.start();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {},
|
||||
beforeDestroy() {
|
||||
this.end();
|
||||
},
|
||||
watch: {
|
||||
index(newVal, oldVal) {
|
||||
if (newVal == 0) {
|
||||
@ -196,6 +200,18 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
start() {
|
||||
this.time = setInterval(() => {
|
||||
let size = this.currentPage1 + 1;
|
||||
if (size > this.total) size = 1;
|
||||
this.handleCurrentChange(size);
|
||||
}, 5000);
|
||||
},
|
||||
end() {
|
||||
if (this.time) {
|
||||
clearInterval(this.time);
|
||||
}
|
||||
},
|
||||
initChart() {
|
||||
this.request({
|
||||
url: "/hx/operating/getHxStrategyIndexPic",
|
||||
@ -206,6 +222,7 @@ export default {
|
||||
this.dataList = res.data;
|
||||
if (this.total == 0) return false;
|
||||
this.setData(res.data.slice(0, 2));
|
||||
this.setOddEchars(res.data.slice(0, 1));
|
||||
// if (res.data.length > 2) {
|
||||
// list = res.data.splice(0, 2);
|
||||
// } else {
|
||||
@ -216,8 +233,10 @@ export default {
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage1 = val;
|
||||
const data = this.dataList.slice(val * 2 - 2, val * 2);
|
||||
this.setData(data);
|
||||
// const data = this.dataList.slice(val * 2 - 2, val * 2);
|
||||
const data = this.dataList.slice(val - 1, val);
|
||||
// this.setData(data);
|
||||
this.setOddEchars(data);
|
||||
},
|
||||
|
||||
setData(list) {
|
||||
@ -591,11 +610,24 @@ export default {
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(list.length, 5),
|
||||
},
|
||||
// dataZoom: {
|
||||
// type: "slider",
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(list.length, 5),
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(list.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(list.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "实际",
|
||||
|
||||
@ -579,11 +579,24 @@ export default {
|
||||
top: 30,
|
||||
bottom: 40,
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(list.length, 11),
|
||||
},
|
||||
// dataZoom: {
|
||||
// type: "slider",
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(list.length, 11),
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(list.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(list.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
data: list.map((e) => e.deptName),
|
||||
// data: [
|
||||
|
||||
@ -330,14 +330,27 @@ export default {
|
||||
bottom: 50,
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(list.length, 5),
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
// dataZoom: {
|
||||
// type: "slider",
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(list.length, 5),
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(list.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(list.length, 4, "end"),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
|
||||
@ -191,14 +191,27 @@ export default {
|
||||
bottom: 50,
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(list.length, 7),
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
// dataZoom: {
|
||||
// type: "slider",
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(list.length, 7),
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(list.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(list.length, 4, "end"),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
@ -793,14 +806,27 @@ export default {
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(list.length, 7),
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
// dataZoom: {
|
||||
// type: "slider",
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(list.length, 7),
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(list.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(list.length, 4, "end"),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
data: list.map((e) => e.deptName),
|
||||
axisLine: {
|
||||
|
||||
@ -7,18 +7,18 @@
|
||||
<div class="box">
|
||||
<span>{{ percentage }}%</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar :percentage="percentage" />
|
||||
</div>
|
||||
</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%">
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar :percentage="dataInfo.productCate" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">一般性质量问题数量</span></div>
|
||||
@ -43,9 +43,9 @@
|
||||
<span>{{ dataInfo.smallProductCate || 0 }}</span
|
||||
>%
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar :percentage="dataInfo.smallProductCate" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">产品错、漏检率</span></div>
|
||||
@ -64,9 +64,9 @@
|
||||
dataInfo.qualityPlanCompleteTotal
|
||||
}}</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar :percentage="dataInfo.planCompleteRate" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">质量检查完成率</span></div>
|
||||
@ -76,9 +76,9 @@
|
||||
dataInfo.qualityNotificationCompleteTotal
|
||||
}}</span>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<!-- <div style="width: 100%">
|
||||
<progressBar :percentage="dataInfo.checkCompleteRate" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</center1>
|
||||
|
||||
@ -150,11 +150,24 @@ export default {
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(productName.length, 7),
|
||||
},
|
||||
// dataZoom: {
|
||||
// type: "slider",
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(productName.length, 7),
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(productName.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(productName.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "实际",
|
||||
|
||||
@ -1,457 +1,490 @@
|
||||
<template>
|
||||
<div>
|
||||
<container2 title="质量计划">
|
||||
<div slot="datePicker">
|
||||
<bigScreenTabs v-model="index" :titleArr="['全厂', '部门']"></bigScreenTabs>
|
||||
</div>
|
||||
<div style="height: 100%; width: 100%" ref="chart" v-if="index == 0"></div>
|
||||
<div style="height: 100%; width: 100%" ref="chart2" v-else></div>
|
||||
</container2>
|
||||
</div>
|
||||
<div>
|
||||
<container2 title="质量计划">
|
||||
<div slot="datePicker">
|
||||
<bigScreenTabs
|
||||
v-model="index"
|
||||
:titleArr="['全厂', '部门']"
|
||||
></bigScreenTabs>
|
||||
</div>
|
||||
<div
|
||||
style="height: 100%; width: 100%"
|
||||
ref="chart"
|
||||
v-if="index == 0"
|
||||
></div>
|
||||
<div style="height: 100%; width: 100%" ref="chart2" v-else></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
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
chart: null,
|
||||
chart2: null,
|
||||
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,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
index(newVal, oldVal) {
|
||||
if (newVal == 0) {
|
||||
this.chart2.dispose()
|
||||
this.chart2 = null
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
} else {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
this.$nextTick(() => {
|
||||
this.initChart2()
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.request({
|
||||
url: '/hx/qualityAssurance/getQualityPlan',
|
||||
method: 'get',
|
||||
params: {
|
||||
type: '1',
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions(data)
|
||||
})
|
||||
},
|
||||
setOptions(resData) {
|
||||
let month = []
|
||||
let rate = []
|
||||
let completed = []
|
||||
for (let i = 0; i < resData.length; i++) {
|
||||
const item = resData[i]
|
||||
month.push(item.month)
|
||||
rate.push(item.rate)
|
||||
completed.push(item.completed)
|
||||
}
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
data: ['数量', '完成率'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: month,
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '个',
|
||||
min: 0,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
// interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
width: '99%',
|
||||
left: 0,
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(month.length, 5),
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: completed,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#9AF0D5', // 0%处的颜色为红色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#61DDAA', // 100%处的颜色为蓝
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: rate,
|
||||
itemStyle: {
|
||||
color: '#7EA7FC',
|
||||
},
|
||||
symbol: 'none',
|
||||
},
|
||||
],
|
||||
// yAxis: {
|
||||
// type: 'value',
|
||||
// splitLine: {
|
||||
// show: false//不显示网格线
|
||||
// },
|
||||
// splitArea: {
|
||||
// show: false//不显示网格区域
|
||||
// },
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// color: 'rgb(255, 255, 255)'
|
||||
// },
|
||||
// }
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: '利润',
|
||||
// type: 'bar',
|
||||
// data: [
|
||||
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: '数量',
|
||||
// type: 'bar',
|
||||
// data: [
|
||||
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: '完成率',
|
||||
// type: 'line',
|
||||
// yAxisIndex: 1,
|
||||
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||
// }
|
||||
// mixins: [resize],
|
||||
name: "left1",
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
chart: null,
|
||||
chart2: null,
|
||||
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,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
index(newVal, oldVal) {
|
||||
if (newVal == 0) {
|
||||
this.chart2.dispose();
|
||||
this.chart2 = null;
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
} else {
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
this.$nextTick(() => {
|
||||
this.initChart2();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.request({
|
||||
url: "/hx/qualityAssurance/getQualityPlan",
|
||||
method: "get",
|
||||
params: {
|
||||
type: "1",
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
this.setOptions(data);
|
||||
});
|
||||
},
|
||||
setOptions(resData) {
|
||||
let month = [];
|
||||
let rate = [];
|
||||
let completed = [];
|
||||
for (let i = 0; i < resData.length; i++) {
|
||||
const item = resData[i];
|
||||
month.push(item.month);
|
||||
rate.push(item.rate);
|
||||
completed.push(item.completed);
|
||||
}
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
data: ["数量", "完成率"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "6%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: month,
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "个",
|
||||
min: 0,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
// interval: 5,
|
||||
axisLabel: {
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
width: "99%",
|
||||
left: 0,
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
},
|
||||
// dataZoom: {
|
||||
// type: 'slider',
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(month.length, 5),
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(month.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(month.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
data: completed,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear", // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#9AF0D5", // 0%处的颜色为红色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#61DDAA", // 100%处的颜色为蓝
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "完成率",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: rate,
|
||||
itemStyle: {
|
||||
color: "#7EA7FC",
|
||||
},
|
||||
symbol: "none",
|
||||
},
|
||||
],
|
||||
// yAxis: {
|
||||
// type: 'value',
|
||||
// splitLine: {
|
||||
// show: false//不显示网格线
|
||||
// },
|
||||
// splitArea: {
|
||||
// show: false//不显示网格区域
|
||||
// },
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// color: 'rgb(255, 255, 255)'
|
||||
// },
|
||||
// }
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: '利润',
|
||||
// type: 'bar',
|
||||
// data: [
|
||||
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: '数量',
|
||||
// type: 'bar',
|
||||
// data: [
|
||||
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: '完成率',
|
||||
// type: 'line',
|
||||
// yAxisIndex: 1,
|
||||
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||
// }
|
||||
|
||||
// ]
|
||||
})
|
||||
},
|
||||
initChart2() {
|
||||
this.request({
|
||||
url: '/hx/qualityAssurance/getQualityPlan',
|
||||
method: 'get',
|
||||
params: {
|
||||
type: '2',
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
this.chart2 = echarts.init(this.$refs.chart2)
|
||||
this.setOptions2(data)
|
||||
})
|
||||
},
|
||||
setOptions2(resData) {
|
||||
let deptName = []
|
||||
let rate = []
|
||||
let completed = []
|
||||
for (let i = 0; i < resData.length; i++) {
|
||||
const item = resData[i]
|
||||
deptName.push(item.deptName)
|
||||
rate.push(item.rate)
|
||||
completed.push(item.completed)
|
||||
}
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
// legend: {
|
||||
// // data: ['收入', '实际', '目标'],
|
||||
// textStyle: {
|
||||
// color: '#fff', //legend字体颜色
|
||||
// },
|
||||
// // selectedMode: false,
|
||||
// },
|
||||
grid: {
|
||||
containLabel: true,
|
||||
left: 20,
|
||||
right: 10,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
xAxis: {
|
||||
data: deptName,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(deptName.length, 5),
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
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: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
},
|
||||
data: completed,
|
||||
},
|
||||
{
|
||||
name: '目标',
|
||||
type: 'scatter',
|
||||
symbol: 'rect',
|
||||
yAxisIndex: 1,
|
||||
symbolSize: [30, 4],
|
||||
// symbolOffset: [3, 0],
|
||||
// position: [0, 0],
|
||||
itemStyle: {
|
||||
color: '#F64F58',
|
||||
},
|
||||
data: [50, 40],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
// ]
|
||||
});
|
||||
},
|
||||
initChart2() {
|
||||
this.request({
|
||||
url: "/hx/qualityAssurance/getQualityPlan",
|
||||
method: "get",
|
||||
params: {
|
||||
type: "2",
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
this.chart2 = echarts.init(this.$refs.chart2);
|
||||
this.setOptions2(data);
|
||||
});
|
||||
},
|
||||
setOptions2(resData) {
|
||||
let deptName = [];
|
||||
let rate = [];
|
||||
let completed = [];
|
||||
for (let i = 0; i < resData.length; i++) {
|
||||
const item = resData[i];
|
||||
deptName.push(item.deptName);
|
||||
rate.push(item.rate);
|
||||
completed.push(item.completed);
|
||||
}
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
// legend: {
|
||||
// // data: ['收入', '实际', '目标'],
|
||||
// textStyle: {
|
||||
// color: '#fff', //legend字体颜色
|
||||
// },
|
||||
// // selectedMode: false,
|
||||
// },
|
||||
grid: {
|
||||
containLabel: true,
|
||||
left: 20,
|
||||
right: 10,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
xAxis: {
|
||||
data: deptName,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
// dataZoom: {
|
||||
// type: "slider",
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(deptName.length, 5),
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(deptName.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(deptName.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
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: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "实际",
|
||||
type: "bar",
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: "rgba(90, 216, 166, 0.85)",
|
||||
},
|
||||
data: completed,
|
||||
},
|
||||
{
|
||||
name: "目标",
|
||||
type: "scatter",
|
||||
symbol: "rect",
|
||||
yAxisIndex: 1,
|
||||
symbolSize: [30, 4],
|
||||
// symbolOffset: [3, 0],
|
||||
// position: [0, 0],
|
||||
itemStyle: {
|
||||
color: "#F64F58",
|
||||
},
|
||||
data: [50, 40],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</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
@ -3,35 +3,58 @@
|
||||
<container1 title="生产指标">
|
||||
<div style="height: 100%; width: 100%; padding: 0 15px 0 25px">
|
||||
<div style="display: flex; height: 100%">
|
||||
<div style="height: 100%; width: 22%; display: flex; flex-direction: column; justify-content: space-evenly">
|
||||
<div
|
||||
style="
|
||||
height: 100%;
|
||||
width: 22%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
"
|
||||
>
|
||||
<div class="tag">
|
||||
<div class="title">军品收入</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realMilitaryIncome}}/<i
|
||||
style="font-size: 16px">{{res.targetMilitaryIncome}}</i></i>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
|
||||
>{{ res.realMilitaryIncome }}/<i style="font-size: 16px">{{
|
||||
res.targetMilitaryIncome
|
||||
}}</i></i
|
||||
>
|
||||
万
|
||||
</div>
|
||||
<div class="tag">
|
||||
<div class="title">装药量</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realCharge}}/<i
|
||||
style="font-size: 16px">{{res.targetCharge}}</i></i>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
|
||||
>{{ res.realCharge }}/<i style="font-size: 16px">{{
|
||||
res.targetCharge
|
||||
}}</i></i
|
||||
>
|
||||
万
|
||||
</div>
|
||||
<div class="tag">
|
||||
<div class="title">大型产品</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realBigProduct}}/<i
|
||||
style="font-size: 16px">{{res.targetBigProduct}}</i></i>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
|
||||
>{{ res.realBigProduct }}/<i style="font-size: 16px">{{
|
||||
res.targetBigProduct
|
||||
}}</i></i
|
||||
>
|
||||
万
|
||||
</div>
|
||||
<div class="tag">
|
||||
<div class="title">中型产品</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realMediumProduct}}/<i
|
||||
style="font-size: 16px">{{res.targetMediumProduct}}</i></i>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
|
||||
>{{ res.realMediumProduct }}/<i style="font-size: 16px">{{
|
||||
res.targetMediumProduct
|
||||
}}</i></i
|
||||
>
|
||||
万
|
||||
</div>
|
||||
<div class="tag">
|
||||
<div class="title">小型产品</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realSmallProduct}}/<i
|
||||
style="font-size: 16px">{{res.targetSmallProduct}}</i></i>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
|
||||
>{{ res.realSmallProduct }}/<i style="font-size: 16px">{{
|
||||
res.targetSmallProduct
|
||||
}}</i></i
|
||||
>
|
||||
万
|
||||
</div>
|
||||
</div>
|
||||
@ -43,19 +66,23 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container1 from './components/container1/index.vue'
|
||||
import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor'
|
||||
import container1 from "./components/container1/index.vue";
|
||||
import {
|
||||
blueColorList,
|
||||
greenColorList,
|
||||
yelloColorList,
|
||||
} from "@/utils/gradualColor";
|
||||
|
||||
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: 'left2',
|
||||
name: "left2",
|
||||
components: {
|
||||
container1,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
res: {
|
||||
@ -69,40 +96,39 @@ export default {
|
||||
targetMediumProduct: "0",
|
||||
targetMilitaryIncome: "0",
|
||||
targetSmallProduct: "0",
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getProductionIndexPic',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
url: "/hx/scientificProduction/getProductionIndexPic",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
this.res = res.data.pic1;
|
||||
let list = res.data.pic2;
|
||||
this.setOptions(list)
|
||||
|
||||
this.setOptions(list);
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
setOptions (list) {
|
||||
setOptions(list) {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
color: "#fff", //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
@ -112,43 +138,56 @@ export default {
|
||||
bottom: 40,
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(list.length, 4),
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
// dataZoom: {
|
||||
// type: 'slider',
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(list.length, 4),
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(list.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(list.length, 4, "end"),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: list.map(e => e.month),
|
||||
type: "category",
|
||||
data: list.map((e) => e.month),
|
||||
// data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
||||
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)",
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -175,58 +214,58 @@ export default {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '装药量(大)',
|
||||
type: 'bar',
|
||||
name: "装药量(大)",
|
||||
type: "bar",
|
||||
barWidth: 30,
|
||||
stack: 'Ad',
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
focus: "series",
|
||||
},
|
||||
data: list.map(e => e.bigCharge),
|
||||
data: list.map((e) => e.bigCharge),
|
||||
// data: [120, 132, 101, 134, 90, 230, 210],
|
||||
itemStyle: {
|
||||
color: yelloColorList[2],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '装药量(中)',
|
||||
type: 'bar',
|
||||
name: "装药量(中)",
|
||||
type: "bar",
|
||||
barWidth: 30,
|
||||
stack: 'Ad',
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
focus: "series",
|
||||
},
|
||||
data: list.map(e => e.mediumCharge),
|
||||
data: list.map((e) => e.mediumCharge),
|
||||
// data: [220, 182, 191, 234, 290, 330, 310],
|
||||
itemStyle: {
|
||||
color: yelloColorList[1],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '装药量(小)',
|
||||
type: 'bar',
|
||||
name: "装药量(小)",
|
||||
type: "bar",
|
||||
barWidth: 30,
|
||||
stack: 'Ad',
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
focus: "series",
|
||||
},
|
||||
data: list.map(e => e.smallCharge),
|
||||
data: list.map((e) => e.smallCharge),
|
||||
// data: [150, 232, 201, 154, 190, 330, 410],
|
||||
itemStyle: {
|
||||
color: yelloColorList[0],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '交付数量',
|
||||
type: 'bar',
|
||||
name: "交付数量",
|
||||
type: "bar",
|
||||
barWidth: 30,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
focus: "series",
|
||||
},
|
||||
data: list.map(e => e.targetDeliver),
|
||||
data: list.map((e) => e.targetDeliver),
|
||||
// data: [320, 332, 301, 334, 390, 330, 320],
|
||||
itemStyle: {
|
||||
color: '#45D1CC',
|
||||
color: "#45D1CC",
|
||||
},
|
||||
},
|
||||
// {
|
||||
@ -290,10 +329,10 @@ export default {
|
||||
// },
|
||||
// },
|
||||
],
|
||||
})
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -3,8 +3,19 @@
|
||||
<container1 title="本月计划执行情况">
|
||||
<!-- style="position: absolute; z-index: 1; left: 30px" -->
|
||||
|
||||
<el-select slot="datePicker" v-model="value" size="mini" placeholder="请选择">
|
||||
<el-option v-for="item in selectData" :key="item" :label="item" :value="item"> </el-option>
|
||||
<el-select
|
||||
slot="datePicker"
|
||||
v-model="value"
|
||||
size="mini"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectData"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</container1>
|
||||
@ -12,79 +23,89 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container1 from './components/container1/index.vue'
|
||||
import container1 from "./components/container1/index.vue";
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../../dashboard/mixins/resize'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import echarts from "echarts";
|
||||
require("echarts/theme/macarons"); // echarts theme
|
||||
import resize from "../../../dashboard/mixins/resize";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
name: "left2",
|
||||
components: {
|
||||
container1,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
selectData: [
|
||||
'厂计划',
|
||||
'六院计划'
|
||||
],
|
||||
value: '厂计划'
|
||||
}
|
||||
selectData: ["厂计划", "六院计划"],
|
||||
value: "厂计划",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value (newVal, oldVal) {
|
||||
this.initChart()
|
||||
value(newVal, oldVal) {
|
||||
this.initChart();
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
initChart() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
}
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getMonthPlanPic',
|
||||
method: 'get',
|
||||
url: "/hx/scientificProduction/getMonthPlanPic",
|
||||
method: "get",
|
||||
params: {
|
||||
type: this.value,
|
||||
},
|
||||
}).then(res => {
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
let list = res.data;
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions(list)
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
this.setOptions(list);
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
setOptions (list) {
|
||||
setOptions(list) {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(list.length, 7),
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
// dataZoom: {
|
||||
// type: 'slider',
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(list.length, 7),
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(list.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(list.length, 4, "end"),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
data: ['装药', '总装', '交付'],
|
||||
data: ["装药", "总装", "交付"],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
color: "#fff", //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
@ -96,40 +117,40 @@ export default {
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: list.map(e => e.month),
|
||||
type: "category",
|
||||
data: list.map((e) => e.month),
|
||||
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,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
@ -139,94 +160,94 @@ 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: '#55C5A2',
|
||||
color: "#55C5A2",
|
||||
},
|
||||
barWidth: 30,
|
||||
data: list.map(e => e.realDeliver),
|
||||
data: list.map((e) => e.realDeliver),
|
||||
// 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: '#FA8C16',
|
||||
color: "#FA8C16",
|
||||
},
|
||||
barWidth: 30,
|
||||
data: list.map(e => e.realAssemble),
|
||||
data: list.map((e) => e.realAssemble),
|
||||
},
|
||||
{
|
||||
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.realCharge),
|
||||
data: list.map((e) => e.realCharge),
|
||||
// data: [150, 232, 201, 154, 190, 330, 900],
|
||||
},
|
||||
{
|
||||
name: '交付完成率',
|
||||
name: "交付完成率",
|
||||
yAxisIndex: 1,
|
||||
type: 'line',
|
||||
type: "line",
|
||||
smooth: false,
|
||||
data: list.map(e => e.deliverRate),
|
||||
data: list.map((e) => e.deliverRate),
|
||||
// data: [500, 550, 700, 520, 650, 520, 900],
|
||||
itemStyle: {
|
||||
color: '#55C5A2',
|
||||
color: "#55C5A2",
|
||||
},
|
||||
symbol: 'none',
|
||||
symbol: "none",
|
||||
},
|
||||
{
|
||||
name: '总装完成率',
|
||||
name: "总装完成率",
|
||||
yAxisIndex: 1,
|
||||
type: 'line',
|
||||
type: "line",
|
||||
smooth: false,
|
||||
itemStyle: {
|
||||
color: '#FA8C16',
|
||||
color: "#FA8C16",
|
||||
},
|
||||
data: list.map(e => e.assembleRate),
|
||||
data: list.map((e) => e.assembleRate),
|
||||
// data: [600, 500, 700, 620, 750, 800, 900],
|
||||
symbol: 'none',
|
||||
symbol: "none",
|
||||
},
|
||||
{
|
||||
name: '装药完成率',
|
||||
name: "装药完成率",
|
||||
yAxisIndex: 1,
|
||||
type: 'line',
|
||||
type: "line",
|
||||
smooth: false,
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
color: "#F6D97E",
|
||||
},
|
||||
data: list.map(e => e.chargeRate),
|
||||
data: list.map((e) => e.chargeRate),
|
||||
// data: [650, 550, 750, 670, 780, 900, 900],
|
||||
symbol: 'none',
|
||||
symbol: "none",
|
||||
},
|
||||
],
|
||||
})
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -3,57 +3,56 @@
|
||||
<container1 title="生产责任令">
|
||||
<!-- <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</container1>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container1 from "./components/container1/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: {
|
||||
container1,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
dateRange: [],
|
||||
chart: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy () { },
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
this.setOptions();
|
||||
},
|
||||
setOptions () {
|
||||
setOptions() {
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getYearDutyPic',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
url: "/hx/scientificProduction/getYearDutyPic",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
let list = res.data;
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a1}<br/>{b1}：{c1}',
|
||||
trigger: "axis",
|
||||
formatter: "{a1}<br/>{b1}：{c1}",
|
||||
},
|
||||
legend: {
|
||||
data: ['预测', '实际', '目标完成率'],
|
||||
data: ["预测", "实际", "目标完成率"],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
color: "#fff", //legend字体颜色
|
||||
},
|
||||
// selectedMode: false,
|
||||
},
|
||||
@ -64,7 +63,7 @@ export default {
|
||||
bottom: 70,
|
||||
},
|
||||
xAxis: {
|
||||
data: list.map(e => e.productModel),
|
||||
data: list.map((e) => e.productModel),
|
||||
// data: [
|
||||
// '型号一',
|
||||
// '型号二',
|
||||
@ -89,44 +88,57 @@ export default {
|
||||
// ],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(list.length, 6),
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
// dataZoom: {
|
||||
// type: 'slider',
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(list.length, 6),
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(list.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(list.length, 4, "end"),
|
||||
},
|
||||
},
|
||||
color: ['#ccc', 'red'],
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
color: ["#ccc", "red"],
|
||||
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,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
@ -136,57 +148,56 @@ export default {
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '预测',
|
||||
type: 'bar',
|
||||
name: "预测",
|
||||
type: "bar",
|
||||
// z: '-1',
|
||||
barGap: '-75%',
|
||||
barGap: "-75%",
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, .3)',
|
||||
color: "rgba(85, 197, 162, .3)",
|
||||
},
|
||||
data: list.map(e => e.targetTotal),
|
||||
data: list.map((e) => e.targetTotal),
|
||||
// data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95, 60, 70, 80, 70, 60, 50, 40, 30],
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
name: "实际",
|
||||
type: "bar",
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
color: "rgba(90, 216, 166, 0.85)",
|
||||
},
|
||||
data: list.map(e => e.realTotal),
|
||||
data: list.map((e) => e.realTotal),
|
||||
// data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30],
|
||||
},
|
||||
{
|
||||
name: '目标完成率',
|
||||
type: 'scatter',
|
||||
symbol: 'rect',
|
||||
name: "目标完成率",
|
||||
type: "scatter",
|
||||
symbol: "rect",
|
||||
symbolSize: [30, 3],
|
||||
symbolOffset: [3, 0],
|
||||
position: [0, 0],
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: '#F64F58',
|
||||
color: "#F64F58",
|
||||
},
|
||||
data: list.map(e => e.rate),
|
||||
data: list.map((e) => e.rate),
|
||||
// data: [10, 40, 16, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90],
|
||||
},
|
||||
],
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -202,6 +202,7 @@ export default {
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
console.log(res.data);
|
||||
this.pointLevelCount = res.data.pointLevelCount;
|
||||
this.sourceLevelCount = res.data.sourceLevelCount;
|
||||
this.points = res.data.points;
|
||||
|
||||
@ -3,7 +3,10 @@
|
||||
<container3 title="安全隐患整改情况">
|
||||
<div class="wrap">
|
||||
<div style="text-align: right; margin-right: 30px; margin-bottom: 5px">
|
||||
<bigScreenTabs v-model="index" :titleArr="['总厂', '车间']"></bigScreenTabs>
|
||||
<bigScreenTabs
|
||||
v-model="index"
|
||||
:titleArr="['总厂', '车间']"
|
||||
></bigScreenTabs>
|
||||
</div>
|
||||
<el-row class="content1" style="height: 100%" v-if="index == 0">
|
||||
<el-col :span="14" style="height: 100%">
|
||||
@ -20,30 +23,69 @@
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<el-row style="padding: 0 10px">
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
<el-row
|
||||
style="
|
||||
font-size: 14px;
|
||||
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="12">安全隐患内容</el-col>
|
||||
<el-col style="text-align: center" :span="12"
|
||||
>安全隐患内容</el-col
|
||||
>
|
||||
<el-col style="text-align: center" :span="4">措施</el-col>
|
||||
<el-col style="text-align: center" :span="3">责任人</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp-scroll" :class-option="{
|
||||
singleHeight: 43,
|
||||
}">
|
||||
<vue-seamless-scroll
|
||||
ref="seamlessScroll"
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
singleHeight: 43,
|
||||
}"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row style="font-size: 14px">
|
||||
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||
<el-col style="text-align: center" :span="12" :title="item.dangerContent">{{ item.dangerContent }}</el-col>
|
||||
<el-col style="text-align: center" :span="3">{{
|
||||
item.id
|
||||
}}</el-col>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:span="12"
|
||||
:title="item.dangerContent"
|
||||
>{{ item.dangerContent }}</el-col
|
||||
>
|
||||
<el-col style="text-align: center" :span="4">
|
||||
<section class="box">
|
||||
<span v-if="item.measures == '未整改'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-else style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
||||
<span
|
||||
v-if="item.measures == '未整改'"
|
||||
style="
|
||||
color: #f64f58;
|
||||
font-size: 25px;
|
||||
margin-right: 3px;
|
||||
"
|
||||
>·</span
|
||||
>
|
||||
<span
|
||||
v-else
|
||||
style="
|
||||
color: #6fd1b4;
|
||||
font-size: 25px;
|
||||
margin-right: 3px;
|
||||
"
|
||||
>·</span
|
||||
>
|
||||
<span v-if="item.measures == '未整改'">未整改</span>
|
||||
<span v-else>已整改</span>
|
||||
</section>
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="3">{{ item.personLiable }}</el-col>
|
||||
<el-col style="text-align: center" :span="3">{{
|
||||
item.personLiable
|
||||
}}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
@ -57,20 +99,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scalseBox from '../components/scaleBox.vue'
|
||||
import bigScreenHead from '../components/bigScreenHead/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container3 from './components/container3/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import colorList from '@/utils/colorPalette'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import scalseBox from "../components/scaleBox.vue";
|
||||
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import container3 from "./components/container3/index.vue";
|
||||
import bigScreenTabs from "../components/bigScreenTabs/index.vue";
|
||||
import colorList from "@/utils/colorPalette";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
|
||||
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: 'left2',
|
||||
name: "left2",
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
@ -79,7 +121,7 @@ export default {
|
||||
container3,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
colorList,
|
||||
@ -91,52 +133,52 @@ export default {
|
||||
chart1: null,
|
||||
chart2: null,
|
||||
chart3: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
index (newOld, oldVal) {
|
||||
index(newOld, oldVal) {
|
||||
if (newOld == 0) {
|
||||
this.chart3.dispose()
|
||||
this.chart3 = null
|
||||
this.chart3.dispose();
|
||||
this.chart3 = null;
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
this.initChart();
|
||||
});
|
||||
} else {
|
||||
this.chart1.dispose()
|
||||
this.chart1 = null
|
||||
this.chart2.dispose()
|
||||
this.chart2 = null
|
||||
this.chart1.dispose();
|
||||
this.chart1 = null;
|
||||
this.chart2.dispose();
|
||||
this.chart2 = null;
|
||||
this.$nextTick(() => {
|
||||
this.initChart3()
|
||||
})
|
||||
this.initChart3();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initChart();
|
||||
// this.initChart3()
|
||||
})
|
||||
});
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
initChart() {
|
||||
this.request({
|
||||
url: '/hx/securityManagement/hiddenDanger/1',
|
||||
method: 'get',
|
||||
url: "/hx/securityManagement/hiddenDanger/1",
|
||||
method: "get",
|
||||
// type=1车间/=2总厂
|
||||
params: { type: 2 }
|
||||
}).then(res => {
|
||||
params: { type: 2 },
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
let { monthList, mapList, category } = res.data;
|
||||
this.initChart2(category);
|
||||
this.chart1 = echarts.init(this.$refs.chart1)
|
||||
this.chart1 = echarts.init(this.$refs.chart1);
|
||||
this.chart1.setOption({
|
||||
// legend: {
|
||||
// data: ['利润', '利润目标完成率'],
|
||||
@ -145,31 +187,31 @@ export default {
|
||||
// },
|
||||
// },
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
left: "3%",
|
||||
right: "6%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
type: "category",
|
||||
data: monthList,
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
type: "shadow",
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '个',
|
||||
type: "value",
|
||||
name: "个",
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
formatter: "{value}",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
@ -179,14 +221,14 @@ export default {
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
@ -196,59 +238,72 @@ export default {
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
width: '99%',
|
||||
width: "99%",
|
||||
left: 0,
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(mapList.length, 5),
|
||||
},
|
||||
series: [
|
||||
// dataZoom: {
|
||||
// type: 'slider',
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(mapList.length, 5),
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
name: '利润',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: mapList.map(e => e.total),
|
||||
// data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
|
||||
itemStyle: {
|
||||
color: 'rgb(118,196,166)',
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
barGap: '0',
|
||||
startValue: this.dataZoomStart(mapList.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(mapList.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
name: '利润目标完成率',
|
||||
type: 'line',
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "利润",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
data: mapList.map((e) => e.total),
|
||||
// data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
|
||||
itemStyle: {
|
||||
color: "rgb(118,196,166)",
|
||||
},
|
||||
barGap: "0",
|
||||
},
|
||||
{
|
||||
name: "利润目标完成率",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: mapList.map(e => e.rate),
|
||||
data: mapList.map((e) => e.rate),
|
||||
itemStyle: {
|
||||
color: '#55C5A2',
|
||||
color: "#55C5A2",
|
||||
},
|
||||
symbol: 'none',
|
||||
symbol: "none",
|
||||
},
|
||||
],
|
||||
});
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
initChart2 (category) {
|
||||
this.chart2 = echarts.init(this.$refs.chart2)
|
||||
initChart2(category) {
|
||||
this.chart2 = echarts.init(this.$refs.chart2);
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
@ -260,38 +315,39 @@ export default {
|
||||
// y: 'bottom',
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: '#fff',
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '型号',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center: ['45%', '45%'],
|
||||
name: "型号",
|
||||
type: "pie",
|
||||
radius: ["40%", "60%"],
|
||||
center: ["45%", "45%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
fontWeight: 'bold',
|
||||
formatter: ' {c}', // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容
|
||||
position: "center",
|
||||
fontWeight: "bold",
|
||||
formatter: " {c}", // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold',
|
||||
fontSize: "40",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: category.map(e => {
|
||||
data: category.map((e) => {
|
||||
return {
|
||||
value: e.NUMBERCOUNT, name: e.category
|
||||
}
|
||||
})
|
||||
value: e.NUMBERCOUNT,
|
||||
name: e.category,
|
||||
};
|
||||
}),
|
||||
// data: [
|
||||
// { value: 154, name: '型号一' },
|
||||
// { value: 775, name: '型号二' },
|
||||
@ -300,17 +356,17 @@ export default {
|
||||
// ],
|
||||
},
|
||||
],
|
||||
})
|
||||
});
|
||||
},
|
||||
initChart3 () {
|
||||
initChart3() {
|
||||
this.request({
|
||||
url: '/hx/securityManagement/hiddenDanger/1',
|
||||
method: 'get',
|
||||
url: "/hx/securityManagement/hiddenDanger/1",
|
||||
method: "get",
|
||||
// type=1车间/=2总厂
|
||||
params: { type: 1 }
|
||||
}).then(res => {
|
||||
params: { type: 1 },
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
this.chart3 = echarts.init(this.$refs.chart3)
|
||||
this.chart3 = echarts.init(this.$refs.chart3);
|
||||
let { list, allWorkshop, mapList } = res.data;
|
||||
this.scrollList = list;
|
||||
this.listData2 = Array(this.scrollList.length).fill(0);
|
||||
@ -323,32 +379,32 @@ export default {
|
||||
// },
|
||||
// },
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
left: "3%",
|
||||
right: "6%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
type: "category",
|
||||
data: allWorkshop,
|
||||
// data: ['车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间'],
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
type: "shadow",
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '个',
|
||||
type: "value",
|
||||
name: "个",
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
formatter: "{value}",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
@ -358,14 +414,14 @@ export default {
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
@ -375,56 +431,67 @@ export default {
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
width: '99%',
|
||||
width: "99%",
|
||||
left: 0,
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(mapList.length, 5),
|
||||
},
|
||||
series: [
|
||||
// dataZoom: {
|
||||
// type: "slider",
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(mapList.length, 5),
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
name: '利润',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: mapList.map(e => e.total),
|
||||
// data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
|
||||
itemStyle: {
|
||||
color: 'rgb(118,196,166)',
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
barGap: '0',
|
||||
startValue: this.dataZoomStart(mapList.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(mapList.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
name: '利润目标完成率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: mapList.map(e => e.rate),
|
||||
// data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
||||
itemStyle: {
|
||||
color: '#7EA7FC ',
|
||||
},
|
||||
symbol: 'none',
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
})
|
||||
series: [
|
||||
{
|
||||
name: "利润",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
data: mapList.map((e) => e.total),
|
||||
// data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
|
||||
itemStyle: {
|
||||
color: "rgb(118,196,166)",
|
||||
},
|
||||
barGap: "0",
|
||||
},
|
||||
{
|
||||
name: "利润目标完成率",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: mapList.map((e) => e.rate),
|
||||
// data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
||||
itemStyle: {
|
||||
color: "#7EA7FC ",
|
||||
},
|
||||
symbol: "none",
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -10,45 +10,44 @@
|
||||
</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
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
name: "left1",
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
colorList,
|
||||
chart1: null,
|
||||
chart2: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
})
|
||||
this.initChart();
|
||||
this.initLine();
|
||||
});
|
||||
},
|
||||
beforeDestroy () { },
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart () {
|
||||
initChart() {
|
||||
this.request({
|
||||
url: '/hx/securityManagement/dangerSource',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
|
||||
url: "/hx/securityManagement/dangerSource",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
let titData = res.data.allLevel;
|
||||
let data = res.data;
|
||||
@ -56,7 +55,7 @@ export default {
|
||||
let titList = [];
|
||||
let valList = [];
|
||||
for (let index = 0; index < titData.length; index++) {
|
||||
valList.push([])
|
||||
valList.push([]);
|
||||
}
|
||||
// var a = {
|
||||
// titData: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
|
||||
@ -76,25 +75,25 @@ export default {
|
||||
titList.push(key);
|
||||
for (let i = 0; i < item.length; i++) {
|
||||
const ele = item[i];
|
||||
let index = titData.findIndex(e => e == ele.name);
|
||||
let index = titData.findIndex((e) => e == ele.name);
|
||||
valList[index][titList.length - 1] = ele.COUNTNUMBER;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.chart1 = echarts.init(this.$refs.left1)
|
||||
this.chart1 = echarts.init(this.$refs.left1);
|
||||
this.chart1.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// data: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
|
||||
data: titData,
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
color: "#fff", //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
@ -104,63 +103,75 @@ export default {
|
||||
bottom: 50,
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titList.length, 5),
|
||||
},
|
||||
color: ['#5B8FF9', '#55C5A2', '#F7DC87', '#FF9F43'],
|
||||
// dataZoom: {
|
||||
// type: 'slider',
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(titList.length, 5),
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(titList.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(titList.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
color: ["#5B8FF9", "#55C5A2", "#F7DC87", "#FF9F43"],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
type: "category",
|
||||
// data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||
data: titList,
|
||||
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",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
...valList.map((e, index) => {
|
||||
return {
|
||||
|
||||
name: titData[index],
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
type: "bar",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
focus: "series",
|
||||
},
|
||||
|
||||
barWidth: 30,
|
||||
data: e,
|
||||
}
|
||||
})
|
||||
};
|
||||
}),
|
||||
// {
|
||||
// name: '四级危险源',
|
||||
// type: 'bar',
|
||||
@ -214,19 +225,17 @@ export default {
|
||||
// data: [150, 232, 201, 154, 190, 330, 410],
|
||||
// },
|
||||
],
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
this.setOptions()
|
||||
});
|
||||
this.setOptions();
|
||||
},
|
||||
setOptions () {
|
||||
|
||||
},
|
||||
initLine () {
|
||||
setOptions() {},
|
||||
initLine() {
|
||||
this.request({
|
||||
url: '/hx/securityManagement/dangerPoint',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
url: "/hx/securityManagement/dangerPoint",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
let titData = res.data.allLevel;
|
||||
let data = res.data;
|
||||
@ -234,7 +243,7 @@ export default {
|
||||
let titList = [];
|
||||
let valList = [];
|
||||
for (let index = 0; index < titData.length; index++) {
|
||||
valList.push([])
|
||||
valList.push([]);
|
||||
}
|
||||
for (const key in data) {
|
||||
if (Object.hasOwnProperty.call(data, key)) {
|
||||
@ -242,24 +251,24 @@ export default {
|
||||
titList.push(key);
|
||||
for (let i = 0; i < item.length; i++) {
|
||||
const ele = item[i];
|
||||
let index = titData.findIndex(e => e == ele.name);
|
||||
let index = titData.findIndex((e) => e == ele.name);
|
||||
valList[index][titList.length - 1] = ele.COUNTNUMBER;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.chart2 = echarts.init(this.$refs.left2)
|
||||
this.chart2 = echarts.init(this.$refs.left2);
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// data: ['一级危险源', '二级危险源', '三级危险源'],
|
||||
data: titData,
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
color: "#fff", //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
@ -269,62 +278,74 @@ export default {
|
||||
bottom: 50,
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titList.length, 5),
|
||||
},
|
||||
color: ['#5B8FF9', '#55C5A2', '#F7DC87', '#FF9F43'],
|
||||
// dataZoom: {
|
||||
// type: "slider",
|
||||
// start: 0,
|
||||
// end: this.dataZoomEnd(titList.length, 5),
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(titList.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(titList.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
color: ["#5B8FF9", "#55C5A2", "#F7DC87", "#FF9F43"],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
type: "category",
|
||||
data: titList,
|
||||
// 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",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
...valList.map((e, index) => {
|
||||
return {
|
||||
|
||||
name: titData[index],
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
type: "bar",
|
||||
stack: "Ad",
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
focus: "series",
|
||||
},
|
||||
|
||||
barWidth: 30,
|
||||
data: e,
|
||||
}
|
||||
};
|
||||
}),
|
||||
// {
|
||||
// name: '三级危险源',
|
||||
@ -366,14 +387,12 @@ export default {
|
||||
// data: [150, 232, 201, 154, 190, 330, 410],
|
||||
// },
|
||||
],
|
||||
})
|
||||
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -35,7 +35,8 @@ module.exports = {
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
// target: `http://localhost:1818`,
|
||||
// target: `http://120.26.107.74:1818`,
|
||||
target: `http://192.168.0.154:1818`,
|
||||
// target: `http://192.168.0.154:1818`,
|
||||
target: `http://192.168.0.115:1818`,
|
||||
// target: `http://124.70.138.50:1818`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
|
||||
Reference in New Issue
Block a user