add
This commit is contained in:
熊丽君
@ -3,19 +3,19 @@
|
||||
<div class="left1">
|
||||
<left1></left1>
|
||||
</div>
|
||||
<div class="left2">
|
||||
<!-- <div class="left2">
|
||||
<left2></left2>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="bg1"></div> -->
|
||||
|
||||
<div class="center1">
|
||||
<center1></center1>
|
||||
<!-- <center1></center1> -->
|
||||
</div>
|
||||
<!-- <div class="center2">
|
||||
<center2></center2>
|
||||
</div> -->
|
||||
<div class="right1">
|
||||
<right1></right1>
|
||||
<!-- <right1></right1> -->
|
||||
</div>
|
||||
|
||||
<div class="right2">
|
||||
|
||||
@ -13,6 +13,8 @@
|
||||
>
|
||||
</el-pagination>
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
<!-- <div style="height: 100%; width: 100%" ref="chartOdd" v-if="isOdd"></div>
|
||||
<div style="height: 100%; width: 100%" ref="chartEven"></div> -->
|
||||
</container2>
|
||||
<container2 title="综合指标" style="margin-top: 10px">
|
||||
<bigScreenTabs
|
||||
@ -158,6 +160,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOdd: true,
|
||||
currentPage1: 1,
|
||||
dataList: [],
|
||||
total: 0,
|
||||
@ -198,14 +201,13 @@ export default {
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
if (res.data.length % 2 == 0) {
|
||||
this.total = res.data.length;
|
||||
this.dataList = res.data;
|
||||
if (res.data.length && res.data.length % 2 == 0) {
|
||||
this.isOdd = true;
|
||||
} else {
|
||||
this.total = res.data.length - 1;
|
||||
res.data.splice(this.total);
|
||||
this.dataList = res.data;
|
||||
this.setData(this.dataList.slice(0, 2));
|
||||
this.isOdd = false;
|
||||
this.setData(res.data.slice(0, 2));
|
||||
}
|
||||
// if (res.data.length > 2) {
|
||||
// list = res.data.splice(0, 2);
|
||||
@ -220,7 +222,11 @@ export default {
|
||||
const data = this.dataList.slice(val * 2 - 2, val * 2);
|
||||
this.setData(data);
|
||||
},
|
||||
|
||||
// this.chart = echarts.init(this.$refs.chartOdd, "macarons");
|
||||
|
||||
setData(list) {
|
||||
if (list.length < 2) return this.setOddEchars(list);
|
||||
this.chart = echarts.init(this.$refs.chart, "macarons");
|
||||
let arr1 = [
|
||||
...list[0].value.map((e) => parseInt(e.startNumber)),
|
||||
@ -393,6 +399,100 @@ export default {
|
||||
],
|
||||
});
|
||||
},
|
||||
setOddEchars(list) {
|
||||
console.log(list);
|
||||
let arr1 = [
|
||||
...list[0].value.map((e) => parseInt(e.startNumber)),
|
||||
...list[0].value.map((e) => parseInt(e.endNumber)),
|
||||
...list[0].value.map((e) => parseInt(e.yearTarget)),
|
||||
];
|
||||
let max0 = Math.max.apply(null, arr1);
|
||||
this.chart.dispose();
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: list[0].key,
|
||||
left: "19%",
|
||||
bottom: 5,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "600",
|
||||
fontFamily: "sans-serif",
|
||||
fontSize: 18,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
left: "center",
|
||||
data: ["初期", "当年目标", "末期"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
color: ["#5AD8A6", "#F6D97E", "#5B8FF9"],
|
||||
radar: [
|
||||
{
|
||||
indicator: [
|
||||
...list[0].value.map((e, index) => {
|
||||
if (index == 0) {
|
||||
// return { name: e.indexName, axisLabel: { show: true }, color: '#fff' };
|
||||
return {
|
||||
name: e.indexName,
|
||||
max: max0,
|
||||
axisLabel: { show: true },
|
||||
color: "#fff",
|
||||
};
|
||||
}
|
||||
return {
|
||||
name: e.indexName,
|
||||
// max: Math.max(...list[0].value.map(e => e.startNumber),...list[0].value.map(e => e.indexName),...list[0].value.map(e => e.endNumber) )
|
||||
};
|
||||
}),
|
||||
// { name: '登陆频次', max: 6500, axisLabel: { show: true }, color: '#fff' },
|
||||
],
|
||||
center: ["25.5%", "50%"],
|
||||
radius: 50,
|
||||
name: {
|
||||
// (圆外的标签)雷达图每个指示器名称的配置项。
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
// 最大值
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "radar",
|
||||
data: [
|
||||
{
|
||||
value: list[0].value.map((e) => e.startNumber),
|
||||
name: "初期",
|
||||
label: {
|
||||
normal: {
|
||||
// show: true,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: list[0].value.map((e) => e.yearTarget),
|
||||
name: "当年目标",
|
||||
},
|
||||
{
|
||||
value: list[0].value.map((e) => e.endNumber),
|
||||
name: "末期",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
initLine() {
|
||||
this.request({
|
||||
url: "/hx/operating/getHxSynthesizeIndexPic",
|
||||
|
||||
@ -319,44 +319,220 @@ export default {
|
||||
// console.log(list.filter(e => e.category == '其他').map(e => e.realQuantity))
|
||||
this.initChart3(categoryTotal);
|
||||
|
||||
let newArray = [];
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const item = list[i];
|
||||
newArray.push([]);
|
||||
for (let j = 0; j < item.length; j++) {
|
||||
const item2 = item[j];
|
||||
if (item2.realQuantity) {
|
||||
item2["completionRate"] = (
|
||||
item2.realQuantity / item2.planQuantity
|
||||
).toFixed(4);
|
||||
newArray[i].push(item2);
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(newArray);
|
||||
var app = {};
|
||||
var posList = [
|
||||
"left",
|
||||
"right",
|
||||
"top",
|
||||
"bottom",
|
||||
"inside",
|
||||
"insideTop",
|
||||
"insideLeft",
|
||||
"insideRight",
|
||||
"insideBottom",
|
||||
"insideTopLeft",
|
||||
"insideTopRight",
|
||||
"insideBottomLeft",
|
||||
"insideBottomRight",
|
||||
];
|
||||
|
||||
app.configParameters = {
|
||||
rotate: {
|
||||
min: -90,
|
||||
max: 90,
|
||||
},
|
||||
align: {
|
||||
options: {
|
||||
left: "left",
|
||||
center: "center",
|
||||
right: "right",
|
||||
},
|
||||
},
|
||||
verticalAlign: {
|
||||
options: {
|
||||
top: "top",
|
||||
middle: "middle",
|
||||
bottom: "bottom",
|
||||
},
|
||||
},
|
||||
position: {
|
||||
options: echarts.util.reduce(
|
||||
posList,
|
||||
function (map, pos) {
|
||||
map[pos] = pos;
|
||||
return map;
|
||||
},
|
||||
{}
|
||||
),
|
||||
},
|
||||
distance: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
},
|
||||
};
|
||||
|
||||
app.config = {
|
||||
rotate: 90,
|
||||
align: "left",
|
||||
verticalAlign: "middle",
|
||||
position: "insideBottom",
|
||||
distance: 15,
|
||||
onChange: function () {
|
||||
var labelOption = {
|
||||
normal: {
|
||||
rotate: app.config.rotate,
|
||||
align: app.config.align,
|
||||
verticalAlign: app.config.verticalAlign,
|
||||
position: app.config.position,
|
||||
distance: app.config.distance,
|
||||
},
|
||||
};
|
||||
myChart.setOption({
|
||||
series: [
|
||||
{
|
||||
label: labelOption,
|
||||
},
|
||||
{
|
||||
label: labelOption,
|
||||
},
|
||||
{
|
||||
label: labelOption,
|
||||
},
|
||||
{
|
||||
label: labelOption,
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
var labelOption = {
|
||||
show: true,
|
||||
position: app.config.position,
|
||||
distance: app.config.distance,
|
||||
align: app.config.align,
|
||||
verticalAlign: app.config.verticalAlign,
|
||||
rotate: app.config.rotate,
|
||||
formatter: "{c} {name|{a}}",
|
||||
fontSize: 16,
|
||||
rich: {
|
||||
name: {
|
||||
textBorderColor: "#fff",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
this.chart2 = echarts.init(this.$refs.chart2);
|
||||
this.chart2.setOption({
|
||||
color: colorList,
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
// 进行数据处理
|
||||
formatter: function (params) {
|
||||
var html = "";
|
||||
if (params.length != 0) {
|
||||
// 可以自己打印一下console.info(params[0]);
|
||||
var getName = params[0].name;
|
||||
html += getName + "<br/>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
// 如果为0 为空的数据我们不要了(你们可以直接判断 > 0)
|
||||
if (
|
||||
params[i].value != null &&
|
||||
params[i].value != 0 &&
|
||||
params[i].value != ""
|
||||
) {
|
||||
html += params[i].marker;
|
||||
html +=
|
||||
params[i].seriesName + ": " + params[i].value + "<br/>";
|
||||
}
|
||||
}
|
||||
}
|
||||
return html;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// data: ['利润', '利润预测', '利润目标完成率'],
|
||||
// left: 0,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
data: ["Forest", "Steppe", "Desert"],
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: "vertical",
|
||||
left: "right",
|
||||
top: "center",
|
||||
feature: {
|
||||
mark: { show: true },
|
||||
dataView: { show: true, readOnly: false },
|
||||
magicType: {
|
||||
show: true,
|
||||
type: ["line", "bar", "stack", "tiled"],
|
||||
},
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: 50,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "6%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: monthList,
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
axisTick: { show: false },
|
||||
position: "bottom",
|
||||
data: ["2012", "", "", "", ""],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
axisTick: { show: false },
|
||||
position: "bottom",
|
||||
data: ["", "2013", "", "", ""],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
axisTick: { show: false },
|
||||
position: "bottom",
|
||||
data: ["", "", "2014", "", ""],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
axisTick: { show: false },
|
||||
position: "bottom",
|
||||
data: ["", "", "", "2015", ""],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
axisTick: { show: false },
|
||||
position: "bottom",
|
||||
data: ["", "", "", "", "2016"],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
@ -366,40 +542,20 @@ export default {
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "",
|
||||
min: 0,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ["rgba(255, 255, 255,.5)"],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
// interval: 5,
|
||||
axisLabel: {
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
@ -407,96 +563,95 @@ export default {
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
width: "99%",
|
||||
left: 0,
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(monthList.length, 4),
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "稀土",
|
||||
name: "Forest",
|
||||
type: "bar",
|
||||
data: list.map(
|
||||
(e) => e.filter((e) => e.category == "稀土")[0].realQuantity
|
||||
),
|
||||
itemStyle: {
|
||||
color: "#E3F5C2",
|
||||
},
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
xAxisIndex: 0,
|
||||
data: [320],
|
||||
},
|
||||
{
|
||||
name: "隔热",
|
||||
name: "Steppe",
|
||||
type: "bar",
|
||||
data: list.map(
|
||||
(e) => e.filter((e) => e.category == "隔热")[0].realQuantity
|
||||
),
|
||||
itemStyle: {
|
||||
color: "#45D1CC",
|
||||
},
|
||||
label: labelOption,
|
||||
xAxisIndex: 0,
|
||||
data: [220],
|
||||
},
|
||||
{
|
||||
name: "其他",
|
||||
name: "Desert",
|
||||
type: "bar",
|
||||
data: list.map(
|
||||
(e) => e.filter((e) => e.category == "其他")[0].realQuantity
|
||||
),
|
||||
itemStyle: {
|
||||
color: "#61C1FB",
|
||||
},
|
||||
label: labelOption,
|
||||
xAxisIndex: 0,
|
||||
data: [332],
|
||||
},
|
||||
{
|
||||
name: "稀土完成率",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: [
|
||||
12.0, 12.2, 13.3, 14.5, 16.3, 10.2, 20.3, 23.4, 23.0, 16.5,
|
||||
12.0, 6.2,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#E3F5C2",
|
||||
},
|
||||
},
|
||||
symbol: "none",
|
||||
name: "Forest",
|
||||
type: "bar",
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
xAxisIndex: 1,
|
||||
data: ["", 320],
|
||||
},
|
||||
{
|
||||
name: "隔热完成率",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: [
|
||||
14.0, 14.2, 16.3, 18.5, 12.3, 20.2, 40.3, 43.4, 43.0, 26.5,
|
||||
22.0, 12.2,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#45D1CC",
|
||||
},
|
||||
},
|
||||
symbol: "none",
|
||||
name: "Steppe",
|
||||
type: "bar",
|
||||
label: labelOption,
|
||||
xAxisIndex: 1,
|
||||
data: ["", 220],
|
||||
},
|
||||
{
|
||||
name: "其他完成率",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: [
|
||||
22.0, 22.2, 32.3, 42.5, 26.3, 50.2, 30.3, 43.4, 43.0, 56.5,
|
||||
42.0, 56.2,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#61C1FB",
|
||||
name: "Desert",
|
||||
type: "bar",
|
||||
label: labelOption,
|
||||
xAxisIndex: 1,
|
||||
data: ["", 232],
|
||||
},
|
||||
{
|
||||
name: "Forest",
|
||||
type: "bar",
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
xAxisIndex: 2,
|
||||
data: ["", "", 320],
|
||||
},
|
||||
symbol: "none",
|
||||
{
|
||||
name: "Steppe",
|
||||
type: "bar",
|
||||
label: labelOption,
|
||||
xAxisIndex: 2,
|
||||
data: ["", "", 420],
|
||||
},
|
||||
{
|
||||
name: "Desert",
|
||||
type: "bar",
|
||||
label: labelOption,
|
||||
xAxisIndex: 2,
|
||||
data: ["", "", 232],
|
||||
},
|
||||
{
|
||||
name: "Forest",
|
||||
type: "bar",
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
xAxisIndex: 3,
|
||||
data: ["", "", "", 320],
|
||||
},
|
||||
{
|
||||
name: "Forest",
|
||||
type: "bar",
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
xAxisIndex: 4,
|
||||
data: ["", "", "", "", 620],
|
||||
},
|
||||
{
|
||||
name: "Steppe",
|
||||
type: "bar",
|
||||
label: labelOption,
|
||||
xAxisIndex: 4,
|
||||
data: ["", "", "", "", 290],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
>
|
||||
<div class="con_title con_title_bg1">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">一级：{{ v.pointName }}</span>
|
||||
<span style="margin-left: 2px">Ⅰ级：{{ v.pointName }}</span>
|
||||
</div>
|
||||
<div class="com_img" @click="handleItem(v)">
|
||||
<img src="./img/left1/icon1.png" alt="" />
|
||||
@ -34,7 +34,7 @@
|
||||
>
|
||||
<div class="con_title con_title_bg2">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">二级：{{ v.pointName }}</span>
|
||||
<span style="margin-left: 2px">Ⅱ级：{{ v.pointName }}</span>
|
||||
</div>
|
||||
<div class="com_img" @click="handleItem(v)">
|
||||
<img src="./img/left1/icon2.png" alt="" />
|
||||
@ -47,7 +47,7 @@
|
||||
>
|
||||
<div class="con_title con_title_bg3">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">三级：{{ v.pointName }}</span>
|
||||
<span style="margin-left: 2px">Ⅲ级：{{ v.pointName }}</span>
|
||||
</div>
|
||||
<div class="com_img" @click="handleItem(v)">
|
||||
<img src="./img/left1/icon3.png" alt="" />
|
||||
|
||||
@ -34,8 +34,8 @@ module.exports = {
|
||||
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
// target: `http://localhost:1818`,
|
||||
target: `http://120.26.107.74:1818`,
|
||||
// target: `http://192.168.0.115:1818`,
|
||||
// target: `http://120.26.107.74:1818`,
|
||||
target: `http://192.168.0.115:1818`,
|
||||
// target: `http://124.70.138.50:1818`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
|
||||
Reference in New Issue
Block a user