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

Merge branch 'bigPic'

Browse Source
This commit is contained in:
熊丽君
2022-02-18 13:27:55 +08:00
parent d82813b652 bc7b0929c9
commit 23955a0af3
27 changed files with 4072 additions and 3435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/main.js
View File

@ -59,6 +59,18 @@ Vue.prototype.dataZoomEnd = (titLength, defaultLength = 7) => {
} }
return ((defaultLength / (titLength + 1)) * 100).toFixed(0) 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) Vue.component('DictTag', DictTag)

144
src/views/bigScreen/components/scaleBox.vue
View File

@ -1,85 +1,85 @@
<template> <template>
<div style="background-color: #000; height: 100%; width: 100%"> <div style="background-color: #000; height: 100%; width: 100%">
<div <div
class="ScaleBox" class="ScaleBox"
ref="ScaleBox" ref="ScaleBox"
:style="{ :style="{
width: width + 'px', width: width + 'px',
height: height + 'px', height: height + 'px',
}" }"
> >
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'ScaleBox', name: "ScaleBox",
props: {}, props: {},
data() { data() {
return { return {
scale: 0, scale: 0,
width: 1920, width: 1920,
height: 1080, height: 1080,
} };
}, },
mounted() { mounted() {
this.setScale() this.setScale();
window.addEventListener('resize', this.debounce(this.setScale)) window.addEventListener("resize", this.debounce(this.setScale));
}, },
methods: { methods: {
getScale() { getScale() {
const { width, height } = this const { width, height } = this;
const wh = window.innerHeight / height const wh = window.innerHeight / height;
const ww = window.innerWidth / width const ww = window.innerWidth / width;
console.log(ww < wh ? ww : wh) console.log(ww < wh ? ww : wh);
return ww < wh ? ww : wh return ww < wh ? ww : wh;
}, },
setScale() { setScale() {
// if (window.innerHeight == 1080) { // if (window.innerHeight == 1080) {
// this.height = 1080 // this.height = 1080
// } else { // } else {
// this.height = 937 // this.height = 937
// } // }
this.scale = this.getScale() this.scale = this.getScale();
if (this.$refs.ScaleBox) { if (this.$refs.ScaleBox) {
this.$refs.ScaleBox.style.setProperty('--scale', this.scale) this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
} }
}, },
debounce(fn, delay) { debounce(fn, delay) {
const delays = delay || 500 const delays = delay || 500;
let timer let timer;
return function () { return function () {
const th = this const th = this;
const args = arguments const args = arguments;
if (timer) { if (timer) {
clearTimeout(timer) clearTimeout(timer);
} }
timer = setTimeout(function () { timer = setTimeout(function () {
timer = null timer = null;
fn.apply(th, args) fn.apply(th, args);
}, delays) }, delays);
} };
}, },
}, },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
#ScaleBox { #ScaleBox {
--scale: 1; --scale: 1;
} }
.ScaleBox { .ScaleBox {
position: absolute; position: absolute;
transform: scale(var(--scale)) translate(-50%, -50%); transform: scale(var(--scale)) translate(-50%, -50%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transform-origin: 0 0; transform-origin: 0 0;
left: 50%; left: 50%;
top: 50%; top: 50%;
transition: 0.3s; transition: 0.3s;
z-index: 999; z-index: 999;
// background: rgba(255, 0, 0, 0.3); // background: rgba(255, 0, 0, 0.3);
} }
</style> </style>

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

@ -26,11 +26,11 @@
><i class="num">{{ handleMillion(val.targetIncome) }}</i ><i class="num">{{ handleMillion(val.targetIncome) }}</i
><span class="num2">亿元</span> ><span class="num2">亿元</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar <progressBar
:percentage="(val.completedIncome / val.targetIncome) * 100" :percentage="(val.completedIncome / val.targetIncome) * 100"
/> />
</div> </div> -->
</div> </div>
<div class="data-item"> <div class="data-item">
<div> <div>
@ -43,11 +43,11 @@
><i class="num">{{ handleMillion(val.targetProfit) }}</i ><i class="num">{{ handleMillion(val.targetProfit) }}</i
><span class="num2">亿元</span> ><span class="num2">亿元</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar <progressBar
:percentage="(val.completedProfit / val.targetProfit) * 100" :percentage="(val.completedProfit / val.targetProfit) * 100"
/> />
</div> </div> -->
</div> </div>
<div class="data-item"> <div class="data-item">
<div> <div>
@ -60,13 +60,13 @@
><i class="num">{{ handleMillion(val.targetChargeQuantity) }}</i ><i class="num">{{ handleMillion(val.targetChargeQuantity) }}</i
><span class="num2">亿件</span> ><span class="num2">亿件</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar <progressBar
:percentage=" :percentage="
(val.completedChargeQuantity / val.targetChargeQuantity) * 100 (val.completedChargeQuantity / val.targetChargeQuantity) * 100
" "
/> />
</div> </div> -->
</div> </div>
<div class="data-item"> <div class="data-item">
<div> <div>
@ -79,14 +79,14 @@
><i class="num">{{ handleMillion(val.targetDeliveryQuantity) }}</i ><i class="num">{{ handleMillion(val.targetDeliveryQuantity) }}</i
><span class="num2">亿件</span> ><span class="num2">亿件</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar <progressBar
:percentage=" :percentage="
(val.completedDeliveryQuantity / val.targetDeliveryQuantity) * (val.completedDeliveryQuantity / val.targetDeliveryQuantity) *
100 100
" "
/> />
</div> </div> -->
</div> </div>
</div> </div>
</container3> </container3>
@ -168,8 +168,8 @@ export default {
color: #ffffff; color: #ffffff;
font-size: 18px; font-size: 18px;
.data-item { .data-item {
// flex: 1; flex: 1;
width: 20%; // width: 20%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;

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

@ -5,16 +5,28 @@
<el-row class="content1"> <el-row class="content1">
<el-col :span="24"> <el-col :span="24">
<div id="left1" ref="left1" class="chart1"></div> <div id="left1" ref="left1" class="chart1"></div>
<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-col>
</el-row> </el-row>
<div class="box"> <!-- <div class="box">
<span style="font-size: 25px; margin-right: 3px">·</span> <span style="font-size: 25px; margin-right: 3px">·</span>
<span>总完成任务/完成率</span> <span>总完成任务/完成率</span>
<i class="num" <i class="num"
>{{ res.map.completedTasks }}/{{ res.map.cate.toFixed(2) }}%</i >{{ res.map.completedTasks }}/{{ res.map.cate.toFixed(2) }}%</i
> >
<progressBar :percentage="res.map.cate" /> <progressBar :percentage="res.map.cate" />
</div> </div> -->
</div> </div>
</container2> </container2>
<container2 title="收入概况" style="margin-top: 10px"> <container2 title="收入概况" style="margin-top: 10px">
@ -54,6 +66,11 @@ export default {
}, },
data() { data() {
return { return {
currentPage1: 1,
total: 30,
titData: [],
valData: [],
time: null,
data: [ data: [
{ value: 154, name: "类别一" }, { value: 154, name: "类别一" },
{ value: 775, name: "类别二" }, { value: 775, name: "类别二" },
@ -78,73 +95,59 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart(); this.initChart();
this.initLine(); this.initLine();
this.start();
}); });
}, },
beforeDestroy() {}, beforeDestroy() {
this.end();
},
methods: { 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() { initChart() {
this.setOptions(); this.setOptions();
}, },
setOptions() { handleCurrentChange(val) {
this.currentPage1 = val;
this.setPageData(val);
},
setOptions(val) {
request({ request({
url: "/hx/cockpitOverview/businessResponsibility", url: "/hx/cockpitOverview/businessResponsibility",
method: "get", method: "get",
}).then((res) => { }).then((res) => {
this.res = res.data; this.res = res.data;
let titData = [];
let valData = [];
for (let i = 0; i < this.res.list.length; i++) { for (let i = 0; i < this.res.list.length; i++) {
const item = this.res.list[i]; const item = this.res.list[i];
titData.push(item.indicator_name); this.titData.push(item.indicator_name);
valData.push({ value: item.cate, name: item.indicator_name }); this.valData.push({ value: item.cate, name: item.indicator_name });
} }
this.chart = echarts.init(this.$refs.left1, "macarons"); this.setPageData(val);
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,
},
],
});
}); });
},
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 calcAverageValue = (data, name) => {
const items = data.filter((d) => d.name === 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 ? 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() { initLine() {
request({ request({
url: "/hx/cockpitOverview/revenueProfile", url: "/hx/cockpitOverview/revenueProfile",
@ -222,11 +272,24 @@ export default {
}, },
}, },
}, },
dataZoom: { // dataZoom: {
type: "slider", // type: "slider",
start: 0, // start: 0,
end: this.dataZoomEnd(titData.length, 7), // 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"], color: ["#ccc", "red"],
yAxis: [ yAxis: [
{ {
@ -312,6 +375,25 @@ export default {
</script> </script>
<style lang="scss" scoped> <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 { .wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

23
src/views/bigScreen/drivingCabin/left2.vue
View File

@ -307,11 +307,24 @@ export default {
top: 50, top: 50,
bottom: 50, bottom: 50,
}, },
dataZoom: { // dataZoom: {
type: "slider", // type: "slider",
start: 0, // start: 0,
end: this.dataZoomEnd(titData.length, 7), // 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: [ series: [
{ {
name: "预测", name: "预测",

184
src/views/bigScreen/drivingCabin/right1.vue
View File

@ -10,7 +10,7 @@
<div class="box"> <div class="box">
<span style="font-size: 25px; margin-right: 3px">·</span> <span style="font-size: 25px; margin-right: 3px">·</span>
<span>已完成任务/完成率</span> <span>已完成任务/完成率</span>
<i class="num">{{rate.completedTotal}}/{{rate.rate}}%</i> <i class="num">{{ rate.completedTotal }}/{{ rate.rate }}%</i>
<progressBar :percentage="rate.rate" /> <progressBar :percentage="rate.rate" />
</div> </div>
</div> </div>
@ -29,25 +29,25 @@
</template> </template>
<script> <script>
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import container2 from './components/container2/index.vue' import container2 from "./components/container2/index.vue";
import bigScreenTabs from '../components/bigScreenTabs/index.vue' import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import progressBar from '@/views/bigScreen/components/progress/index.vue' import progressBar from "@/views/bigScreen/components/progress/index.vue";
import colorList from '@/utils/colorPalette' import colorList from "@/utils/colorPalette";
// import {Liquid} from '@antv/g2plot'; // import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize' // import resize from '../../dashboard/mixins/resize'
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
export default { export default {
// mixins: [resize], // mixins: [resize],
name: 'left1', name: "left1",
components: { components: {
rocketTit, rocketTit,
container2, container2,
bigScreenTabs, bigScreenTabs,
progressBar, progressBar,
}, },
data () { data() {
return { return {
chart: null, chart: null,
chart1: null, chart1: null,
@ -56,79 +56,80 @@ export default {
completedTotal: 0, completedTotal: 0,
rate: 0, rate: 0,
targetTotal: 0, targetTotal: 0,
} },
} };
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
this.initLine() this.initLine();
}) });
}, },
beforeDestroy () { }, beforeDestroy() {},
methods: { methods: {
initChart () { initChart() {
this.setOptions() this.setOptions();
}, },
setOptions () { setOptions() {
this.request({ this.request({
url: '/hx/cockpitOverview/productionResponsibility', url: "/hx/cockpitOverview/productionResponsibility",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
this.rate = res.data.rate; this.rate = res.data.rate;
let valData = []; let valData = [];
let titData = []; let titData = [];
for (let i = 0; i < res.data.list.length; i++) { for (let i = 0; i < res.data.list.length; i++) {
const item = res.data.list[i]; const item = res.data.list[i];
titData.push(item.translateName) titData.push(item.translateName);
valData.push( valData.push({
{ value: item.completedTaskNumber, name: item.translateName }, 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({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: '{a} <br/>{b}: {c} ({d}%)', formatter: "{a} <br/>{b}: {c} ({d}%)",
}, },
color: this.colorList, color: this.colorList,
legend: { legend: {
// data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七', '型号八'], // data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七', '型号八'],
data: titData, data: titData,
orient: 'vertical', orient: "vertical",
// left: '60%', // left: '60%',
right: '2%', right: "2%",
y: 'center', y: "center",
textStyle: { textStyle: {
//图例文字的样式 //图例文字的样式
color: '#fff', color: "#fff",
fontSize: 16, fontSize: 16,
}, },
}, },
series: [ series: [
{ {
name: '概括', name: "概括",
type: 'pie', type: "pie",
radius: ['40%', '80%'], radius: ["40%", "80%"],
center: ['35%', '50%'], center: ["35%", "50%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center', position: "center",
}, },
emphasis: { emphasis: {
label: { label: {
show: false, show: false,
fontSize: '40', fontSize: "40",
fontWeight: 'bold', fontWeight: "bold",
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
}, },
data: valData data: valData,
// [ // [
// { value: 154, name: '型号一' }, // { value: 154, name: '型号一' },
// { value: 775, name: '型号二' }, // { value: 775, name: '型号二' },
@ -139,24 +140,22 @@ export default {
// { value: 679, name: '型号七' }, // { value: 679, name: '型号七' },
// { value: 679, name: '型号八' }, // { value: 679, name: '型号八' },
// ] // ]
,
}, },
], ],
}) });
} else { } else {
this.$message.error(res.msg); this.$message.error(res.msg);
} }
}) });
}, },
initLine () { initLine() {
this.setOptions2() this.setOptions2();
}, },
setOptions2 () { setOptions2() {
this.request({ this.request({
url: '/hx/cockpitOverview/productCompletion', url: "/hx/cockpitOverview/productCompletion",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let titData = []; let titData = [];
let completionRate = []; let completionRate = [];
@ -169,17 +168,17 @@ export default {
actualDeliveryQuantity.push(item.actualDeliveryQuantity); actualDeliveryQuantity.push(item.actualDeliveryQuantity);
targetDeliveryQuantity.push(item.targetDeliveryQuantity); targetDeliveryQuantity.push(item.targetDeliveryQuantity);
} }
this.chart1 = echarts.init(this.$refs.left2) this.chart1 = echarts.init(this.$refs.left2);
this.chart1.setOption({ this.chart1.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
formatter: '{a1}<br/>{b1}：{c1}', formatter: "{a1}<br/>{b1}：{c1}",
}, },
legend: { legend: {
data: ['预测', '实际', '目标完成率'], data: ["预测", "实际", "目标完成率"],
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: "#fff", //legend字体颜色
}, },
// selectedMode: false, // selectedMode: false,
}, },
@ -216,43 +215,56 @@ export default {
// ], // ],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
dataZoom: { // dataZoom: {
type: 'slider', // type: 'slider',
start: 0, // start: 0,
end: this.dataZoomEnd(titData.length, 7), // end: this.dataZoomEnd(titData.length, 7),
}, // },
color: ['#ccc', 'red'], 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: [ yAxis: [
{ {
name: '件', name: "件",
splitLine: { splitLine: {
show: true, show: true,
// 改变轴线颜色 // 改变轴线颜色
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'], color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
min: 0, min: 0,
max: 100, max: 100,
interval: 20, interval: 20,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -262,57 +274,55 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
series: [ series: [
{ {
name: '预测', name: "预测",
type: 'bar', type: "bar",
// z: '-1', // z: '-1',
barGap: '-75%', barGap: "-75%",
barWidth: 30, barWidth: 30,
itemStyle: { itemStyle: {
color: 'rgba(85, 197, 162, .3)', color: "rgba(85, 197, 162, .3)",
}, },
data: targetDeliveryQuantity, data: targetDeliveryQuantity,
// data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95, 60, 70, 80, 70, 60, 50, 40, 30], // data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95, 60, 70, 80, 70, 60, 50, 40, 30],
}, },
{ {
name: '实际', name: "实际",
type: 'bar', type: "bar",
barWidth: 15, barWidth: 15,
position: [0, 0], position: [0, 0],
itemStyle: { itemStyle: {
color: 'rgba(90, 216, 166, 0.85)', color: "rgba(90, 216, 166, 0.85)",
}, },
data: actualDeliveryQuantity, data: actualDeliveryQuantity,
// data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30], // data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30],
}, },
{ {
name: '目标完成率', name: "目标完成率",
type: 'scatter', type: "scatter",
symbol: 'rect', symbol: "rect",
symbolSize: [30, 4], symbolSize: [30, 4],
symbolOffset: [3, 0], symbolOffset: [3, 0],
position: [0, 0], position: [0, 0],
itemStyle: { itemStyle: {
color: '#F6D97E', color: "#F6D97E",
}, },
data: completionRate, data: completionRate,
// data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90], // data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90],
}, },
], ],
}) });
} }
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

188
src/views/bigScreen/drivingCabin/right2.vue
View File

@ -1,59 +1,66 @@
<template> <template>
<div> <div>
<container3 title="装药量概况"> <container3 title="装药量概况">
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" <el-date-picker
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> slot="datePicker"
<div style="height:100%;width:100%;" ref="chart"></div> 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> </container3>
</div> </div>
</template> </template>
<script> <script>
import scalseBox from '../components/scaleBox.vue' import scalseBox from "../components/scaleBox.vue";
import bigScreenHead from "../components/bigScreenHead/index.vue"; import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue"; import rocketTit from "../components/rocketTit/index.vue";
import container3 from "./components/container3/index.vue"; import container3 from "./components/container3/index.vue";
import echarts from "echarts";
import echarts from 'echarts' require("echarts/theme/macarons"); // echarts theme
require('echarts/theme/macarons') // echarts theme import resize from "../../dashboard/mixins/resize";
import resize from '../../dashboard/mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
name: 'right2', name: "right2",
components: { components: {
scalseBox, scalseBox,
bigScreenHead, bigScreenHead,
rocketTit, rocketTit,
container3, container3,
}, },
data () { data() {
return { return {
dateRange: [], dateRange: [],
chart: null, chart: null,
} };
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
}) });
}, },
beforeDestroy () { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return;
} }
this.chart.dispose() this.chart.dispose();
this.chart = null this.chart = null;
}, },
methods: { methods: {
initChart () { initChart() {
this.chart = echarts.init(this.$refs.chart); this.chart = echarts.init(this.$refs.chart);
this.request({ this.request({
url: '/hx/cockpitOverview/chargeQuantityList', url: "/hx/cockpitOverview/chargeQuantityList",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
console.log(res); console.log(res);
let titData = []; let titData = [];
@ -69,23 +76,23 @@ export default {
} }
this.chart.setOption({ this.chart.setOption({
legend: { legend: {
data: ['实际', '预测', '目标完成率'], data: ["实际", "预测", "目标完成率"],
textStyle: { textStyle: {
color: '#fff' color: "#fff",
}, },
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
}, },
grid: { grid: {
left: '3%', left: "3%",
right: '6%', right: "6%",
bottom: '3%', bottom: "3%",
containLabel: true containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: titData, data: titData,
// data: [ // data: [
// '2021-01', // '2021-01',
@ -102,54 +109,54 @@ export default {
// '2021-12', // '2021-12',
// ], // ],
axisPointer: { axisPointer: {
type: 'shadow' type: "shadow",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)' color: "rgb(255, 255, 255)",
}, },
} },
} },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
name: '万元', name: "万元",
min: 0, min: 0,
axisLabel: { axisLabel: {
formatter: '{value}' formatter: "{value}",
}, },
splitLine: { splitLine: {
show: false//不显示网格线 show: false, //不显示网格线
}, },
splitArea: { splitArea: {
show: false//不显示网格区域 show: false, //不显示网格区域
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)' color: "rgb(255, 255, 255)",
}, },
} },
}, },
{ {
type: 'value', type: "value",
interval: 20, interval: 20,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false//不显示网格线 show: false, //不显示网格线
}, },
splitArea: { splitArea: {
show: false//不显示网格区域 show: false, //不显示网格区域
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)' color: "rgb(255, 255, 255)",
}, },
} },
} },
], ],
grid: { grid: {
containLabel: true, containLabel: true,
@ -158,67 +165,82 @@ export default {
top: 50, top: 50,
bottom: 50, bottom: 50,
}, },
dataZoom: { // dataZoom: {
type: 'slider', // type: 'slider',
start: 0, // start: 0,
end: this.dataZoomEnd(titData.length, 7), // 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: [ series: [
{ {
name: '预测', name: "预测",
type: 'bar', type: "bar",
z: '-1', z: "-1",
barGap: '-75%', barGap: "-75%",
barWidth: 30, barWidth: 30,
itemStyle: { itemStyle: {
color: 'rgba(145, 213, 254, .3)', color: "rgba(145, 213, 254, .3)",
}, },
data: forecastQuantity, data: forecastQuantity,
}, },
{ {
name: '实际', name: "实际",
type: 'bar', type: "bar",
barWidth: 15, barWidth: 15,
position: [0, 0], position: [0, 0],
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', // 线性渐变 type: "linear", // 线性渐变
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [{ colorStops: [
offset: 0, {
color: '#B5D3FE' // 0%处的颜色为红色 offset: 0,
}, { color: "#B5D3FE", // 0%处的颜色为红色
offset: 1, },
color: '#7EA7FC' // 100%处的颜色为蓝 {
}] offset: 1,
} color: "#7EA7FC", // 100%处的颜色为蓝
},
],
},
}, },
data: actualQuantity, data: actualQuantity,
}, },
{ {
name: '目标完成率', name: "目标完成率",
type: 'line', type: "line",
yAxisIndex: 1, yAxisIndex: 1,
smooth: false, smooth: false,
data: targetCompletionRate, 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], // 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: { itemStyle: {
normal: { normal: {
color: 'rgba(246, 217, 126, 1)' color: "rgba(246, 217, 126, 1)",
} },
}, },
symbol: 'none' symbol: "none",
} },
], ],
}); });
});
}) },
} },
} };
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

398
src/views/bigScreen/information/center.vue
View File

@ -1,223 +1,229 @@
<template> <template>
<div> <div>
<container3> <container3>
<rocketTit class="tit">信息化指标</rocketTit> <!-- <rocketTit class="tit">信息化指标</rocketTit> -->
<div> <div>
<div class="data"> <div class="data" style="margin-top: 30px">
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">全年信息化投入</span></div> <div><span style="font-weight: bold">全年信息化投入</span></div>
<div class="box"> <div class="box">
<i>{{ dataInfo.informationInvested }}/</i><i class="num">{{ dataInfo.informationTargetInveste }}</i <i>{{ dataInfo.informationInvested }}/</i
><span class="num2">万</span> ><i class="num">{{ dataInfo.informationTargetInveste }}</i
</div> ><span class="num2">万</span>
<div style="width: 100%"> </div>
<!-- <div style="width: 100%">
<progressBar :percentage="percentage" /> <progressBar :percentage="percentage" />
</div> </div> -->
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">全年网络运维率</span></div> <div><span style="font-weight: bold">全年网络运维率</span></div>
<div class="box"> <div class="box">
<i>{{ dataInfo.alreadyNetworkOperation }}%/</i <i>{{ dataInfo.alreadyNetworkOperation }}%/</i
><span class="num">{{ dataInfo.targetNetworkOperation }}%</span> ><span class="num">{{ dataInfo.targetNetworkOperation }}%</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar :percentage="dataInfo.alreadyNetworkOperation" /> <progressBar :percentage="dataInfo.alreadyNetworkOperation" />
</div> </div> -->
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">全年设备接入率</span></div> <div><span style="font-weight: bold">全年设备接入率</span></div>
<div class="box"> <div class="box">
<i>{{ dataInfo.alreadyDeviceAccess }}%/</i><span class="num">{{ dataInfo.targetDeviceAccess }}%</span> <i>{{ dataInfo.alreadyDeviceAccess }}%/</i
</div> ><span class="num">{{ dataInfo.targetDeviceAccess }}%</span>
<div style="width: 100%"> </div>
<!-- <div style="width: 100%">
<progressBar :percentage="dataInfo.alreadyDeviceAccess" /> <progressBar :percentage="dataInfo.alreadyDeviceAccess" />
</div> </div> -->
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">全年业务覆盖率</span></div> <div><span style="font-weight: bold">全年业务覆盖率</span></div>
<div class="box"> <div class="box">
<i>{{ dataInfo.alreadyBusinessCoverage }}%/</i <i>{{ dataInfo.alreadyBusinessCoverage }}%/</i
><span class="num">{{ dataInfo.targetBusinessCoverage }}%</span> ><span class="num">{{ dataInfo.targetBusinessCoverage }}%</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar :percentage="dataInfo.alreadyBusinessCoverage" /> <progressBar :percentage="dataInfo.alreadyBusinessCoverage" />
</div> </div> -->
</div> </div>
</div> </div>
<div class="_img"> <div class="_img">
<img class="img" :src="dataInfo.bigPic" /> <img class="img" :src="dataInfo.bigPic" />
</div> </div>
</div> </div>
</container3> </container3>
</div> </div>
</template> </template>
<script> <script>
import container3 from '../components/container3/index.vue' import container3 from "../components/container3/index.vue";
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import progressBar from './../components/progress/index.vue' import progressBar from "./../components/progress/index.vue";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from "../../dashboard/mixins/resize";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left1', name: "left1",
components: { components: {
container3, container3,
rocketTit, rocketTit,
progressBar, progressBar,
}, },
data() { data() {
return { return {
dataInfo: { dataInfo: {
informationInvested:0, informationInvested: 0,
informationTargetInveste:0, informationTargetInveste: 0,
alreadyNetworkOperation:0, alreadyNetworkOperation: 0,
targetNetworkOperation:0, targetNetworkOperation: 0,
alreadyDeviceAccess:0, alreadyDeviceAccess: 0,
targetDeviceAccess:0, targetDeviceAccess: 0,
alreadyBusinessCoverage:0, alreadyBusinessCoverage: 0,
targetBusinessCoverage:0, targetBusinessCoverage: 0,
}, },
} };
}, },
computed: { computed: {
percentage() { percentage() {
return (this.dataInfo.informationInvested / this.dataInfo.informationTargetInveste) * 100 || 0 return (
}, (this.dataInfo.informationInvested /
}, this.dataInfo.informationTargetInveste) *
mounted() {}, 100 || 0
beforeDestroy() {}, );
methods: { },
getData() { },
this.request({ mounted() {},
url: '/hx/informationManagement/getHxInformationIndex', beforeDestroy() {},
method: 'get', methods: {
}).then(({ data }) => { getData() {
this.dataInfo = data this.request({
}) url: "/hx/informationManagement/getHxInformationIndex",
}, method: "get",
}, }).then(({ data }) => {
created() { this.dataInfo = data;
this.getData() });
}, },
} },
created() {
this.getData();
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tit { .tit {
padding: 16px 24px; padding: 16px 24px;
} }
.img { .img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.data { .data {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
margin: 0 30px; margin: 0 30px;
background: rgba(2, 18, 63, 0.33); background: rgba(2, 18, 63, 0.33);
color: #ffffff; color: #ffffff;
font-size: 18px; font-size: 18px;
.data-item { .data-item {
// flex: 1; // flex: 1;
width: 20%; width: 20%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
> div { > div {
margin: 5px 0; margin: 5px 0;
text-align: center; text-align: center;
img { img {
// width: 10px; // width: 10px;
// height: 10px; // height: 10px;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;
} }
} }
.box { .box {
font-size: 26px; font-size: 26px;
font-family: Roboto-BlackItalic, Roboto; font-family: Roboto-BlackItalic, Roboto;
font-weight: 600; font-weight: 600;
color: #55c5a2; color: #55c5a2;
} }
.num { .num {
font-size: 14px; font-size: 14px;
} }
.num2 { .num2 {
font-size: 16px; font-size: 16px;
margin-left: 5px; margin-left: 5px;
color: #fff; color: #fff;
} }
} }
} }
._img { ._img {
margin-top: 10px; margin-top: 50px;
margin-right: 30px; margin-right: 30px;
margin-left: 40px; margin-left: 40px;
height: 400px; height: 400px;
position: relative; position: relative;
img { img {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.container3 { .container3 {
position: relative; position: relative;
.con_right { .con_right {
width: 138px; width: 138px;
position: absolute; position: absolute;
top: 41%; top: 41%;
right: 43%; right: 43%;
color: #fff; color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.con_title { .con_title {
width: 100%; width: 100%;
height: 42px; height: 42px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-right: 3px; margin-right: 3px;
} }
} }
.con_title_bg1 { .con_title_bg1 {
background: url('./img/left1/1.png') no-repeat; background: url("./img/left1/1.png") no-repeat;
} }
.con_title_bg2 { .con_title_bg2 {
background: url('./img/left1/2.png') no-repeat; background: url("./img/left1/2.png") no-repeat;
} }
.con_title_bg3 { .con_title_bg3 {
background: url('./img/left1/3.png') no-repeat; background: url("./img/left1/3.png") no-repeat;
} }
.com_img { .com_img {
margin-top: 5px; margin-top: 5px;
width: 40px; width: 40px;
height: 40px; height: 40px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
.con_two { .con_two {
top: 37%; top: 37%;
left: 13%; left: 13%;
} }
.con_three { .con_three {
top: 70%; top: 70%;
right: 16%; right: 16%;
} }
} }
</style> </style>

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

@ -12,7 +12,7 @@
<span>已完成任务/完成率</span> <span>已完成任务/完成率</span>
<i class="num" <i class="num"
>{{ totalAndRate.total }}/{{ >{{ totalAndRate.total }}/{{
Math.floor(totalAndRate.rate * 100) / 100 Math.floor(totalAndRate.rate * 100) / 100 || 0
}}%</i }}%</i
> >
<progressBar :percentage="totalAndRate.rate" /> <progressBar :percentage="totalAndRate.rate" />
@ -351,14 +351,27 @@ export default {
}, },
}, },
}, },
dataZoom: { // dataZoom: {
type: "slider", // type: "slider",
start: 0, // start: 0,
end: this.dataZoomEnd(titList.length, 5), // end: this.dataZoomEnd(titList.length, 5),
textStyle: { // textStyle: {
color: "#fff", // 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"], color: ["#ccc", "red"],
yAxis: [ yAxis: [
{ {

1142
src/views/bigScreen/information/right1.vue
View File

File diff suppressed because it is too large Load Diff

60
src/views/bigScreen/management/center.vue
View File

@ -20,11 +20,11 @@
><i class="num">{{ handleMillion(resData.targetIncome) }}</i ><i class="num">{{ handleMillion(resData.targetIncome) }}</i
><span class="num2">亿元</span> ><span class="num2">亿元</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar <progressBar
:percentage="(resData.realIncome / resData.targetIncome) * 100" :percentage="(resData.realIncome / resData.targetIncome) * 100"
/> />
</div> </div> -->
</div> </div>
<div class="data-item"> <div class="data-item">
<div> <div>
@ -37,11 +37,11 @@
><i class="num">{{ handleMillion(resData.targetProfit) }}</i ><i class="num">{{ handleMillion(resData.targetProfit) }}</i
><span class="num2">亿元</span> ><span class="num2">亿元</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar <progressBar
:percentage="(resData.realProfit / resData.targetProfit) * 100" :percentage="(resData.realProfit / resData.targetProfit) * 100"
/> />
</div> </div> -->
</div> </div>
<div class="data-item"> <div class="data-item">
<div> <div>
@ -54,55 +54,72 @@
><i class="num">{{ handleMillion(resData.targetEva) }}</i ><i class="num">{{ handleMillion(resData.targetEva) }}</i
><span class="num2">亿元</span> ><span class="num2">亿元</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar <progressBar
:percentage="(resData.realEva / resData.targetEva) * 100" :percentage="(resData.realEva / resData.targetEva) * 100"
/> />
</div> </div> -->
</div> </div>
<div class="data-item" style="width: 34%"> <div class="data-item" style="width: 37%">
<div> <div>
<img src="./icon4.png" alt="" /><span style="font-weight: bold" <img src="./icon4.png" alt="" /><span style="font-weight: bold"
>两金</span >两金<span style="font-size: 14px"
>（ 产成品 / 应收账款 ）</span
></span
> >
</div> </div>
<div style="display: flex"> <div style="display: flex">
<div> <div>
<div class="box" style="margin-bottom: 0"> <div class="box" style="margin-bottom: 0; position: relative">
<i>{{ handleMillion(resData.realCollection) }}/</i <i>{{ handleMillion(resData.realCollection) }}/</i
><i class="num">{{ handleMillion(resData.targetCollection) }}</i ><i class="num">{{ handleMillion(resData.targetCollection) }}</i
><span class="num2">亿元</span> ><span class="num2">亿元</span>
<!-- <div
style="
font-size: 12px;
color: #fff;
position: absolute;
bottom: -20px;
"
>
产成品
</div> -->
</div> </div>
<span style="font-size: 12px; position: relative; top: -6px"
>产成品</span <!-- <div style="display: flex">
>
<div style="display: flex">
<progressBar <progressBar
:percentage=" :percentage="
(resData.realCollection / resData.targetCollection) * 100 (resData.realCollection / resData.targetCollection) * 100
" "
/> />
</div> </div> -->
</div> </div>
<div style="margin-left: 10px"> <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>{{ handleMillion(resData.realFinishProduct) }}/</i
><i class="num">{{ ><i class="num">{{
handleMillion(resData.targetFinishProduct) handleMillion(resData.targetFinishProduct)
}}</i }}</i
><span class="num2">亿元</span> ><span class="num2">亿元</span>
<!-- <div
style="
font-size: 12px;
color: #fff;
position: absolute;
bottom: -20px;
"
>
应收账款
</div> -->
</div> </div>
<span style="font-size: 12px; position: relative; top: -6px" <!-- <div style="display: flex">
>应收账款</span
>
<div style="display: flex">
<progressBar <progressBar
:percentage=" :percentage="
(resData.realFinishProduct / resData.targetFinishProduct) * (resData.realFinishProduct / resData.targetFinishProduct) *
100 100
" "
/> />
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
@ -848,7 +865,8 @@ export default {
padding: 5px 0; padding: 5px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: center;
// justify-content: space-between;
align-items: flex-start; align-items: flex-start;
> div { > div {
margin: 5px 0; margin: 5px 0;

50
src/views/bigScreen/management/left1.vue
View File

@ -8,7 +8,7 @@
layout="prev, pager, next" layout="prev, pager, next"
background background
:total="total" :total="total"
:page-size="2" :page-size="1"
:current-page.sync="currentPage1" :current-page.sync="currentPage1"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
> >
@ -165,6 +165,7 @@ export default {
currentPage1: 1, currentPage1: 1,
dataList: [], dataList: [],
total: 0, total: 0,
time: null,
index: 0, index: 0,
chart: null, chart: null,
chart2: null, chart2: null,
@ -179,9 +180,12 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart(); this.initChart();
this.initLine(); this.initLine();
this.start();
}); });
}, },
beforeDestroy() {}, beforeDestroy() {
this.end();
},
watch: { watch: {
index(newVal, oldVal) { index(newVal, oldVal) {
if (newVal == 0) { if (newVal == 0) {
@ -196,6 +200,18 @@ export default {
}, },
}, },
methods: { 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() { initChart() {
this.request({ this.request({
url: "/hx/operating/getHxStrategyIndexPic", url: "/hx/operating/getHxStrategyIndexPic",
@ -206,6 +222,7 @@ export default {
this.dataList = res.data; this.dataList = res.data;
if (this.total == 0) return false; if (this.total == 0) return false;
this.setData(res.data.slice(0, 2)); this.setData(res.data.slice(0, 2));
this.setOddEchars(res.data.slice(0, 1));
// if (res.data.length > 2) { // if (res.data.length > 2) {
// list = res.data.splice(0, 2); // list = res.data.splice(0, 2);
// } else { // } else {
@ -216,8 +233,10 @@ export default {
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.currentPage1 = val; this.currentPage1 = val;
const data = this.dataList.slice(val * 2 - 2, val * 2); // const data = this.dataList.slice(val * 2 - 2, val * 2);
this.setData(data); const data = this.dataList.slice(val - 1, val);
// this.setData(data);
this.setOddEchars(data);
}, },
setData(list) { setData(list) {
@ -591,11 +610,24 @@ export default {
top: 50, top: 50,
bottom: 50, bottom: 50,
}, },
dataZoom: { // dataZoom: {
type: "slider", // type: "slider",
start: 0, // start: 0,
end: this.dataZoomEnd(list.length, 5), // 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: [ series: [
{ {
name: "实际", name: "实际",

23
src/views/bigScreen/management/left2.vue
View File

@ -579,11 +579,24 @@ export default {
top: 30, top: 30,
bottom: 40, bottom: 40,
}, },
dataZoom: { // dataZoom: {
type: "slider", // type: "slider",
start: 0, // start: 0,
end: this.dataZoomEnd(list.length, 11), // 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: { xAxis: {
data: list.map((e) => e.deptName), data: list.map((e) => e.deptName),
// data: [ // data: [

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

@ -330,14 +330,27 @@ export default {
bottom: 50, bottom: 50,
containLabel: true, containLabel: true,
}, },
dataZoom: { // dataZoom: {
type: "slider", // type: "slider",
start: 0, // start: 0,
end: this.dataZoomEnd(list.length, 5), // end: this.dataZoomEnd(list.length, 5),
textStyle: { // textStyle: {
color: "#fff", // color: "#fff",
// },
// },
dataZoom: [
{
type: "slider",
textStyle: {
color: "#fff",
},
startValue: this.dataZoomStart(list.length, 4, "start"),
endValue: this.dataZoomStart(list.length, 4, "end"),
}, },
}, {
type: "inside",
},
],
xAxis: [ xAxis: [
{ {
type: "category", type: "category",

54
src/views/bigScreen/management/right2.vue
View File

@ -191,14 +191,27 @@ export default {
bottom: 50, bottom: 50,
containLabel: true, containLabel: true,
}, },
dataZoom: { // dataZoom: {
type: "slider", // type: "slider",
start: 0, // start: 0,
end: this.dataZoomEnd(list.length, 7), // end: this.dataZoomEnd(list.length, 7),
textStyle: { // textStyle: {
color: "#fff", // 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: [ xAxis: [
{ {
type: "category", type: "category",
@ -793,14 +806,27 @@ export default {
top: 30, top: 30,
bottom: 50, bottom: 50,
}, },
dataZoom: { // dataZoom: {
type: "slider", // type: "slider",
start: 0, // start: 0,
end: this.dataZoomEnd(list.length, 7), // end: this.dataZoomEnd(list.length, 7),
textStyle: { // textStyle: {
color: "#fff", // 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: { xAxis: {
data: list.map((e) => e.deptName), data: list.map((e) => e.deptName),
axisLine: { axisLine: {

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

@ -7,18 +7,18 @@
<div class="box"> <div class="box">
<span>{{ percentage }}%</span> <span>{{ percentage }}%</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar :percentage="percentage" /> <progressBar :percentage="percentage" />
</div> </div> -->
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">产品合格率</span></div> <div><span style="font-weight: bold">产品合格率</span></div>
<div class="box"> <div class="box">
<span>{{ dataInfo.productCate || 0 }}%</span> <span>{{ dataInfo.productCate || 0 }}%</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar :percentage="dataInfo.productCate" /> <progressBar :percentage="dataInfo.productCate" />
</div> </div> -->
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">一般性质量问题数量</span></div> <div><span style="font-weight: bold">一般性质量问题数量</span></div>
@ -43,9 +43,9 @@
<span>{{ dataInfo.smallProductCate || 0 }}</span <span>{{ dataInfo.smallProductCate || 0 }}</span
>% >%
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar :percentage="dataInfo.smallProductCate" /> <progressBar :percentage="dataInfo.smallProductCate" />
</div> </div> -->
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">产品错、漏检率</span></div> <div><span style="font-weight: bold">产品错、漏检率</span></div>
@ -64,9 +64,9 @@
dataInfo.qualityPlanCompleteTotal dataInfo.qualityPlanCompleteTotal
}}</span> }}</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar :percentage="dataInfo.planCompleteRate" /> <progressBar :percentage="dataInfo.planCompleteRate" />
</div> </div> -->
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">质量检查完成率</span></div> <div><span style="font-weight: bold">质量检查完成率</span></div>
@ -76,9 +76,9 @@
dataInfo.qualityNotificationCompleteTotal dataInfo.qualityNotificationCompleteTotal
}}</span> }}</span>
</div> </div>
<div style="width: 100%"> <!-- <div style="width: 100%">
<progressBar :percentage="dataInfo.checkCompleteRate" /> <progressBar :percentage="dataInfo.checkCompleteRate" />
</div> </div> -->
</div> </div>
</div> </div>
</center1> </center1>

23
src/views/bigScreen/qualityManage/center2.vue
View File

@ -150,11 +150,24 @@ export default {
top: 30, top: 30,
bottom: 50, bottom: 50,
}, },
dataZoom: { // dataZoom: {
type: "slider", // type: "slider",
start: 0, // start: 0,
end: this.dataZoomEnd(productName.length, 7), // 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: [ series: [
{ {
name: "实际", name: "实际",

897
src/views/bigScreen/qualityManage/left1.vue
View File

@ -1,457 +1,490 @@
<template> <template>
<div> <div>
<container2 title="质量计划"> <container2 title="质量计划">
<div slot="datePicker"> <div slot="datePicker">
<bigScreenTabs v-model="index" :titleArr="['全厂', '部门']"></bigScreenTabs> <bigScreenTabs
</div> v-model="index"
<div style="height: 100%; width: 100%" ref="chart" v-if="index == 0"></div> :titleArr="['全厂', '部门']"
<div style="height: 100%; width: 100%" ref="chart2" v-else></div> ></bigScreenTabs>
</container2> </div>
</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> </template>
<script> <script>
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import container2 from './components/container2/index.vue' import container2 from "./components/container2/index.vue";
import bigScreenTabs from '../components/bigScreenTabs/index.vue' import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import progressBar from '@/views/bigScreen/components/progress/index.vue' import progressBar from "@/views/bigScreen/components/progress/index.vue";
import colorList from '@/utils/colorPalette' import colorList from "@/utils/colorPalette";
// import {Liquid} from '@antv/g2plot'; // import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize' // import resize from '../../dashboard/mixins/resize'
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
export default { export default {
// mixins: [resize], // mixins: [resize],
name: 'left1', name: "left1",
components: { components: {
rocketTit, rocketTit,
container2, container2,
bigScreenTabs, bigScreenTabs,
progressBar, progressBar,
}, },
data() { data() {
return { return {
index: 0, index: 0,
chart: null, chart: null,
chart2: null, chart2: null,
data: [ data: [
{ value: 154, name: '类别一' }, { value: 154, name: "类别一" },
{ value: 775, name: '类别二' }, { value: 775, name: "类别二" },
{ value: 679, name: '类别三' }, { value: 679, name: "类别三" },
{ value: 679, name: '类别四' }, { value: 679, name: "类别四" },
{ value: 679, name: '类别五' }, { value: 679, name: "类别五" },
{ value: 679, name: '类别六' }, { value: 679, name: "类别六" },
{ value: 679, name: '类别七' }, { value: 679, name: "类别七" },
{ value: 679, name: '类别八' }, { value: 679, name: "类别八" },
], ],
colorList, colorList,
} };
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
}) });
}, },
watch: { watch: {
index(newVal, oldVal) { index(newVal, oldVal) {
if (newVal == 0) { if (newVal == 0) {
this.chart2.dispose() this.chart2.dispose();
this.chart2 = null this.chart2 = null;
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
}) });
} else { } else {
this.chart.dispose() this.chart.dispose();
this.chart = null this.chart = null;
this.$nextTick(() => { this.$nextTick(() => {
this.initChart2() this.initChart2();
}) });
} }
}, },
}, },
beforeDestroy() {}, beforeDestroy() {},
methods: { methods: {
initChart() { initChart() {
this.request({ this.request({
url: '/hx/qualityAssurance/getQualityPlan', url: "/hx/qualityAssurance/getQualityPlan",
method: 'get', method: "get",
params: { params: {
type: '1', type: "1",
}, },
}).then(({ data }) => { }).then(({ data }) => {
this.chart = echarts.init(this.$refs.chart) this.chart = echarts.init(this.$refs.chart);
this.setOptions(data) this.setOptions(data);
}) });
}, },
setOptions(resData) { setOptions(resData) {
let month = [] let month = [];
let rate = [] let rate = [];
let completed = [] let completed = [];
for (let i = 0; i < resData.length; i++) { for (let i = 0; i < resData.length; i++) {
const item = resData[i] const item = resData[i];
month.push(item.month) month.push(item.month);
rate.push(item.rate) rate.push(item.rate);
completed.push(item.completed) completed.push(item.completed);
} }
this.chart.setOption({ this.chart.setOption({
legend: { legend: {
data: ['数量', '完成率'], data: ["数量", "完成率"],
textStyle: { textStyle: {
color: '#fff', color: "#fff",
}, },
}, },
grid: { grid: {
left: '3%', left: "3%",
right: '6%', right: "6%",
bottom: '3%', bottom: "3%",
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: month, data: month,
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
name: '个', name: "个",
min: 0, min: 0,
// max: 250, // max: 250,
// interval: 50, // interval: 50,
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
}, },
splitArea: { splitArea: {
show: false, //不显示网格区域 show: false, //不显示网格区域
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
min: 0, min: 0,
max: 100, max: 100,
// interval: 5, // interval: 5,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
}, },
splitArea: { splitArea: {
show: false, //不显示网格区域 show: false, //不显示网格区域
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
grid: { grid: {
containLabel: true, containLabel: true,
width: '99%', width: "99%",
left: 0, left: 0,
top: 50, top: 50,
bottom: 50, bottom: 50,
}, },
dataZoom: { // dataZoom: {
type: 'slider', // type: 'slider',
start: 0, // start: 0,
end: this.dataZoomEnd(month.length, 5), // end: this.dataZoomEnd(month.length, 5),
textStyle: { // textStyle: {
color: '#fff', // color: '#fff',
}, // },
}, // },
series: [ dataZoom: [
{ {
name: '数量', type: "slider",
type: 'bar', textStyle: {
barWidth: 20, color: "#fff",
data: completed, },
itemStyle: { startValue: this.dataZoomStart(month.length, 4, "start"),
color: { endValue: this.dataZoomStart(month.length, 4, "end"),
type: 'linear', // 线性渐变 },
x: 0, {
y: 0, type: "inside",
x2: 0, },
y2: 1, ],
colorStops: [ series: [
{ {
offset: 0, name: "数量",
color: '#9AF0D5', // 0%处的颜色为红色 type: "bar",
}, barWidth: 20,
{ data: completed,
offset: 1, itemStyle: {
color: '#61DDAA', // 100%处的颜色为蓝 color: {
}, type: "linear", // 线性渐变
], x: 0,
}, y: 0,
}, x2: 0,
}, y2: 1,
{ colorStops: [
name: '完成率', {
type: 'line', offset: 0,
yAxisIndex: 1, color: "#9AF0D5", // 0%处的颜色为红色
smooth: false, },
data: rate, {
itemStyle: { offset: 1,
color: '#7EA7FC', color: "#61DDAA", // 100%处的颜色为蓝
}, },
symbol: 'none', ],
}, },
], },
// yAxis: { },
// type: 'value', {
// splitLine: { name: "完成率",
// show: false//不显示网格线 type: "line",
// }, yAxisIndex: 1,
// splitArea: { smooth: false,
// show: false//不显示网格区域 data: rate,
// }, itemStyle: {
// axisLine: { color: "#7EA7FC",
// lineStyle: { },
// color: 'rgb(255, 255, 255)' symbol: "none",
// }, },
// } ],
// }, // yAxis: {
// series: [ // type: 'value',
// { // splitLine: {
// name: '利润', // show: false//不显示网格线
// type: 'bar', // },
// data: [ // splitArea: {
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 // show: false//不显示网格区域
// ] // },
// }, // axisLine: {
// { // lineStyle: {
// name: '数量', // color: 'rgb(255, 255, 255)'
// 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 // },
// ] // series: [
// }, // {
// { // name: '利润',
// name: '完成率', // type: 'bar',
// type: 'line', // data: [
// yAxisIndex: 1, // 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
// 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] // ]
// } // },
// {
// 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() { initChart2() {
this.request({ this.request({
url: '/hx/qualityAssurance/getQualityPlan', url: "/hx/qualityAssurance/getQualityPlan",
method: 'get', method: "get",
params: { params: {
type: '2', type: "2",
}, },
}).then(({ data }) => { }).then(({ data }) => {
this.chart2 = echarts.init(this.$refs.chart2) this.chart2 = echarts.init(this.$refs.chart2);
this.setOptions2(data) this.setOptions2(data);
}) });
}, },
setOptions2(resData) { setOptions2(resData) {
let deptName = [] let deptName = [];
let rate = [] let rate = [];
let completed = [] let completed = [];
for (let i = 0; i < resData.length; i++) { for (let i = 0; i < resData.length; i++) {
const item = resData[i] const item = resData[i];
deptName.push(item.deptName) deptName.push(item.deptName);
rate.push(item.rate) rate.push(item.rate);
completed.push(item.completed) completed.push(item.completed);
} }
this.chart2.setOption({ this.chart2.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
}, },
// legend: { // legend: {
// // data: ['收入', '实际', '目标'], // // data: ['收入', '实际', '目标'],
// textStyle: { // textStyle: {
// color: '#fff', //legend字体颜色 // color: '#fff', //legend字体颜色
// }, // },
// // selectedMode: false, // // selectedMode: false,
// }, // },
grid: { grid: {
containLabel: true, containLabel: true,
left: 20, left: 20,
right: 10, right: 10,
top: 30, top: 30,
bottom: 50, bottom: 50,
}, },
xAxis: { xAxis: {
data: deptName, data: deptName,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
dataZoom: { // dataZoom: {
type: 'slider', // type: "slider",
start: 0, // start: 0,
end: this.dataZoomEnd(deptName.length, 5), // end: this.dataZoomEnd(deptName.length, 5),
textStyle: { // textStyle: {
color: '#fff', // color: "#fff",
}, // },
}, // },
color: ['#ccc', 'red'], dataZoom: [
yAxis: [ {
{ type: "slider",
name: '个', textStyle: {
splitLine: { color: "#fff",
show: true, },
// 改变轴线颜色 startValue: this.dataZoomStart(deptName.length, 4, "start"),
lineStyle: { endValue: this.dataZoomStart(deptName.length, 4, "end"),
// 使用深浅的间隔色 },
color: ['rgba(255, 255, 255,.5)'], {
}, type: "inside",
}, },
axisLabel: { ],
formatter: '{value}', color: ["#ccc", "red"],
}, yAxis: [
axisLine: { {
lineStyle: { name: "个",
color: 'rgb(255, 255, 255)', splitLine: {
}, show: true,
}, // 改变轴线颜色
}, lineStyle: {
{ // 使用深浅的间隔色
type: 'value', color: ["rgba(255, 255, 255,.5)"],
min: 0, },
max: 100, },
interval: 20, axisLabel: {
axisLabel: { formatter: "{value}",
formatter: '{value} %', },
}, axisLine: {
splitLine: { lineStyle: {
show: false, //不显示网格线 color: "rgb(255, 255, 255)",
}, },
splitArea: { },
show: false, //不显示网格区域 },
}, {
axisLine: { type: "value",
lineStyle: { min: 0,
color: 'rgb(255, 255, 255)', max: 100,
}, interval: 20,
}, axisLabel: {
}, formatter: "{value} %",
], },
series: [ splitLine: {
{ show: false, //不显示网格线
name: '实际', },
type: 'bar', splitArea: {
barWidth: 15, show: false, //不显示网格区域
position: [0, 0], },
itemStyle: { axisLine: {
color: 'rgba(90, 216, 166, 0.85)', lineStyle: {
}, color: "rgb(255, 255, 255)",
data: completed, },
}, },
{ },
name: '目标', ],
type: 'scatter', series: [
symbol: 'rect', {
yAxisIndex: 1, name: "实际",
symbolSize: [30, 4], type: "bar",
// symbolOffset: [3, 0], barWidth: 15,
// position: [0, 0], position: [0, 0],
itemStyle: { itemStyle: {
color: '#F64F58', color: "rgba(90, 216, 166, 0.85)",
}, },
data: [50, 40], 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 100%; width: 100%;
.box { .box {
padding: 0 0 5px 15px; padding: 0 0 5px 15px;
display: flex; display: flex;
align-items: center; align-items: center;
.num { .num {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
margin: 0 10px; margin: 0 10px;
} }
} }
} }
.content1 { .content1 {
// height: 200px; // height: 200px;
height: 100%; height: 100%;
.chart1 { .chart1 {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
height: 192px; height: 192px;
background: transparent; background: transparent;
} }
} }
.num { .num {
font-size: 30px; font-size: 30px;
font-family: Roboto-BlackItalic, Roboto; font-family: Roboto-BlackItalic, Roboto;
font-weight: normal; font-weight: normal;
color: #91d5fe; color: #91d5fe;
vertical-align: sub; vertical-align: sub;
// margin-right: 3px; // margin-right: 3px;
} }
.content2 { .content2 {
padding: 20px; padding: 20px;
flex: 1; flex: 1;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.chart2 { .chart2 {
height: 100%; height: 100%;
} }
.tit { .tit {
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #ffffff; color: #ffffff;
line-height: 22px; line-height: 22px;
position: relative; position: relative;
padding-left: 15px; padding-left: 15px;
} }
.tit::after { .tit::after {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: 3px; top: 3px;
left: 0px; left: 0px;
width: 4px; width: 4px;
height: 16px; height: 16px;
background: #00ffff; background: #00ffff;
} }
} }
</style> </style>

1700
src/views/bigScreen/qualityManage/right1.vue
View File

File diff suppressed because it is too large Load Diff

181
src/views/bigScreen/scientific/tab2/center1.vue
View File

@ -3,35 +3,58 @@
<container1 title="生产指标"> <container1 title="生产指标">
<div style="height: 100%; width: 100%; padding: 0 15px 0 25px"> <div style="height: 100%; width: 100%; padding: 0 15px 0 25px">
<div style="display: flex; height: 100%"> <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="tag">
<div class="title">军品收入</div> <div class="title">军品收入</div>
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realMilitaryIncome}}/<i <i style="font-size: 18px; font-weight: bold; color: #55c5a2"
style="font-size: 16px">{{res.targetMilitaryIncome}}</i></i> >{{ res.realMilitaryIncome }}/<i style="font-size: 16px">{{
res.targetMilitaryIncome
}}</i></i
>
万 万
</div> </div>
<div class="tag"> <div class="tag">
<div class="title">装药量</div> <div class="title">装药量</div>
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realCharge}}/<i <i style="font-size: 18px; font-weight: bold; color: #55c5a2"
style="font-size: 16px">{{res.targetCharge}}</i></i> >{{ res.realCharge }}/<i style="font-size: 16px">{{
res.targetCharge
}}</i></i
>
万 万
</div> </div>
<div class="tag"> <div class="tag">
<div class="title">大型产品</div> <div class="title">大型产品</div>
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realBigProduct}}/<i <i style="font-size: 18px; font-weight: bold; color: #55c5a2"
style="font-size: 16px">{{res.targetBigProduct}}</i></i> >{{ res.realBigProduct }}/<i style="font-size: 16px">{{
res.targetBigProduct
}}</i></i
>
万 万
</div> </div>
<div class="tag"> <div class="tag">
<div class="title">中型产品</div> <div class="title">中型产品</div>
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realMediumProduct}}/<i <i style="font-size: 18px; font-weight: bold; color: #55c5a2"
style="font-size: 16px">{{res.targetMediumProduct}}</i></i> >{{ res.realMediumProduct }}/<i style="font-size: 16px">{{
res.targetMediumProduct
}}</i></i
>
万 万
</div> </div>
<div class="tag"> <div class="tag">
<div class="title">小型产品</div> <div class="title">小型产品</div>
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realSmallProduct}}/<i <i style="font-size: 18px; font-weight: bold; color: #55c5a2"
style="font-size: 16px">{{res.targetSmallProduct}}</i></i> >{{ res.realSmallProduct }}/<i style="font-size: 16px">{{
res.targetSmallProduct
}}</i></i
>
万 万
</div> </div>
</div> </div>
@ -43,19 +66,23 @@
</template> </template>
<script> <script>
import container1 from './components/container1/index.vue' import container1 from "./components/container1/index.vue";
import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor' import {
blueColorList,
greenColorList,
yelloColorList,
} from "@/utils/gradualColor";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../../dashboard/mixins/resize' import resize from "../../../dashboard/mixins/resize";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left2', name: "left2",
components: { components: {
container1, container1,
}, },
data () { data() {
return { return {
chart: null, chart: null,
res: { res: {
@ -69,40 +96,39 @@ export default {
targetMediumProduct: "0", targetMediumProduct: "0",
targetMilitaryIncome: "0", targetMilitaryIncome: "0",
targetSmallProduct: "0", targetSmallProduct: "0",
} },
} };
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
}) });
}, },
methods: { methods: {
initChart () { initChart() {
this.chart = echarts.init(this.$refs.chart) this.chart = echarts.init(this.$refs.chart);
this.request({ this.request({
url: '/hx/scientificProduction/getProductionIndexPic', url: "/hx/scientificProduction/getProductionIndexPic",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
this.res = res.data.pic1; this.res = res.data.pic1;
let list = res.data.pic2; let list = res.data.pic2;
this.setOptions(list) this.setOptions(list);
} }
}) });
}, },
setOptions (list) { setOptions(list) {
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
}, },
legend: { legend: {
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: "#fff", //legend字体颜色
}, },
}, },
grid: { grid: {
@ -112,43 +138,56 @@ export default {
bottom: 40, bottom: 40,
containLabel: true, containLabel: true,
}, },
dataZoom: { // dataZoom: {
type: 'slider', // type: 'slider',
start: 0, // start: 0,
end: this.dataZoomEnd(list.length, 4), // end: this.dataZoomEnd(list.length, 4),
textStyle: { // textStyle: {
color: '#fff', // 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: [ xAxis: [
{ {
type: 'category', type: "category",
data: list.map(e => e.month), data: list.map((e) => e.month),
// data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'], // data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
name: '', name: "",
splitLine: { splitLine: {
show: true, show: true,
// 改变轴线颜色 // 改变轴线颜色
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'], color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
@ -175,58 +214,58 @@ export default {
], ],
series: [ series: [
{ {
name: '装药量(大)', name: "装药量(大)",
type: 'bar', type: "bar",
barWidth: 30, barWidth: 30,
stack: 'Ad', stack: "Ad",
emphasis: { 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], // data: [120, 132, 101, 134, 90, 230, 210],
itemStyle: { itemStyle: {
color: yelloColorList[2], color: yelloColorList[2],
}, },
}, },
{ {
name: '装药量(中)', name: "装药量(中)",
type: 'bar', type: "bar",
barWidth: 30, barWidth: 30,
stack: 'Ad', stack: "Ad",
emphasis: { 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], // data: [220, 182, 191, 234, 290, 330, 310],
itemStyle: { itemStyle: {
color: yelloColorList[1], color: yelloColorList[1],
}, },
}, },
{ {
name: '装药量(小)', name: "装药量(小)",
type: 'bar', type: "bar",
barWidth: 30, barWidth: 30,
stack: 'Ad', stack: "Ad",
emphasis: { 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], // data: [150, 232, 201, 154, 190, 330, 410],
itemStyle: { itemStyle: {
color: yelloColorList[0], color: yelloColorList[0],
}, },
}, },
{ {
name: '交付数量', name: "交付数量",
type: 'bar', type: "bar",
barWidth: 30, barWidth: 30,
emphasis: { 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], // data: [320, 332, 301, 334, 390, 330, 320],
itemStyle: { itemStyle: {
color: '#45D1CC', color: "#45D1CC",
}, },
}, },
// { // {
@ -290,10 +329,10 @@ export default {
// }, // },
// }, // },
], ],
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

189
src/views/bigScreen/scientific/tab2/center2.vue
View File

@ -3,8 +3,19 @@
<container1 title="本月计划执行情况"> <container1 title="本月计划执行情况">
<!-- style="position: absolute; z-index: 1; left: 30px" --> <!-- style="position: absolute; z-index: 1; left: 30px" -->
<el-select slot="datePicker" v-model="value" size="mini" placeholder="请选择"> <el-select
<el-option v-for="item in selectData" :key="item" :label="item" :value="item"> </el-option> 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> </el-select>
<div style="height: 100%; width: 100%" ref="chart"></div> <div style="height: 100%; width: 100%" ref="chart"></div>
</container1> </container1>
@ -12,79 +23,89 @@
</template> </template>
<script> <script>
import container1 from './components/container1/index.vue' import container1 from "./components/container1/index.vue";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../../dashboard/mixins/resize' import resize from "../../../dashboard/mixins/resize";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from "vue-seamless-scroll";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left2', name: "left2",
components: { components: {
container1, container1,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data () { data() {
return { return {
chart: null, chart: null,
selectData: [ selectData: ["厂计划", "六院计划"],
'厂计划', value: "厂计划",
'六院计划' };
],
value: '厂计划'
}
}, },
watch: { watch: {
value (newVal, oldVal) { value(newVal, oldVal) {
this.initChart() this.initChart();
}, },
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
}) });
}, },
methods: { methods: {
initChart () { initChart() {
if (this.chart) { if (this.chart) {
this.chart.dispose(); this.chart.dispose();
this.chart = null; this.chart = null;
} }
this.request({ this.request({
url: '/hx/scientificProduction/getMonthPlanPic', url: "/hx/scientificProduction/getMonthPlanPic",
method: 'get', method: "get",
params: { params: {
type: this.value, type: this.value,
}, },
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let list = res.data; let list = res.data;
this.chart = echarts.init(this.$refs.chart) this.chart = echarts.init(this.$refs.chart);
this.setOptions(list) this.setOptions(list);
} }
}) });
}, },
setOptions (list) { setOptions(list) {
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
}, },
dataZoom: { // dataZoom: {
type: 'slider', // type: 'slider',
start: 0, // start: 0,
end: this.dataZoomEnd(list.length, 7), // end: this.dataZoomEnd(list.length, 7),
textStyle: { // textStyle: {
color: '#fff', // 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: { legend: {
data: ['装药', '总装', '交付'], data: ["装药", "总装", "交付"],
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: "#fff", //legend字体颜色
}, },
}, },
grid: { grid: {
@ -96,40 +117,40 @@ export default {
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: list.map(e => e.month), data: list.map((e) => e.month),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
name: '', name: "",
splitLine: { splitLine: {
show: true, show: true,
// 改变轴线颜色 // 改变轴线颜色
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'], color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
min: 0, min: 0,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -139,94 +160,94 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
series: [ series: [
{ {
name: '交付', name: "交付",
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
itemStyle: { itemStyle: {
color: '#55C5A2', color: "#55C5A2",
}, },
barWidth: 30, barWidth: 30,
data: list.map(e => e.realDeliver), data: list.map((e) => e.realDeliver),
// data: [150, 232, 201, 154, 190, 330, 410], // data: [150, 232, 201, 154, 190, 330, 410],
}, },
{ {
name: '总装', name: "总装",
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
itemStyle: { itemStyle: {
color: '#FA8C16', color: "#FA8C16",
}, },
barWidth: 30, barWidth: 30,
data: list.map(e => e.realAssemble), data: list.map((e) => e.realAssemble),
}, },
{ {
name: '装药', name: "装药",
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
itemStyle: { itemStyle: {
color: '#F6D97E', color: "#F6D97E",
}, },
barWidth: 30, barWidth: 30,
data: list.map(e => e.realCharge), data: list.map((e) => e.realCharge),
// data: [150, 232, 201, 154, 190, 330, 900], // data: [150, 232, 201, 154, 190, 330, 900],
}, },
{ {
name: '交付完成率', name: "交付完成率",
yAxisIndex: 1, yAxisIndex: 1,
type: 'line', type: "line",
smooth: false, smooth: false,
data: list.map(e => e.deliverRate), data: list.map((e) => e.deliverRate),
// data: [500, 550, 700, 520, 650, 520, 900], // data: [500, 550, 700, 520, 650, 520, 900],
itemStyle: { itemStyle: {
color: '#55C5A2', color: "#55C5A2",
}, },
symbol: 'none', symbol: "none",
}, },
{ {
name: '总装完成率', name: "总装完成率",
yAxisIndex: 1, yAxisIndex: 1,
type: 'line', type: "line",
smooth: false, smooth: false,
itemStyle: { 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], // data: [600, 500, 700, 620, 750, 800, 900],
symbol: 'none', symbol: "none",
}, },
{ {
name: '装药完成率', name: "装药完成率",
yAxisIndex: 1, yAxisIndex: 1,
type: 'line', type: "line",
smooth: false, smooth: false,
itemStyle: { 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], // data: [650, 550, 750, 670, 780, 900, 900],
symbol: 'none', symbol: "none",
}, },
], ],
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

127
src/views/bigScreen/scientific/tab2/left1.vue
View File

@ -3,57 +3,56 @@
<container1 title="生产责任令"> <container1 title="生产责任令">
<!-- <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" <!-- <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> --> 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> </container1>
</div> </div>
</template> </template>
<script> <script>
import container1 from "./components/container1/index.vue"; import container1 from "./components/container1/index.vue";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../../dashboard/mixins/resize' import resize from "../../../dashboard/mixins/resize";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left1', name: "left1",
components: { components: {
container1, container1,
}, },
data () { data() {
return { return {
dateRange: [], dateRange: [],
chart: null, chart: null,
} };
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
}) });
}, },
beforeDestroy () { }, beforeDestroy() {},
methods: { methods: {
initChart () { initChart() {
this.chart = echarts.init(this.$refs.chart) this.chart = echarts.init(this.$refs.chart);
this.setOptions() this.setOptions();
}, },
setOptions () { setOptions() {
this.request({ this.request({
url: '/hx/scientificProduction/getYearDutyPic', url: "/hx/scientificProduction/getYearDutyPic",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let list = res.data; let list = res.data;
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
formatter: '{a1}<br/>{b1}：{c1}', formatter: "{a1}<br/>{b1}：{c1}",
}, },
legend: { legend: {
data: ['预测', '实际', '目标完成率'], data: ["预测", "实际", "目标完成率"],
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: "#fff", //legend字体颜色
}, },
// selectedMode: false, // selectedMode: false,
}, },
@ -64,7 +63,7 @@ export default {
bottom: 70, bottom: 70,
}, },
xAxis: { xAxis: {
data: list.map(e => e.productModel), data: list.map((e) => e.productModel),
// data: [ // data: [
// '型号一', // '型号一',
// '型号二', // '型号二',
@ -89,44 +88,57 @@ export default {
// ], // ],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
dataZoom: { // dataZoom: {
type: 'slider', // type: 'slider',
start: 0, // start: 0,
end: this.dataZoomEnd(list.length, 6), // end: this.dataZoomEnd(list.length, 6),
textStyle: { // textStyle: {
color: '#fff', // 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: [ yAxis: [
{ {
name: '件', name: "件",
splitLine: { splitLine: {
show: true, show: true,
// 改变轴线颜色 // 改变轴线颜色
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'], color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
min: 0, min: 0,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -136,57 +148,56 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
series: [ series: [
{ {
name: '预测', name: "预测",
type: 'bar', type: "bar",
// z: '-1', // z: '-1',
barGap: '-75%', barGap: "-75%",
barWidth: 30, barWidth: 30,
itemStyle: { 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], // data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95, 60, 70, 80, 70, 60, 50, 40, 30],
}, },
{ {
name: '实际', name: "实际",
type: 'bar', type: "bar",
barWidth: 15, barWidth: 15,
position: [0, 0], position: [0, 0],
itemStyle: { 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], // data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30],
}, },
{ {
name: '目标完成率', name: "目标完成率",
type: 'scatter', type: "scatter",
symbol: 'rect', symbol: "rect",
symbolSize: [30, 3], symbolSize: [30, 3],
symbolOffset: [3, 0], symbolOffset: [3, 0],
position: [0, 0], position: [0, 0],
yAxisIndex: 1, yAxisIndex: 1,
itemStyle: { 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], // data: [10, 40, 16, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90],
}, },
], ],
}) });
} }
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

1258
src/views/bigScreen/scientific/tab3/left1.vue
View File

File diff suppressed because it is too large Load Diff

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

@ -202,6 +202,7 @@ export default {
method: "get", method: "get",
}).then((res) => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
console.log(res.data);
this.pointLevelCount = res.data.pointLevelCount; this.pointLevelCount = res.data.pointLevelCount;
this.sourceLevelCount = res.data.sourceLevelCount; this.sourceLevelCount = res.data.sourceLevelCount;
this.points = res.data.points; this.points = res.data.points;

367
src/views/bigScreen/securityManage/left2.vue
View File

@ -3,7 +3,10 @@
<container3 title="安全隐患整改情况"> <container3 title="安全隐患整改情况">
<div class="wrap"> <div class="wrap">
<div style="text-align: right; margin-right: 30px; margin-bottom: 5px"> <div style="text-align: right; margin-right: 30px; margin-bottom: 5px">
<bigScreenTabs v-model="index" :titleArr="['总厂', '车间']"></bigScreenTabs> <bigScreenTabs
v-model="index"
:titleArr="['总厂', '车间']"
></bigScreenTabs>
</div> </div>
<el-row class="content1" style="height: 100%" v-if="index == 0"> <el-row class="content1" style="height: 100%" v-if="index == 0">
<el-col :span="14" style="height: 100%"> <el-col :span="14" style="height: 100%">
@ -20,30 +23,69 @@
<el-col :span="12" style="height: 100%"> <el-col :span="12" style="height: 100%">
<el-row style="padding: 0 10px"> <el-row style="padding: 0 10px">
<el-col :span="24" style="margin-bottom: 1px"> <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="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="4">措施</el-col>
<el-col style="text-align: center" :span="3">责任人</el-col> <el-col style="text-align: center" :span="3">责任人</el-col>
</el-row> </el-row>
</el-col> </el-col>
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp-scroll" :class-option="{ <vue-seamless-scroll
singleHeight: 43, ref="seamlessScroll"
}"> :data="listData"
class="warp-scroll"
:class-option="{
singleHeight: 43,
}"
>
<ul class="item"> <ul class="item">
<li v-for="item in scrollList" :key="item.id"> <li v-for="item in scrollList" :key="item.id">
<el-row style="font-size: 14px"> <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="3">{{
<el-col style="text-align: center" :span="12" :title="item.dangerContent">{{ item.dangerContent }}</el-col> 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"> <el-col style="text-align: center" :span="4">
<section class="box"> <section class="box">
<span v-if="item.measures == '未整改'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span> <span
<span v-else style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</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-if="item.measures == '未整改'">未整改</span>
<span v-else>已整改</span> <span v-else>已整改</span>
</section> </section>
</el-col> </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> </el-row>
</li> </li>
</ul> </ul>
@ -57,20 +99,20 @@
</template> </template>
<script> <script>
import scalseBox from '../components/scaleBox.vue' import scalseBox from "../components/scaleBox.vue";
import bigScreenHead from '../components/bigScreenHead/index.vue' import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import container3 from './components/container3/index.vue' import container3 from "./components/container3/index.vue";
import bigScreenTabs from '../components/bigScreenTabs/index.vue' import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import colorList from '@/utils/colorPalette' import colorList from "@/utils/colorPalette";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from "vue-seamless-scroll";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from "../../dashboard/mixins/resize";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left2', name: "left2",
components: { components: {
scalseBox, scalseBox,
bigScreenHead, bigScreenHead,
@ -79,7 +121,7 @@ export default {
container3, container3,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data () { data() {
return { return {
index: 0, index: 0,
colorList, colorList,
@ -91,52 +133,52 @@ export default {
chart1: null, chart1: null,
chart2: null, chart2: null,
chart3: null, chart3: null,
} };
}, },
watch: { watch: {
index (newOld, oldVal) { index(newOld, oldVal) {
if (newOld == 0) { if (newOld == 0) {
this.chart3.dispose() this.chart3.dispose();
this.chart3 = null this.chart3 = null;
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
}) });
} else { } else {
this.chart1.dispose() this.chart1.dispose();
this.chart1 = null this.chart1 = null;
this.chart2.dispose() this.chart2.dispose();
this.chart2 = null this.chart2 = null;
this.$nextTick(() => { this.$nextTick(() => {
this.initChart3() this.initChart3();
}) });
} }
}, },
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
// this.initChart3() // this.initChart3()
}) });
}, },
beforeDestroy () { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return;
} }
this.chart.dispose() this.chart.dispose();
this.chart = null this.chart = null;
}, },
methods: { methods: {
initChart () { initChart() {
this.request({ this.request({
url: '/hx/securityManagement/hiddenDanger/1', url: "/hx/securityManagement/hiddenDanger/1",
method: 'get', method: "get",
// type=1车间/=2总厂 // type=1车间/=2总厂
params: { type: 2 } params: { type: 2 },
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let { monthList, mapList, category } = res.data; let { monthList, mapList, category } = res.data;
this.initChart2(category); this.initChart2(category);
this.chart1 = echarts.init(this.$refs.chart1) this.chart1 = echarts.init(this.$refs.chart1);
this.chart1.setOption({ this.chart1.setOption({
// legend: { // legend: {
// data: ['利润', '利润目标完成率'], // data: ['利润', '利润目标完成率'],
@ -145,31 +187,31 @@ export default {
// }, // },
// }, // },
grid: { grid: {
left: '3%', left: "3%",
right: '6%', right: "6%",
bottom: '3%', bottom: "3%",
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: monthList, data: monthList,
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
name: '个', name: "个",
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -179,14 +221,14 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -196,59 +238,72 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
grid: { grid: {
containLabel: true, containLabel: true,
width: '99%', width: "99%",
left: 0, left: 0,
top: 50, top: 50,
bottom: 50, bottom: 50,
}, },
dataZoom: { // dataZoom: {
type: 'slider', // type: 'slider',
start: 0, // start: 0,
end: this.dataZoomEnd(mapList.length, 5), // end: this.dataZoomEnd(mapList.length, 5),
}, // },
series: [ dataZoom: [
{ {
name: '利润', type: "slider",
type: 'bar', textStyle: {
barWidth: 20, color: "#fff",
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', startValue: this.dataZoomStart(mapList.length, 4, "start"),
endValue: this.dataZoomStart(mapList.length, 4, "end"),
}, },
{ {
name: '利润目标完成率', type: "inside",
type: 'line', },
],
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, yAxisIndex: 1,
smooth: false, smooth: false,
data: mapList.map(e => e.rate), data: mapList.map((e) => e.rate),
itemStyle: { itemStyle: {
color: '#55C5A2', color: "#55C5A2",
}, },
symbol: 'none', symbol: "none",
}, },
], ],
}); });
} else { } else {
this.$message.error(res.msg); this.$message.error(res.msg);
} }
}) });
}, },
initChart2 (category) { initChart2(category) {
this.chart2 = echarts.init(this.$refs.chart2) this.chart2 = echarts.init(this.$refs.chart2);
this.chart2.setOption({ this.chart2.setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: '{a} <br/>{b}: {c} ({d}%)', formatter: "{a} <br/>{b}: {c} ({d}%)",
}, },
color: this.colorList, color: this.colorList,
legend: { legend: {
@ -260,38 +315,39 @@ export default {
// y: 'bottom', // y: 'bottom',
textStyle: { textStyle: {
//图例文字的样式 //图例文字的样式
color: '#fff', color: "#fff",
fontSize: 16, fontSize: 16,
}, },
}, },
series: [ series: [
{ {
name: '型号', name: "型号",
type: 'pie', type: "pie",
radius: ['40%', '60%'], radius: ["40%", "60%"],
center: ['45%', '45%'], center: ["45%", "45%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center', position: "center",
fontWeight: 'bold', fontWeight: "bold",
formatter: ' {c}', // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容 formatter: " {c}", // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容
}, },
emphasis: { emphasis: {
label: { label: {
show: false, show: false,
fontSize: '40', fontSize: "40",
fontWeight: 'bold', fontWeight: "bold",
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
}, },
data: category.map(e => { data: category.map((e) => {
return { return {
value: e.NUMBERCOUNT, name: e.category value: e.NUMBERCOUNT,
} name: e.category,
}) };
}),
// data: [ // data: [
// { value: 154, name: '型号一' }, // { value: 154, name: '型号一' },
// { value: 775, name: '型号二' }, // { value: 775, name: '型号二' },
@ -300,17 +356,17 @@ export default {
// ], // ],
}, },
], ],
}) });
}, },
initChart3 () { initChart3() {
this.request({ this.request({
url: '/hx/securityManagement/hiddenDanger/1', url: "/hx/securityManagement/hiddenDanger/1",
method: 'get', method: "get",
// type=1车间/=2总厂 // type=1车间/=2总厂
params: { type: 1 } params: { type: 1 },
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
this.chart3 = echarts.init(this.$refs.chart3) this.chart3 = echarts.init(this.$refs.chart3);
let { list, allWorkshop, mapList } = res.data; let { list, allWorkshop, mapList } = res.data;
this.scrollList = list; this.scrollList = list;
this.listData2 = Array(this.scrollList.length).fill(0); this.listData2 = Array(this.scrollList.length).fill(0);
@ -323,32 +379,32 @@ export default {
// }, // },
// }, // },
grid: { grid: {
left: '3%', left: "3%",
right: '6%', right: "6%",
bottom: '3%', bottom: "3%",
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: allWorkshop, data: allWorkshop,
// data: ['车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间'], // data: ['车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间'],
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
name: '个', name: "个",
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -358,14 +414,14 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -375,56 +431,67 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
grid: { grid: {
containLabel: true, containLabel: true,
width: '99%', width: "99%",
left: 0, left: 0,
top: 50, top: 50,
bottom: 50, bottom: 50,
}, },
dataZoom: { // dataZoom: {
type: 'slider', // type: "slider",
start: 0, // start: 0,
end: this.dataZoomEnd(mapList.length, 5), // end: this.dataZoomEnd(mapList.length, 5),
}, // },
series: [ dataZoom: [
{ {
name: '利润', type: "slider",
type: 'bar', textStyle: {
barWidth: 20, color: "#fff",
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', startValue: this.dataZoomStart(mapList.length, 4, "start"),
endValue: this.dataZoomStart(mapList.length, 4, "end"),
}, },
{ {
name: '利润目标完成率', type: "inside",
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',
}, },
], ],
}) 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

187
src/views/bigScreen/securityManage/right1.vue
View File

@ -10,45 +10,44 @@
</template> </template>
<script> <script>
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import container2 from './components/container2/index.vue' import container2 from "./components/container2/index.vue";
import bigScreenTabs from '../components/bigScreenTabs/index.vue' import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import progressBar from '@/views/bigScreen/components/progress/index.vue' import progressBar from "@/views/bigScreen/components/progress/index.vue";
import colorList from '@/utils/colorPalette' import colorList from "@/utils/colorPalette";
// import {Liquid} from '@antv/g2plot'; // import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize' // import resize from '../../dashboard/mixins/resize'
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
export default { export default {
// mixins: [resize], // mixins: [resize],
name: 'left1', name: "left1",
components: { components: {
rocketTit, rocketTit,
container2, container2,
bigScreenTabs, bigScreenTabs,
progressBar, progressBar,
}, },
data () { data() {
return { return {
colorList, colorList,
chart1: null, chart1: null,
chart2: null, chart2: null,
} };
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
this.initLine() this.initLine();
}) });
}, },
beforeDestroy () { }, beforeDestroy() {},
methods: { methods: {
initChart () { initChart() {
this.request({ this.request({
url: '/hx/securityManagement/dangerSource', url: "/hx/securityManagement/dangerSource",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let titData = res.data.allLevel; let titData = res.data.allLevel;
let data = res.data; let data = res.data;
@ -56,7 +55,7 @@ export default {
let titList = []; let titList = [];
let valList = []; let valList = [];
for (let index = 0; index < titData.length; index++) { for (let index = 0; index < titData.length; index++) {
valList.push([]) valList.push([]);
} }
// var a = { // var a = {
// titData: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'], // titData: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
@ -76,25 +75,25 @@ export default {
titList.push(key); titList.push(key);
for (let i = 0; i < item.length; i++) { for (let i = 0; i < item.length; i++) {
const ele = item[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; valList[index][titList.length - 1] = ele.COUNTNUMBER;
} }
} }
} }
this.chart1 = echarts.init(this.$refs.left1) this.chart1 = echarts.init(this.$refs.left1);
this.chart1.setOption({ this.chart1.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
}, },
legend: { legend: {
// data: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'], // data: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
data: titData, data: titData,
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: "#fff", //legend字体颜色
}, },
}, },
grid: { grid: {
@ -104,63 +103,75 @@ export default {
bottom: 50, bottom: 50,
containLabel: true, containLabel: true,
}, },
dataZoom: { // dataZoom: {
type: 'slider', // type: 'slider',
start: 0, // start: 0,
end: this.dataZoomEnd(titList.length, 5), // end: this.dataZoomEnd(titList.length, 5),
}, // },
color: ['#5B8FF9', '#55C5A2', '#F7DC87', '#FF9F43'], 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: [ xAxis: [
{ {
type: 'category', type: "category",
// data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'], // data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
data: titList, data: titList,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
name: '个', name: "个",
splitLine: { splitLine: {
show: true, show: true,
// 改变轴线颜色 // 改变轴线颜色
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'], color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
}, },
], ],
series: [ series: [
...valList.map((e, index) => { ...valList.map((e, index) => {
return { return {
name: titData[index], name: titData[index],
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
barWidth: 30, barWidth: 30,
data: e, data: e,
} };
}) }),
// { // {
// name: '四级危险源', // name: '四级危险源',
// type: 'bar', // type: 'bar',
@ -214,19 +225,17 @@ export default {
// data: [150, 232, 201, 154, 190, 330, 410], // data: [150, 232, 201, 154, 190, 330, 410],
// }, // },
], ],
}) });
} }
}) });
this.setOptions() this.setOptions();
}, },
setOptions () { setOptions() {},
initLine() {
},
initLine () {
this.request({ this.request({
url: '/hx/securityManagement/dangerPoint', url: "/hx/securityManagement/dangerPoint",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let titData = res.data.allLevel; let titData = res.data.allLevel;
let data = res.data; let data = res.data;
@ -234,7 +243,7 @@ export default {
let titList = []; let titList = [];
let valList = []; let valList = [];
for (let index = 0; index < titData.length; index++) { for (let index = 0; index < titData.length; index++) {
valList.push([]) valList.push([]);
} }
for (const key in data) { for (const key in data) {
if (Object.hasOwnProperty.call(data, key)) { if (Object.hasOwnProperty.call(data, key)) {
@ -242,24 +251,24 @@ export default {
titList.push(key); titList.push(key);
for (let i = 0; i < item.length; i++) { for (let i = 0; i < item.length; i++) {
const ele = item[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; valList[index][titList.length - 1] = ele.COUNTNUMBER;
} }
} }
} }
this.chart2 = echarts.init(this.$refs.left2) this.chart2 = echarts.init(this.$refs.left2);
this.chart2.setOption({ this.chart2.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
}, },
legend: { legend: {
// data: ['一级危险源', '二级危险源', '三级危险源'], // data: ['一级危险源', '二级危险源', '三级危险源'],
data: titData, data: titData,
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: "#fff", //legend字体颜色
}, },
}, },
grid: { grid: {
@ -269,62 +278,74 @@ export default {
bottom: 50, bottom: 50,
containLabel: true, containLabel: true,
}, },
dataZoom: { // dataZoom: {
type: 'slider', // type: "slider",
start: 0, // start: 0,
end: this.dataZoomEnd(titList.length, 5), // end: this.dataZoomEnd(titList.length, 5),
}, // },
color: ['#5B8FF9', '#55C5A2', '#F7DC87', '#FF9F43'], 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: [ xAxis: [
{ {
type: 'category', type: "category",
data: titList, data: titList,
// data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'], // data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
name: '个', name: "个",
splitLine: { splitLine: {
show: true, show: true,
// 改变轴线颜色 // 改变轴线颜色
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'], color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
}, },
], ],
series: [ series: [
...valList.map((e, index) => { ...valList.map((e, index) => {
return { return {
name: titData[index], name: titData[index],
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
barWidth: 30, barWidth: 30,
data: e, data: e,
} };
}), }),
// { // {
// name: '三级危险源', // name: '三级危险源',
@ -366,14 +387,12 @@ export default {
// data: [150, 232, 201, 154, 190, 330, 410], // data: [150, 232, 201, 154, 190, 330, 410],
// }, // },
], ],
}) });
} }
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

3
vue.config.js
View File

@ -35,7 +35,8 @@ module.exports = {
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
// target: `http://localhost:1818`, // target: `http://localhost:1818`,
// target: `http://120.26.107.74: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`, // target: `http://124.70.138.50:1818`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {