1693 lines
63 KiB
Vue
1693 lines
63 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="a">
|
||
<img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
|
||
</div>
|
||
<div class="left">
|
||
<img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
|
||
<div class="dh">
|
||
<div class="imgBox1">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>单耗</p>
|
||
</div>
|
||
<div class="first">
|
||
<img src="../../assets/NXGL/jide.png" alt="">
|
||
<ul>
|
||
<li class="danhao" v-for="(item, index) in list" :key="index">
|
||
<span>{{ item.name }}</span>
|
||
<span class="count">{{ item.count }}</span>
|
||
<span class="danwei">kgce/t</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="flnh">
|
||
<div class="imgBox2">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>分类能耗</p>
|
||
</div>
|
||
<div class="second">
|
||
<div class="s_one">
|
||
<div class="s_l">
|
||
<p>今日:3122kWh</p>
|
||
<p>昨日:9400kWh</p>
|
||
</div>
|
||
<div class="s_r">
|
||
<p>
|
||
同比:<span class="tongbi">201%</span>
|
||
<img src="../../assets/NXGL/图层 905.png" alt="">
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="s_two">
|
||
<div class="s_l">
|
||
<p>今日:134t</p>
|
||
<p>昨日:114t</p>
|
||
</div>
|
||
<div class="s_r">
|
||
<p>
|
||
同比:<span class="tongbi">-15.1%</span>
|
||
<img src="../../assets/NXGL/图层 916.png" alt="">
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="s_three">
|
||
<div class="s_l">
|
||
<p>今日:14.3t</p>
|
||
<p>昨日:14.9t</p>
|
||
</div>
|
||
<div class="s_r">
|
||
<p>
|
||
同比:<span class="tongbi">4.2%</span>
|
||
<img src="../../assets/NXGL/图层 905.png" alt="">
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="nhrl">
|
||
<div class="imgBox3">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>能耗日历</p>
|
||
</div>
|
||
<div class="data">
|
||
<span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
|
||
<span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
|
||
<span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
|
||
</div>
|
||
<div class="calendars">
|
||
<div class="title">
|
||
<img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
|
||
<!-- <span @click="getcalendar('prev-month')">上</span> -->
|
||
<span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth() }}月</span>
|
||
<img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
|
||
</div>
|
||
<el-calendar v-model="ddd" ref="getcalendar">
|
||
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
|
||
<template slot="dateCell" slot-scope="{date, data}">
|
||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||
<span>{{ data.day.split('-')[2] }}</span>
|
||
<!-- {{ date }} -->
|
||
<p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
|
||
<p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
|
||
<p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
|
||
<!-- {{ data.type}} -->
|
||
</p>
|
||
</template>
|
||
</el-calendar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="ghlnhgk">
|
||
<div class="imgBox4">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>各回路（设备）能耗概况</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 class="tabledata">
|
||
<div class="table">
|
||
<el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
|
||
<el-table-column prop="date1" label="设备名称" align="center">
|
||
<template scope="scope">
|
||
<p>{{ scope.row.date1 }}</p>
|
||
<p class="time">{{ scope.row.date2 }}</p>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date3" label="运行功率" align="center">
|
||
<template scope="scope">
|
||
<span class="count">{{ scope.row.date3 }}</span>
|
||
<span class="danwei">kW</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="table">
|
||
<el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
|
||
<el-table-column prop="date1" label="设备名称" align="center">
|
||
<template scope="scope">
|
||
<p>{{ scope.row.date1 }}</p>
|
||
<p class="time">{{ scope.row.date2 }}</p>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date2" label="运行功率" align="center">
|
||
<template scope="scope">
|
||
<span class="count">{{ scope.row.date3 }}</span>
|
||
<span class="danwei">kW</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="xtnhgk">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>系统能耗概况</p>
|
||
</div>
|
||
<div id="nhzk"></div>
|
||
</div>
|
||
<div class="nhqs">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>能耗趋势</p>
|
||
</div>
|
||
<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 id="nhqs"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
name: 'ShuinichangNXGL',
|
||
|
||
data() {
|
||
return {
|
||
res2: "水",
|
||
ddd: new Date(),
|
||
today: new Date(),
|
||
list: [
|
||
{
|
||
name: "水泥单位产品综合能耗：",
|
||
count: "80",
|
||
},
|
||
{
|
||
name: "水泥大内产品综合电耗：",
|
||
count: "40",
|
||
},
|
||
{
|
||
name: "熟料单位产品综合能耗：",
|
||
count: "100",
|
||
},
|
||
{
|
||
name: "熟料单位产品综合电耗：",
|
||
count: "48",
|
||
},
|
||
{
|
||
name: "熟料单位产品综合煤耗：",
|
||
count: "94",
|
||
},
|
||
],
|
||
devices1: [
|
||
{
|
||
date1: "回转窑",
|
||
date2: "2022-08-18 00:00:00",
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: "2022-08-18 00:00:00",
|
||
date3: "29.00",
|
||
},
|
||
{
|
||
date1: "篦冷机",
|
||
date2: "2022-08-18 00:00:00",
|
||
date3: "45.00",
|
||
},
|
||
{
|
||
date1: "生料收尘",
|
||
date2: "2022-08-18 00:00:00",
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "回转窑",
|
||
date2: "2022-08-18 00:00:00",
|
||
date3: "29.00",
|
||
}
|
||
],
|
||
devices2: [
|
||
{
|
||
date1: "回转窑",
|
||
date2: "2022-08-18 00:00:00",
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: "2022-08-18 00:00:00",
|
||
date3: "29.00",
|
||
},
|
||
{
|
||
date1: "篦冷机",
|
||
date2: "2022-08-18 00:00:00",
|
||
date3: "45.00",
|
||
},
|
||
{
|
||
date1: "生料收尘",
|
||
date2: "2022-08-18 00:00:00",
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "回转窑",
|
||
date2: "2022-08-18 00:00:00",
|
||
date3: "29.00",
|
||
}
|
||
],
|
||
res: "日",
|
||
res1: '水',
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.getbing();
|
||
this.nhqs();
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
//U3D交互的绑定
|
||
sendMessageToCSharp() {
|
||
// window.vuplex.postMessage({
|
||
// type: "Tog",
|
||
// message: "能效管理_true",
|
||
// });
|
||
window.vuplex.postMessage("能效管理-能耗");
|
||
this.$router.push('/nxgl');
|
||
},
|
||
defineEcharts(dom, option) {
|
||
var chartDom = document.getElementById(dom);
|
||
var myChart = this.$echarts.init(chartDom);
|
||
option && myChart.setOption(option);
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if ((rowIndex + 1) % 2 === 0) {
|
||
return "success-row";
|
||
}
|
||
return "";
|
||
},
|
||
getbing() {
|
||
var trafficWay = [{
|
||
name: '破碎系统',
|
||
value: 237.6
|
||
}, {
|
||
name: '回转窑系统',
|
||
value: 427.2
|
||
}, {
|
||
name: '煤磨系统',
|
||
value: 1342.2
|
||
}, {
|
||
name: '生料系统',
|
||
value: 1115
|
||
}];
|
||
var data = [];
|
||
var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
|
||
for (var i = 0; i < trafficWay.length; i++) {
|
||
data.push({
|
||
value: trafficWay[i].value,
|
||
name: trafficWay[i].name,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 5,
|
||
shadowBlur: 20,
|
||
borderColor: color[i],
|
||
shadowColor: color[i]
|
||
}
|
||
}
|
||
}, {
|
||
value: 60,
|
||
name: "",
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
color: 'rgba(0, 0, 0, 0)',
|
||
borderColor: 'rgba(0, 0, 0, 0)',
|
||
borderWidth: 0
|
||
}
|
||
}
|
||
});
|
||
}
|
||
var seriesOption = [{
|
||
name: '',
|
||
type: 'pie',
|
||
clockWise: false,
|
||
radius: [105, 109],
|
||
hoverAnimation: false,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'outside',
|
||
color: '#ddd',
|
||
formatter: function (params) {
|
||
if (params.name !== "") {
|
||
return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
|
||
} else {
|
||
return '';
|
||
}
|
||
},
|
||
rich: {
|
||
aa: {
|
||
fontSize: 24,
|
||
color: "#fff",
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
length: 30,
|
||
length2: 100,
|
||
show: true,
|
||
color: '#00ffff'
|
||
}
|
||
}
|
||
},
|
||
data: data
|
||
}];
|
||
let option = {
|
||
// backgroundColor: '#0A2E5D',
|
||
// backgroundColor:"transparent",
|
||
color: color,
|
||
title: {
|
||
text: '系统耗能',
|
||
top: '48%',
|
||
textAlign: "center",
|
||
left: "49%",
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 32,
|
||
fontWeight: '400'
|
||
}
|
||
},
|
||
graphic: {
|
||
elements: [{
|
||
type: "image",
|
||
z: 3,
|
||
style: {
|
||
image: "transparent",
|
||
width: 178,
|
||
height: 178
|
||
},
|
||
left: 'center',
|
||
top: 'center',
|
||
position: [100, 100]
|
||
}]
|
||
},
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
legend: {
|
||
icon: "rect",
|
||
orient: '',
|
||
x: 'right',
|
||
data: [
|
||
{
|
||
name: '破碎系统',
|
||
value: "237.6"
|
||
},
|
||
{
|
||
name: '回转窑系统',
|
||
value: "427.2"
|
||
},
|
||
{
|
||
name: '煤磨系统',
|
||
value: "1342.2"
|
||
},
|
||
{
|
||
name: '生料系统',
|
||
value: "1115"
|
||
}],
|
||
formatter: function (name) {
|
||
var percent = 0;
|
||
var total = 0;
|
||
for (var i = 0; i < trafficWay.length; i++) {
|
||
total += trafficWay[i].value;
|
||
}
|
||
const item = trafficWay.filter((item) => item.name === name)[0];
|
||
console.log(item);
|
||
percent = ((item.value / total) * 100).toFixed(2);
|
||
if (name !== '') {
|
||
return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
|
||
// return `{name|${name}` + `{num|${percent}}{name|kWh}`;
|
||
} else {
|
||
return '';
|
||
}
|
||
},
|
||
left: 900,
|
||
bottom: 100,
|
||
align: 'left',
|
||
textStyle: {
|
||
color: "#fff",
|
||
rich: {
|
||
name: {
|
||
fontSize: 24,
|
||
color: "#fff",
|
||
},
|
||
num: {
|
||
fontSize: 28,
|
||
color: color[1],
|
||
}
|
||
},
|
||
},
|
||
itemGap: 20
|
||
},
|
||
toolbox: {
|
||
show: false
|
||
},
|
||
series: seriesOption
|
||
}
|
||
let chartDom = document.getElementById("nhzk");
|
||
let myChart = this.$echarts.init(chartDom);
|
||
myChart.setOption(option);
|
||
},
|
||
getcalendar() {
|
||
this.$refs.getcalendar.selectDate("next-month")
|
||
this.$refs.getcalendar.selectDate("today")
|
||
this.$refs.getcalendar.selectDate("prev-month")
|
||
|
||
console.log(this.$refs.getcalendar)
|
||
},
|
||
nhqs() {
|
||
// mock 数据
|
||
const dataArr = {
|
||
xdata: ['1月', '2月', '3月', '4月', '5月'],
|
||
rateData: [20, 36, 40, 10, 40],
|
||
disinfeced: [32, 34, 48, 14, 38],
|
||
// placeData: [320, 435, 490, 340, 320, 270, 360]
|
||
}
|
||
var colors1 =
|
||
{
|
||
type: 'linear',
|
||
x: 0, x2: 1, y: 0, y2: 0,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(17, 195, 255, 1)' },
|
||
{ offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
|
||
{ offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
|
||
{ offset: 1, color: 'rgba(17, 195, 255, 1)' }
|
||
],
|
||
}
|
||
var colors2 = {
|
||
type: 'linear',
|
||
x: 0, x2: 1, y: 0, y2: 0,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(255, 195, 255, 1)' },
|
||
{ offset: 0.5, color: 'rgba(255, 195, 255, 1)' },
|
||
{ offset: 0.5, color: 'rgba(255, 195, 255, .7)' },
|
||
{ offset: 1, color: 'rgba(255, 195, 255, 1)' }
|
||
],
|
||
}
|
||
const legend = {
|
||
data: [
|
||
{
|
||
name: '电费',
|
||
icon: "rect"
|
||
}, {
|
||
name: '销售电价',
|
||
icon: "rect"
|
||
}],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "20px",
|
||
},
|
||
itemWidth: 25,
|
||
itemHeight: 15,
|
||
itemGap: 15,
|
||
// bottom: '5%',
|
||
selectedMode: false
|
||
}
|
||
const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
|
||
// xAxis
|
||
const xAxis = {
|
||
axisTick: { show: true },
|
||
axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
|
||
axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
|
||
data: dataArr.xdata
|
||
}
|
||
|
||
// yAxis
|
||
const yAxis = [{
|
||
type: "value",
|
||
name: "单位:kWh",
|
||
splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
|
||
axisLine: { show: false, lineStyle: { color: "#fff" } },
|
||
axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
|
||
},
|
||
{
|
||
// 双y轴，主要用于折线图，所以不需要显示坐标
|
||
// type: "value",
|
||
show: false,
|
||
// min: 0,
|
||
// max: 1,
|
||
// axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
|
||
}
|
||
]
|
||
|
||
// series
|
||
const series = [
|
||
{
|
||
z: 2,
|
||
name: '底部',
|
||
type: 'pictorialBar',
|
||
data: [1, 1, 1, 1, 1, 1, 1, 1],
|
||
symbol: 'diamond',
|
||
symbolOffset: [0, '50%'],
|
||
symbolSize: [30, 20],
|
||
itemStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0, x2: 1, y: 0, y2: 0,
|
||
colorStops: function () {
|
||
console.log("1234");
|
||
for (var i = 0; i < rateData.length; i++) {
|
||
if (dataArr.rateData[i] < dataArr.disinfeced[i]) {
|
||
var data = [
|
||
{ offset: 0, color: 'rgba(17, 195, 255, 1)' },
|
||
{ offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
|
||
{ offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
|
||
{ offset: 1, color: 'rgba(17, 195, 255, 1)' }
|
||
]
|
||
return data
|
||
} else if (dataArr.rateData[i] > dataArr.disinfeced[i]) {
|
||
var data = [
|
||
{ offset: 0, color: 'rgba(117, 195, 255, 1)' },
|
||
{ offset: 0.5, color: 'rgba(117, 195, 255, 1)' },
|
||
{ offset: 0.5, color: 'rgba(117, 195, 255, .7)' },
|
||
{ offset: 1, color: 'rgba(117, 195, 255, 1)' }
|
||
]
|
||
return data
|
||
}
|
||
}
|
||
|
||
}
|
||
// colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, 1)' }, { offset: 0.5, color: 'rgba(17, 195, 255, 1)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .7)' }, { offset: 1, color: 'rgba(17, 195, 255, 1)' }]
|
||
}
|
||
},
|
||
}, {
|
||
z: 3,
|
||
name: '上部1',
|
||
type: 'pictorialBar',
|
||
symbolPosition: 'end',
|
||
data: dataArr.disinfeced,
|
||
symbol: 'diamond',
|
||
symbolOffset: [0, '-50%'],
|
||
symbolSize: [30, 20],
|
||
itemStyle: {
|
||
borderColor: 'rgba(17, 195, 255, 1)',
|
||
borderWidth: 2,
|
||
|
||
color: 'rgba(17, 195, 255, 1)'
|
||
},
|
||
}, {
|
||
z: 1,
|
||
stack: '总量',
|
||
type: 'bar',
|
||
name: '电费',
|
||
barWidth: 30,
|
||
// barGap: '-100%',
|
||
data: dataArr.disinfeced,
|
||
itemStyle: {
|
||
color: function () {
|
||
for (var i = 0; i < dataArr.rateData.length; i++) {
|
||
if (dataArr.rateData[i]<dataArr.disinfeced[i]){
|
||
return colors1
|
||
}else{
|
||
return colors2
|
||
}
|
||
}
|
||
},
|
||
// {
|
||
// type: 'linear',
|
||
// x: 0, x2: 1, y: 0, y2: 0,
|
||
// colorStops: function () {
|
||
// for (var i = 0; i < rateData.length; i++) {
|
||
// if (dataArr.rateData[i] < dataArr.disinfeced[i]) {
|
||
// var data = [
|
||
// { offset: 0, color: 'rgba(17, 195, 255, 1)' },
|
||
// { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
|
||
// { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
|
||
// { offset: 1, color: 'rgba(17, 195, 255, 1)' }
|
||
// ]
|
||
// return data
|
||
// } else if (dataArr.rateData[i] > dataArr.disinfeced[i]) {
|
||
// var data = [
|
||
// { offset: 0, color: 'rgba(117, 195, 255, 1)' },
|
||
// { offset: 0.5, color: 'rgba(117, 195, 255, 1)' },
|
||
// { offset: 0.5, color: 'rgba(117, 195, 255, .7)' },
|
||
// { offset: 1, color: 'rgba(117, 195, 255, 1)' }
|
||
// ]
|
||
// return data
|
||
// }
|
||
// }
|
||
|
||
// }
|
||
// colorStops: [{ offset: 0, color: 'rgba(117, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(117, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(117, 195, 255, .5)' }, { offset: 1, color: 'rgba(117, 195, 255, .7)' }]
|
||
// }
|
||
},
|
||
}, {
|
||
z: 9,
|
||
// 双y轴
|
||
yAxisIndex: 1,
|
||
name: '销售电价', type: 'line',
|
||
symbol: 'circle',
|
||
symbolSize: [12, 12],
|
||
color: {
|
||
type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
|
||
// 0% 处的颜色 // 100% 处的颜色
|
||
colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
|
||
global: false // 缺省为 false
|
||
},
|
||
lineStyle: {
|
||
color: {
|
||
type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
|
||
// 0% 处的颜色 // 100% 处的颜色
|
||
colorStops: [{ offset: 0, color: '#43FFF4 ' }, { offset: 1, color: '#43FFF4' }],
|
||
global: false // 缺省为 false
|
||
}
|
||
},
|
||
// 修改的是线下区域的颜色
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
// 右/下/左/上
|
||
0, 0, 0, 1, [
|
||
{ offset: 0, color: 'rgba(255, 209, 26, .2)' },
|
||
{ offset: 1, color: 'transparent' }
|
||
])
|
||
},
|
||
label: {
|
||
show: true,
|
||
textStyle: { fontSize: 16, color: '#ffd11a' }
|
||
},
|
||
data: dataArr.rateData
|
||
}]
|
||
let option = { xAxis, yAxis, series, grid, legend }
|
||
this.defineEcharts("nhqs", option);
|
||
},
|
||
// nhqs() {
|
||
// const offsetX = 24; //bar宽
|
||
// const offsetY = 8; //倾斜角度
|
||
// // 绘制左侧面
|
||
// const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
|
||
// 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();
|
||
// },
|
||
// });
|
||
// // 注册三个面图形
|
||
// this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||
// this.$echarts.graphic.registerShape("CubeRight", CubeRight);
|
||
// this.$echarts.graphic.registerShape("CubeTop", CubeTop);
|
||
// let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
|
||
// let seriesData = [
|
||
// {
|
||
// name: "",
|
||
// value: 100,
|
||
// },
|
||
// {
|
||
// name: "",
|
||
// value: 200,
|
||
// },
|
||
// {
|
||
// name: "",
|
||
// value: 300,
|
||
// },
|
||
// {
|
||
// name: "",
|
||
// value: 400,
|
||
// },
|
||
// {
|
||
// name: "",
|
||
// value: 300,
|
||
// },
|
||
// {
|
||
// name: "",
|
||
// value: 400,
|
||
// }];
|
||
// let zheDate = [99, 180, 320, 400, 300, 420];
|
||
// for (var i = 0; i < seriesData.length; i++) {
|
||
// if (seriesData[i].value < zheDate[i]) {
|
||
// seriesData[i].name = "小于计划"
|
||
// } else if (seriesData[i].value > zheDate[i]) {
|
||
// seriesData[i].name = "大于计划"
|
||
// }
|
||
// }
|
||
// //拿到最大值
|
||
// // const maxValue = Math.max(...seriesData);
|
||
|
||
// let colorArr = [
|
||
// ["#0A67FF"],
|
||
// ["#10C6FF", "rgba(60,113,255,1)"],
|
||
// ["#0774D6", "rgba(17,94,213,1)"],
|
||
// ];
|
||
// let option = {
|
||
// legend: {
|
||
// data: [
|
||
// {
|
||
// icon: "rect",
|
||
// name: "小于计划",
|
||
// },
|
||
// {
|
||
// icon: "rect",
|
||
// name: "大于计划",
|
||
// },
|
||
// ],
|
||
// textStyle: {
|
||
// color: "#fff",
|
||
// fontSize: "20px",
|
||
// },
|
||
// },
|
||
// tooltip: {
|
||
// trigger: "axis",
|
||
// axisPointer: {
|
||
// type: "shadow",
|
||
// },
|
||
// formatter: function (params, ticket, callback) {
|
||
// const item = params[1];
|
||
// return item.name + " : " + item.value;
|
||
// },
|
||
// },
|
||
// grid: {
|
||
// // 让图表占满容器
|
||
// left: "5%",
|
||
// right: "5%",
|
||
// bottom: "0%",
|
||
// containLabel: true,
|
||
// },
|
||
// xAxis: {
|
||
// type: "category",
|
||
// data: xAxisData,
|
||
// axisLine: {
|
||
// show: true,
|
||
// },
|
||
// axisTick: {
|
||
// show: false,
|
||
// },
|
||
// axisLabel: {
|
||
// fontSize: 20,
|
||
// color: "#fff",
|
||
// margin: 15,
|
||
// },
|
||
// },
|
||
// yAxis: {
|
||
// type: "value",
|
||
// name: "单位:t",
|
||
// nameTextStyle: {
|
||
// color: "#fff",
|
||
// fontSize: 20,
|
||
// padding: 10,
|
||
// },
|
||
// splitLine: {
|
||
// show: true,
|
||
// lineStyle: {},
|
||
// },
|
||
// axisTick: {
|
||
// show: false,
|
||
// },
|
||
// axisLabel: {
|
||
// show: true,
|
||
// textStyle: {
|
||
// color: "#fff",
|
||
// fontSize: 20,
|
||
// },
|
||
// },
|
||
// // boundaryGap: ['20%', '20%'],
|
||
// },
|
||
// series: [
|
||
// {
|
||
// type: "custom",
|
||
// name: "小于计划",
|
||
// renderItem: (params, api) => {
|
||
// const location = api.coord([api.value(0), api.value(1)]);
|
||
// return {
|
||
// type: "group",
|
||
// 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: colorArr[1][0],
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: colorArr[1][1],
|
||
// },
|
||
// ]),
|
||
// },
|
||
// },
|
||
// {
|
||
// 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: colorArr[2][0],
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: colorArr[2][1],
|
||
// },
|
||
// ]),
|
||
// },
|
||
// },
|
||
// {
|
||
// 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: colorArr[0][0],
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: colorArr[0][0],
|
||
// },
|
||
// ]),
|
||
// },
|
||
// },
|
||
// ],
|
||
// };
|
||
// },
|
||
// data: seriesData,
|
||
// },
|
||
// {
|
||
// type: "bar",
|
||
// label: {
|
||
// normal: {
|
||
// show: false,
|
||
// position: "top",
|
||
// // formatter: (e) => {
|
||
// // return e.value === maxValue ? e.value : "";
|
||
// // },
|
||
// fontSize: 20,
|
||
// color: "#11C3FF",
|
||
// offset: [0, -15],
|
||
// },
|
||
// },
|
||
// itemStyle: {
|
||
// color: "transparent",
|
||
// },
|
||
// tooltip: {},
|
||
// data: seriesData,
|
||
// },
|
||
// {
|
||
// type: "custom",
|
||
// name: "大于计划",
|
||
// renderItem: (params, api) => {
|
||
// const location = api.coord([api.value(0), api.value(1)]);
|
||
// return {
|
||
// type: "group",
|
||
// 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: colorArr[1][0],
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: colorArr[1][1],
|
||
// },
|
||
// ]),
|
||
// },
|
||
// },
|
||
// {
|
||
// 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: colorArr[2][0],
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: colorArr[2][1],
|
||
// },
|
||
// ]),
|
||
// },
|
||
// },
|
||
// {
|
||
// 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: colorArr[0][0],
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: colorArr[0][0],
|
||
// },
|
||
// ]),
|
||
// },
|
||
// },
|
||
// ],
|
||
// };
|
||
// },
|
||
// data: seriesData,
|
||
// },
|
||
// {
|
||
// type: "bar",
|
||
// label: {
|
||
// normal: {
|
||
// show: false,
|
||
// position: "top",
|
||
// // formatter: (e) => {
|
||
// // return e.value === maxValue ? e.value : "";
|
||
// // },
|
||
// fontSize: 20,
|
||
// color: "#11C3FF",
|
||
// offset: [0, -15],
|
||
// },
|
||
// },
|
||
// itemStyle: {
|
||
// color: "transparent",
|
||
// },
|
||
// tooltip: {},
|
||
// data: seriesData,
|
||
// },
|
||
// ],
|
||
// };
|
||
// this.defineEcharts("nhqs", option);
|
||
// },
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 500px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
background-color: transparent;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
|
||
.a {
|
||
position: absolute;
|
||
width: 1300px;
|
||
z-index: 2;
|
||
top: 420px;
|
||
right: 480px;
|
||
z-index: 100;
|
||
|
||
img {
|
||
margin-right: 102px;
|
||
pointer-events: all;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.dh {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox1 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
margin-bottom: 88px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.first {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 320px;
|
||
}
|
||
|
||
ul {
|
||
width: 555px;
|
||
list-style: none;
|
||
|
||
.danhao {
|
||
padding-left: 20px;
|
||
color: #fff;
|
||
width: 555px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
margin-bottom: 18px;
|
||
opacity: 1;
|
||
background: url(../../assets/NXGL/组\ 277.png);
|
||
background-size: cover;
|
||
font-size: 30px;
|
||
|
||
.count {
|
||
width: 60px;
|
||
height: 60px;
|
||
color: #00C0FA;
|
||
font-size: 40px;
|
||
padding-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
// 左边第二个
|
||
.flnh {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox2 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
margin-bottom: 78px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.second {
|
||
.s_one {
|
||
width: 100%;
|
||
height: 175px;
|
||
background: url(../../assets/NXGL/组\ 278.png);
|
||
background-size: cover;
|
||
margin-top: 80px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.s_l {
|
||
padding-top: 10px;
|
||
margin-left: 200px;
|
||
width: 299px;
|
||
height: 120px;
|
||
font-size: 40px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.s_r {
|
||
width: 300px;
|
||
height: 120px;
|
||
line-height: 120px;
|
||
font-size: 40px;
|
||
|
||
p {
|
||
width: 300px;
|
||
height: 54px;
|
||
// line-height: 54px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
span.tongbi {
|
||
font-size: 40px;
|
||
width: 133px;
|
||
height: 54px;
|
||
// line-height: 54px;
|
||
font-weight: 700;
|
||
font-family: YouSheBiaoTiHei;
|
||
color: #58FD64;
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.s_two {
|
||
width: 100%;
|
||
height: 175px;
|
||
margin-top: 60px;
|
||
background: url(../../assets/NXGL/组\ 279.png);
|
||
background-size: cover;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.s_l {
|
||
padding-top: 10px;
|
||
margin-left: 200px;
|
||
width: 299px;
|
||
height: 120px;
|
||
font-size: 40px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.s_r {
|
||
width: 300px;
|
||
height: 120px;
|
||
line-height: 120px;
|
||
font-size: 40px;
|
||
|
||
p {
|
||
width: 300px;
|
||
height: 54px;
|
||
// line-height: 54px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
span.tongbi {
|
||
font-size: 40px;
|
||
width: 133px;
|
||
height: 54px;
|
||
// line-height: 54px;
|
||
font-weight: 700;
|
||
font-family: YouSheBiaoTiHei;
|
||
color: #DA1015;
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.s_three {
|
||
width: 100%;
|
||
height: 175px;
|
||
margin-top: 60px;
|
||
background: url(../../assets/NXGL/组\ 280.png);
|
||
background-size: cover;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.s_l {
|
||
padding-top: 10px;
|
||
margin-left: 200px;
|
||
width: 299px;
|
||
height: 120px;
|
||
font-size: 40px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.s_r {
|
||
width: 300px;
|
||
height: 120px;
|
||
line-height: 120px;
|
||
font-size: 40px;
|
||
|
||
p {
|
||
width: 300px;
|
||
height: 54px;
|
||
// line-height: 54px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
span.tongbi {
|
||
font-size: 40px;
|
||
width: 133px;
|
||
height: 54px;
|
||
// line-height: 54px;
|
||
font-weight: 700;
|
||
font-family: YouSheBiaoTiHei;
|
||
color: #58FD64;
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.nhrl {
|
||
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;
|
||
|
||
span {
|
||
width: 122px;
|
||
height: 38px;
|
||
margin: 10px;
|
||
display: block;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.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%);
|
||
}
|
||
}
|
||
|
||
.imgBox3 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
margin-bottom: 88px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-right: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.ghlnhgk {
|
||
position: relative;
|
||
margin-top: 128px;
|
||
|
||
.imgBox4 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.data {
|
||
position: absolute;
|
||
font-size: 20px;
|
||
font-family: "DOUYU";
|
||
color: #ffffff;
|
||
line-height: 18px;
|
||
display: flex;
|
||
right: 0;
|
||
top: 120px;
|
||
z-index: 1;
|
||
|
||
span {
|
||
width: 122px;
|
||
height: 38px;
|
||
margin: 10px;
|
||
display: block;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.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%);
|
||
}
|
||
}
|
||
|
||
/deep/ .tabledata {
|
||
margin-top: 60px;
|
||
display: flex;
|
||
|
||
.table {
|
||
width: 50%;
|
||
margin-top: 50px;
|
||
|
||
.time {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.count {
|
||
color: #05F0FF;
|
||
font-size: 28px;
|
||
}
|
||
|
||
//表体颜色
|
||
.el-table tr {
|
||
background: #16253b;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
height: 40px;
|
||
|
||
.cell {
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
|
||
// 去掉eltable的hover效果
|
||
.el-table tbody tr:hover>td {
|
||
background-color: #0b679e !important;
|
||
}
|
||
|
||
//修改表头颜色
|
||
.has-gutter {
|
||
background-color: #1969a8;
|
||
|
||
th {
|
||
background-color: #1969a8;
|
||
}
|
||
}
|
||
|
||
//奇偶行颜色
|
||
.el-table .success-row {
|
||
background: #184167;
|
||
}
|
||
|
||
//去掉边框白线
|
||
.el-table__row>td {
|
||
border: none;
|
||
}
|
||
|
||
.el-table::before {
|
||
height: 0px;
|
||
}
|
||
|
||
/* 移除表头的下边框 */
|
||
.el-table__header th {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.xtnhgk {
|
||
position: relative;
|
||
margin-top: 60px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#nhzk {
|
||
width: 100%;
|
||
height: 400px;
|
||
}
|
||
}
|
||
|
||
.nhqs {
|
||
position: relative;
|
||
margin-top: 60px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
margin-bottom: 100px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.data {
|
||
position: absolute;
|
||
font-size: 20px;
|
||
font-family: "DOUYU";
|
||
color: #ffffff;
|
||
line-height: 18px;
|
||
display: flex;
|
||
right: 0;
|
||
top: 120px;
|
||
z-index: 1;
|
||
|
||
span {
|
||
width: 122px;
|
||
height: 38px;
|
||
margin: 10px;
|
||
display: block;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.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%);
|
||
}
|
||
}
|
||
|
||
#nhqs {
|
||
width: 100%;
|
||
height: 600px;
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .calendars {
|
||
.title {
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
width: 300px;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
p.lan {
|
||
font-size: 27px;
|
||
color: #31D3D1 !important;
|
||
}
|
||
|
||
.el-calendar {
|
||
background: transparent;
|
||
}
|
||
|
||
.el-calendar__header {
|
||
display: none !important;
|
||
}
|
||
|
||
.el-calendar__body {
|
||
padding: 0px;
|
||
font-size: 27px;
|
||
background: transparent;
|
||
}
|
||
|
||
.el-calendar-table .el-calendar-day {
|
||
height: 50px !important;
|
||
}
|
||
|
||
.el-calendar__body .el-calendar-table__row .current {
|
||
width: 151px;
|
||
height: 90px;
|
||
text-align: center;
|
||
background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
|
||
border-radius: 4px 4px 4px 4px;
|
||
opacity: 1;
|
||
border: 1px solid #0E86D9;
|
||
}
|
||
|
||
.el-calendar__body .el-calendar-table__row .prev,
|
||
.el-calendar__body .el-calendar-table__row .next {
|
||
width: 151px;
|
||
height: 90px;
|
||
text-align: center;
|
||
background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
|
||
border-radius: 4px 4px 4px 4px;
|
||
opacity: 1;
|
||
border: 1px solid #445050;
|
||
}
|
||
|
||
.is-selected {
|
||
color: #fff;
|
||
}
|
||
|
||
/* 本月的样式 */
|
||
.current,
|
||
.prev,
|
||
.next {
|
||
color: #fff;
|
||
background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
|
||
}
|
||
|
||
/* 上月和下月*/
|
||
|
||
|
||
.el-calendar-table .el-calendar-day:hover {
|
||
// background: linear-gradient(#22702B 0%, #57FF5B 100%);
|
||
background: transparent !important;
|
||
height: 113px; //要去掉2px边框
|
||
}
|
||
|
||
.el-calendar-table__row {
|
||
.current {
|
||
width: 195px;
|
||
height: 115px;
|
||
}
|
||
}
|
||
|
||
.el-calendar-table td:hover {
|
||
background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
|
||
}
|
||
|
||
.el-calendar-table td.is-selected {
|
||
background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
|
||
}
|
||
}
|
||
</style> |