1877 lines
53 KiB
Vue
1877 lines
53 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="left">
|
||
<img class="title" :src="src" />
|
||
<div class="pdsssdh">
|
||
<div class="imgBox">
|
||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||
<!-- <p>一号生产线实时负荷</p> -->
|
||
|
||
<p>{{ $route.query.type }}实时电荷</p>
|
||
</div>
|
||
<div class="data">
|
||
<span :class="res == '年' ? 'active' : ''" @click="res = '年'"
|
||
>年</span
|
||
>
|
||
<span :class="res == '月' ? 'active' : ''" @click="res = '月'"
|
||
>月</span
|
||
>
|
||
<span :class="res == '日' ? 'active' : ''" @click="res = '日'"
|
||
>日</span
|
||
>
|
||
</div>
|
||
<div id="pdsssdh"></div>
|
||
</div>
|
||
<div class="pdsydl">
|
||
<div class="imgBox">
|
||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||
<!-- <p>一号生产线用电量</p> -->
|
||
<p>{{ $route.query.type }}用电量</p>
|
||
</div>
|
||
<div class="data">
|
||
<span
|
||
:class="type == '总用电' ? 'active' : ''"
|
||
@click="type = '总用电'"
|
||
>总用电</span
|
||
>
|
||
<span
|
||
:class="type == '分时段' ? 'active' : ''"
|
||
@click="type = '分时段'"
|
||
>分时段</span
|
||
>
|
||
</div>
|
||
<div id="pdsydl"></div>
|
||
</div>
|
||
<div class="pdstpt">
|
||
<div class="imgBox">
|
||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||
<!-- <p>一号生产线用电量对比</p> -->
|
||
<p>{{ $route.query.type }}用电量对比</p>
|
||
</div>
|
||
<div id="pdstpt">
|
||
<div class="data">
|
||
<span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
|
||
>年</span
|
||
>
|
||
<span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
|
||
>月</span
|
||
>
|
||
<span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
|
||
>日</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="pdsjk">
|
||
<div class="imgBox">
|
||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||
<!-- <p>一号生产线监控</p> -->
|
||
<p>{{ $route.query.type }}监控</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="pdsjk">
|
||
<div class="title">
|
||
<p>设备数量：</p>
|
||
<span>5</span>
|
||
<p>个</p>
|
||
</div>
|
||
<el-table
|
||
:data="tableData"
|
||
:row-class-name="tableRowClassName"
|
||
style="width: 100%"
|
||
header-cell-style="background-color: #1969A8; color: white"
|
||
>
|
||
<el-table-column label="序号" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.$index + 1 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="date1"
|
||
label="生产工艺名称"
|
||
align="center"
|
||
width="300px"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column prop="date2" label="实时电荷" align="center"
|
||
><template slot-scope="scope">
|
||
<span style="color: #58ff70"> {{ scope.row.date2 }}</span
|
||
><span>kW</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date3" label="今日用电量" align="center"
|
||
><template slot-scope="scope">
|
||
<span style="color: #58caff"> {{ scope.row.date3 }}</span
|
||
><span>kWh</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date2" label="设备状态" align="center"
|
||
><template slot-scope="scope">
|
||
<span v-if="scope.row.date4"
|
||
><img src="../../../assets/KDFH/tongguo.png"
|
||
/></span>
|
||
<span v-else
|
||
><img src="../../../assets/KDFH/jinggao.png"
|
||
/></span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pdsjk">
|
||
<div class="imgBox">
|
||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||
<!-- <p>一号生产线监控</p> -->
|
||
<p>负荷占比</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="fhzb"></div>
|
||
<!-- 饼图下面的底座 -->
|
||
<div class="buttomCharts"></div>
|
||
</div>
|
||
</div>
|
||
<div class="pdsjk">
|
||
<div class="imgBox">
|
||
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||
<!-- <p>一号生产线用电排名</p> -->
|
||
<p>{{ $route.query.type }}用电排名</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="pdsjk">
|
||
<el-table
|
||
:data="tableData1"
|
||
:row-class-name="tableRowClassName"
|
||
style="width: 100%"
|
||
:header-cell-style="getHeaderCellStyle"
|
||
>
|
||
<el-table-column label="序号" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.$index + 1 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="date1"
|
||
label="配电室名称"
|
||
align="center"
|
||
width="300px"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column prop="date2" label="用电量" align="center"
|
||
><template slot-scope="scope">
|
||
<span style="color: #58caff"> {{ scope.row.date2 }}</span
|
||
><span>kWh</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import highcharts from "highcharts";
|
||
export default {
|
||
data() {
|
||
return {
|
||
res: "月",
|
||
res1: "月",
|
||
type: "总用电",
|
||
src: "",
|
||
option1: {
|
||
xAxis: {
|
||
type: "category",
|
||
data: ["1月", "2月", "3月", "4月", "5月"],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "单位:KW",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
min: 0,
|
||
max: 500,
|
||
interval: 100, // 指定刻度间隔
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
// 让图表占满容器
|
||
// top: "5%",
|
||
left: "8%",
|
||
right: "5%",
|
||
bottom: "8%",
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
symbol: "circle",
|
||
symbolSize: 20,
|
||
data: [200, 300, 500, 400, 334],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#00FF00",
|
||
lineStyle: {
|
||
width: 5, //折线宽度
|
||
color: "#21FF55", //折线颜色
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
// option2: {
|
||
// legend: {
|
||
// data: [
|
||
// { icon: "rect", name: "昨日" },
|
||
// { icon: "rect", name: "今日" },
|
||
// ],
|
||
// textStyle: {
|
||
// color: "#fff",
|
||
// fontSize: "20px",
|
||
// },
|
||
// },
|
||
// xAxis: {
|
||
// type: "category",
|
||
// data: ["1月", "2月", "3月", "4月", "5月"],
|
||
// axisLabel: {
|
||
// show: true,
|
||
// textStyle: {
|
||
// color: "#fff",
|
||
// fontSize: 20,
|
||
// },
|
||
// interval: 0, //代表显示所有x轴标签显示
|
||
// },
|
||
// },
|
||
// yAxis: {
|
||
// type: "value",
|
||
// name: "单位:kWh",
|
||
// nameTextStyle: {
|
||
// color: "#fff",
|
||
// fontSize: 20,
|
||
// padding: 10,
|
||
// },
|
||
// min: 0,
|
||
// max: 500,
|
||
// interval: 100, // 指定刻度间隔
|
||
// axisLabel: {
|
||
// show: true,
|
||
// textStyle: {
|
||
// color: "#fff",
|
||
// fontSize: 20,
|
||
// },
|
||
// },
|
||
// },
|
||
// grid: {
|
||
// // 让图表占满容器
|
||
// // top: "5%",
|
||
// left: "8%",
|
||
// right: "5%",
|
||
// bottom: "8%",
|
||
// },
|
||
// series: [
|
||
// {
|
||
// type: "bar",
|
||
// name: "昨日",
|
||
// data: [200, 300, 500, 400, 334],
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: "#11C3FF",
|
||
// lineStyle: {
|
||
// width: 5, //折线宽度
|
||
// color: "#11C3FF", //折线颜色
|
||
// },
|
||
// },
|
||
// },
|
||
// },
|
||
// {
|
||
// type: "bar",
|
||
// name: "今日",
|
||
// data: [200, 300, 500, 400, 334],
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: "#09E83E",
|
||
// lineStyle: {
|
||
// width: 5, //折线宽度
|
||
// color: "#09E83E", //折线颜色
|
||
// },
|
||
// },
|
||
// },
|
||
// },
|
||
// ],
|
||
// },
|
||
option3: {
|
||
legend: {
|
||
data: [
|
||
{ icon: "rect", name: "昨日" },
|
||
{ icon: "rect", name: "今日" },
|
||
],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "20px",
|
||
},
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "value",
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
data: ["生料磨", "生料收尘", "篦冷机", "熟料收尘", "回转窑"],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "昨日",
|
||
type: "bar",
|
||
data: [45, 55, 17, 60, 12],
|
||
itemStyle: {
|
||
color: "#3AF0FF", //折线颜色
|
||
},
|
||
},
|
||
{
|
||
name: "今日",
|
||
type: "bar",
|
||
data: [65, 65, 36, 19, 30],
|
||
itemStyle: {
|
||
color: "#5BFAB1", //折线颜色
|
||
},
|
||
},
|
||
],
|
||
},
|
||
tableData: [
|
||
{
|
||
date1: "回转窑",
|
||
date2: "20.34",
|
||
date3: "20.34",
|
||
date4: true,
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: "17.42",
|
||
date3: "17.42",
|
||
date4: true,
|
||
},
|
||
{
|
||
date1: "篦冷机",
|
||
date2: "12.22",
|
||
date3: "12.22",
|
||
date4: true,
|
||
},
|
||
{
|
||
date1: "生料收尘",
|
||
date2: "19.19",
|
||
date3: "19.19",
|
||
date4: false,
|
||
},
|
||
],
|
||
tableData1: [
|
||
{
|
||
date1: "总降电力室",
|
||
date2: "20.34",
|
||
},
|
||
{
|
||
date1: "矿山电力室",
|
||
date2: "17.42",
|
||
},
|
||
{
|
||
date1: "原材料电力室",
|
||
date2: "12.22",
|
||
},
|
||
{
|
||
date1: "一线生料磨电力室",
|
||
date2: "19.19",
|
||
},
|
||
{
|
||
date1: "二线生料磨电力室",
|
||
date2: "17.42",
|
||
},
|
||
{
|
||
date1: "窑尾电力室",
|
||
date2: "12.22",
|
||
},
|
||
],
|
||
optionData: [
|
||
{
|
||
name: "破碎系统",
|
||
value: 38,
|
||
itemStyle: {
|
||
color: "rgba(1, 224, 239,0.9)",
|
||
},
|
||
},
|
||
{
|
||
name: "生料系统", //名称
|
||
value: 41, //值
|
||
itemStyle: {
|
||
//颜色
|
||
color: "rgba(26, 166, 228,0.9)",
|
||
},
|
||
},
|
||
{
|
||
name: "水泥磨系统",
|
||
value: 21,
|
||
itemStyle: {
|
||
color: "rgba(81, 244, 193,0.9)",
|
||
},
|
||
},
|
||
],
|
||
option: {},
|
||
};
|
||
},
|
||
watch: {
|
||
// 监听,当路由发生变化的时候执行
|
||
$route: {
|
||
// $route可以用引号，也可以不用引号
|
||
handler(to, from) {
|
||
this.src = require(`../../../assets/img/标题/能源监测-电-${this.$route.query.type}.png`);
|
||
},
|
||
deep: true, // 深度观察监听
|
||
immediate: true, // 第一次初始化渲染就可以监听到
|
||
},
|
||
},
|
||
methods: {
|
||
defineEcharts(dom, option) {
|
||
var chartDom = document.getElementById(dom);
|
||
var myChart = this.$echarts.init(chartDom);
|
||
myChart.setOption(option);
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if ((rowIndex + 1) % 2 === 0) {
|
||
return "success-row";
|
||
}
|
||
return "";
|
||
},
|
||
//配电室用电量 3d
|
||
pdsydl() {
|
||
let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
|
||
let yaxisData = [90, 80, 100, 70, 65];
|
||
let yaxisData2 = [60, 56, 34, 69, 79];
|
||
|
||
const offsetX = 20;
|
||
const offsetY = 10;
|
||
// 绘制左侧面
|
||
const CubeLeft = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
// console.log(shape);
|
||
const c0 = [shape.x, shape.y];
|
||
const c1 = [shape.x - offsetX, shape.y - offsetY];
|
||
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
|
||
const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
||
ctx
|
||
.moveTo(c0[0], c0[1])
|
||
.lineTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
// 绘制右侧面
|
||
const CubeRight = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
||
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
|
||
const c4 = [shape.x + offsetX, shape.y - offsetY];
|
||
ctx
|
||
.moveTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.lineTo(c4[0], c4[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
// 绘制顶面
|
||
const CubeTop = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
|
||
const c3 = [shape.x, shape.y - offsetX];
|
||
const c4 = [shape.x - offsetX, shape.y - offsetY];
|
||
ctx
|
||
.moveTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.lineTo(c4[0], c4[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
// 注册三个面图形
|
||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||
|
||
const option = {
|
||
legend: {
|
||
data: [
|
||
{
|
||
name: "昨日",
|
||
textStyle: {
|
||
color: "white",
|
||
},
|
||
},
|
||
{
|
||
name: "今日",
|
||
textStyle: {
|
||
color: "white",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
// tooltip: {
|
||
// trigger: "axis",
|
||
// axisPointer: {
|
||
// type: "shadow",
|
||
// },
|
||
// // formatter: function (params) {
|
||
// // const item = params[1]
|
||
// // return item.name + ' : ' + item.value
|
||
// // }
|
||
// },
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: xaxisData,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
splitArea: false,
|
||
name: "单位:kWh",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: "#CEDDF2",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#2A353F",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "custom",
|
||
name: "昨日",
|
||
markPoint: {
|
||
data: [
|
||
{
|
||
type: "max",
|
||
name: "Max",
|
||
symbolOffset: [-20, 0],
|
||
itemStyle: {
|
||
color: "transparent", // 标注点颜色
|
||
},
|
||
// label 用于设置标注点上的文本标签样式
|
||
label: {
|
||
color: "#0BE73B", // 文本颜色
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
renderItem: (params, api) => {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
return {
|
||
type: "group",
|
||
x: -20,
|
||
children: [
|
||
{
|
||
type: "CubeLeft",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#09E63A",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#39E7C7",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeRight",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#00C35A",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#09C379",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeTop",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#05E6A5",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#12DE63",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
data: yaxisData,
|
||
},
|
||
{
|
||
type: "custom",
|
||
name: "今日",
|
||
markPoint: {
|
||
data: [
|
||
{
|
||
type: "max",
|
||
name: "Max",
|
||
symbolOffset: [25, 0],
|
||
itemStyle: {
|
||
color: "transparent", // 标注点颜色
|
||
},
|
||
// label 用于设置标注点上的文本标签样式
|
||
label: {
|
||
color: "#24BDF2", // 文本颜色
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
renderItem: (params, api) => {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
return {
|
||
type: "group",
|
||
x: 30,
|
||
children: [
|
||
{
|
||
type: "CubeLeft",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#4567FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#0CC7FA",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeRight",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#115DD5",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#0574D0",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeTop",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#0D7FFB",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#0440EB",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
data: yaxisData2,
|
||
},
|
||
],
|
||
};
|
||
this.defineEcharts("pdsydl", option);
|
||
},
|
||
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
|
||
bindListen(myChart) {
|
||
let that = this;
|
||
let selectedIndex = "";
|
||
let hoveredIndex = "";
|
||
// 监听点击事件，实现选中效果（单选）
|
||
myChart.on("click", function (params) {
|
||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
|
||
let isSelected =
|
||
!that.option.series[params.seriesIndex].pieStatus.selected;
|
||
let isHovered =
|
||
that.option.series[params.seriesIndex].pieStatus.hovered;
|
||
let k = that.option.series[params.seriesIndex].pieStatus.k;
|
||
let startRatio =
|
||
that.option.series[params.seriesIndex].pieData.startRatio;
|
||
let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
|
||
// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
|
||
if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
|
||
that.option.series[selectedIndex].parametricEquation =
|
||
that.getParametricEquation(
|
||
that.option.series[selectedIndex].pieData.startRatio,
|
||
that.option.series[selectedIndex].pieData.endRatio,
|
||
false,
|
||
false,
|
||
k,
|
||
that.option.series[selectedIndex].pieData.value
|
||
);
|
||
that.option.series[selectedIndex].pieStatus.selected = false;
|
||
}
|
||
// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
|
||
that.option.series[params.seriesIndex].parametricEquation =
|
||
that.getParametricEquation(
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
that.option.series[params.seriesIndex].pieData.value
|
||
);
|
||
that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
|
||
// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
|
||
isSelected ? (selectedIndex = params.seriesIndex) : null;
|
||
// 使用更新后的 option，渲染图表
|
||
myChart.setOption(that.option);
|
||
});
|
||
// 监听 mouseover，近似实现高亮（放大）效果
|
||
myChart.on("mouseover", function (params) {
|
||
// 准备重新渲染扇形所需的参数
|
||
let isSelected;
|
||
let isHovered;
|
||
let startRatio;
|
||
let endRatio;
|
||
let k;
|
||
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
|
||
if (hoveredIndex === params.seriesIndex) {
|
||
return;
|
||
// 否则进行高亮及必要的取消高亮操作
|
||
} else {
|
||
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
|
||
if (hoveredIndex !== "") {
|
||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
|
||
isSelected = that.option.series[hoveredIndex].pieStatus.selected;
|
||
isHovered = false;
|
||
startRatio = that.option.series[hoveredIndex].pieData.startRatio;
|
||
endRatio = that.option.series[hoveredIndex].pieData.endRatio;
|
||
k = that.option.series[hoveredIndex].pieStatus.k;
|
||
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
||
that.option.series[hoveredIndex].parametricEquation =
|
||
that.getParametricEquation(
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
that.option.series[hoveredIndex].pieData.value
|
||
);
|
||
that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
|
||
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
|
||
hoveredIndex = "";
|
||
}
|
||
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
|
||
if (
|
||
params.seriesName !== "mouseoutSeries" &&
|
||
params.seriesName !== "pie2d"
|
||
) {
|
||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
||
isSelected =
|
||
that.option.series[params.seriesIndex].pieStatus.selected;
|
||
isHovered = true;
|
||
startRatio =
|
||
that.option.series[params.seriesIndex].pieData.startRatio;
|
||
endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
|
||
k = that.option.series[params.seriesIndex].pieStatus.k;
|
||
// 对当前点击的扇形，执行高亮操作（对 option 更新）
|
||
that.option.series[params.seriesIndex].parametricEquation =
|
||
that.getParametricEquation(
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
that.option.series[params.seriesIndex].pieData.value + 5
|
||
);
|
||
that.option.series[params.seriesIndex].pieStatus.hovered =
|
||
isHovered;
|
||
// 记录上次高亮的扇形对应的系列号 seriesIndex
|
||
hoveredIndex = params.seriesIndex;
|
||
}
|
||
// 使用更新后的 option，渲染图表
|
||
myChart.setOption(that.option);
|
||
}
|
||
});
|
||
// 修正取消高亮失败的 bug
|
||
myChart.on("globalout", function () {
|
||
// 准备重新渲染扇形所需的参数
|
||
let isSelected;
|
||
let isHovered;
|
||
let startRatio;
|
||
let endRatio;
|
||
let k;
|
||
if (hoveredIndex !== "") {
|
||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
||
isSelected = that.option.series[hoveredIndex].pieStatus.selected;
|
||
isHovered = false;
|
||
k = that.option.series[hoveredIndex].pieStatus.k;
|
||
startRatio = that.option.series[hoveredIndex].pieData.startRatio;
|
||
endRatio = that.option.series[hoveredIndex].pieData.endRatio;
|
||
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
||
that.option.series[hoveredIndex].parametricEquation =
|
||
that.getParametricEquation(
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
that.option.series[hoveredIndex].pieData.value
|
||
);
|
||
that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
|
||
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
|
||
hoveredIndex = "";
|
||
}
|
||
// 使用更新后的 option，渲染图表
|
||
myChart.setOption(that.option);
|
||
});
|
||
},
|
||
//这是一个自定义计算的方法
|
||
fomatFloat(num, n) {
|
||
var f = parseFloat(num);
|
||
if (isNaN(f)) {
|
||
return false;
|
||
}
|
||
f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
|
||
var s = f.toString();
|
||
var rs = s.indexOf(".");
|
||
//判定如果是整数，增加小数点再补0
|
||
if (rs < 0) {
|
||
rs = s.length;
|
||
s += ".";
|
||
}
|
||
while (s.length <= rs + n) {
|
||
s += "0";
|
||
}
|
||
return s;
|
||
},
|
||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
|
||
// 计算
|
||
const midRatio = (startRatio + endRatio) / 2;
|
||
const startRadian = startRatio * Math.PI * 2;
|
||
const endRadian = endRatio * Math.PI * 2;
|
||
const midRadian = midRatio * Math.PI * 2;
|
||
// 如果只有一个扇形，则不实现选中效果。
|
||
if (startRatio === 0 && endRatio === 1) {
|
||
isSelected = false;
|
||
}
|
||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||
k = 1;
|
||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||
const hoverRate = isHovered ? 1.05 : 1;
|
||
// 返回曲面参数方程
|
||
return {
|
||
u: {
|
||
min: -Math.PI,
|
||
max: Math.PI * 3,
|
||
step: Math.PI / 32,
|
||
},
|
||
v: {
|
||
min: 0,
|
||
max: Math.PI * 2,
|
||
step: Math.PI / 20,
|
||
},
|
||
x: function (u, v) {
|
||
if (u < startRadian) {
|
||
return (
|
||
offsetX +
|
||
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
);
|
||
}
|
||
if (u > endRadian) {
|
||
return (
|
||
offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
);
|
||
}
|
||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||
},
|
||
y: function (u, v) {
|
||
if (u < startRadian) {
|
||
return (
|
||
offsetY +
|
||
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
);
|
||
}
|
||
if (u > endRadian) {
|
||
return (
|
||
offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
);
|
||
}
|
||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||
},
|
||
z: function (u, v) {
|
||
if (u < -Math.PI * 0.5) {
|
||
return Math.sin(u);
|
||
}
|
||
if (u > Math.PI * 2.5) {
|
||
return Math.sin(u) * h * 0.1;
|
||
}
|
||
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
|
||
},
|
||
};
|
||
},
|
||
|
||
getPie3D(
|
||
pieData,
|
||
internalDiameterRatio,
|
||
distance,
|
||
alpha,
|
||
pieHeight,
|
||
opacity = 1
|
||
) {
|
||
const series = [];
|
||
let sumValue = 0;
|
||
let startValue = 0;
|
||
let endValue = 0;
|
||
const legendData = [];
|
||
const k =
|
||
typeof internalDiameterRatio !== "undefined"
|
||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||
: 1 / 3;
|
||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||
for (let i = 0; i < pieData.length; i += 1) {
|
||
sumValue += pieData[i].value;
|
||
const seriesItem = {
|
||
name:
|
||
typeof pieData[i].name === "undefined"
|
||
? `series${i}`
|
||
: pieData[i].name,
|
||
type: "surface",
|
||
parametric: true,
|
||
wireframe: {
|
||
show: false,
|
||
},
|
||
pieData: pieData[i],
|
||
pieStatus: {
|
||
selected: false,
|
||
hovered: false,
|
||
k: k,
|
||
},
|
||
};
|
||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||
const itemStyle = {};
|
||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||
itemStyle.color = pieData[i].itemStyle.color;
|
||
}
|
||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||
}
|
||
seriesItem.itemStyle = itemStyle;
|
||
}
|
||
series.push(seriesItem);
|
||
}
|
||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||
for (let i = 0; i < series.length; i += 1) {
|
||
endValue = startValue + series[i].pieData.value;
|
||
series[i].pieData.startRatio = startValue / sumValue;
|
||
series[i].pieData.endRatio = endValue / sumValue;
|
||
series[i].parametricEquation = this.getParametricEquation(
|
||
series[i].pieData.startRatio,
|
||
series[i].pieData.endRatio,
|
||
false,
|
||
false,
|
||
k,
|
||
series[i].pieData.value
|
||
);
|
||
startValue = endValue;
|
||
legendData.push(series[i].name);
|
||
}
|
||
return series;
|
||
},
|
||
getbing() {
|
||
const optionsData = [
|
||
{
|
||
name: "生料系统",
|
||
value: 11,
|
||
itemStyle: {
|
||
color: "#0BA0E3",
|
||
},
|
||
},
|
||
{
|
||
name: "水泥磨系统",
|
||
value: 33,
|
||
itemStyle: {
|
||
color: "#01E3F4",
|
||
},
|
||
},
|
||
{
|
||
name: "破碎系统",
|
||
value: 22,
|
||
itemStyle: {
|
||
color: "#50F4C1",
|
||
},
|
||
},
|
||
];
|
||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||
series.push({
|
||
name: "pie2d",
|
||
type: "pie",
|
||
label: {
|
||
opacity: 1,
|
||
fontSize: 14,
|
||
lineHeight: 20,
|
||
},
|
||
labelLine: {
|
||
length: 60,
|
||
length2: 60,
|
||
},
|
||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||
radius: ["20%", "50%"],
|
||
center: ["45%", "50%"],
|
||
data: optionsData,
|
||
itemStyle: {
|
||
opacity: 0,
|
||
},
|
||
});
|
||
let option = {
|
||
labelLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#7BC0CB",
|
||
},
|
||
},
|
||
|
||
label: {
|
||
show: true,
|
||
color: "#",
|
||
position: "outside",
|
||
formatter: (params) => {
|
||
var total = 0;
|
||
optionsData.forEach((item, index) => {
|
||
total += item.value;
|
||
});
|
||
let percent = ((params.value / total) * 100).toFixed(2);
|
||
return (
|
||
`{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
|
||
);
|
||
},
|
||
rich: {
|
||
name: {
|
||
fontSize: 24,
|
||
},
|
||
colors: {
|
||
fontSize: 30,
|
||
color: "#fff",
|
||
fontWeight: 700,
|
||
},
|
||
},
|
||
},
|
||
xAxis3D: {
|
||
min: -1,
|
||
max: 1,
|
||
},
|
||
yAxis3D: {
|
||
min: -1,
|
||
max: 1,
|
||
},
|
||
zAxis3D: {
|
||
min: -1,
|
||
max: 1,
|
||
},
|
||
grid3D: {
|
||
show: false,
|
||
boxHeight: 20, // 三维笛卡尔坐标系在三维场景中的高度
|
||
left: "-15%",
|
||
top: "10%",
|
||
distance: 800,
|
||
viewControl: {
|
||
alpha: 40,
|
||
beta: 40,
|
||
distance: 800, //调整视角到主体的距离，类似调整zoom
|
||
rotateSensitivity: 0, // 设置为0无法旋转
|
||
zoomSensitivity: 0, // 设置为0无法缩放
|
||
panSensitivity: 0, // 设置为0无法平移
|
||
autoRotate: false, // 自动旋转
|
||
},
|
||
},
|
||
series: series,
|
||
};
|
||
this.defineEcharts("fhzb", option);
|
||
},
|
||
defineEcharts(dom, option) {
|
||
var chartDom = document.getElementById(dom);
|
||
var myChart = this.$echarts.init(chartDom, null, {
|
||
devicePixelRatio: 10, // 设置为2或更高的值
|
||
});
|
||
myChart.setOption(option);
|
||
},
|
||
getEchart() {
|
||
var chartDom = document.getElementById("pdsydl");
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
const sideData = [220, 182, 191, 234, 290];
|
||
const sideData1 = [100, 110, 120, 134, 190];
|
||
|
||
option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
legend: {
|
||
data: [
|
||
{
|
||
name: "今日",
|
||
textStyle: {
|
||
color: "white",
|
||
},
|
||
},
|
||
{
|
||
name: "昨日",
|
||
textStyle: {
|
||
color: "white",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
grid: {
|
||
top: "10%",
|
||
bottom: "62%",
|
||
right: "15%",
|
||
containLabel: true,
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
},
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
data: ["1月", "2月", "3月", "4月", "5月"],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff", //X轴文字颜色
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff", //X轴文字颜色
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "昨日",
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#2d8cf0", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: "#2d8cf0", // 60% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#2d8cf0", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
data: sideData,
|
||
barGap: 10,
|
||
},
|
||
{
|
||
name: "昨日",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#09337C", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: "#0761C0", // 60% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#0575DE", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
barGap: 0,
|
||
data: sideData,
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
textStyle: {
|
||
color: "white",
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "昨日",
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
type: "pictorialBar",
|
||
itemStyle: {
|
||
borderWidth: 1,
|
||
borderColor: "#0571D5",
|
||
color: "#288ef3", // 控制顶部方形的颜色
|
||
},
|
||
symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
|
||
symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
|
||
symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
|
||
symbolRotate: -16,
|
||
symbolPosition: "end",
|
||
data: sideData,
|
||
z: 3,
|
||
},
|
||
{
|
||
name: "今日",
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#15a00f", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: "#11ad0a", // 60% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#19c213", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
data: sideData1,
|
||
barGap: 0,
|
||
},
|
||
{
|
||
name: "今日",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#26ec10", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: "#26ec10", // 60% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#26ec10", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
barGap: 0,
|
||
data: sideData1,
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
textStyle: {
|
||
color: "white",
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "今日",
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
type: "pictorialBar",
|
||
itemStyle: {
|
||
borderWidth: 1,
|
||
borderColor: "#fff",
|
||
color: "#26ec10", // 顶部方块的颜色
|
||
},
|
||
symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
|
||
symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
|
||
symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
|
||
symbolRotate: -16,
|
||
symbolPosition: "end",
|
||
data: sideData1,
|
||
z: 3,
|
||
},
|
||
],
|
||
};
|
||
|
||
myChart.setOption(option, true);
|
||
},
|
||
},
|
||
mounted() {
|
||
this.defineEcharts("pdsssdh", this.option1);
|
||
// this.defineEcharts("pdsydl", this.option2);
|
||
this.pdsydl();
|
||
// this.getEchart();
|
||
this.defineEcharts("pdstpt", this.option3);
|
||
// this.init();
|
||
this.getbing();
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
//饼图底座（我也想给你们底座图片 可是我不知道咋给）
|
||
.buttomCharts {
|
||
background: center top url("../../../assets/img/底盘.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 280px;
|
||
width: 600px;
|
||
margin-top: -300px;
|
||
margin-left: 22%;
|
||
}
|
||
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
background-color: transparent;
|
||
background-image: url(../../../assets/img/左遮罩.png),
|
||
url(../../../assets/img/右遮罩.png);
|
||
margin-top: -800px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
}
|
||
|
||
.left {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-left: 61px;
|
||
background-image: url("../../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.title {
|
||
margin-top: 15px;
|
||
margin-left: 60px;
|
||
}
|
||
|
||
.pdsssdh {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.data {
|
||
position: absolute;
|
||
font-size: 20px;
|
||
font-family: "DOUYU";
|
||
color: #ffffff;
|
||
line-height: 18px;
|
||
display: flex;
|
||
right: 0;
|
||
top: 120px;
|
||
z-index: 1;
|
||
cursor: pointer;
|
||
|
||
span {
|
||
width: 122px;
|
||
height: 38px;
|
||
margin: 10px;
|
||
display: block;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
}
|
||
|
||
.active {
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(33, 76, 124, 0.3) 20%,
|
||
rgba(152, 207, 230, 0.3) 100%,
|
||
rgba(33, 76, 124, 0.3) 20%
|
||
);
|
||
}
|
||
}
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#pdsssdh {
|
||
width: 1155px;
|
||
height: 500px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
|
||
.pdsydl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.data {
|
||
position: absolute;
|
||
font-size: 20px;
|
||
font-family: "DOUYU";
|
||
color: #ffffff;
|
||
line-height: 18px;
|
||
display: flex;
|
||
right: 0;
|
||
top: 120px;
|
||
z-index: 1;
|
||
cursor: pointer;
|
||
|
||
span {
|
||
width: 122px;
|
||
height: 38px;
|
||
margin: 10px;
|
||
display: block;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
}
|
||
|
||
.active {
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(33, 76, 124, 0.3) 20%,
|
||
rgba(152, 207, 230, 0.3) 100%,
|
||
rgba(33, 76, 124, 0.3) 20%
|
||
);
|
||
}
|
||
}
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#pdsydl {
|
||
width: 1155px;
|
||
height: 600px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
|
||
.pdstpt {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.data {
|
||
position: absolute;
|
||
font-size: 20px;
|
||
font-family: "DOUYU";
|
||
color: #ffffff;
|
||
line-height: 18px;
|
||
display: flex;
|
||
right: 0;
|
||
top: 120px;
|
||
z-index: 1;
|
||
cursor: pointer;
|
||
|
||
span {
|
||
width: 122px;
|
||
height: 38px;
|
||
margin: 10px;
|
||
display: block;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
|
||
.active {
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(33, 76, 124, 0.3) 20%,
|
||
rgba(152, 207, 230, 0.3) 100%,
|
||
rgba(33, 76, 124, 0.3) 20%
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#pdstpt {
|
||
width: 1155px;
|
||
height: 600px;
|
||
margin-top: 50px;
|
||
|
||
.data {
|
||
position: absolute;
|
||
font-size: 20px;
|
||
font-family: "DOUYU";
|
||
color: #ffffff;
|
||
line-height: 18px;
|
||
display: flex;
|
||
right: 0;
|
||
top: 120px;
|
||
z-index: 1;
|
||
cursor: pointer;
|
||
|
||
span {
|
||
width: 122px;
|
||
height: 38px;
|
||
margin: 10px;
|
||
display: block;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
}
|
||
|
||
.active {
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(33, 76, 124, 0.3) 20%,
|
||
rgba(152, 207, 230, 0.3) 100%,
|
||
rgba(33, 76, 124, 0.3) 20%
|
||
);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-right: 61px;
|
||
background-image: url("../../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.pdsjk {
|
||
position: relative;
|
||
margin-top: 130px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.chartBox {
|
||
margin-top: 50px;
|
||
|
||
#pdsjk {
|
||
width: 1156px;
|
||
height: 400px;
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
margin-left: 50px;
|
||
margin-bottom: 20px;
|
||
|
||
span {
|
||
margin: 0 20px;
|
||
font-size: 30px;
|
||
color: #56f671;
|
||
}
|
||
}
|
||
|
||
/deep/.el-table tr {
|
||
background: #16253b;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
height: 50px;
|
||
|
||
.cell {
|
||
line-height: 50px;
|
||
}
|
||
}
|
||
|
||
// 去掉eltable的hover效果
|
||
::v-deep .el-table tbody tr:hover > td {
|
||
background-color: #0b679e !important;
|
||
}
|
||
|
||
//修改表头颜色
|
||
::v-deep .has-gutter {
|
||
background-color: #1969a8;
|
||
|
||
th {
|
||
background-color: #1969a8;
|
||
}
|
||
}
|
||
|
||
//奇偶行颜色
|
||
::v-deep .el-table .success-row {
|
||
background: #184167;
|
||
}
|
||
|
||
//去掉边框白线
|
||
::v-deep .el-table__row > td {
|
||
border: none;
|
||
}
|
||
|
||
::v-deep .el-table::before {
|
||
height: 0px;
|
||
}
|
||
|
||
/* 移除表头的下边框 */
|
||
::v-deep .el-table__header th {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
#fhzb {
|
||
width: 1156px;
|
||
height: 500px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|