514 lines
15 KiB
Vue
514 lines
15 KiB
Vue
<template>
|
||
<Card title="偏差预警">
|
||
<div class="list">
|
||
<div style="margin-left: 436px; position: absolute; margin-top: -20px">
|
||
<el-date-picker
|
||
v-model="checkDate"
|
||
type="month"
|
||
value-format="yyyy-MM"
|
||
@change="checkTypes"
|
||
placeholder="选择月"
|
||
>
|
||
</el-date-picker>
|
||
</div>
|
||
<div id="mainLeft"></div>
|
||
<!-- <div id="mainRight"></div> -->
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
<script>
|
||
import { getDetailsStatisticsListApi } from "@/assets/js/api/zhongjianFourth.js";
|
||
import Card from "../components/Card.vue";
|
||
import CarTable from "./components/CarTable.vue";
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
components: { Card, CarTable },
|
||
data() {
|
||
return {
|
||
sn: "",
|
||
checkDate: "2023-01",
|
||
gridNameRightData:[],
|
||
gridNameRight:[],
|
||
gridNameLeft:[],
|
||
gridNameLeftData:[]
|
||
};
|
||
},
|
||
mounted() {
|
||
// this.echartsItemRight();
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
checkTypes(val) {
|
||
this.gridNameLeft= []
|
||
this.gridNameLeftData = []
|
||
this.gridNameRight = []
|
||
this.gridNameRightData = []
|
||
console.log("类型或者时间修改事件值 ：", val);
|
||
this.getData()
|
||
},
|
||
//查询
|
||
getData() {
|
||
this.sn = this.$store.state.projectSn;
|
||
getDetailsStatisticsListApi({
|
||
date:this.checkDate,
|
||
projectSn: this.sn,
|
||
}).then((res) => {
|
||
console.log("查询偏差明细", res);
|
||
let LeftLength = 0;
|
||
if(res.result.length >= 1){
|
||
if(res.result.length % 2 == 0) {
|
||
LeftLength = res.result.length / 2
|
||
}else{
|
||
LeftLength = (res.result.length / 2)+1
|
||
}
|
||
|
||
for(let i = 1; i <= res.result.length; i++) {
|
||
if(i <= LeftLength) {
|
||
this.gridNameLeft.push(res.result[i-1].typeName)
|
||
this.gridNameLeftData.push(Math.abs(res.result[i-1].deviationRatio))
|
||
}else{
|
||
this.gridNameRight.push(res.result[i-1].typeName)
|
||
this.gridNameRightData.push(Math.abs(res.result[i-1].deviationRatio))
|
||
}
|
||
}
|
||
}
|
||
|
||
console.log("this.gridNameLeft :" + this.gridNameLeft+ " -- this.gridNameLeftData :"+this.gridNameLeftData +" --this.gridNameRight :"+ this.gridNameRight+"--this.gridNameRightData:"+ this.gridNameRightData);
|
||
|
||
this.echartsItemLeft();
|
||
|
||
});
|
||
},
|
||
echartsItemLeft() {
|
||
var chartDom = document.getElementById("mainLeft");
|
||
var myChart = echarts.init(chartDom);
|
||
var option = {
|
||
// backgroundColor: {
|
||
// type: "linear",
|
||
// x: 0,
|
||
// y: 0,
|
||
// x2: 0,
|
||
// y2: 1,
|
||
// colorStops: [
|
||
// {
|
||
// offset: 0,
|
||
// color: "#061B31", // 0% 处的颜色
|
||
// },
|
||
// {
|
||
// offset: 0.25,
|
||
// color: "#123457", // 25% 处的颜色
|
||
// },
|
||
// {
|
||
// offset: 0.75,
|
||
// color: "#0C254A", // 75% 处的颜色
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: "#0A213E", // 100% 处的颜色
|
||
// },
|
||
// ],
|
||
// global: false, // 缺省为 false
|
||
// },
|
||
grid: [
|
||
{
|
||
//左侧的柱状图grid
|
||
width: "46%",
|
||
left: "1%",
|
||
top: "16%",
|
||
right: "0",
|
||
bottom: "0",
|
||
},
|
||
{
|
||
//右侧的柱状图grid
|
||
width: "46%",
|
||
left: "51%",
|
||
top: "16%",
|
||
right: "0",
|
||
bottom: "0",
|
||
},
|
||
],
|
||
xAxis: [
|
||
{
|
||
//左侧柱状图的X轴
|
||
gridIndex: 0, //x 轴所在的 grid 的索引
|
||
show: false,
|
||
},
|
||
{
|
||
//右侧柱状图的X轴
|
||
gridIndex: 1, //x 轴所在的 grid 的索引
|
||
show: false,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
//左侧柱状图的Y轴
|
||
gridIndex: 0, //y轴所在的 grid 的索引
|
||
splitLine: "none",
|
||
axisTick: "none",
|
||
axisLine: "none",
|
||
axisLabel: {
|
||
verticalAlign: "bottom",
|
||
align: "left",
|
||
padding: [0, 0, 15, 15],
|
||
textStyle: {
|
||
color: "#befbff",
|
||
fontSize: "12",
|
||
},
|
||
},
|
||
data: this.gridNameLeft,
|
||
inverse: true,
|
||
},
|
||
{
|
||
//左侧柱状图的Y轴
|
||
gridIndex: 0, //y轴所在的 grid 的索引
|
||
splitLine: "none",
|
||
axisTick: "none",
|
||
axisLine: "none",
|
||
data: this.gridNameLeftData,
|
||
inverse: true,
|
||
axisLabel: {
|
||
show: true,
|
||
verticalAlign: "bottom",
|
||
align: "right",
|
||
padding: [0, 20, 15, 0],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "12",
|
||
},
|
||
formatter: function (value) {
|
||
return "{x|" + value + "} {y|" + "%}";
|
||
},
|
||
rich: {
|
||
y: {
|
||
color: "#befbff",
|
||
fontSize: 10,
|
||
},
|
||
x: {
|
||
color: "#f6cf42",
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
//左侧柱状图的Y轴
|
||
gridIndex: 0, //y轴所在的 grid 的索引
|
||
splitLine: "none",
|
||
axisTick: "none",
|
||
axisLine: "none",
|
||
data: [],
|
||
},
|
||
|
||
{
|
||
//右侧柱状图的Y轴
|
||
gridIndex: 1, //y轴所在的 grid 的索引
|
||
splitLine: "none",
|
||
axisTick: "none",
|
||
axisLine: "none",
|
||
axisLabel: {
|
||
verticalAlign: "bottom",
|
||
align: "left",
|
||
padding: [0, 0, 15, 15],
|
||
textStyle: {
|
||
color: "#befbff",
|
||
fontSize: "12",
|
||
},
|
||
},
|
||
data: this.gridNameRight,
|
||
inverse: true,
|
||
},
|
||
{
|
||
//右侧柱状图的Y轴
|
||
gridIndex: 1, //y轴所在的 grid 的索引
|
||
splitLine: "none",
|
||
axisTick: "none",
|
||
axisLine: "none",
|
||
data: this.gridNameRightData,
|
||
inverse: true,
|
||
axisLabel: {
|
||
show: true,
|
||
verticalAlign: "bottom",
|
||
align: "right",
|
||
padding: [0, 20, 15, 0],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "10",
|
||
},
|
||
formatter: function (value) {
|
||
return "{x|" + value + "} {y|" + "%}";
|
||
},
|
||
rich: {
|
||
y: {
|
||
color: "#befbff",
|
||
fontSize: 10,
|
||
},
|
||
x: {
|
||
color: "#f6cf42",
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
//右侧柱状图的Y轴
|
||
gridIndex: 1, //y轴所在的 grid 的索引
|
||
splitLine: "none",
|
||
axisTick: "none",
|
||
axisLine: "none",
|
||
data: [],
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "值",
|
||
type: "bar",
|
||
xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
|
||
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
|
||
data: this.gridNameLeftData,
|
||
barWidth: 15,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#49bdff", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#54ffd5", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
barBorderRadius: 6,
|
||
},
|
||
},
|
||
z: 2,
|
||
},
|
||
{
|
||
name: "外框",
|
||
type: "bar",
|
||
xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
|
||
yAxisIndex: 2, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
|
||
barGap: "-100%",
|
||
data: [100, 100, 100, 100],
|
||
barWidth: 15,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#2d5271",
|
||
barBorderRadius: 6,
|
||
},
|
||
},
|
||
z: 0,
|
||
},
|
||
{
|
||
name: "值",
|
||
type: "bar",
|
||
xAxisIndex: 1, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
|
||
yAxisIndex: 3, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
|
||
data: this.gridNameRightData,
|
||
barWidth: 15,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#49bdff", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#54ffd5", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
barBorderRadius: 6,
|
||
},
|
||
},
|
||
z: 2,
|
||
},
|
||
{
|
||
name: "外框",
|
||
type: "bar",
|
||
xAxisIndex: 1, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
|
||
yAxisIndex: 5, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
|
||
barGap: "-100%",
|
||
data: [100, 100, 100, 100],
|
||
barWidth: 15,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#2d5271",
|
||
barBorderRadius: 6,
|
||
},
|
||
},
|
||
z: 0,
|
||
},
|
||
],
|
||
};
|
||
option && myChart.setOption(option);
|
||
},
|
||
// echartsItemRight() {
|
||
// var chartDom = document.getElementById('mainRight')
|
||
// var myChart = echarts.init(chartDom)
|
||
|
||
// var data = [50,80,20,60]
|
||
// var colorList = []
|
||
// colorList[0] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
// { offset: 0, color: 'rgb(193, 174, 87)' },
|
||
// { offset: 1, color: 'rgb(222, 87, 51)' }
|
||
// ])
|
||
// colorList[1] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
// { offset: 0, color: 'rgb(193, 174, 87)' },
|
||
// { offset: 1, color: 'rgb(222, 87, 51)' }
|
||
// ])
|
||
// colorList[2] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
// { offset: 0, color: 'rgb(193, 174, 87)' },
|
||
// { offset: 1, color: 'rgb(222, 87, 51)' }
|
||
// ])
|
||
// colorList[3] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
// { offset: 0, color: 'rgb(193, 174, 87)' },
|
||
// { offset: 1, color: 'rgb(222, 87, 51)' }
|
||
// ])
|
||
// var option
|
||
// option = {
|
||
// // backgroundColor: '#100c29',
|
||
// grid: {
|
||
// top:'0',
|
||
// left: '10%',
|
||
// right: '10%',
|
||
// bottom: '0',
|
||
// containLabel: true
|
||
// },
|
||
// xAxis: {
|
||
// type: 'value',
|
||
// splitLine: {
|
||
// show: false
|
||
// },
|
||
// offset: 10,
|
||
// axisTick: {
|
||
// show: false
|
||
// },
|
||
// axisLine: {
|
||
// show: false
|
||
// },
|
||
// axisLabel: {
|
||
// show: false
|
||
// }
|
||
// },
|
||
// yAxis: {
|
||
// axisLabel: {
|
||
// show: true,
|
||
// textStyle: {
|
||
// color: '#FFFFFF', //y轴字体颜色
|
||
// fontSize:'15px'
|
||
// },
|
||
// },
|
||
// splitLine: {show: false}, //横向的线
|
||
// axisTick: {show: false}, //y轴的端点
|
||
// axisLine: {show: false}, //y轴的线
|
||
// data: ["加砌块","钢构","幕墙","瓷砖"]
|
||
// },
|
||
// series: [
|
||
// {
|
||
// type: 'bar',
|
||
// barWidth: '15px',
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: function(params) {
|
||
// console.log(params)
|
||
// return colorList[params.dataIndex]
|
||
// }
|
||
// }
|
||
// },
|
||
// z: 9999,
|
||
// data: data
|
||
// },
|
||
// {
|
||
// type: 'bar',
|
||
// barWidth: '20px',
|
||
// barGap: '-100%',
|
||
// z: 99,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: '#30373f'
|
||
// }
|
||
// },
|
||
// //百分比
|
||
// label: {
|
||
// show: true,
|
||
// offset: [100, 0,30,40],
|
||
// position: 'right',
|
||
// align: 'right',
|
||
// formatter: function(data) {
|
||
// for (let i = 0; i < data.length; i++) {
|
||
// return data[i] + '%'
|
||
// }
|
||
// }
|
||
// },
|
||
// data: data
|
||
// },
|
||
// {
|
||
// // 分隔
|
||
// type: 'pictorialBar',
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: 'rgb(43, 82, 141)'
|
||
// }
|
||
// },
|
||
// symbolRepeat: 'fixed',
|
||
// symbolMargin: 2,
|
||
// symbol: 'rect',
|
||
// symbolClip: true,
|
||
// symbolSize: [4, 20],
|
||
// symbolPosition: 'start',
|
||
// symbolOffset: [4, 0],
|
||
// data: [100,100,100,100],
|
||
// width: 25,
|
||
// z: 0,
|
||
// zlevel: 1
|
||
// }
|
||
// ]
|
||
// }
|
||
// option && myChart.setOption(option)
|
||
// }
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.list {
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
padding-top: 30px;
|
||
height: 100%;
|
||
}
|
||
#mainLeft {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
// #mainRight{
|
||
// width: 50%;
|
||
// height: 100%;
|
||
// }
|
||
::v-deep .el-input--suffix .el-input__inner {
|
||
background: transparent !important;
|
||
color: #fff !important;
|
||
border: 1px solid #66d3d8 !important ;
|
||
z-index: 999;
|
||
}
|
||
::v-deep .el-date-editor.el-input,
|
||
.el-date-editor.el-input__inner {
|
||
width: 160px;
|
||
}
|
||
</style>
|