Web/big-screen
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

提交代码

Browse Source
This commit is contained in:
guanj
2025-12-23 11:15:33 +08:00
commit 4d68725c02
110 changed files with 202156 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

822
src/views/Timeinterval/index.vue Normal file
View File

@@ -0,0 +1,822 @@
<template>
<div>
<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
<el-form-item label="时间间隔:">
<el-select
style="width: 90px"
v-model="intervald"
@change="interchange"
placeholder="请选择"
>
<el-option
v-for="item in timeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker
style="width: 250px"
:disabled="disabled"
:readonly="pickDisabled"
:clearable="false"
v-model="timeValue"
:picker-options="pickerOptions"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button
:disabled="backDisabled"
type="primary"
icon="el-icon-d-arrow-left"
@click="preClick"
></el-button>
<el-button @click="nowTime" class="el-icon-video-pause" type="primary"
>当前</el-button
>
<el-button
:disabled="preDisabled"
type="primary"
icon="el-icon-d-arrow-right"
@click="back"
></el-button>
</el-form-item>
<!-- <el-form-item>
<el-button v-show="false" type="primary">导出文件</el-button>
</el-form-item> -->
</el-form>
<!-- <span style="font-size: 14px; font-weight: 550">
<span class="spanColor">间隔:</span>
</span>
<div style="display: inline" v-if="buttonShow">
</div> -->
<!-- <el-button
v-show="buttonShow && thb"
@click="tongbiyear"
style="margin-left: 5px"
type="primary"
>同比</el-button
>
<el-button
v-show="buttonShow && thb"
@click="huangbiyear"
style="margin-left: 5px"
type="primary"
>环比</el-button
> -->
<!-- <el-button
@click="querfromdata"
type="primary"
icon="el-icon-search"
style="margin-left: 10px"
>查询</el-button
> -->
</div>
</template>
<script>
export default {
name: "index4",
props: {
name: {
type: String,
default: undefined,
},
path: {
type: String,
default: undefined,
},
tablename: {
type: String,
default: undefined,
},
interval: {
type: Number,
default: undefined,
},
type: {
type: Number,
default: undefined,
},
falg: {
type: Boolean,
default: false,
},
query: {
type: Boolean,
default: false,
},
thb: {
type: Boolean,
default: false,
},
timeOptions: {
type: Array,
default() {
return [
{ label: "年份", value: 1 },
{ label: "季度", value: 2 },
{ label: "月份", value: 3 },
{ label: "周", value: 4 },
// { label: "自定义", value: 5 },
];
},
},
},
watch: {
intervald(val) {
if (val != 5) {
let endTime = this.getEndTime();
let startTime = this.getStartTime(this.intervald, endTime);
this.timeValue = [startTime, endTime];
this.pickDisabled = false;
this.buttonShow = true;
} else {
let endTime = this.getEndTime();
let startTime = this.getStartTime(this.intervald, endTime);
this.timeValue = [startTime, endTime];
this.buttonShow = false;
this.pickDisabled = false;
}
},
},
data() {
return {
ruleForm: {},
disabled: true,
buttonShow: true, //向前向后按钮显示隐藏控制按钮
pickDisabled: false, //时间组件只读控制se,
falg1: true,
// timeOptions: [
// { label: "年份", value: 1 },
// { label: "季度", value: 2 },
// { label: "月份", value: 3 },
// { label: "周", value: 4 },
// // { label: "自定义", value: 5 },
// ],
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
intervald: this.interval,
tablenamed: this.tablename,
timeValue: [],
timehbValue: [],
backDisabled: false,
preDisabled: true,
huanbibiFalg: false,
tonbiFalg: false,
timeFlag: 0,
};
},
created() {},
mounted() {
let endTime = this.getEndTime();
let startTime = this.getStartTime(this.intervald, endTime);
// console.log(endTime,startTime,'endtime','startTime')
this.timeValue = [startTime, endTime];
this.$emit("time", [startTime, endTime, this.intervald]);
if (this.type == 2) {
this.huangbiyear();
} else if (!this.type) {
this.querfromdata();
}
},
methods: {
interchange(val) {
let endTime = this.getEndTime();
let startTime = this.getStartTime(this.intervald, endTime);
// console.log(endTime,startTime,'endtime','startTime')
this.$emit("time", [startTime, endTime, val]);
if (val == 1 || val == 2) {
this.timeFlag = 0;
} else {
this.timeFlag = 1;
}
// console.log(this.timeFlag);
this.intervald = val;
if (val == 5) {
this.tablenamed == "tab1";
this.disabled = false;
} else {
this.tablenamed == "tab2";
this.disabled = true;
}
},
// 获取当前日期，精确到日
getEndTime() {
var now = new Date();
var sep = "-";
var year = now.getFullYear();
var month = now.getMonth() + 1;
if (month < 10) {
month = "0" + month;
}
var date = now.getDate();
if (date < 10) {
date = "0" + date;
}
// 拼接当前的日期
var endTime = year + sep + month + sep + date;
return endTime;
},
// 获取起始日期
getStartTime(interval, endTime) {
var sep = "-";
var arr = endTime.split("-");
var year = arr[0];
var month = arr[1];
var date = arr[2];
// 按月份间隔
if (interval == 3) {
date = "01";
// 按季度间隔
} else if (interval == 2) {
if ((month > 0) & (month < 4)) {
// 第一季度
month = "01";
date = "01";
} else if (month > 3 && month < 7) {
// 第二季度
month = "04";
date = "01";
} else if (month > 6 && month < 10) {
// 第三季度
month = "07";
date = "01";
} else {
// 第四季度
month = "10";
date = "01";
}
} else if (interval == 1) {
month = "01";
date = "01";
} else if (interval == "半年") {
if (month < 7) {
month = "01";
date = "01";
} else {
month = "07";
date = "01";
}
} else if (interval == 4) {
//周
var start = new Date(year, month - 1, date);
var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay(); // 如果为周日，则置为7天
start.setDate(start.getDate() - dayOfWeek + 1); // 计算开始时间
if (this.formatTime(new Date()) != endTime) {
// 如果结束时间不是当前时间
var end = new Date(start);
end.setDate(end.getDate() + 6);
// $("#endTime").val(this.formatTime(end));
}
return this.formatTime(start);
}
var startTime = year + sep + month + sep + date;
return startTime;
},
// 时间格式化
formatTime(time) {
return (
time.getFullYear() +
"-" +
(time.getMonth() + 1 < 10 ? "0" : "") +
(time.getMonth() + 1) +
"-" +
(time.getDate() < 10 ? "0" : "") +
time.getDate()
);
},
//向前
preClick() {
let interval = this.intervald;
let startTime = this.timeValue[0];
let endTime = this.timeValue[1];
let year = parseInt(startTime.substring(0, 4));
let month = parseInt(startTime.substring(5, 7));
let date = parseInt(startTime.substring(8, 10));
//按月
if (interval == 3) {
// 换年份
if (month == 1) {
year = year - 1;
startTime = year + "-12-01";
endTime = year + "-12-31";
} else if (month <= 10) {
month = month - 1;
startTime = year + "-0" + month + "-01";
let day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
} else {
month = month - 1;
startTime = year + "-" + month + "-01";
let day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
//按周
} else if (interval == 4) {
//根据开始时间推
let start = new Date(year, month - 1, date);
start.setDate(start.getDate() - 7);
startTime = this.formatTime(start);
var end = new Date(start);
end.setDate(start.getDate() + 6);
endTime = this.formatTime(end);
//按季度
} else if (interval == 2) {
// 换年份
if (month == 1) {
year = year - 1;
startTime = year + "-10-01";
endTime = year + "-12-31";
} else {
// 还是本年
month = month - 3;
startTime = year + "-0" + month + "-01";
month = month + 2;
var day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
}
//自定义
} else if (interval == 5) {
//按年
} else if (interval == 1) {
year = year - 1;
startTime = year + "-01-01";
endTime = year + "-12-31";
} else if (interval == 6) {
if (month <= 6) {
year = year - 1;
startTime = year + "-07-01";
endTime = year + "-12-31";
} else {
startTime = year + "-01-01";
endTime = year + "-06-30";
}
}
this.timeValue = [startTime, endTime];
// 判断向后键的状态
var temp = this.getEndTime();
this.timeStatus(temp, endTime);
},
//向后
back() {
let interval = this.intervald;
let startTime = this.timeValue[0];
let endTime = this.timeValue[1];
let year = parseInt(startTime.substring(0, 4));
let month = parseInt(startTime.substring(5, 7));
let date = parseInt(startTime.substring(8, 10));
var now = new Date();
// 获取当前年份
var presentY = now.getFullYear();
// 获取当前月份
var presentM = now.getMonth() + 1;
// 获取当前日期
var presentD = now.getDate();
if (interval == 3) {
if (month == 12) {
year = year + 1;
// 年份进位后，大于当前的年份，是不科学的
if (presentY < year) {
startTime = presentY + "-12-01";
if (presentD < 10) {
endTime = presentY + "-12" + "-0" + presentD;
} else {
endTime = presentY + "-12" + "-" + presentD;
}
// 年份进位后，等于当前的年份
} else if (presentY == year) {
startTime = year + "-01-01";
if (presentM > 1) {
endTime = year + "-01-31";
} else {
if (presentD < 10) {
endTime = year + "-01" + "-0" + presentD;
} else {
endTime = year + "-01" + "-" + presentD;
}
}
// 年份进位后，依旧小于当前的年份
} else {
startTime = year + "-01-01";
endTime = year + "-01-31";
}
} else {
month = month + 1;
// 年份等于当前年份
if (presentY == year) {
// 月份超过当前月份，是不科学的
if (month >= presentM) {
if (presentM < 10) {
startTime = year + "-0" + presentM + "-01";
if (presentD < 10) {
endTime = year + "-0" + presentM + "-0" + presentD;
} else {
endTime = year + "-0" + presentM + "-" + presentD;
}
} else {
startTime = year + "-" + presentM + "-01";
if (presentD < 10) {
endTime = year + "-" + presentM + "-0" + presentD;
} else {
endTime = year + "-" + presentM + "-" + presentD;
}
}
} else {
if (month < 10) {
startTime = year + "-0" + month + "-01";
var day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
} else {
startTime = year + "-" + month + "-01";
var day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
}
// 年份小于当前的年份
} else {
if (month < 10) {
startTime = year + "-0" + month + "-01";
var day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
} else {
startTime = year + "-" + month + "-01";
var day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
}
}
} else if (interval == 2) {
// 前进需要年份进位
if (month == 10) {
year = year + 1;
// 年份进位后大于当前年份是不科学的
if (year > presentY) {
startTime = presentY + "-10-01";
if (presentD < 10) {
endTime = year + "-" + presentM + "-0" + presentD;
} else {
endTime = year + "-" + presentM + "-" + presentD;
}
} else if (year == presentY) {
startTime = year + "-01-01";
// 当前月份大约3月份
if (presentM > 3) {
endTime = year + "-03-31";
} else {
// 当前月份也在第一季度里
if (presentD < 10) {
endTime = year + "-0" + presentM + "-0" + presentD;
} else {
endTime = year + "-0" + presentM + "-" + presentD;
}
}
} else {
startTime = year + "-01-01";
endTime = year + "-03-31";
}
} else {
month = month + 3;
// 季度进位后，超过当前月份是不科学的
if (year == presentY) {
if (month >= presentM) {
// 当季度进位后大于当前月，以当前月的时间显示季度
if (presentM > 0 && presentM < 4) {
// 第一季度
startTime = year + "-01-01";
if (presentD < 10) {
endTime = year + "-0" + presentM + "-0" + presentD;
} else {
endTime = year + "-0" + presentM + "-" + presentD;
}
} else if (presentM > 3 && presentM < 7) {
// 第二季度
startTime = year + "-04-01";
if (presentD < 10) {
endTime = year + "-0" + presentM + "-0" + presentD;
} else {
endTime = year + "-0" + presentM + "-" + presentD;
}
} else if (presentM > 6 && presentM < 10) {
// 第三季度
startTime = year + "-07-01";
if (presentD < 10) {
endTime = year + "-0" + presentM + "-0" + presentD;
} else {
endTime = year + "-0" + presentM + "-" + presentD;
}
} else {
// 第四季度
startTime = year + "-10-01";
if (presentD < 10) {
endTime = year + "-" + presentM + "-0" + presentD;
} else {
endTime = year + "-" + presentM + "-" + presentD;
}
}
} else {
if (month == 10) {
startTime = year + "-" + month + "-01";
} else {
startTime = year + "-0" + month + "-01";
}
month = month + 2;
if (month >= presentM) {
endTime = this.getEndTime();
} else {
var day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
}
} else {
if (month == 10) {
startTime = year + "-" + month + "-01";
month = month + 2;
var day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
} else {
startTime = year + "-0" + month + "-01";
month = month + 2;
var day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
}
}
}
} else if (interval == 5) {
} else if (interval == 4) {
//根据开始时间推
var start = new Date(year, month - 1, date);
start.setDate(start.getDate() + 7);
startTime = this.formatTime(start);
var end = new Date(start);
end.setDate(start.getDate() + 6);
endTime = this.formatTime(end);
if (parseInt((end - new Date()) / 1000 / 60) > 24) {
//相差小时大于24小时，即超过当天，置为当天日期
endTime = this.formatTime(new Date());
}
} else {
year = year + 1;
// 年份进位后大于当前年份，是不科学的
if (year >= presentY) {
startTime = presentY + "-01-01";
if (presentM < 10) {
if (presentD < 10) {
endTime = presentY + "-0" + presentM + "-0" + presentD;
} else {
endTime = presentY + "-0" + presentM + "-" + presentD;
}
} else {
endTime = presentY + "-" + presentM + "-" + presentD;
}
} else {
startTime = year + "-01-01";
endTime = year + "-12-31";
}
}
this.timeValue = [startTime, endTime];
// 判断向后键的状态
var temp = this.getEndTime();
this.timeStatus(temp, endTime);
},
//当前按钮点击事件
nowTime() {
let interval = this.intervald;
let endTime = this.getEndTime();
let startTime = this.getStartTime(interval, endTime);
this.timeValue = [startTime, endTime];
// 判断向后键的状态
let temp = this.getEndTime();
this.timeStatus(temp, endTime);
},
//判断向后按钮
timeStatus(temp, endTime) {
// 判断next按钮的状态
if (temp == endTime) {
this.preDisabled = true;
} else {
this.preDisabled = false;
}
},
// 获取月份的天数
getDays(year, month) {
let max = new Date(year, month, 0).getDate();
return max;
},
querfromdata() {
//type用于区分是按钮触发还是钩子函数触发 1按钮触发 underfind 钩子触发
if (!this.type) {
var data = this.timeValue;
var timehbValue = "";
this.$emit("querfromdata", data, timehbValue, this.intervald);
} else if (this.type == 2) {
this.huangbiyear();
}
},
goto() {
this.$router.push({
path: "/harmonic-boot/algorithm",
query: { name: this.name, path: this.path },
});
},
//环比
huangbiyear() {
this.huanbibiFalg = true;
let interval = this.intervald;
let startTime = this.timeValue[0];
let endTime = this.timeValue[1];
let year = parseInt(startTime.substring(0, 4));
let month = parseInt(startTime.substring(5, 7));
let date = parseInt(startTime.substring(8, 10));
//按月
if (interval == 3) {
// 换年份
if (month == 1) {
year = year - 1;
startTime = year + "-12-01";
endTime = year + "-12-31";
} else if (month <= 10) {
month = month - 1;
startTime = year + "-0" + month + "-01";
let day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
} else {
month = month - 1;
startTime = year + "-" + month + "-01";
let day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
//按周
} else if (interval == 4) {
//根据开始时间推
let start = new Date(year, month - 1, date);
start.setDate(start.getDate() - 7);
startTime = this.formatTime(start);
var end = new Date(start);
end.setDate(start.getDate() + 6);
endTime = this.formatTime(end);
//按季度
} else if (interval == 2) {
// 换年份
if (month == 1) {
year = year - 1;
startTime = year + "-10-01";
endTime = year + "-12-31";
} else {
// 还是本年
month = month - 3;
startTime = year + "-0" + month + "-01";
month = month + 2;
var day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
}
//自定义
} else if (interval == 5) {
//按年
} else if (interval == 1) {
year = year - 1;
startTime = year + "-01-01";
endTime = year + "-12-31";
} else if (interval == 6) {
if (month <= 6) {
year = year - 1;
startTime = year + "-07-01";
endTime = year + "-12-31";
} else {
startTime = year + "-01-01";
endTime = year + "-06-30";
}
}
this.timehbValue = [startTime, endTime];
var data = this.timeValue;
var timehbValue = this.timehbValue;
// debugger
this.$emit("querfromdata", data, timehbValue, interval);
// 判断向后键的状态
// var temp = this.getEndTime();
//this.timeStatus(temp, endTime);
},
//同比
tongbiyear() {
this.tonbiFalg = true;
let interval = this.intervald;
let startTime = this.timeValue[0];
let endTime = this.timeValue[1];
let year = parseInt(startTime.substring(0, 4));
let month = parseInt(startTime.substring(5, 7));
let date = parseInt(startTime.substring(8, 10));
//按月
if (interval == 3) {
year = year - 1;
if (month <= 10) {
startTime = year + "-0" + month + "-01";
let day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
} else {
startTime = year + "-" + month + "-01";
let day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
//按周
} else if (interval == 4) {
//根据开始时间推
let start = new Date(year - 1, month, date);
start.setDate(start.getDate() - 7);
startTime = this.formatTime(start);
var end = new Date(start);
end.setDate(start.getDate() + 6);
endTime = this.formatTime(end);
//按季度
} else if (interval == 2) {
year = year - 1;
if (month < 10) {
startTime = year + "-0" + month + "-01";
} else {
startTime = year + "-" + month + "-01";
}
month = month + 2;
if (month <= 10) {
var day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
} else {
var day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
//自定义
} else if (interval == 5) {
//按年
} else if (interval == 1) {
year = year - 1;
startTime = year + "-01-01";
endTime = year + "-12-31";
} else if (interval == 6) {
if (month <= 6) {
year = year - 1;
startTime = year + "-07-01";
endTime = year + "-12-31";
} else {
startTime = year + "-01-01";
endTime = year + "-06-30";
}
}
this.timehbValue = [startTime, endTime];
var data = this.timeValue;
var timehbValue = this.timehbValue;
this.$emit("querfromdata", data, timehbValue, interval);
},
},
};
</script>

283
src/views/center/components/DataCenter.vue Normal file
View File

@@ -0,0 +1,283 @@
<template>
<div class="box">
<div class="boxTop" ref="boxTop">
<img
class="img"
src="../images/369a8784c99e23f956099a59f7bdfa1.png"
alt=""
srcset=""
/>
<span>数据中心</span>
<div class="divSpan">
∣<span @click="tab1" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }"
>产品系统介绍</span
>
∣
<span @click="tab2" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }"
>产品视频介绍</span
>
</div>
</div>
<div class="boxB" style="height: 100%" ref="box" v-show="show">
<!-- <img id="img" @click="imgClick" src="@/assets/pdf.png" /> -->
<!-- ppt -->
<div
class="divImg"
v-for="item in PPTList"
:key="item.id"
@click="imgClick(item)"
>
<img class="imgs" :src="item.picUrl" />
<span style="color: rgb(7, 216, 253)">{{ item.resourceName }}</span>
</div>
</div>
<div class="boxB" style="height: 100%" v-show="!show">
<!-- mp4 -->
<div
class="divImg"
v-for="item in MP4List"
:key="item.id"
@click="videoMp4(item)"
>
<img class="imgs" :src="item.picUrl" />
<span style="color: rgb(7, 216, 253)">{{ item.resourceName }}</span>
</div>
</div>
<!-- <video v-if="showvideo"
controls
autoplay
src="/device-boot/resource/play1?id=c4e4616e3aa630e5c3883807985a6cb8"
/> -->
<el-dialog
:close-on-click-modal="false"
:title="titleVideo"
:visible.sync="showvideo"
v-if="showvideo"
width="90%"
:append-to-body="true"
>
<!-- v-if="showvideo" -->
<video style="height: 85vh" controls="controls" autoplay :src="src" />
</el-dialog>
<!-- <el-dialog :close-on-click-modal="false"
title="PPT目录"
:visible.sync="dialogVisible"
width="60%"
:append-to-body="true"
>
<div class="imgDiv" ref="imgDiv">
<img
id="img1"
@click="clickImg('./static/pdf/XTJS.pdf')"
src="@/assets/XTJS.png"
/>
<img
id="img2"
@click="clickImg('./static/pdf/XTYY.pdf')"
src="@/assets/YYJS.png"
/>
</div>
</el-dialog> -->
</div>
</template>
<script>
import { queryData, play } from "@/api/center/DropEvent.js";
export default {
components: {},
props: {},
data() {
return {
flag: 0,
show: true,
dialogVisible: false,
MP4List: [],
PPTList: [],
src: "",
showvideo: false,
titleVideo: "",
};
},
created() {
this.infoZ();
this.infoO();
},
mounted() {
// document.getElementById("img").style.height =
// this.$refs.box.offsetHeight - this.$refs.boxTop.offsetHeight - 20 + "px";
// el-dialog__body
this.tab1();
},
methods: {
infoZ() {
queryData({
type: 0,
state: 0,
}).then((res) => {
this.PPTList = res.data;
});
},
infoO() {
queryData({
type: 1,
state: 0,
}).then((res) => {
this.MP4List = res.data;
});
},
async videoMp4(e) {
let message = null;
message = this.$message({
showClose: true,
message: " 视频加载中，请稍等......",
iconClass: "el-icon-loading",
duration: 0,
});
this.titleVideo = e.resourceName;
await play({
id: e.id,
})
.then((res) => {
this.src = window.URL.createObjectURL(res);
message.close();
})
.catch(() => {
message.close();
});
this.showvideo = true;
},
async imgClick(e) {
// await play({
// id: e.id,
// }).then((res) => {
window.open(e.resUrl);
// });
// let height = document.getElementsByClassName("el-dialog__body");
// setTimeout(() => {
// let height =
// document.getElementsByClassName("el-dialog__body")[0].offsetHeight +
// "px";
// document.getElementById("img1").style.height = height;
// document.getElementById("img2").style.height = height;
// }, 100);
},
clickImg(e) {
let test = window.open(e); // 直接写成这样的地址
},
tab1() {
this.infoZ();
this.flag = 0;
this.show = true;
},
tab2() {
this.infoO();
this.flag = 1;
this.show = false;
},
},
watch: {},
};
</script>
<style lang="less" scoped>
@import url("../css/home.less");
@font-face {
font-family: sszh;
src: url("../fonts/sszh.ttf"); /* IE9+ */
}
.box {
width: 100%;
height: 100%;
.boxTop {
display: flex;
align-items: center;
height: 8%;
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 0.85rem;
line-height: 8%;
// background-color: #29707f;
letter-spacing: 1px;
color: #07d8fd;
cursor: pointer;
background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
.img {
height: 100%;
padding: 0 1.5%;
cursor: pointer;
}
.divSpan {
padding-left: 5%;
font-size: 0.85rem;
color: #fff;
}
}
.boxBot {
height: 90%;
// background-color: rgb(41, 16, 16);
}
.boxB {
padding: 10px;
height: 90% !important;
width: 100%;
/*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
background-size: cover;
position: absolute;
display: flex;
flex-wrap: wrap;
// justify-content: space-around;
left: 0;
top: 9%;
}
.divImg {
height: 80px !important;
display: flex;
flex-direction: column;
align-items: center;
margin-left: 1%;
}
.imgs {
vertical-align: bottom;
cursor: pointer; //鼠标滑过变成小手
height: 100% !important;
}
}
::v-deep .el-dialog {
// background-color: transparent;
border: 1px solid #1697de;
background-color: rgba(33, 57, 83, 0.6);
.el-dialog__header {
// background-color: transparent ;
background-color: rgba(33, 57, 83, 0.6);
border-bottom: 1px solid #1697de;
}
.el-dialog__title {
line-height: 24px;
font-size: 18px;
color: rgb(7, 216, 253);
}
}
.imgDiv {
display: flex;
width: 100%;
justify-content: space-around;
img {
width: 45%;
vertical-align: bottom;
cursor: pointer; //鼠标滑过变成小手
}
}
::v-deep .el-dialog {
margin-top: 2% !important;
}
::v-deep .el-dialog__body {
padding: 10px;
max-height: none !important;
display: flex;
justify-content: center;
}
</style>

320
src/views/center/components/DataSize.vue Normal file
View File

@@ -0,0 +1,320 @@
<template>
<div class="box">
<div class="boxTop">
<img class="img" src="../images/GM.png" alt="" srcset="" />
<span>数据规模</span>
<div class="total">
总计:<span>{{ total }}</span>
</div>
</div>
<div class="boxBot" ref="Echarts">
<div
id="echart1"
style="width: 100%; height: 100%"
v-loading="isLoading"
></div>
</div>
</div>
</template>
<script>
import { getDataScale } from "@/api/center/DropEvent.js";
export default {
components: {},
props: {},
data() {
return {
zoom: undefined, //图表焦点校验
h: undefined,
isLoading: false,
total: 0,
myChart: null,
time: null,
};
},
created() {},
mounted() {
this.zoom = 1 / document.body.style.zoom;
window.addEventListener("resize", () => {
this.zoom = 1 / document.body.style.zoom;
});
this.$nextTick(() => {
this.province();
setInterval(() => {
clearInterval(this.time);
this.province();
}, 60000 * 5);
});
},
methods: {
//echarts图
async province() {
this.isLoading = true;
var xData = [];
var yData = [];
const data = [];
await getDataScale({
deptIndex: "1",
searchBeginTime: "2022-01-01",
searchEndTime: "2022-01-01",
}).then((res) => {
res.data.forEach((item, i) => {
this.total = this.total + item.dataStatis;
if (i != 0) {
item.timeId = item.timeId.slice(5);
}
xData.push(item.timeId);
yData.push(item.dataStatis);
});
});
let _this = this;
let echarts = require("echarts");
if (_this.myChart != null) {
_this.myChart.dispose();
}
let domID1 = document.getElementById("echart1");
setTimeout(() => {
(domID1.style.width = this.$refs.Echarts.offsetWidth + "px"),
(domID1.style.height = this.$refs.Echarts.offsetHeight + "px");
}, 0);
_this.myChart = echarts.init(domID1);
this.isLoading = false;
let option = {
//backgroundColor:'#12193a',
color: ["#f0c725", "#16f892"],
title: {
left: "center",
text: "南京灿能数据规模变化",
textStyle: {
color: "#FFFFFF",
fontSize: "14",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
data: ["语文"],
x: "center",
top: "25",
textStyle: {
color: "#c1cadf",
fontSize: 10,
},
},
grid: {
left: "1%",
right: "6.5%",
top: "16%",
bottom: "0%",
containLabel: true,
},
toolbox: {
show: true,
orient: "vertical",
x: "right",
y: "center",
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: xData,
axisLine: {
lineStyle: {
color: "#00ffff",
},
},
axisLabel: {
show: true,
color: "#00ffff",
},
},
],
yAxis: [
{
type: "value",
//name: 'GB',
nameTextStyle: {
color: "#00ffff",
align: "right",
lineHeight: 10,
},
axisTick: {
show: true,
},
axisLine: {
show: true,
lineStyle: {
color: "#00ffff",
},
},
axisLabel: {
interval: 0,
color: "#00ffff",
},
splitLine: {
show: false,
},
},
{
type: "value",
name: "单位:GB",
nameTextStyle: {
color: "#00ffff",
fontSize: 12,
align: "right",
lineHeight: 10,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
],
series: [
{
name: "数据量",
type: "line",
smooth: true,
symbolSize: 8,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(240,199,37,0.5)",
},
{
offset: 1,
color: "rgba(15,253,195,0.5)",
},
]),
},
data: yData,
barWidth: "30%",
lineStyle: { normal: { color: "#f0c725" } },
itemStyle: {
color: "#07d8fd",
},
label: {
show: true,
position: "top",
textStyle: {
color: "#07d8fd",
fontSize: 12,
},
},
markLine: {
silent: true,
data: [
{
yAxis: 150,
},
],
label: {
color: "#07d8fd",
},
},
},
],
};
option && _this.myChart.setOption(option, true);
//window.echartsArr.push(_this.myChart);
setTimeout(function () {
_this.myChart.resize();
let app = {
currentIndex: -1,
};
_this.time = setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
_this.myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
//console.log(app.currentIndex);
// 高亮当前图形
_this.myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
// 显示 tooltip
_this.myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
}, 2000);
}, 0);
},
},
beforeDestroy() {
for (let i = 1; i < 10000; i++) {
clearInterval(i);
}
},
};
</script>
<style lang="scss" scoped>
// @import url("../css/home.less");
@font-face {
font-family: sszh;
src: url("../fonts/sszh.ttf"); /* IE9+ */
}
.box {
width: 100%;
height: 100%;
.boxTop {
position: relative;
display: flex;
align-items: center;
height: 8%;
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 0.85rem;
line-height: 8%;
letter-spacing: 1px;
color: #07d8fd;
cursor: pointer;
background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
.img {
height: 100%;
padding: 0 1.5%;
cursor: pointer;
}
.total {
position: absolute;
top: 50%;
left: 50%;
font-size: 0.85rem;
color: rgb(0, 255, 0);
transform: translate(-50%, -50%);
span {
font-family: electricFont;
font-size: 1.3rem;
color: #07d8fd;
}
}
}
.boxBot {
height: 90%;
// background-color: rgb(41, 16, 16);
}
}
</style>

1539
src/views/center/components/DropEvent.vue Normal file
View File

File diff suppressed because it is too large Load Diff

1234
src/views/center/components/Map.vue Normal file
View File

File diff suppressed because it is too large Load Diff

776
src/views/center/components/MonitoringPointScale.vue Normal file
View File

@@ -0,0 +1,776 @@
<template>
<div class="MonitoringPointScale">
<div class="boxT" @mouseleave="handleMouseLeave">
<img class="imgicon" src="../images/GM.png" alt="" srcset="" />
<span>监测点规模</span>
<div class="divSpan">
<span @click="tab1(0, 1)" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }">片区</span>
∣
<span @click="tab2(0, 1)" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }">负荷类型</span>
</div>
</div>
<div class="boxB" ref="electr0_7" v-show="isshow">
<div id="electr0_7" style="width: 100%; height: 100%" />
<div class="boxnum" id="boxnum">
<div class="zong">
<div class="zong_title" id="zong_title">总数</div>
<div class="zong_num" id="zong_num">{{ total }}</div>
</div>
<div class="add">
<div class="add_title" id="add_title">本月新增</div>
<div class="add_num" id="add_num">{{ add }}</div>
</div>
</div>
</div>
<div class="boxB" ref="electr0_8" v-show="!isshow">
<div id="electr0_8" style="width: 100%; height: 100%" />
</div>
</div>
</template>
<script>
import {
getMonitoringPointScale,
getLoadTypeData,
} from "@/api/center/DropEvent.js";
export default {
components: {},
props: {},
data() {
return {
isshow: true,
flag: 0,
Num: 0,
zoom: "", //图表焦点校验
total: "", //图表焦点校验
add: "", //图表焦点校验
formData: {
deptIndex: "",
searchBeginTime: this.getCurrentMonthFirst(),
searchEndTime: this.getNowFormatDate(),
},
piedata: [
{ value: 1048, name: "安徽省" },
{ value: 735, name: "江苏省" },
{ value: 580, name: "浙江省" },
{ value: 484, name: "云南省" },
{ value: 300, name: "海南省" },
{ value: 300, name: "福建省" },
{ value: 300, name: "广东省" },
],
timeA: null,
timeB: null,
calm: false,
electr7List: [],
electr8List: [],
myChart2: null,
};
},
created() {
this.formData.deptIndex = JSON.parse(
window.localStorage.getItem("adminInfo")
).deptId;
},
mounted() {
this.zoom = 1 / document.body.style.zoom;
window.addEventListener("resize", () => {
this.zoom = 1 / document.body.style.zoom;
});
getMonitoringPointScale(this.formData).then((res) => {
this.total = res.data.monitorTotalCount;
this.add = res.data.monitorAddCount;
this.electr7List = res;
this.electr7();
});
getLoadTypeData(this.formData).then((res) => {
this.electr8List = res;
});
this.info();
},
beforeDestroy() {
for (let i = 1; i < 10000; i++) {
clearInterval(i);
}
for (let i = 1; i < 10000; i++) {
clearTimeout(i);
}
},
methods: {
info() {
this.timeA = setTimeout(() => {
this.tab2();
}, 15000);
this.timeB = setTimeout(() => {
this.tab1();
this.info();
}, 60000);
},
handleMouseLeave() {
if (this.calm) {
this.calm = false;
this.$emit("Remove");
// this.info();
}
},
//获取当月第一天日期
getCurrentMonthFirst() {
var date = new Date();
var year = date.getFullYear();
date.setDate(1);
var month = parseInt(date.getMonth() + 1);
var day = date.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return year + "-" + month + "-" + day;
},
//获取当天日期
getNowFormatDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return year + "-" + month + "-" + day;
},
fontSize(res) {
let clientWidth = document.documentElement.clientWidth;
if (!clientWidth) return;
let fontSize = clientWidth / 1920;
return res * fontSize;
},
tab1(e, v) {
this.flag = 0;
this.electr7();
this.isshow = true;
if (e == 0) {
if (v == 1) {
this.$emit("control", { name: "MonitoringPointScale", val: 1 });
}
clearTimeout(this.timeA);
clearTimeout(this.timeB);
this.calm = true;
}
},
tab2(e, v) {
this.flag = 1;
this.electr8();
this.isshow = false;
if (e == 0) {
if (v == 1) {
this.$emit("control", { name: "MonitoringPointScale", val: 2 });
}
clearTimeout(this.timeA);
clearTimeout(this.timeB);
this.calm = true;
}
},
// 监测点规模片区
async electr7() {
let EchartsData = [];
let arrData = this.electr7List.data.param;
arrData.forEach((item) => {
item.name = item.name;
item.value = item.count;
});
EchartsData = arrData;
let echarts = require("echarts");
let domID1 = document.getElementById("electr0_7");
let boxnum = document.getElementById("boxnum");
let zong_title = document.getElementById("zong_title");
let zong_num = document.getElementById("zong_num");
let add_title = document.getElementById("add_title");
let add_num = document.getElementById("add_num");
setTimeout(() => {
(domID1.style.width = this.$refs.electr0_7.offsetWidth + "px"),
(domID1.style.height = this.$refs.electr0_7.offsetHeight + "px");
boxnum.style.width = this.$refs.electr0_7.offsetWidth / 5 + "px";
zong_title.style.fontSize = ".75rem";
zong_num.style.fontSize = "1.5rem";
add_title.style.fontSize = ".75rem";
add_num.style.fontSize = "1.5rem";
}, 0);
let color = [
"#d909e0",
"#ffe400",
"#ff9a09",
"#ef1e5f",
"#23cbe5",
"#ec561b",
"#ffa500",
"#41E398",
"#12AFA6",
"#FF0000",
"#CC99FF",
"#0099CC",
"#FF6699",
"#00FF7F",
"#D2691E",
"#FF6347",
"#A52A2A",
"#808080",
"#DEB887",
"#FFD700",
"#556B2F",
"#7FFF00",
"#808000",
"#40E0D0",
"#00FFFF",
"#8A2BE2",
"#EE82EE",
"#000080",
"#DC143C",
"#008080",
"#8FBC8F",
"#F5DEB3",
"#FF7F50",
"#FFF5EE",
];
let myChart2 = echarts.init(domID1);
let option = {
title: {
text: "片区分布",
left: "center",
top: "center",
textStyle: {
color: "#fff",
},
},
tooltip: {
trigger: "item",
backgroundColor: "rgba(8,36,68,.7)",
color: "#00ffff",
textStyle: {
color: "#00ffff",
},
},
legend: {
type: "scroll",
orient: "vertical",
left: 0,
top: 5,
bottom: 10,
// itemHeight: 8,
pageIconColor: "white", //激活的分页按钮颜色
pageTextStyle: {
color: "#35ffff",
},
pageIconInactiveColor: "#CCC", //没激活的分页按钮颜色
textStyle: {
color: "#fff",
fontSize: 12,
},
//设置自定义legend 的重点
// formatter: function(name) {
// // 获取legend显示内容
// let data = EchartsData;//这个是展示的数据
// let total = 0;
// let tarValue = 0;
// let value = 0;
// for (let i = 0, l = data.length; i < l; i++) {
// total += data[i].value;
// if (data[i].name == name) {
// tarValue = data[i].value;
// value = data[i].value;
// }
// }
// let p = total== 0? 0 :((tarValue / total) * 100).toFixed(1);
// return [
// "{a|" +
// echarts.format.truncateText(
// name,
// 80,
// "14px Microsoft Yahei",
// "…"//如果宽度超过80会出现...
// ) +
// "}",
// "{b|" + p + "%}",
// "{x|" + value + "}" //a、b、x、跟下面的rich对应
// ].join(" ");
// },
},
series: [
{
type: "pie",
radius: ["55%", "65%"],
// center: ['60%', '60%'],
data: EchartsData.map((item, index) => {
item.label = {
color: color[index],
};
return item;
}),
itemStyle: {
color: (params) => {
var index = params.dataIndex;
var color = [
"#d909e0",
"#ffe400",
"#ff9a09",
"#ef1e5f",
"#23cbe5",
"#ec561b",
"#ffa500",
"#41E398",
"#12AFA6",
"#FF0000",
"#CC99FF",
"#0099CC",
"#FF6699",
"#00FF7F",
"#D2691E",
"#FF6347",
"#A52A2A",
"#808080",
"#DEB887",
"#FFD700",
"#556B2F",
"#7FFF00",
"#808000",
"#40E0D0",
"#00FFFF",
"#8A2BE2",
"#EE82EE",
"#000080",
"#DC143C",
"#008080",
"#8FBC8F",
"#F5DEB3",
"#FF7F50",
"#FFF5EE",
];
return color[index];
},
},
},
],
};
option && myChart2.setOption(option, true);
//window.echartsArr.push(myChart2);
setTimeout(function () {
myChart2.resize();
}, 0);
},
async electr8() {
let echarts = require("echarts");
let _this = this;
let domID1 = document.getElementById("electr0_8");
setTimeout(() => {
(domID1.style.width = this.$refs.electr0_8.offsetWidth + "px"),
(domID1.style.height = this.$refs.electr0_8.offsetHeight + "px");
}, 0);
if (_this.myChart2 != null) {
_this.myChart2.dispose();
clearInterval(_this.time2);
}
_this.myChart2 = echarts.init(domID1);
// const data = await getLoadTypeData(this.formData);
let cityList = [];
let cityData = [];
this.electr8List.data.param.sort((a, b) => b.count - a.count).forEach((item) => {
if (item.count != 0) {
cityList.push(item.name);
cityData.push(item.count);
}
});
// 数据处理
var charts = {
// 按顺序排列从大到小
cityList: cityList,
cityData: cityData,
};
var top10CityList = charts.cityList;
var top10CityData = charts.cityData;
var color = [
"rgba(3,255,238",
"rgba(218,3,255",
"rgba(255,248,3",
"rgba(120,255,3",
"rgba(255,218,3",
"rgba(3,204,255",
"rgba(3,72,255",
"rgba(255,101,3",
"rgba(3,255,155",
"rgba(218,255,3",
"rgba(135,3,255",
"rgba(107,146,168",
"rgba(7,230,163",
"rgba(52,162,191",
"rgba(147,112,219",
"rgba(100,149,237",
"rgba(72,209,204",
"rgba(152,251,152",
"rgba(255,99,71",
"rgba(188,143,143",
"rgba(105,105,105",
"rgba(210,105,30",
"rgba(255,165,0",
"rgba(189,183,107",
"rgba(124,252,0",
"rgba(0,255,127",
"rgba(0,139,139",
"rgba(0,191,255",
"rgba(225,255,255",
"rgba(112,128,144",
"rgba(176,196,222",
"rgba(123,104,238",
"rgba(153,50,204",
"rgba(255,0,255",
"rgba(255,105,180",
];
// 图表option整理
let lineY = [];
var yData = [];
for (var i = 0; i < charts.cityList.length; i++) {
yData.push(top10CityData[i] + "个");
var EchartsData = {
name: charts.cityList[i],
color: color[i] + ")",
value: top10CityData[i],
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: color[i] + ", 0.3)",
},
{
offset: 1,
color: color[i] + ", 1)",
},
],
false
),
barBorderRadius: 10,
},
emphasis: {
shadowBlur: 15,
shadowColor: "rgba(0, 0, 0, 0.1)",
},
},
};
lineY.push(EchartsData);
}
let maxValue = 0;
for (const item of lineY) {
if (item.value > maxValue) {
maxValue = item.value;
}
}
var option = {
// backgroundColor: '#000',
title: {
show: false,
},
tooltip: {
showContent: true,
trigger: "axis",
backgroundColor: "rgba(8,36,68,.7)",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
color: "#00ffff",
textStyle: {
color: "#00ffff",
},
// formatter: function (params) {
// for (var i = 0; i < params.length; i++) {
// if (params[i].name !== "") {
// str += params[i].name +":" +
// params[i].value +
// "<br/>";
// }
// }
// return str;
// },
},
grid: {
borderWidth: 0,
top: "10px",
left: "30px",
right: "35px",
bottom: "15px",
},
color: color,
dataZoom: [
{
type: "slider",
show: true,
// 设置组件控制的y轴
yAxisIndex: [0, 1],
left: 5,
// top: 60,
// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
// 也可以用 startValue设置起始值
start: 0,
end: lineY.length < 10 ? 100 : 50, //默认为100
width: 6,
// height: 450,
// 组件的背景颜色
// left: 600, //左边的距离
// right: 8,//右边的距离
borderRadius: 5,
// borderColor: "rgba(43,48,67,0.8)",
// fillerColor: '#ccc',//滑动块的颜色
// backgroundColor: '#33384b',//两边未选中的滑动条片区的颜色
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 控制手柄的尺寸
handleSize: 12,
// 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
showDataShadow: false,
},
{
type: "inside",
yAxisIndex: [0, 1],
start: 1,
// end: 36,
// 不按任何功能键，鼠标滚轮能触发缩放
// zoomOnMouseWheel: false,
// 不按任何功能键，鼠标移动能触发数据窗口平移
// moveOnMouseWheel: true,
},
],
yAxis: [
{
type: "category",
inverse: true,
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
width: 3,
},
},
axisLabel: {
show: false,
inside: false,
},
data: top10CityList,
},
{
name: "单位:个",
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
inside: false,
textStyle: {
color: "#03E9FF",
fontSize: "10",
fontFamily: "PingFangSC-Regular",
},
// formatter: function (val) {
// return `${val}个`;
// },
},
data: yData,
splitArea: {
show: false,
},
splitLine: {
show: false,
},
},
],
xAxis: {
type: "value",
axisTick: {
show: false,
},
max: maxValue + 30,
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
textStyle: {
fontSize: "10",
},
},
},
series: [
{
name: "",
type: "bar",
// zlevel: 2,
barMaxWidth: 20,
barGap: `10%`,
data: lineY,
animationDuration: 1500,
label: {
normal: {
color: "#03FDFF",
show: true,
position: "right",
textStyle: {
fontSize: "0.9rem",
},
formatter: function (a, b) {
return a.name;
},
},
},
},
],
animationEasing: "cubicOut",
};
option && _this.myChart2.setOption(option, true);
//window.echartsArr.push(myChart2);
setTimeout(function () {
_this.myChart2.resize();
}, 0);
if (lineY.length >= 10) {
_this.time2 = setInterval(() => {
if (option.dataZoom[0].end == 50) {
option.dataZoom[0].end = 100;
option.dataZoom[0].start = 50;
} else if (option.dataZoom[0].end == 100) {
option.dataZoom[0].end = 50;
option.dataZoom[0].start = 0;
}
// else if (option.dataZoom[0].end == 75) {
// option.dataZoom[0].end = 100;
// option.dataZoom[0].start = 75;
// } else if (option.dataZoom[0].end == 100) {
// option.dataZoom[0].end = 25;
// option.dataZoom[0].start = 0;
// }
_this.myChart2.setOption(option);
//window.echartsArr.push(_this.myChart2);
}, 8000);
}
},
},
computed: {},
watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../center/css/home.less");
// @import url("../center/css/change.less");
@font-face {
font-family: sszh;
src: url("../../center/fonts/sszh.ttf");
/* IE9+ */
}
.MonitoringPointScale {
width: 100%;
height: 100%;
.boxT {
display: flex;
align-items: center;
height: 8%;
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 0.85rem;
line-height: 8%;
// background-color: #29707f;
letter-spacing: 1px;
color: #07d8fd;
cursor: pointer;
background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
.imgicon {
height: 100%;
padding: 0 1.5%;
cursor: pointer;
}
.divSpan {
padding-left: 5%;
font-size: 0.85rem;
color: #fff;
cursor: pointer;
}
}
.boxB {
position: relative;
height: 92%;
// background-color: rgb(41, 16, 16);
}
.boxnum {
position: absolute;
top: 0;
right: 0;
z-index: 100000000;
}
.zong_title {
text-align: center;
}
.zong_num {
font-family: electricFont;
color: rgb(0, 238, 255);
text-align: center;
}
.add_title {
color: rgb(0, 238, 255);
text-align: center;
}
.add_num {
font-family: electricFont;
color: #00ff7f;
text-align: center;
}
.zong {
margin-top: 5px;
border: 1px solid yellow;
border-radius: 8px;
}
.add {
margin-top: 5px;
border: 1px solid rgb(0, 238, 255);
border-radius: 8px;
}
}
</style>

375
src/views/center/components/PowerLoad.vue Normal file
View File

@@ -0,0 +1,375 @@
<template>
<div class="box">
<div class="boxTop">
<img class="img" src="../images/GM.png" alt="" srcset="" />
<span>功率负荷排名</span>
</div>
<div class="boxBot" ref="Echarts">
<div id="echart1" style="width: 100%; height: 100%"></div>
</div>
</div>
</template>
<script>
import { getPowerOrder } from "@/api/center/DropEvent.js";
export default {
components: {},
props: {},
data() {
return {
zoom: undefined, //图表焦点校验
h: undefined,
isLoading: false,
total: 0,
myChart: null,
time: null,
formData: {
deptIndex: "",
limit: 20,
searchBeginTime: this.getCurrentMonthFirst(),
searchEndTime: this.getNowFormatDate(),
},
};
},
created() {
this.formData.deptIndex = JSON.parse(
window.localStorage.getItem("adminInfo")
).deptId;
},
mounted() {
this.zoom = 1 / document.body.style.zoom;
window.addEventListener("resize", () => {
this.zoom = 1 / document.body.style.zoom;
});
this.$nextTick(() => {
this.province();
setInterval(() => {
clearInterval(this.time);
this.province();
}, 60000 * 5);
});
},
methods: {
//获取当月第一天日期
getCurrentMonthFirst() {
var date = new Date();
var year = date.getFullYear();
date.setDate(1);
var month = parseInt(date.getMonth() + 1);
var day = date.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return year + "-" + month + "-" + day;
},
//获取当天日期
getNowFormatDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return year + "-" + month + "-" + day;
},
//echarts图
async province() {
this.isLoading = true;
var xData = [];
var yData = [];
const data = [];
await getPowerOrder(this.formData).then((res) => {
res.data.sort((a, b) => b.max - a.max).forEach((item) => {
// this.total = this.total + item.dataStatis;
// if( i != 0){
// item.timeId = item.timeId.slice(5)
// }
xData.push(item.name);
yData.push(Number(item.max).toFixed(2));
});
});
let _this = this;
let echarts = require("echarts");
if (_this.myChart != null) {
_this.myChart.dispose();
}
let domID1 = document.getElementById("echart1");
setTimeout(() => {
(domID1.style.width = this.$refs.Echarts.offsetWidth + "px"),
(domID1.style.height = this.$refs.Echarts.offsetHeight + "px");
}, 0);
_this.myChart = echarts.init(domID1);
this.isLoading = false;
let option = {
tooltip: {
showContent: true,
trigger: "axis",
backgroundColor: "rgba(8,36,68,.7)",
color: "#00ffff",
textStyle: {
color: "#00ffff",
},
formatter: function (params) {
var tips = "";
// tips += params[0].name + "</br/>";
tips += '监测点' + "：" + params[0].name + "</br/>";
for (var i = 0; i < params.length; i++) {
if (params[i].value == 3.14159) {
tips += '功率' + "：" + params[i].name + ":" + 0 + "<br/>";
} else {
tips += '功率' + "：" + params[i].value + "kW<br/>";
}
}
return tips;
},
},
textStyle: {
color: "#00ffff",
fontSize: 12,
},
legend: {
top: "4%",
left: "center",
itemWidth: 13,
itemHeight: 13,
itemStyle: {
color: "#00ffff",
},
icon: "rect",
padding: 0,
textStyle: {
color: "#03E9FF",
fontSize: 12,
padding: [2, 0, 0, 0],
},
},
grid: {
top: "40px", // 等价于 y: '16%'
left: "50px",
right: "55px",
bottom: "50px",
},
xAxis: {
name: "监测点",
nameTextStyle: {
color: "#07FCF0",
// top:'5%',
fontSize: 12,
},
type: "category",
axisLine: {
lineStyle: {
color: "#00ffff",
width: 1,
},
},
axisLabel: {
textStyle: {
fontFamily: "dinproRegular",
color: "#00ffff",
},
rotate: 45,
formatter: function (value) {
if (value.length > 5) {
return `${value.slice(0, 5)}...`;
}
return value;
},
},
data: xData,
},
yAxis: [
{
axisLine: {
show: true,
lineStyle: {
color: "#00ffff",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#00ffff",
},
},
splitLine: {
//分割线配置
lineStyle: {
type: "dashed",
color: "#00ffff",
},
},
},
{
name: "单位:kW",
nameTextStyle: {
color: "#00ffff",
fontSize: 12,
},
position: "right",
//right:'15%',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
},
],
series: [
{
name: "功率负荷排名",
type: "bar",
barMaxWidth: 20,
label: {
show: true,
// position: "top",
// distance: 5,
color: "#00ffff",
formatter: function (params) {
var val = "";
if (params.value == 5) {
val = 0;
}
return val;
},
fontSize: 12,
},
data: yData,
itemStyle: {
normal: {
type: "linear",
global: false,
color: function (params) {
if (params.value != 3.14159) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#0b9eff",
},
{
offset: 1,
color: "#ffcc00",
},
]);
} else if ((params.value = 3.14159)) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 1,
color: "#ccc",
},
]);
}
},
},
},
},
],
};
option && _this.myChart.setOption(option, true);
//window.echartsArr.push(_this.myChart);
setTimeout(function () {
_this.myChart.resize();
let app = {
currentIndex: -1,
};
_this.time = setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
_this.myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
//console.log(app.currentIndex);
// 高亮当前图形
_this.myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
// 显示 tooltip
_this.myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
}, 2000);
}, 0);
},
},
beforeDestroy() {
for (let i = 1; i < 10000; i++) {
clearInterval(i);
}
},
};
</script>
<style lang="scss" scoped>
// @import url("../css/home.less");
@font-face {
font-family: sszh;
src: url("../fonts/sszh.ttf");
/* IE9+ */
}
.box {
width: 100%;
height: 100%;
.boxTop {
position: relative;
display: flex;
align-items: center;
height: 8%;
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 0.85rem;
line-height: 8%;
letter-spacing: 1px;
color: #07d8fd;
cursor: pointer;
background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
.img {
height: 100%;
padding: 0 1.5%;
cursor: pointer;
}
.total {
position: absolute;
top: 50%;
left: 50%;
font-size: 0.85rem;
color: rgb(0, 255, 0);
transform: translate(-50%, -50%);
span {
font-family: electricFont;
font-size: 1.3rem;
color: #07d8fd;
}
}
}
.boxBot {
height: 90%;
// background-color: rgb(41, 16, 16);
}
}
</style>

752
src/views/center/components/SteadyState.vue Normal file
View File

@@ -0,0 +1,752 @@
<template>
<div class="MonitoringPointScale">
<Timeinterval ref="Timeinterval" :interval="3" v-show="false"></Timeinterval>
<div class="boxT" @mouseleave="handleMouseLeave">
<img class="imgicon" src="../images/GM.png" alt="" srcset="" />
<span>稳态越线占比</span>
<div class="divSpan">
<span @click="tab1(0, 1)" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }">片区</span>
∣
<span @click="tab2(0, 1)" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }">负荷类型</span>
</div>
</div>
<div class="boxB" ref="electr_7" v-show="isshow">
<div id="electr_7" style="width: 100%; height: 100%" />
</div>
<div class="boxB" ref="electr_8" v-show="!isshow">
<div id="electr_8" style="width: 100%; height: 100%" />
</div>
</div>
</template>
<script>
import {
getHomeostasisLoad,
getHomeostasisArea,
} from "@/api/center/DropEvent.js";
import Timeinterval from "@/views/Timeinterval/index.vue";
export default {
components: { Timeinterval },
props: {},
data() {
return {
isshow: true,
color: [
"#d909e0",
"#ffe400",
"#ff9a09",
"#ef1e5f",
"#23cbe5",
"#ec561b",
"#ffa500",
],
flag: 0,
Num: 0,
zoom: "", //图表焦点校验
form: {},
myChart1: null,
time1: null,
myChart2: null,
time2: null,
timeA: null,
timeB: null,
calm: false,
electr7List: [],
electr8List: [],
};
},
created() { },
mounted() {
this.form = {
deptIndex: JSON.parse(window.localStorage.getItem("adminInfo")).deptId,
searchBeginTime: this.$refs.Timeinterval.timeValue[0],
searchEndTime: this.$refs.Timeinterval.timeValue[1],
};
this.zoom = 1 / document.body.style.zoom;
window.addEventListener("resize", () => {
this.zoom = 1 / document.body.style.zoom;
});
getHomeostasisArea(this.form).then((res) => {
this.electr7List = res;
this.electr7();
});
getHomeostasisLoad(this.form).then((res) => {
this.electr8List = res;
});
this.info();
},
beforeDestroy() {
for (let i = 1; i < 10000; i++) {
clearInterval(i);
}
},
methods: {
info() {
this.timeA = setTimeout(() => {
this.tab2();
}, 15000);
this.timeB = setTimeout(() => {
this.tab1();
this.info();
}, 60000);
},
tab1(e, v) {
this.flag = 0;
this.electr7();
this.isshow = true;
if (e == 0) {
if (v == 1) {
this.$emit("control", { name: "SteadyState", val: 1 });
}
clearTimeout(this.timeA);
clearTimeout(this.timeB);
this.calm = true;
}
},
tab2(e, v) {
this.flag = 1;
this.electr8();
this.isshow = false;
if (e == 0) {
if (v == 1) {
this.$emit("control", { name: "SteadyState", val: 2 });
}
clearTimeout(this.timeA);
clearTimeout(this.timeB);
this.calm = true;
}
},
handleMouseLeave() {
if (this.calm) {
this.calm = false;
this.$emit("Remove");
// this.info();
}
},
// 分布式光伏渗透率
async electr7() {
let _this = this;
let echarts = require("echarts");
let domID1 = document.getElementById("electr_7");
let titleList = [];
let datalist = [];
// await getHomeostasisArea(this.form).then((res) => {
this.electr7List.data.sort((a, b) => b.avg - a.avg).forEach((item) => {
titleList.push(item.name);
if (item.avg == 0) {
item.avg = 0.00159;
}
datalist.push(item.avg);
});
// });
setTimeout(() => {
(domID1.style.width = this.$refs.electr_7.offsetWidth + "px"),
(domID1.style.height = this.$refs.electr_7.offsetHeight + "px");
}, 0);
if (_this.myChart1 != null) {
_this.myChart1.dispose();
clearInterval(_this.time1);
}
_this.myChart1 = echarts.init(domID1);
var option = {
tooltip: {
showContent: true,
trigger: "axis",
backgroundColor: "rgba(8,36,68,.7)",
color: "#00ffff",
textStyle: {
color: "#00ffff",
},
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tips = "";
tips += params[0].name + "</br/>";
for (var i = 0; i < params.length; i++) {
if (params[i].value ==0.00159) {
tips += params[i].seriesName + "" + 0 + "<br/>";
} else {
tips += params[i].seriesName + "" + params[i].value + "%<br/>";
}
}
return tips;
},
},
textStyle: {
color: "#00ffff",
fontSize: 12,
},
legend: {
top: "4%",
left: "center",
itemWidth: 13,
itemHeight: 13,
itemStyle: {
color: "#00ffff",
},
icon: "rect",
padding: 0,
textStyle: {
color: "#00ffff",
fontSize: 12,
padding: [2, 0, 0, 0],
},
},
grid: {
top: "40px", // 等价于 y: '16%'
left: "35px",
right: "45px",
bottom: datalist.length < 8 ? "30px" : "45px",
},
xAxis: {
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#00ffff",
},
},
name: "片区",
nameTextStyle: {
color: "#00ffff",
fontSize: 12,
},
axisLabel: {
interval: 0,
rotate: datalist.length < 8 ? "0" : "45",
formatter: function (value) {
if (value.length > 3) {
return `${value.slice(0, 2)}...`;
}
return value;
},
textStyle: {
color: "#00ffff", //坐标轴字颜色
},
margin: 10,
},
axisTick: {
show: false, //隐藏X轴刻度
},
splitLine: {
//网格线
show: false,
},
data: titleList,
type: "category",
},
yAxis: [
{
min: 0,
max: 100,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#00ffff",
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: "#00ffff",
},
},
splitLine: {
//网格线
show: true.valueOf,
lineStyle: {
type: "dashed",
color: "#00ffff",
},
},
},
{
name: "单位:%",
nameTextStyle: {
color: "#00ffff",
fontSize: 12,
},
position: "right",
//right:'15%',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
},
],
series: [
{
name: "片区指标百分比",
data: datalist,
type: "bar",
barMaxWidth: 20,
barMinHeight: 5,
// "barWidth": 7,
barWidth: 17,
itemStyle: {
normal: {
type: "linear",
global: false,
color: function (params) {
if (params.value !=0.00159) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#0b9eff",
},
{
offset: 1,
color: "#00ffff",
},
]);
} else if ((params.value == 0.00159)) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 1,
color: "#ccc",
},
]);
}
},
},
},
label: {
show: true,
position: "top",
color: "#fff",
distance: 5,
formatter: function (params) {
var val = params.value;
if (val == 0.00159) {
val = 0;
}
return val;
},
fontSize: 12,
},
},
],
};
var app = {
currentIndex: -1,
};
_this.time1 = setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
_this.myChart1.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
//console.log(app.currentIndex);
// 高亮当前图形
_this.myChart1.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
// 显示 tooltip
_this.myChart1.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
}, 2000);
option && _this.myChart1.setOption(option, true);
//window.echartsArr.push(_this.myChart1);
setTimeout(function () {
_this.myChart1.resize();
}, 0);
},
async electr8() {
let _this = this;
let echarts = require("echarts");
let domID1 = document.getElementById("electr_8");
let titleList = [];
let datalist = [];
// await getHomeostasisLoad(this.form).then((res) => {
this.electr8List.data.sort((a, b) => b.avg - a.avg).forEach((item) => {
// if (item.avg == 0) {
// item.avg = 100 * 0.05;
// }
if (item.avg != 0) {
titleList.push(item.name);
datalist.push(item.avg);
}
// });
});
setTimeout(() => {
(domID1.style.width = this.$refs.electr_8.offsetWidth + "px"),
(domID1.style.height = this.$refs.electr_8.offsetHeight + "px");
}, 0);
if (_this.myChart2 != null) {
_this.myChart2.dispose();
clearInterval(_this.time2);
}
_this.myChart2 = echarts.init(domID1);
var option = {
tooltip: {
showContent: true,
trigger: "axis",
backgroundColor: "rgba(8,36,68,.7)",
color: "#00ffff",
textStyle: {
color: "#00ffff",
},
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tips = "";
tips += params[0].name + "</br/>";
for (var i = 0; i < params.length; i++) {
if (params[i].value == 3.14159) {
tips += params[i].seriesName + "" + 0 + "<br/>";
} else {
tips += params[i].seriesName + "" + params[i].value + "%<br/>";
}
}
return tips;
},
},
textStyle: {
color: "#00ffff",
fontSize: 12,
},
legend: {
top: "4%",
left: "center",
itemWidth: 13,
itemHeight: 13,
itemStyle: {
color: "#00ffff",
},
icon: "rect",
padding: 0,
textStyle: {
color: "#03E9FF",
fontSize: 12,
padding: [2, 0, 0, 0],
},
},
grid: {
top: "40px", // 等价于 y: '16%'
left: "5px",
right: "45px",
bottom: "10px",
containLabel: true
},
xAxis: {
name: "负荷\n类型",
nameTextStyle: {
color: "#00ffff",
fontSize: 12,
},
type: "category",
axisLine: {
lineStyle: {
color: "#00ffff",
width: 1,
},
},
axisLabel: {
textStyle: {
fontFamily: "dinproRegular",
color: "#00ffff",
},
rotate: 45,
formatter: function (value) {
if (value.length > 5) {
return `${value.slice(0, 5)}...`;
}
return value;
},
},
data: titleList,
},
yAxis: [
{
min: 0,
max: 100,
axisLine: {
show: true,
lineStyle: {
color: "#00ffff",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#00ffff",
},
},
splitLine: {
//分割线配置
lineStyle: {
type: "dashed",
color: "#00ffff",
},
},
},
{
name: "单位:%",
nameTextStyle: {
color: "#00ffff",
fontSize: 12,
},
position: "right",
//right:'15%',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
},
],
series: [
{
name: "负荷类型百分比",
type: "bar",
barMaxWidth: 20,
barMinHeight: 5,
label: {
show: true,
position: "top",
color: "#fff",
distance: 5,
formatter: function (params) {
var val = params.value;
if (val ==0.00159) {
val = 0;
}
return val;
},
fontSize: 12,
},
data: datalist,
itemStyle: {
normal: {
color: function (params) {
if (params.value >= 90 && params.value <= 100) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: "#82FF03",
},
{
offset: 0,
color: "#00ffff",
},
],
false
);
} else if (params.value >= 60 && params.value <= 90) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: "#FFF803 ",
},
{
offset: 0,
color: "#00ffff",
},
],
false
);
} else if (params.value <= 60 && params.value != 3.14159) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: "#FF0303",
},
{
offset: 0,
color: "#00ffff",
},
],
false
);
} else if (params.value == 3.14159) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: "#ccc",
},
],
false
);
}
},
},
},
},
],
};
var app = {
currentIndex: -1,
};
_this.time2 = setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
_this.myChart2.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
//console.log(app.currentIndex);
// 高亮当前图形
_this.myChart2.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
// 显示 tooltip
_this.myChart2.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
}, 2000);
option && _this.myChart2.setOption(option, true);
//window.echartsArr.push(_this.myChart2);
setTimeout(function () {
_this.myChart2.resize();
}, 0);
},
},
computed: {},
watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../center/css/home.less");
// @import url("../center/css/change.less");
@font-face {
font-family: sszh;
src: url("../../center/fonts/sszh.ttf");
/* IE9+ */
}
.MonitoringPointScale {
width: 100%;
height: 100%;
.boxT {
display: flex;
align-items: center;
height: 8%;
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 0.85rem;
line-height: 8%;
// background-color: #29707f;
letter-spacing: 1px;
color: #07d8fd;
cursor: pointer;
background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
.imgicon {
height: 100%;
padding: 0 1.5%;
cursor: pointer;
}
.divSpan {
padding-left: 5%;
font-size: 0.85rem;
color: #fff;
}
}
.boxB {
position: relative;
height: 92%;
// background-color: rgb(41, 16, 16);
}
.boxnum {
position: absolute;
top: 0;
right: 0;
z-index: 100000000;
}
.zong_title {
font-size: 18px;
text-align: center;
}
.zong_num {
font-family: electricFont;
font-size: 30px;
color: rgb(0, 238, 255);
text-align: center;
}
.add_title {
font-size: 18px;
color: rgb(0, 238, 255);
text-align: center;
}
.add_num {
font-family: electricFont;
font-size: 30px;
color: yellow;
text-align: center;
}
.zong {
margin-top: 20px;
border: 1px solid yellow;
border-radius: 8px;
}
.add {
margin-top: 5px;
border: 1px solid rgb(0, 238, 255);
border-radius: 8px;
}
}
</style>

499
src/views/center/components/Table.vue Normal file
View File

@@ -0,0 +1,499 @@
<template>
<div class="MapTable">
<div @mouseover="mouseover" @mouseout="mouseout" style="cursor: pointer">
<el-table class="ddf" style="width: 100%" ref="offromfixTable" header-cell-class-name="table_header"
:header-cell-style="{ 'text-align': 'center', background: '#b1defd' }" :row-style="{
height: '28px',
color: '#f0cb0d',
}" :cell-style="{
padding: '0px',
color: '#f0cb0d',
}" @row-click="rowClick" :data="tableDataSon" :highlight-current-row="true">
<el-table-column align="center" type="index" prop="number" label="序号" width="60px"></el-table-column>
<el-table-column align="center" prop="time" min-width="220px" label="发生时刻"
show-overflow-tooltip></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="160px" prop="subName"
label="变电站"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="160px" prop="name"
label="监测点"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="80px" prop="reason" :formatter="formFilter"
label="暂降原因"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="80px" prop="type" :formatter="formFilter1"
label="暂降类型"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="120" prop="amplitude" label="暂降幅值(%)">
<template slot-scope="scope">
<span>{{ (scope.row.amplitude * 100).toFixed() }}</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="100px" prop="duration"
label="持续时间(s)"></el-table-column>
</el-table>
<el-table ref="table" class="ddf swiper-page-table" element-loading-text="数据加载中" :header-cell-style="{
height: '25px',
padding: '0px',
}" :row-style="{ height: '28px', color: '#04d9ff' }" :cell-style="{ padding: '0px', color: '#04d9ff' }"
:data="tableData" style="width: 100%; height: 100%" :show-header="false" @row-click="rowClick"
:height="vh - 162 + 'px'">
<el-table-column align="center" type="index" prop="number" label="序号" width="60px"></el-table-column>
<el-table-column align="center" prop="time" min-width="220px" label="发生时刻"
show-overflow-tooltip></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="160px" prop="subName"
label="变电站"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="160px" prop="name"
label="监测点"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="80px" prop="reason" :formatter="formFilter"
label="暂降原因"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="80px" prop="type" :formatter="formFilter1"
label="暂降类型"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="120" prop="amplitude" label="暂降幅值(%)">
<template slot-scope="scope">
<span>{{ (scope.row.amplitude * 100).toFixed() }}</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="100px" prop="duration"
label="持续时间(s)"></el-table-column>
</el-table>
</div>
<el-dialog :close-on-click-modal="false" class="eldialotable" title="波形查看" :visible.sync="view2" v-if="view2"
:append-to-body="true" :before-close="backbxlb" width="80%">
<div>
<el-row>
<el-col :span="12">
<span style="
color: #fff;
font-size: 14px;
line-height: 30px;
">值类型选择:</span>
<el-select v-model="value" @change="changeView" placeholder="请选择值类型">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-col>
</el-row>
<el-tabs v-model="bxactiveName" @tab-click="bxhandleClick">
<el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
<shushiboxi v-if="bxactiveName == 'ssbx' && showBoxi" :value="value" :boxoList="boxoList" :wp="wp"
:DColor="true"></shushiboxi>
</el-tab-pane>
<el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
<rmsboxi v-if="bxactiveName == 'rmsbx' && showBoxi" :value="value" :boxoList="boxoList" :wp="wp"
:DColor="true">
</rmsboxi>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</div>
</template>
<script>
import { eventLists } from "@/api/center/DropEvent.js";
import { dicData } from "@/utils/dicData.js";
import rmsboxi from "@/views/echarts/rmsboxi";
import shushiboxi from "@/views/echarts/shushiboxi";
import {
getMonitorEventAnalyseWave,
getTransientDetailById,
} from "@/api/monitoringpointStatistics/echart";
import jquery from "jquery";
export default {
components: { rmsboxi, shushiboxi },
props: {
height: {
type: Number,
required: false,
},
},
data() {
return {
wid: null,
dialogVisible: false,
isLoading: false,
tableData: [],
tableDataSon: [],
type: [],
reason: [],
time: null,
vh: null,
formData: {
deptIndex: "",
searchBeginTime: this.getCurrentMonthFirst(),
searchEndTime: this.getNowFormatDate(),
},
boxoList: {},
wp: {},
view: true,
bxecharts: undefined,
view2: false,
bxactiveName: "ssbx",
value: 1,
showBoxi: true,
options: [
{
value: 1,
label: "一次值",
},
{
value: 2,
label: "二次值",
},
],
};
},
created() {
this.queryData();
this.getclassificationData();
},
mounted() {
this.setHeight();
window.addEventListener("resize", this.setHeight);
this.tableScroll();
},
beforeDestroy() {
window.removeEventListener("resize", this.setHeight);
},
methods: {
setHeight() {
this.wid = window.localStorage.getItem("appwidth") - 20 + "px";
this.vh = this.height;
console.log("🚀 ~ setHeight ~ this.height:", this.height)
this.bxecharts = "74vh";
},
changeView() {
this.showBoxi = false;
setTimeout(() => {
this.showBoxi = true;
}, 0);
},
// 表格单击
async rowClick(e) {
await getTransientDetailById({
eventId: e.eventId,
sysType: 0,
smallType: 0,
}).then((res) => {
this.boxoList = res.data;
});
await getMonitorEventAnalyseWave({
id: e.eventId,
//id: "e178edd5-354c-49a7-b72f-119442080155",
systemType: 0,
type: 0,
}).then((res) => {
if (res.data == null) {
return this.$message({
message: res.message,
type: "warning",
});
} else if (res != undefined) {
this.wp = res.data;
setTimeout(() => {
this.view = false;
this.view2 = true;
jquery(".el-dialog__body").height(30 + "px");
}, 0);
}
// this.initWaves()
});
},
//里层波形tab标签页触发事件
bxhandleClick(tab, event) {
if (tab.name == "ssbx") {
this.bxactiveName = "ssbx";
} else if (tab.name == "rmsbx") {
this.bxactiveName = "rmsbx";
}
// console.log(tab, event);
},
//返回触发事件
backbxlb() {
this.view = true;
this.view2 = false;
this.value = 1;
},
// 鼠标经过
mouseover() {
clearInterval(this.time);
},
// 鼠标离开
mouseout() {
this.tableScroll();
},
tableScroll() {
const table = this.$refs.table;
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper;
// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
this.time = setInterval(() => {
// 元素自增距离顶部1像素
divData.scrollTop += 1;
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (
divData.clientHeight + divData.scrollTop >
divData.scrollHeight - 1
) {
// 重置table距离顶部距离
divData.scrollTop = 0;
}
}, 30); // 滚动速度
},
//大屏获取暂降事件最新50条数据
queryData() {
this.isLoading = true;
this.formData.deptIndex = JSON.parse(
window.localStorage.getItem("adminInfo")
).deptId;
eventLists(this.formData).then((res) => {
// console.log(res);
this.tableData = res.data;
this.tableDataSon = [
this.tableData[0],
this.tableData[1],
this.tableData[2],
];
this.isLoading = false;
});
},
getclassificationData() {
//暂态原因
this.reason = dicData("Event_Reason", []);
//暂态类型
this.type = dicData("Event_Type", []);
},
formFilter(row) {
let title = "";
this.reason.forEach((item) => {
if (row.reason == item.id) {
title = item.name;
}
});
return title;
},
formFilter1(row) {
let title = "";
this.type.forEach((item) => {
if (row.type == item.id) {
title = item.name;
}
});
return title;
},
//获取当月第一天日期
getCurrentMonthFirst() {
var date = new Date();
var year = date.getFullYear();
date.setDate(1);
var month = parseInt(date.getMonth() + 1);
var day = date.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return year + "-" + month + "-" + day;
},
//获取当天日期
getNowFormatDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return year + "-" + month + "-" + day;
},
},
computed: {},
watch: {
height(val) {
this.vh = val;
},
},
};
</script>
<style lang="scss" scoped>
/* 最外层透明 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
background-color: transparent;
}
::v-deep .el-table tr,
.el-table th,
.el-table td {
color: #0b8eb7;
}
::v-deep .el-table__header th {
color: #04e8ef !important;
background: #10727d;
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
overflow-y: hidden;
}
::v-deep .table_header {
background-color: #187d8b !important;
}
::v-deep .el-table__header {
tr,
th {
background: #187d8b !important;
}
}
::v-deep .el-table td {
// background-color: #055d6bcd !important;
}
::v-deep .el-table--d .el-table__body tr.el-table__row--d td {
background: #65c9c275 !important;
}
::v-deep .el-dialog {
// background-color: transparent;
border: 1px solid #1697de;
background-color: rgb(33 57 83 / 60%);
margin-top: 2.56% !important;
.el-dialog__title {
color: rgb(7, 216, 253);
}
.el-dialog__header {
// background-color: transparent ;
background-color: rgb(33 57 83 / 0%);
border-bottom: 1px solid #1697de;
}
.el-dialog__body {
padding: 10px !important;
max-height: none;
// height:85vh,
}
}
::v-deep .el-input__inner {
background-color: rgb(33 57 83 / 60%);
color: #fff;
}
::v-deep .el-tabs__item {
color: #fff;
}
::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: #055d6b80 !important;
}
::v-deep .el-tabs__item:hover {
color: #06e0fa !important;
opacity: 0.8;
}
::v-deep .el-tabs__active-bar {
background-color: #06e0fa !important;
}
::v-deep .el-tabs__item.is-active {
color: #06e0fa;
}
::v-deep.el-table--striped .el-table__body tr:hover.el-table__row--striped>td {
background-color: #055d6b80 !important;
}
::v-deep.el-table .el-table__body tr:hover.el-table__row>td {
background-color: #055d6b80 !important;
}
::v-deep .dpjcksss .el-dialog .el-dialog__body {
max-height: 70vh;
padding: 0px !important;
overflow-y: auto;
}
/* // ----------修改elementui表格的默认样式----------- */
::v-deep .el-table__body-wrapper {
&::-webkit-scrollbar {
// 整个滚动条
width: 0; // 纵向滚动条的宽度
background: rgba(213, 215, 220, 0.3);
border: none;
}
&::-webkit-scrollbar-track {
// 滚动条轨道
border: none;
}
}
/* // --------------------隐藏table gutter列和内容区右侧的空白 start */
::v-deep .el-table th.gutter {
display: none;
width: 0;
}
::v-deep .el-table colgroup col[name="gutter"] {
display: none;
width: 0;
}
::v-deep .el-table__body {
width: 100% !important;
}
/* // --------------------隐藏table gutter列和内容区右侧的空白 end */
//2023-11-9
::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border: 0px;
}
// ::v-deep.el-table td,
// .el-table th.is-leaf {
// // border-bottom: none;
// border-right: 0.2px solid #f2f3f3 !important;
// /*no*/
// border-bottom: 0.2px solid #f2f3f3 !important;
// /*no*/
// }
// ::v-deep .el-table--border,
// .el-table--group {
// border: 0.2px solid #f2f3f3 !important;
// /*no*/
// }
::v-deep .el-tabs__nav-wrap::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0px;
background-color: #e4e7ed;
z-index: 1;
}
</style>

448
src/views/center/components/UserScale.vue Normal file
View File

@@ -0,0 +1,448 @@
<template>
<div class="box">
<div class="boxTop">
<img
class="img"
src="../images/d045d87176109fc1dfb3b09a583fea5.png"
alt=""
srcset=""
/>
<span>灿能用户规模</span>
<div class="total">
总计:<span>{{ total }}</span>
</div>
</div>
<div class="boxBot" ref="Echarts">
<div
id="echart"
style="width: 100%; height: 100%"
v-loading="isLoading"
></div>
</div>
</div>
</template>
<script>
import { getUserScale } from "@/api/center/DropEvent.js";
export default {
components: {},
props: {},
data() {
return {
zoom: undefined, //图表焦点校验
h: undefined,
isLoading: false,
total: 0,
myChart: null,
time: null,
};
},
created() {},
mounted() {
this.zoom = 1 / document.body.style.zoom;
window.addEventListener("resize", () => {
this.zoom = 1 / document.body.style.zoom;
});
this.$nextTick(() => {
this.province();
setInterval(() => {
clearInterval(this.time);
this.province();
}, 60000 * 5);
});
},
methods: {
//echarts图
async province() {
let xData = [];
let yData1 = [];
let yData2 = [];
await getUserScale({
deptIndex: "1",
searchBeginTime: "2022-01-01",
searchEndTime: "2022-01-01",
}).then((res) => {
var maxNum = res.data[0].incrementNum;
for (let i = 0; i < res.data.length; i++) {
if (res.data[i].incrementNum > maxNum) {
maxNum = res.data[i].incrementNum;
}
this.total = maxNum;
}
res.data.forEach((item, i) => {
if (i != 0) {
item.timeId = item.timeId.slice(5);
} else if (i == 0) {
let month = item.timeId.slice(5);
let year = item.timeId.slice(0, 4);
item.timeId = month + "\n" + "(" + year + ")";
}
xData.push(item.timeId);
yData1.push(item.monthIncrementNum || 0);
yData2.push(item.incrementNum || 0);
});
});
this.isLoading = true;
// const data = await getUserScale();
let _this = this;
let echarts = require("echarts");
let domID1 = document.getElementById("echart");
setTimeout(() => {
(domID1.style.width = this.$refs.Echarts.offsetWidth + "px"),
(domID1.style.height = this.$refs.Echarts.offsetHeight + "px");
}, 0);
if (_this.myChart != null) {
_this.myChart.dispose();
}
_this.myChart = echarts.init(domID1);
this.isLoading = false;
let option = {
//backgroundColor: '#ddd',
grid: {
top: "40px", // 等价于 y: '16%'
left: "35px",
right: "45px",
bottom: "30px",
},
color: function (params) {
let colorArr =
params.value > 0 ? ["#BFE905", "#03EEFF"] : ["#03EEFF", "#BFE905"];
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: colorArr[0], // 0% 处的颜色
},
{
offset: 1,
color: colorArr[1], // 100% 处的颜色
},
],
false
);
},
legend: {
top: "2%",
//orient: 'vertical',
textStyle: {
color: "#00ffff",
},
data: ["累计增量", "当月增量"],
},
tooltip: {
showContent: true,
trigger: "axis",
backgroundColor: "rgba(8,36,68,.7)",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
color: "#00ffff",
textStyle: {
color: "#00ffff",
},
formatter: function (params) {
var str = "";
let year = xData[0].slice(4, 8);
let month = params[0].axisValue.slice(0, 2);
str += year + "-" + month + "<br/>";
for (var i = 0; i < params.length; i++) {
if (params[i].seriesName !== "") {
str += params[i].seriesName + ":" + params[i].value + "<br/>";
}
}
return str;
},
},
xAxis: [
{
name: "时间",
nameTextStyle: {
color: "#07FCF0",
// top:'5%',
fontSize: 12,
},
type: "category",
color: "#00ffff",
data: xData,
axisLabel: {
margin: 4,
color: "#00ffff",
textStyle: {
fontSize: 12,
},
// rotate: 30,
},
axisLine: {
lineStyle: {
color: "#00ffff",
},
},
axisTick: {
show: true,
},
},
],
yAxis: [
{
type: "value",
splitNumber: 5,
min: 0,
max:
Math.max(...yData1) +
(Math.max(...yData1) % 5 == 0
? 0
: 5 - (Math.max(...yData1) % 5)),
interval:
(Math.max(...yData1) +
(Math.max(...yData1) % 5 == 0
? 0
: 5 - (Math.max(...yData1) % 5))) /
5,
name: "当月增量(个)",
minInterval: 1,
nameTextStyle: {
color: "#07FCF0",
fontSize: 10,
},
axisLabel: {
color: "#00ffff",
textStyle: {
fontSize: 12,
},
},
axisLine: {
show: true,
lineStyle: {
color: "#00ffff",
},
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "#00ffff",
type: "dashed",
},
},
},
{
minInterval: 1,
type: "value",
name: "累计增量(个)",
splitNumber: 5,
min: 0,
max:
Math.max(...yData2) +
(Math.max(...yData2) % 5 == 0
? 0
: 5 - (Math.max(...yData2) % 5)),
interval:
(Math.max(...yData2) +
(Math.max(...yData2) % 5 == 0
? 0
: 5 - (Math.max(...yData2) % 5))) /
5,
nameTextStyle: {
color: "#07FCF0",
fontSize: 10,
},
axisLabel: {
color: "#00ffff",
textStyle: {
fontSize: 12,
},
},
axisLine: {
show: true,
lineStyle: {
color: "#00ffff",
},
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "#00ffff",
type: "dashed",
},
},
},
],
series: [
{
type: "bar",
name: "当月增量",
data: yData1,
barWidth: "15px",
// itemStyle: {
// normal: {
// color: function (params) {
// return new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "#BFE905", // 0% 处的颜色
// },
// {
// offset: 1,
// color: "#03EEFF", // 100% 处的颜色
// },
// ],
// false
// );
// },
// barBorderRadius: [30, 30, 15, 15],
// },
// },
itemStyle: {
//本月阻拦请求次数的数据渐变色设置，本章重点部分
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#BFE905" }, //开始的颜色
{ offset: 1, color: "#03EEFF" }, //结束的颜色
]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
barBorderRadius: [30, 30, 15, 15],
},
barCategoryGap: "60%", //柱状图间距
label: {
normal: {
show: false,
fontSize: 18,
fontWeight: "bold",
color: "#333",
position: "top",
},
},
},
{
data: yData2,
type: "line",
smooth: false,
name: "累计增量",
showSymbol: true,
yAxisIndex: 1,
symbolSize: 8,
zlevel: 3,
lineStyle: {
color: "#05FFDF",
width: 2,
shadowColor: "rgba(0, 0, 0, 0.3)", //设置折线阴影
//shadowBlur: 15,
// shadowOffsetY: 20,
},
},
],
};
// // _this.myChart.resize();
// let _this = this;
// _this.$erd.listenTo(_this.$refs.fg, (element) => {
// _this.$nextTick(() => {
// _this.myChart.resize();
// });
// });
// window.onresize = function () {
// _this.myChart.resize();
// };
option && _this.myChart.setOption(option, true);
//window.echartsArr.push(_this.myChart);
setTimeout(function () {
_this.myChart.resize();
let app = {
currentIndex: -1,
};
_this.time = setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
_this.myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
// 高亮当前图形
_this.myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
// 显示 tooltip
_this.myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
}, 2000);
}, 0);
},
},
beforeDestroy() {
for (let i = 1; i < 10000; i++) {
clearInterval(i);
}
},
};
</script>
<style lang="scss" scoped>
// @import url("../css/home.less");
@font-face {
font-family: sszh;
src: url("../fonts/sszh.ttf"); /* IE9+ */
}
.box {
width: 100%;
height: 100%;
.boxTop {
position: relative;
display: flex;
align-items: center;
height: 8%;
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 0.85rem;
line-height: 8%;
letter-spacing: 1px;
color: #07d8fd;
cursor: pointer;
background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
.img {
height: 100%;
padding: 0 1.5%;
cursor: pointer;
}
.total {
position: absolute;
top: 50%;
left: 50%;
font-size: 0.85rem;
color: rgb(0, 255, 0);
transform: translate(-50%, -50%);
span {
font-family: electricFont;
font-size: 1.3rem;
color: #07d8fd;
}
}
}
.boxBot {
height: 90%;
// background-color: rgb(41, 16, 16);
}
}
</style>

468
src/views/center/components/datashuju.vue Normal file
View File

@@ -0,0 +1,468 @@
<template>
<div class="box">
<Timeinterval ref="Timeinterval" :interval="3" v-show="false"></Timeinterval>
<div class="boxTop">
<img class="img" src="../images/d045d87176109fc1dfb3b09a583fea5.png" alt="" srcset="" />
<span>片区数据完整性</span>
<!-- <div class="total">
总计:<span>{{ total }}</span>
</div> -->
</div>
<div class="boxBot" ref="electrBoxgg">
<div id="electrsj6" style="width: 100%; height: 100%" v-loading="isLoading"></div>
</div>
</div>
</template>
<script>
import { getUserScale } from "@/api/center/DropEvent.js";
import { getTHDTopTenData, getLineIntegrityData } from "@/api/homePage/index";
import Timeinterval from "@/views/Timeinterval/index.vue";
import { dicData } from "@/utils/dicData.js";
export default {
components: { Timeinterval },
props: {},
data() {
return {
zoom: undefined, //图表焦点校验
h: undefined,
isLoading: false,
total: 0,
myChart: null,
time: null,
form: {
deptIndex: "",
monitorFlag: 2,
powerFlag: 2,
loadType: null,
searchBeginTime: "",
searchEndTime: "",
statisticalType: "",
timeFlag: 3,
linePassRate: 0,
},
};
},
created() { },
mounted() {
(this.form.deptIndex = JSON.parse(
window.localStorage.getItem("adminInfo")
).deptId),
(this.form.statisticalType = dicData("Statistical_Type", [
"Report_Type",
])[0]);
(this.form.searchBeginTime = this.timefamt()[0]),
(this.form.searchEndTime = this.timefamt()[1]),
(this.zoom = 1 / document.body.style.zoom);
window.addEventListener("resize", () => {
this.zoom = 1 / document.body.style.zoom;
});
this.$nextTick(() => {
this.VoltageOne();
setInterval(() => {
clearInterval(this.time);
this.VoltageOne();
}, 60000 * 5);
});
},
methods: {
//echarts图
timefamt() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
month = month > 9 ? month : "0" + month;
day = day < 10 ? "0" + day : day;
var arr = [];
var today2 = year + "-" + month + "-01";
// var today2 = year + "-01-01";
var today = year + "-" + month + "-" + day;
arr.push(today2);
arr.push(today);
return arr;
},
// 数据完整性统计统计 echartsn 1类
async VoltageOne() {
// const { data } = await Voltage();
this.form.serverName = "harmonic-boot";
let title = [];
let integrityData = [];
await getLineIntegrityData(this.form).then((res) => {
// title = res.data.type;
// integrityData = res.data.single;
res.data.sort((a, b) => b.single - a.single).forEach((item) => {
title.push(item.type);
if (item.single === 0 || item.single === 3.14159) {
item.single = 3.14159;
integrityData.push(item.single);
} else {
integrityData.push(item.single);
}
});
});
let echarts = require("echarts");
let domID1 = document.getElementById("electrsj6");
setTimeout(() => {
(domID1.style.width = this.$refs.electrBoxgg.offsetWidth + "px"),
(domID1.style.height = this.$refs.electrBoxgg.offsetHeight + "px");
}, 0);
let myChart2 = echarts.init(domID1);
// let echartsData = data[0];
let colors = ["#318af9", "#a6dffd"];
// 加阴影效果
let option = {
title: {
text: this.title,
left: "center",
//subtext: '单位(%)'
},
tooltip: {
trigger: "axis",
backgroundColor: "rgba(8,36,68,.7)",
color: "#00ffff",
textStyle: {
color: "#00ffff",
},
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tips = "";
tips += params[0].name;
for (var i = 0; i < params.length; i++) {
if (params[i].value == 3.14159) {
tips += params[i].seriesName + "：暂无数据<br/>";
} else {
tips +=
params[i].seriesName +
"：" +
params[i].value.toFixed(2) +
"%<br/>";
}
}
return tips;
},
},
grid: {
top: "60px", // 等价于 y: '16%'
left: "35px",
right: "45px",
bottom: "20px",
},
legend: {
top: "4%",
left: "center",
itemWidth: 13,
itemHeight: 13,
itemStyle: {
color: "#00ffff",
},
icon: "rect",
padding: 0,
textStyle: {
color: "#03E9FF",
fontSize: 12,
padding: [2, 0, 0, 0],
},
},
xAxis: {
type: "category",
data: title,
name: "片区",
nameTextStyle: {
color: "#07FCF0",
// top:'5%',
fontSize: 12,
},
axisLine: {
lineStyle: {
color: "#00ffff",
},
},
axisTick: {
show: false,
alignWithLabel: true,
lineStyle: {
color: "#00ffff",
},
},
axisLabel: {
color: "#00ffff",
// interval: 0,
rotate: 0,
formatter: function (name) {
//超出部分隐藏显示
return name.length > 6 ? name.slice(0, 3) + "..." : name;
},
interval: 0,
},
},
// toolbox: {
// show: true,
// feature: {
// saveAsImage: { show: true },
// // dataZoom: {
// // yAxisIndex: 'none'
// // },
// // //restore: {},
// // mark : {show: true},
// //magicType : {show: true, type: ['line', 'bar']}
// },
// },
yAxis: [
{
name: "",
max: 100,
min: 0,
position: "left",
nameTextStyle: {
color: "#00ffff",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#00ffff",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#00ffff",
},
},
splitLine: {
show: false,
//分割线配置
lineStyle: {
type: "dashed",
color: "#00ffff",
},
},
},
{
name: "单位:%",
// max:100,
// min:0,
position: "right",
nameTextStyle: {
color: "#00ffff",
fontSize: 12,
},
},
],
series: [
{
name: "数据完整性",
// name: this.timeValue,
barMaxWidth: 20,
type: "bar",
label: {
normal: {
show: false,
position: "top",
},
},
itemStyle: {
normal: {
// 随机显示
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
// 定制显示（按顺序）
color: function (params) {
if (params.value == 3.14159) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: "#ccc",
},
],
false
);
} else if (params.value >= 90) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: "#339966",
},
],
false
);
} else if (params.value >= 60 && params.value <= 90) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: "#FFCC33",
},
],
false
);
// && params.value > 5
} else if (params.value <= 60) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: "#CC0000",
},
],
false
);
}
},
},
},
markLine: {
silent: false,
symbol: "circle",
data: [
{
name: "完整性≥90%",
yAxis: 100,
lineStyle: {
color: "#339966",
},
label: {
position: "middle",
formatter: "{b}",
textStyle: {
color: "#339966",
},
},
},
{
name: "60%≤完整性<90%",
yAxis: 90,
lineStyle: {
color: "#FFCC33",
},
label: {
position: "middle",
formatter: "{b}",
textStyle: {
color: "#FFCC33",
},
},
},
{
name: "完整性<60%",
yAxis: 60,
lineStyle: {
color: "#CC0000",
},
label: {
position: "middle",
formatter: "{b}",
textStyle: {
color: "#CC0000",
},
},
},
],
},
// data: this.ydata
data: integrityData,
},
],
};
option && myChart2.setOption(option, true);
//window.echartsArr.push(myChart2);
setTimeout(function () {
myChart2.resize();
}, 0);
},
},
beforeDestroy() {
for (let i = 1; i < 10000; i++) {
clearInterval(i);
}
},
};
</script>
<style lang="scss" scoped>
// @import url("../css/home.less");
@font-face {
font-family: sszh;
src: url("../fonts/sszh.ttf");
/* IE9+ */
}
.box {
width: 100%;
height: 100%;
.boxTop {
position: relative;
display: flex;
align-items: center;
height: 8%;
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 0.85rem;
line-height: 8%;
letter-spacing: 1px;
color: #07d8fd;
cursor: pointer;
background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
.img {
height: 100%;
padding: 0 1.5%;
cursor: pointer;
}
.total {
position: absolute;
top: 50%;
left: 50%;
font-size: 0.85rem;
color: rgb(0, 255, 0);
transform: translate(-50%, -50%);
span {
font-family: electricFont;
font-size: 1.3rem;
color: #07d8fd;
}
}
}
.boxBot {
height: 90%;
// background-color: rgb(41, 16, 16);
}
}
</style>

335
src/views/center/components/tHDistortion.vue Normal file
View File

@@ -0,0 +1,335 @@
<template>
<div class="box">
<Timeinterval ref="Timeinterval" :interval="3" v-show="false"></Timeinterval>
<div class="boxTop">
<img class="img" src="../images/d045d87176109fc1dfb3b09a583fea5.png" alt="" srcset="" />
<span>谐波畸变率排名</span>
<!-- <div class="total">
总计:<span>{{ total }}</span>
</div> -->
</div>
<div class="boxBot" ref="Echartspm">
<div id="echartpm" style="width: 100%; height: 100%" v-loading="isLoading"></div>
</div>
</div>
</template>
<script>
import { getUserScale } from "@/api/center/DropEvent.js";
import { getTHDTopTenData } from "@/api/homePage/index";
import Timeinterval from "@/views/Timeinterval/index.vue";
export default {
components: { Timeinterval },
props: {},
data() {
return {
zoom: undefined, //图表焦点校验
h: undefined,
isLoading: false,
total: 0,
myChart: null,
time: null,
};
},
created() { },
mounted() {
this.zoom = 1 / document.body.style.zoom;
window.addEventListener("resize", () => {
this.zoom = 1 / document.body.style.zoom;
});
this.$nextTick(() => {
this.province();
setInterval(() => {
clearInterval(this.time);
this.province();
}, 60000 * 5);
});
},
methods: {
//echarts图
async province() {
let name = [];
let vthd = [];
let transformerSubstation = [];
await getTHDTopTenData({
id: JSON.parse(window.localStorage.getItem("adminInfo")).deptId,
startTime: this.$refs.Timeinterval.timeValue[0],
endTime: this.$refs.Timeinterval.timeValue[1],
type: 3,
}).then((res) => {
res.data.forEach((item) => {
if (item.vthd) {
name.push(item.name);
transformerSubstation.push(item.subStationName)
vthd.push(item.vthd);
}
});
});
this.isLoading = true;
// const data = await getUserScale();
let _this = this;
let echarts = require("echarts");
let domID1 = document.getElementById("echartpm");
setTimeout(() => {
(domID1.style.width = this.$refs.Echartspm.offsetWidth + "px"),
(domID1.style.height = this.$refs.Echartspm.offsetHeight + "px");
}, 0);
if (_this.myChart != null) {
_this.myChart.dispose();
}
_this.myChart = echarts.init(domID1);
this.isLoading = false;
let option = {
tooltip: {
trigger: "axis",
backgroundColor: "rgba(8,36,68,.7)",
color: "#00ffff",
textStyle: {
color: "#00ffff",
},
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tips = "";
let index = name.indexOf(params[0].name)
tips += '监测点' + "："+ params[0].name + "</br/>";
tips += '变电站' + "：" + transformerSubstation[index] + "<br/>";
tips += params[0].seriesName + "：" + params[0].value + "%<br/>";
return tips;
},
},
grid: {
top: "40px", // 等价于 y: '16%'
left: "50px",
right: "55px",
bottom: "50px",
},
legend: {
top: "4%",
left: "center",
itemWidth: 13,
itemHeight: 13,
itemStyle: {
color: "#00ffff",
},
icon: "rect",
padding: 0,
textStyle: {
color: "#03E9FF",
fontSize: 12,
padding: [2, 0, 0, 0],
},
},
xAxis: {
type: "category",
data: name,
name: "监测点",
nameTextStyle: {
color: "#07FCF0",
// top:'5%',
fontSize: 12,
},
axisLine: {
lineStyle: {
color: "#00ffff",
},
},
axisTick: {
show: false,
alignWithLabel: true,
lineStyle: {
color: "#00ffff",
},
},
axisLabel: {
color: "#00ffff",
// interval: 0,
rotate: 45,
formatter: function (name) {
//超出部分隐藏显示
return name.length > 6 ? name.slice(0, 3) + "..." : name;
},
interval: 0,
},
},
yAxis: [
{
axisLine: {
show: true,
lineStyle: {
color: "#00ffff",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#00ffff",
},
},
splitLine: {
//分割线配置
lineStyle: {
type: "dashed",
color: "#00ffff",
},
},
},
{
name: "单位:%",
nameTextStyle: {
color: "#00ffff",
fontSize: 12,
},
position: "right",
//right:'15%',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
},
],
series: [
{
name: "谐波畸变率",
type: "bar",
barWidth: "20",
label: {
show: true,
position: "top",
color: "#fff",
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#80ff09",
},
{
offset: 1,
color: "#05fffa",
},
]),
},
},
data: vthd,
},
],
};
// // _this.myChart.resize();
// let _this = this;
// _this.$erd.listenTo(_this.$refs.fg, (element) => {
// _this.$nextTick(() => {
// _this.myChart.resize();
// });
// });
// window.onresize = function () {
// _this.myChart.resize();
// };
option && _this.myChart.setOption(option, true);
//window.echartsArr.push(_this.myChart);
setTimeout(function () {
_this.myChart.resize();
let app = {
currentIndex: -1,
};
_this.time = setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
_this.myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
// 高亮当前图形
_this.myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
// 显示 tooltip
_this.myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
}, 2000);
}, 0);
},
},
beforeDestroy() {
for (let i = 1; i < 10000; i++) {
clearInterval(i);
}
},
};
</script>
<style lang="scss" scoped>
// @import url("../css/home.less");
@font-face {
font-family: sszh;
src: url("../fonts/sszh.ttf");
/* IE9+ */
}
.box {
width: 100%;
height: 100%;
.boxTop {
position: relative;
display: flex;
align-items: center;
height: 8%;
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 0.85rem;
line-height: 8%;
letter-spacing: 1px;
color: #07d8fd;
cursor: pointer;
background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
.img {
height: 100%;
padding: 0 1.5%;
cursor: pointer;
}
.total {
position: absolute;
top: 50%;
left: 50%;
font-size: 0.85rem;
color: rgb(0, 255, 0);
transform: translate(-50%, -50%);
span {
font-family: electricFont;
font-size: 1.3rem;
color: #07d8fd;
}
}
}
.boxBot {
height: 90%;
// background-color: rgb(41, 16, 16);
}
}
</style>

105
src/views/center/css/change.css Normal file
View File

@@ -0,0 +1,105 @@
.logo {
font-size: 17px !important;
}
.main-tit {
font-size: 14px;
}
.menu-tit {
font-size: 14px;
}
.main-con {
font-size: 10px !important;
font-family: 'Microsoft YaHei';
}
.big-num {
font-size: 14px;
}
.spe-border {
height: 100%;
background: linear-gradient(to left, #00bf8f, #00bf8f) left top no-repeat, linear-gradient(to bottom, #00bf8f, #00bf8f) left top no-repeat, linear-gradient(to left, #00bf8f, #00bf8f) right top no-repeat, linear-gradient(to bottom, #00bf8f, #00bf8f) right top no-repeat, linear-gradient(to left, #00bf8f, #00bf8f) left bottom no-repeat, linear-gradient(to bottom, #00bf8f, #00bf8f) left bottom no-repeat, linear-gradient(to left, #00bf8f, #00bf8f) right bottom no-repeat, linear-gradient(to left, #00bf8f, #00bf8f) right bottom no-repeat;
background-size: 1px 5px, 5px 1px, 1px 5px, 5px 1px;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #617d96;
border-radius: 3px;
height: 5px !important;
}
/* IE 浏览器 */
.scrollbar {
/*三角箭头的颜色*/
scrollbar-arrow-color: #fff;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #0099dd;
/*滚动条整体颜色*/
scrollbar-highlight-color: #0099dd;
/*滚动条阴影*/
scrollbar-shadow-color: #0099dd;
/*滚动条轨道颜色*/
scrollbar-track-color: #0066ff;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color: #0099dd;
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: #0099dd;
/*滚动条基准颜色*/
scrollbar-base-color: #0099dd;
}
.yellow {
color: #F7C709;
}
.yellow-bg {
background-color: #f7c709;
}
.red {
color: #EE1111;
}
.red-bg {
background-color: #ee1111;
}
.blue {
color: #1196EE;
}
.blue-bg {
background-color: #1196ee;
}
.green {
color: #11ee6d;
}
.green-bg {
background-color: #11ee5b;
}
@keyframes pointer {
0% {
opacity: 1;
transform: scale(1);
}
15% {
opacity: 1;
transform: scale(1.25);
}
30% {
opacity: 0.8;
transform: scale(1.5);
}
45% {
opacity: 0.8;
transform: scale(2);
}
60% {
opacity: 0.8;
transform: scale(2);
}
75% {
opacity: 1;
transform: scale(1.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.point-ani {
animation: pointer 3s linear infinite;
}

97
src/views/center/css/change.less Normal file
View File

@@ -0,0 +1,97 @@
// 字体篇
.logo{
font-size: 17px !important;
}
.main-tit{
font-size: 14px;
}
.menu-tit{
font-size: 14px;
}
.main-con{
font-size: 10px !important;
font-family: 'Microsoft YaHei';
}
.big-num{
font-size: 14px;
}
.spe-border{
height: 100%;
background: linear-gradient(to left, #00bf8f, #00bf8f) left top no-repeat,
linear-gradient(to bottom, #00bf8f, #00bf8f) left top no-repeat,
linear-gradient(to left, #00bf8f, #00bf8f) right top no-repeat,
linear-gradient(to bottom, #00bf8f, #00bf8f) right top no-repeat,
linear-gradient(to left, #00bf8f, #00bf8f) left bottom no-repeat,
linear-gradient(to bottom, #00bf8f, #00bf8f) left bottom no-repeat,
linear-gradient(to left, #00bf8f, #00bf8f) right bottom no-repeat,
linear-gradient(to left, #00bf8f, #00bf8f) right bottom no-repeat;
background-size: 1px 5px, 5px 1px, 1px 5px, 5px 1px;
}
//滚动条的宽度
::-webkit-scrollbar {
width: 8px;
}
// 滚动条的滑块
::-webkit-scrollbar-thumb {
background-color: #617d96;
border-radius: 3px;
height: 5px !important;
}
/* IE 浏览器 */
.scrollbar {
/*三角箭头的颜色*/
scrollbar-arrow-color: #fff;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #0099dd;
/*滚动条整体颜色*/
scrollbar-highlight-color: #0099dd;
/*滚动条阴影*/
scrollbar-shadow-color: #0099dd;
/*滚动条轨道颜色*/
scrollbar-track-color: #0066ff;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color: #0099dd;
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: #0099dd;
/*滚动条基准颜色*/
scrollbar-base-color: #0099dd;
}
.yellow{
color: #F7C709;
}
.yellow-bg{
background-color: rgb(247,199,9);
}
.red{
color: #EE1111;
}
.red-bg{
background-color: rgb(238,17,17);
}
.blue{
color: #1196EE;
}
.blue-bg{
background-color: rgb(17,150,238);
}
.green{
color: #11ee6d;
}
.green-bg{
background-color: rgb(17, 238, 91);
}
@keyframes pointer
{
0% {opacity: 1;transform:scale(1);}
15% {opacity: 1;transform:scale(1.25);}
30% {opacity: 0.8;transform:scale(1.5);}
45% {opacity: 0.8;transform:scale(2);}
60% {opacity: 0.8;transform:scale(2);}
75% {opacity: 1;transform:scale(1.5);}
100% {opacity: 1;transform:scale(1);}
}
.point-ani{
animation: pointer 3s linear infinite;
}

736
src/views/center/css/commonStyle.css Normal file
View File

@@ -0,0 +1,736 @@
.aside-submenu-title {
background-color: rgba(5, 16, 16, 0.48) !important;
}
#app {
font-family: 'Microsoft YaHei', 'Avenir', Helvetica, Arial, sans-serif;
}
.el-main > div:nth-child(1) > div:nth-child(1) {
text-align: center;
margin-bottom: 48px;
font-weight: bold;
font-size: 18px;
}
body .el-table th.gutter {
display: table-cell !important;
}
.el-table th,
.el-table {
background-color: #153741 !important;
color: #35b1b7;
}
.el-table th {
padding: 4px 0 !important;
}
.el-table__expand-icon {
color: #fff !important;
}
.el-table-column--selection > div {
text-align: left !important;
}
.el-table--border,
.el-table--group {
border: 1px solid #446575;
/*no*/
}
.el-table tbody td .cell {
margin-right: 12px;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: #ebeef500;
}
.el-table th div {
text-align: center;
}
.el-table__empty-text,
.el-table td {
color: #e2e6ec;
}
.el-table td,
.el-table th.is-leaf {
border-right: 1px solid #446575;
/*no*/
border-bottom: 1px solid #446575;
/*no*/
}
.el-table__row > td {
border: none;
border-right: 1px solid #446575;
/*no*/
border-bottom: 1px solid #446575;
/*no*/
}
.el-table::before {
height: 0px;
color: #446575;
}
.el-table,
.el-table__expanded-cell {
background-color: transparent !important;
}
el-table th,
.el-table tr,
.el-table td {
background-color: transparent !important;
}
.el-table td {
padding: 5px 0px !important;
}
.el-table tbody tr:hover > td {
background-color: #367f7f78 !important;
}
.el-table__row--striped td {
background-color: #45797b33 !important;
}
.el-table__row:not(.el-table__row--striped) {
background: #1439391c !important;
}
.el-table .el-button {
margin-top: 5px;
margin-bottom: 5px;
}
.el-table .ascending .sort-caret.ascending {
border-bottom-color: #34d2d2 !important;
}
.el-table .descending .sort-caret.descending {
border-top-color: #34d2d2 !important;
}
.el-table .el-table tr th::before {
display: none;
}
.el-table .el-table {
margin: 20px 20px 20px 46px;
width: 95%;
}
.el-table .el-table th {
background-color: #1a3968 !important;
color: #a3a8e6 !important;
}
.el-input.is-disabled .el-input__inner,
.el-range-editor.is-disabled,
.el-range-editor.is-disabled input,
.is-disabled .el-textarea__inner {
color: #c8d4e4 !important;
background-color: #354460 !important;
border: none;
}
.is-disabled .el-range__icon {
color: #abb8ca;
}
.el-dialog {
background-color: rgba(12, 24, 49, 0.9) !important;
margin-top: 14vh;
margin: 14vh auto 0px !important;
}
.el-dialog .el-dialog__header {
border-bottom: 1px solid #40ffff59;
/*no*/
}
.el-dialog .el-dialog__header .el-dialog__title {
color: #d4e0f0;
font-weight: bold;
}
.el-dialog .el-dialog__body {
padding: 40px;
}
.el-dialog .el-dialog__body label {
color: #9acaf7;
}
.el-dialog .el-tree__empty-text {
color: #9acaf7;
}
.el-dialog .button-group {
text-align: right;
margin-top: 36px;
}
.el-dialog .el-table th {
background-color: #111d40;
color: #7788b9;
padding: 0px 0px !important;
}
.el-dialog .el-table__empty-text {
color: #7788b9;
}
.el-dialog .el-tree {
border: 1px solid #9acaf7;
/*no*/
border-radius: 7px;
}
.el-dialog .el-dialog__wrapper {
max-height: 98vh;
}
.el-message-box {
background-color: rgba(10, 18, 25, 0.9) !important;
border: none;
}
.el-message-box .el-message-box__title,
.el-message-box .el-message-box__message {
color: #b2bece !important;
}
.el-transfer-panel {
background: #111d25 !important;
}
.el-transfer-panel .el-transfer-panel__header {
background: #21405d !important;
}
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label,
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span {
color: #a1d8f9 !important;
}
.el-transfer-panel__item {
display: block !important;
}
.el-button--primary {
background-color: #2b9999 !important;
border: none !important;
color: #FFF !important;
}
.el-button--primary:hover,
.el-button--primary:focus {
background-color: #38cece !important;
}
.el-button--danger {
background-color: #9e1e01 !important;
border: none;
}
.el-button--warning.is-disabled,
.el-button--primary.is-disabled,
.el-button--danger.is-disabled,
.el-button--danger.is-disabled:active,
.el-button--danger.is-disabled:focus,
.el-button--danger.is-disabled:hover,
.el-button--warning.is-disabled:active,
.el-button--warning.is-disabled:focus,
.el-button--warning.is-disabled:hover,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
background-color: #929292 !important;
border: none;
}
.el-button--warning {
background-color: #b4843c !important;
border: none;
}
.el-button--warning:hover {
background-color: #e4a84f !important;
border: none;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #617d96;
border-radius: 3px;
height: 5px !important;
}
/* IE 浏览器 */
.scrollbar {
/*三角箭头的颜色*/
scrollbar-arrow-color: #fff;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #0099dd;
/*滚动条整体颜色*/
scrollbar-highlight-color: #0099dd;
/*滚动条阴影*/
scrollbar-shadow-color: #0099dd;
/*滚动条轨道颜色*/
scrollbar-track-color: #0066ff;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color: #0099dd;
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: #0099dd;
/*滚动条基准颜色*/
scrollbar-base-color: #0099dd;
}
.el-pagination {
margin-top: 10px;
text-align: right;
}
.el-pagination .el-input {
width: 60% !important;
}
.el-pagination .el-input .el-input__inner {
color: #b2bece !important;
background-color: #ffffff00 !important;
}
.el-pagination .el-pagination__total,
.el-pagination .el-select .el-input .el-select__caret,
.el-pagination .btn-prev,
.el-pagination .btn-next {
color: #b2bece !important;
}
.el-pagination .el-dialog,
.el-pagination .el-pager li,
.el-pagination button:disabled,
.el-pagination .btn-prev,
.el-pagination .btn-next {
background-color: transparent !important;
}
.el-pagination .el-pager li {
color: #b2bece !important;
}
.el-pagination .el-pager .active {
color: #09e8e8 !important;
}
.el-loading-mask {
background-color: rgba(13, 26, 40, 0.8) !important;
}
.select-view {
margin-top: 16px;
}
.select-view .echart-icon:hover {
border: 1px solid #19f602 !important;
/*no*/
width: 27px;
height: 27px;
border: 1px solid #8a8a8a;
/*no*/
vertical-align: middle;
background-position: 4px 4px;
background-size: 60%;
margin-right: 0px;
cursor: pointer;
display: inline-block;
margin-left: -5px;
}
.select-view .echart-icon-active {
border: 1px solid #19f602 !important;
/*no*/
}
.select-view .table-icon:hover {
border: 1px solid #19f602 !important;
/*no*/
width: 27px;
height: 27px;
border: 1px solid #8a8a8a;
/*no*/
vertical-align: middle;
background-position: 4px 4px;
background-size: 60%;
margin-right: 0px;
cursor: pointer;
display: inline-block;
margin-left: -5px;
}
.select-view .table-icon-active {
border: 1px solid #19f602 !important;
/*no*/
}
.select-view .change-icon {
width: 27px;
height: 27px;
border: 1px solid #8a8a8a;
/*no*/
vertical-align: middle;
background-position: 4px 4px;
background-size: 60%;
margin-right: 0px;
cursor: pointer;
display: inline-block;
margin-left: -5px;
}
.block {
border: 1px solid #2c667e;
/*no*/
padding: 15px 10px 10px;
border-radius: 5px;
position: relative;
height: 100%;
}
.block .block-title {
position: absolute;
background-color: #153a38d9;
padding: 5px 10px;
color: #c1ffe9;
top: -14px;
border-radius: 5px;
}
.block .empty-text {
position: absolute;
top: 40%;
left: 50%;
color: #909399;
}
.el-input__inner {
background-color: transparent !important;
color: #b2bece;
}
.el-textarea__inner {
color: #b2bece !important;
}
.el-select .el-input.is-focus .el-input__inner,
.el-input.is-focus,
.el-input__inner:focus-within {
border-color: #40ffff !important;
}
.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-input__inner:focus,
.el-form-item.is-error .el-textarea__inner,
.el-form-item.is-error .el-textarea__inner:focus,
.el-message-box__input input.invalid,
.el-message-box__input input.invalid:focus {
border-color: #F56C6C !important;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background-color: #1d2a46 !important;
}
.el-select-dropdown,
.el-picker-panel,
.el-dropdown-menu {
background-color: #1d2a46 !important;
border: 1px solid #40ffff;
/*no*/
}
.el-tag.el-tag--info {
background-color: #2b9999 !important;
border-color: #06f3d2 !important;
color: #ffffff !important;
}
.el-select-dropdown__item,
.el-dropdown-menu__item {
color: #b2bece !important;
}
.el-select-dropdown__item.hover,
.el-tree-node__content:hover,
.el-dropdown-menu__item:hover {
background-color: #145e5e !important;
}
.el-tree-node__content {
background: transparent !important;
}
.is-current > .el-tree-node__content,
.is-current > .el-tree-node__content:focus {
background-color: #247676 !important;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
background-color: #2f3235;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #0dcac1;
border-color: #dfefed;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
color: #0be9ff;
}
input::-webkit-input-placeholder {
color: #787b80 !important;
}
input::-moz-input-placeholder {
color: #787b80 !important;
}
input::-ms-input-placeholder {
color: #787b80 !important;
}
.el-time-spinner__item {
height: auto !important;
}
.el-picker-panel {
color: #afb9b9 !important;
}
.time-select-item.selected:not(.disabled) {
color: #32fbf2 !important;
}
.time-select-item:hover {
background-color: #12504d !important;
}
.el-date-table td.today span {
color: #00fff3 !important;
}
.el-date-table td.disabled div {
background-color: #1d2a46;
color: #616263;
}
.el-date-table td.disabled div span {
color: #616263 !important;
}
.el-time-range-picker__header {
color: #e4e4e4 !important;
}
.el-time-spinner__item.disabled {
color: #575e6d !important;
}
.el-picker-panel__body-wrapper span,
.el-picker-panel__body-wrapper a {
color: #b2bece !important;
}
.el-range-editor.is-active,
.el-range-editor.is-active:hover {
border-color: #40ffff;
}
.el-range-input {
background: transparent;
color: #b2bece !important;
}
.el-date-editor .el-range-separator,
.el-date-range-picker__header div {
color: #b2bece;
}
.el-picker-panel__footer {
background: transparent;
}
.el-picker-panel__footer .el-button--text {
color: #40ffff;
}
.el-picker-panel__footer .el-button--default {
background: #2b9494;
border: none;
}
.el-picker-panel__footer .el-button--default span {
color: #fff;
}
.el-picker-panel__footer .el-button.is-plain:focus,
.el-picker-panel__footer .el-button.is-plain:hover {
background: #1a5c5c !important;
border: none;
}
.el-select-dropdown__item.selected,
.el-month-table td .cell:hover,
.current a {
color: #40ffff !important;
}
.el-date-picker__header {
padding-bottom: 2px;
margin: 3px !important;
border-bottom: solid 1px #40ffff;
/*no*/
}
.el-picker-panel__content th {
color: #b2bece !important;
}
.el-picker-panel__content .el-date-table td.in-range div {
background-color: #13969647;
}
.el-picker-panel__content .el-date-table td.end-date span,
.el-picker-panel__content .el-date-table td.start-date span,
.el-picker-panel__content .el-date-table td.current:not(.disabled) span {
background-color: #1d881b;
}
.el-button.is-disabled.is-plain,
.el-button.is-disabled.is-plain:focus,
.el-button.is-disabled.is-plain:hover {
background-color: #616868 !important;
}
.el-time-panel {
background-color: #1d2a46;
}
.el-time-panel__btn {
color: #40ffff !important;
}
.el-time-spinner__item {
color: #b2bece;
}
.el-time-spinner__item:not(.active):hover {
background-color: #2b9494 !important;
}
.el-time-spinner__item.active:not(.disabled) {
color: #40ffff;
}
.el-picker-panel__icon-btn {
color: #40ffff !important;
}
.popper__arrow::after {
border-bottom-color: #40ffff !important;
}
.el-tree {
background-color: transparent !important;
overflow-y: scroll;
}
.el-tree span {
color: #b2bece !important;
}
.el-textarea__inner {
background: transparent;
}
.el-radio {
color: #b2bece !important;
}
.is-checked .el-radio__inner {
border-color: #40ffff !important;
background: #40ffff !important;
}
.is-disabled .is-checked .el-radio__inner {
border-color: #7a8e8e !important;
background: #5a6363 !important;
}
.el-radio__input.is-checked + .el-radio__label {
color: #40ffff !important;
}
.is-disabled .el-radio__input.is-checked + .el-radio__label {
color: #b2bece !important;
}
.filter {
display: flex;
background-size: 28px;
padding-left: 40px;
border-bottom: 1px solid #2c667e;
/*no*/
padding-bottom: 10px;
}
.filter > div {
margin-right: 40px;
line-height: 36px;
font-size: 15px;
}
.menu-select-title {
height: 38px;
background-size: 46px 46px;
margin-bottom: 0.09375rem;
line-height: 46px;
padding-left: 13px;
}
.menu-select-title span {
margin-left: 24px;
border-bottom: 1px solid #2b6c09;
/*no*/
border-image: linear-gradient(to right, #00deff, #023c3e) 1 10 1;
border-image: -webkit-linear-gradient(to right, #00deff, #023c3e) 30 30;
border-image: -moz-linear-gradient(to right, #00deff, #023c3e) 30 30;
display: inline-block;
padding: 0 29px 0px 10px;
line-height: 26px;
color: #00d6ff;
}
.el-tooltip__popper.is-dark {
background: #2b3853d4;
}
.home-title {
background-size: 150px 35px;
height: 25px;
width: 100%;
color: #40ffff;
padding-left: 14px;
line-height: 25px;
background-position: -14px -4px;
}
.home-block {
position: relative;
}
.home-block > div:nth-child(1) {
background-size: 100% 100%;
}
.opacity1 {
animation: move_down 1s ease-in;
animation-fill-mode: forwards;
}
.opacity0 {
animation: move_top 1s ease-out;
animation-fill-mode: forwards;
}
@-webkit-keyframes move_top {
0% {
top: 0px;
}
100% {
top: -50px;
opacity: 0;
}
}
@keyframes move_top {
0% {
top: 0px;
}
100% {
top: -50px;
opacity: 0;
}
}
@-webkit-keyframes move_down {
0% {
top: -60px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
@keyframes move_down {
0% {
top: -60px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
.el-input__inner,
.el-checkbox__inner::after {
border-width: 1px !important;
/*no*/
}
.empty-text2 {
color: #e6e6e6;
margin-top: 17%;
margin-left: 27%;
}
.empty-text2::before {
content: "";
display: block;
background-size: 100% 100%;
width: 40px;
height: 40px;
text-align: center;
}
.empty-text2::after {
content: "暂无数据";
}
.rect-border {
background: rgba(18, 24, 26, 0.98);
border: 1px solid #075252;
padding: 15px;
position: relative;
display: block;
}
.rect-border .rect-border-title {
width: 200px;
height: 40px;
background-size: cover;
line-height: 40px;
padding-left: 38px;
margin-bottom: 5px;
color: #00ffd5;
text-align: left;
}
.rect-border .rect-border-title .icon {
color: #fffc00;
font-size: 16px;
padding-right: 5px;
}
.rect-border .close-icon {
float: right;
color: #00ffd5;
cursor: pointer;
}
.rect-border::before,
.rect-border::after,
.rect-border .border-foot::before,
.rect-border .border-foot::after {
content: "";
display: inline-block;
position: absolute;
width: 5px;
height: 5px;
border: 1px solid #05e2e2;
box-shadow: 0px 0px 8px #11fec7;
background: rgba(18, 24, 26, 0.98);
}
.rect-border::before {
left: -3px;
top: -2px;
}
.rect-border::after {
right: -3px;
top: -2px;
}
.rect-border .border-foot::before {
left: -3px;
bottom: -2px;
}
.rect-border .border-foot::after {
right: -3px;
bottom: -2px;
}

943
src/views/center/css/commonStyle.less Normal file
View File

@@ -0,0 +1,943 @@
//该文件为全局样式定义，方便统一系统风格
@import '../css/themeMixin.less';
@tableFontColor: #322550;
#app{
font-family: 'Microsoft YaHei','Avenir', Helvetica, Arial, sans-serif;
}
//菜单内容标题样式
.el-main>div:nth-child(1)>div:nth-child(1) {
text-align: center;
margin-bottom: 48px;
font-weight: bold;
font-size: 18px;
}
//表头样式
body .el-table th.gutter{
display: table-cell!important;
}
.el-table th,
.el-table {
background-color: #153741 !important;
color: #35b1b7;
}
.el-table th {
padding: 4px 0 !important
}
.el-table__expand-icon {
color: #fff !important
}
.el-table-column--selection>div {
text-align: left !important;
}
.el-table--border,
.el-table--group {
border: 1px solid #446575;
/*no*/
}
.el-table tbody td .cell {
margin-right: 12px;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: #ebeef500;
}
.el-table th div {
text-align: center;
}
.el-table__empty-text,
.el-table td {
color: #e2e6ec;
}
.el-table td,
.el-table th.is-leaf {
// border-bottom: none;
border-right: 1px solid #446575;
/*no*/
border-bottom: 1px solid #446575;
/*no*/
}
.el-table__row>td {
border: none;
border-right: 1px solid #446575;
/*no*/
border-bottom: 1px solid #446575;
/*no*/
}
.el-table::before {
height: 0px;
color: #446575;
}
.el-table,
.el-table__expanded-cell {
background-color: transparent !important;
}
el-table th,
.el-table tr,
.el-table td {
background-color: transparent !important;
}
.el-table td {
padding: 5px 0px !important
}
.el-table tbody tr:hover>td {
background-color: #367f7f78 !important
}
.el-table__row--striped td {
background-color: #45797b33 !important
}
.el-table__row:not(.el-table__row--striped) {
background: #1439391c !important;
}
.el-table {
.el-button {
margin-top: 5px;
margin-bottom: 5px;
}
}
.el-table .ascending .sort-caret.ascending {
border-bottom-color: #34d2d2 !important;
}
.el-table .descending .sort-caret.descending {
border-top-color: #34d2d2 !important;
}
//二级表格
.el-table {
.el-table tr th::before {
display: none;
}
.el-table {
margin: 20px 20px 20px 46px;
width: 95%;
th {
background-color: #1a3968 !important;
color: #a3a8e6 !important;
}
}
}
//input框disabled样式
.el-input.is-disabled .el-input__inner,
.el-range-editor.is-disabled,
.el-range-editor.is-disabled input,
.is-disabled .el-textarea__inner {
color: #c8d4e4 !important;
background-color: #354460 !important;
border: none;
}
.is-disabled .el-range__icon {
color: #abb8ca;
}
//弹窗样式
.el-dialog {
background-color: rgba(12, 24, 49, 0.9) !important;
margin-top: 14vh;
margin: 14vh auto 0px !important;
.el-dialog__header {
border-bottom: 1px solid #40ffff59;
/*no*/
;
.el-dialog__title {
color: #d4e0f0;
font-weight: bold;
}
}
.el-dialog__body {
padding: 40px;
label {
color: #9acaf7;
}
}
.el-tree__empty-text {
color: #9acaf7;
}
.button-group {
text-align: right;
margin-top: 36px;
}
.el-table th {
background-color: #111d40;
color: #7788b9;
padding: 0px 0px !important;
}
.el-table__empty-text {
color: #7788b9;
}
.el-tree {
border: 1px solid #9acaf7;
/*no*/
border-radius: 7px;
}
.el-dialog__wrapper {
max-height: 98vh;
}
}
.el-message-box {
background-color: rgba(10, 18, 25, 0.9) !important;
border: none;
.el-message-box__title,
.el-message-box__message {
color: #b2bece !important;
}
}
//穿梭框
.el-transfer-panel {
background: #111d25 !important;
}
.el-transfer-panel .el-transfer-panel__header {
background: #21405d !important;
}
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label,
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span {
color: #a1d8f9 !important;
}
.el-transfer-panel__item {
display: block !important;
}
//button样式
.el-button--primary {
background-color: #2b9999 !important;
border: none !important;
color: #FFF !important;
&:hover,
&:focus {
background-color: #38cece !important
}
}
.el-button--danger {
background-color: #9e1e01 !important;
border: none;
}
.el-button--warning.is-disabled,
.el-button--primary.is-disabled,
.el-button--danger.is-disabled,
.el-button--danger.is-disabled:active,
.el-button--danger.is-disabled:focus,
.el-button--danger.is-disabled:hover,
.el-button--warning.is-disabled:active,
.el-button--warning.is-disabled:focus,
.el-button--warning.is-disabled:hover,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
background-color: #929292 !important;
border: none;
}
.el-button--warning {
background-color: #b4843c !important;
border: none;
&:hover {
background-color: #e4a84f !important;
border: none;
}
}
// .el-button:focus,
// .el-button:hover {
// background-color: #44bf9d !important;
// }
//滚动条的宽度
::-webkit-scrollbar {
width: 8px;
}
// 滚动条的滑块
::-webkit-scrollbar-thumb {
background-color: #617d96;
border-radius: 3px;
height: 5px !important;
}
/* IE 浏览器 */
.scrollbar {
/*三角箭头的颜色*/
scrollbar-arrow-color: #fff;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #0099dd;
/*滚动条整体颜色*/
scrollbar-highlight-color: #0099dd;
/*滚动条阴影*/
scrollbar-shadow-color: #0099dd;
/*滚动条轨道颜色*/
scrollbar-track-color: #0066ff;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color: #0099dd;
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: #0099dd;
/*滚动条基准颜色*/
scrollbar-base-color: #0099dd;
}
//分页样式
.el-pagination {
margin-top: 10px;
text-align: right;
.el-input {
width: 60% !important;
.el-input__inner {
color: #b2bece !important;
background-color: #ffffff00 !important;
}
}
.el-pagination__total,
.el-select .el-input .el-select__caret,
.btn-prev,
.btn-next {
color: #b2bece !important;
}
.el-dialog,
.el-pager li,
button:disabled,
.btn-prev,
.btn-next {
background-color: transparent !important;
}
.el-pager li {
color: #b2bece !important;
}
.el-pager .active {
color: #09e8e8 !important;
}
}
//页面loading样式
.el-loading-mask {
background-color: rgba(13, 26, 40, 0.8) !important;
}
//折现图和表格切换
.select-view {
margin-top: 16px;
.echart-icon {
// background: url("../../page/pageAssets/images/echart_grey.png") no-repeat;
&:hover {
.echart-icon-active;
.change-icon;
}
}
.echart-icon-active {
// background: url("../../page/pageAssets/images/echart_active.png") no-repeat;
border: 1px solid #19f602 !important;
/*no*/
}
.table-icon {
//background: url("../../page/pageAssets/images/table_grey.png") no-repeat;
&:hover {
.table-icon-active;
.change-icon;
}
}
.table-icon-active {
// background: url("../../page/pageAssets/images/table_active.png") no-repeat;
border: 1px solid #19f602 !important;
/*no*/
}
.change-icon {
width: 27px;
height: 27px;
border: 1px solid #8a8a8a;
/*no*/
vertical-align: middle;
background-position: 4px 4px;
background-size: 60%;
margin-right: 0px;
cursor: pointer;
display: inline-block;
margin-left: -5px;
}
}
//块状内容模块
.block {
position: relative;
border: 1px solid #2c667e;
/*no*/
// border-image: linear-gradient(#7e74dd, #2e6125) 1 10 1;
padding: 15px 10px 10px;
border-radius: 5px;
position: relative;
height: 100%;
.block-title {
position: absolute;
background-color: #153a38d9;
padding: 5px 10px;
color: #c1ffe9;
top: -14px;
border-radius: 5px;
}
.empty-text {
position: absolute;
top: 40%;
left: 50%;
color: #909399;
}
}
//el-input样式
.el-input__inner {
background-color: transparent !important;
color: #b2bece;
}
.el-textarea__inner {
color: #b2bece !important;
}
.el-select .el-input.is-focus .el-input__inner,
.el-input.is-focus,
.el-input__inner:focus-within {
border-color: #40ffff !important;
}
.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-input__inner:focus,
.el-form-item.is-error .el-textarea__inner,
.el-form-item.is-error .el-textarea__inner:focus,
.el-message-box__input input.invalid,
.el-message-box__input input.invalid:focus {
border-color: #F56C6C !important;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background-color: #1d2a46 !important;
}
.el-select-dropdown,
.el-picker-panel,
.el-dropdown-menu {
background-color: #1d2a46 !important;
border: 1px solid #40ffff;
/*no*/
}
.el-tag.el-tag--info {
background-color: #2b9999 !important;
border-color: #06f3d2 !important;
color: #ffffff !important;
}
.el-select-dropdown__item,
.el-dropdown-menu__item {
color: #b2bece !important;
}
.el-select-dropdown__item.hover,
.el-tree-node__content:hover,
.el-dropdown-menu__item:hover {
background-color: #145e5e !important;
}
.el-tree-node__content {
background: transparent !important;
}
.is-current>.el-tree-node__content,
.is-current>.el-tree-node__content:focus {
background-color: #247676 !important;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
background-color: #2f3235;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #0dcac1;
border-color: #dfefed;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #0be9ff
}
//input框placeholder颜色
input::-webkit-input-placeholder {
color: #787b80 !important;
}
input::-moz-input-placeholder {
color: #787b80 !important;
}
input::-ms-input-placeholder {
color: #787b80 !important;
}
//日期选择器
.el-time-spinner__item {
height: auto !important
}
.el-picker-panel {
color: #afb9b9 !important;
}
.time-select-item.selected:not(.disabled) {
color: #32fbf2 !important;
}
.time-select-item:hover {
background-color: #12504d !important;
}
.el-date-table td.today span {
color: #00fff3 !important;
}
.el-date-table td.disabled div {
background-color: #1d2a46;
color: #616263;
span {
color: #616263 !important;
}
}
.el-time-range-picker__header {
color: #e4e4e4 !important;
}
.el-time-spinner__item.disabled {
color: #575e6d !important;
}
.el-picker-panel__body-wrapper span,
.el-picker-panel__body-wrapper a {
color: #b2bece !important
}
.el-range-editor.is-active,
.el-range-editor.is-active:hover {
border-color: #40ffff;
}
.el-range-input {
background: transparent;
color: #b2bece !important;
}
.el-date-editor .el-range-separator,
.el-date-range-picker__header div {
color: #b2bece;
}
.el-picker-panel__footer {
background: transparent;
.el-button--text {
color: #40ffff;
}
.el-button--default {
background: #2b9494;
border: none;
span {
color: #fff;
}
}
.el-button.is-plain:focus,
.el-button.is-plain:hover {
background: #1a5c5c !important;
border: none;
}
}
.el-select-dropdown__item.selected,
.el-month-table td .cell:hover,
.current a {
color: #40ffff !important;
}
.el-date-picker__header {
padding-bottom: 2px;
margin: 3px !important;
border-bottom: solid 1px #40ffff;
/*no*/
}
.el-picker-panel__content th {
color: #b2bece !important
}
.el-picker-panel__content {
.el-date-table td.in-range div {
background-color: #13969647;
}
.el-date-table td.end-date span,
.el-date-table td.start-date span,
.el-date-table td.current:not(.disabled) span {
background-color: #1d881b;
}
}
.el-button.is-disabled.is-plain,
.el-button.is-disabled.is-plain:focus,
.el-button.is-disabled.is-plain:hover {
background-color: #616868 !important;
}
.el-time-panel {
background-color: #1d2a46;
}
.el-time-panel__btn {
color: #40ffff !important;
}
.el-time-spinner__item {
color: #b2bece;
}
.el-time-spinner__item:not(.active):hover {
background-color: #2b9494 !important;
}
.el-time-spinner__item.active:not(.disabled) {
color: #40ffff;
}
.el-picker-panel__icon-btn {
color: #40ffff !important;
}
.popper__arrow::after {
border-bottom-color: #40ffff !important;
}
.el-tree {
background-color: transparent !important;
overflow-y: scroll;
span {
color: #b2bece !important
}
}
.el-textarea__inner {
background: transparent;
}
//el-raidio
.el-radio {
color: #b2bece !important
}
.is-checked .el-radio__inner {
border-color: #40ffff !important;
background: #40ffff !important;
}
.is-disabled .is-checked .el-radio__inner {
border-color: #7a8e8e !important;
background: #5a6363 !important;
}
.el-radio__input.is-checked+.el-radio__label {
color: #40ffff !important;
}
.is-disabled .el-radio__input.is-checked+.el-radio__label {
color: #b2bece !important;
}
//过滤片区
.filter {
display: flex;
//background: url("../../page/pageAssets/images/filter.png") no-repeat;
background-size: 28px;
padding-left: 40px;
border-bottom: 1px solid #2c667e;
/*no*/
// border-image: linear-gradient(to right, #50d8ee, #665a05) 1 10 1;
padding-bottom: 10px;
&>div {
margin-right: 40px;
line-height: 36px;
font-size: 15px;
}
}
//树形菜单选择后名称片区
.menu-select-title {
//background: url("../../page/pageAssets/images/location.png") no-repeat;
height: 38px;
background-size: 46px 46px;
margin-bottom: 0.09375rem;
line-height: 46px;
padding-left: 13px;
span {
margin-left: 24px;
border-bottom: 1px solid #2b6c09;
/*no*/
border-image: linear-gradient(to right, #00deff, #023c3e) 1 10 1;
border-image: -webkit-linear-gradient(to right, #00deff, #023c3e) 30 30;
border-image: -moz-linear-gradient(to right, #00deff, #023c3e) 30 30;
display: inline-block;
padding: 0 29px 0px 10px;
line-height: 26px;
color: #00d6ff;
}
}
//文字提示框
.el-tooltip__popper.is-dark {
background: #2b3853d4;
}
.home-title {
//background: url("../../page/pageAssets/images/home_title.png") no-repeat 0 0;
background-size: 150px 35px;
height: 25px;
width: 100%;
color: #40ffff;
padding-left: 14px;
line-height: 25px;
background-position: -14px -4px;
}
.home-block {
// background-color: #0521494a;
position: relative;
&>div:nth-child(1) {
// background: url("../../page//pageAssets/images/border1.png") no-repeat;
background-size: 100% 100%;
}
}
//上边栏动画
.opacity1 {
animation: move_down 1s ease-in;
animation-fill-mode: forwards;
}
.opacity0 {
animation: move_top 1s ease-out;
animation-fill-mode: forwards;
}
@-webkit-keyframes move_top {
0% {
top: 0px;
}
100% {
top: -50px;
opacity: 0;
}
}
@keyframes move_top {
0% {
top: 0px;
}
100% {
top: -50px;
opacity: 0;
}
}
@-webkit-keyframes move_down {
0% {
top: -60px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
@keyframes move_down {
0% {
top: -60px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
// 以下为兼容IE配置
.el-input__inner,
.el-checkbox__inner::after {
border-width: 1px !important;
/*no*/
}
//暂无数据
.empty-text2 {
color: #e6e6e6;
margin-top: 17%;
margin-left: 27%;
&::before {
content: "";
display: block;
//background: url("../images/empty_icon.png") no-repeat;
background-size: 100% 100%;
width: 40px;
height: 40px;
text-align: center;
}
&::after {
content: "暂无数据";
}
}
//四个角边框样式
.rect-border {
background: rgba(18, 24, 26, 0.98);
// min-width: 402px;
// min-height: 251px;
border: 1px solid #075252;
padding: 15px;
position: relative;
display: block;
.rect-border-title {
//background: url("../../page/pageAssets/images/box-title.png") no-repeat;
width: 200px;
height: 40px;
background-size: cover;
line-height: 40px;
padding-left: 38px;
margin-bottom: 5px;
color: #00ffd5;
text-align: left;
.icon {
color: rgb(255 252 0);
font-size: 16px;
padding-right: 5px;
}
}
.close-icon {
float: right;
color: #00ffd5;
cursor: pointer;
}
&::before,
&::after,
.border-foot::before,
.border-foot::after {
content: "";
display: inline-block;
position: absolute;
width: 5px;
height: 5px;
border: 1px solid #05e2e2;
box-shadow: 0px 0px 8px #11fec7;
background: rgba(18, 24, 26, 0.98);
}
&::before {
left: -3px;
top: -2px;
}
&::after {
right: -3px;
top: -2px;
}
.border-foot::before {
left: -3px;
bottom: -2px;
}
.border-foot::after {
right: -3px;
bottom: -2px;
}
}

202
src/views/center/css/home.less Normal file
View File

@@ -0,0 +1,202 @@
/* 定义 */
@font-face {
font-family: "electricFont";
src: url("../fonts/digital-7.woff2") format("woff2"),
url("../fonts/digital-7.woff") format("woff"),
url("../fonts/digital-7.ttf") format("truetype"),
url("../fonts/digital-7.eot") format("embedded-opentype"),
// url(".../fonts/digital-7.svg") format("svg");
}
.actSty {
width: 25%;
height: 25%
}
#header {
position: fixed;
top: 0px;
width: 100%;
z-index: 2004;
height: 54px;
}
#homePage {
// background: url("../../../../static/imges/bg5.png") no-repeat;
// background-size: cover;
&>div:first-child {
margin-top: 0px;
}
.play-container-bug {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 100;
}
.play-container {
position: fixed;
background: #14142dcc;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 99;
.play-content {
margin-top: 50px;
height: 100%;
margin-bottom: 50px;
.el-carousel--horizontal {
height: 100%;
}
.el-carousel__container {
height: 86% !important;
}
}
}
.home-content {
display: flex;
height: calc(100% - 65px);
.menu-left {
position: relative;
padding-top: 4%;
width: 3%;
overflow: hidden;
ul {
position: absolute;
top: 18%;
left: -34px;
li {
list-style: none;
color: #fff;
margin-top: 3px;
position: absolute;
cursor: pointer;
width: 25px;
height: 110px;
padding-left: 8px;
padding-top: 25px;
&:hover {
color: #13e6e6
}
}
span {
display: inline-block;
width: 10px;
font-size: 0.3rem;
}
li:nth-child(1) {
// background: url("../images/menu-border1.png") no-repeat;
background-size: 100% 91%;
top: -46px;
height: 70px;
background-position-x: -2px;
}
li:nth-child(2) {
// background: url("../images/menu-border1.png") no-repeat;
top: 42px;
background-size: 100% 91%;
height: 92px;
background-position-x: -2px;
display: block;
span {
margin-top: -9px;
}
}
li:nth-child(3) {
//background: url("../images/menu-border1.png") no-repeat;
top: 150px;
padding-top: 20px;
background-size: 100% 91%;
height: 72px;
background-position-x: -2px;
display: block;
}
}
}
.content-left {
width: 25%;
height: 100%;
&>div {
width: 100%;
margin-top: 10px;
}
}
.content-center {
width: 25%;
height: 100%;
margin-left: 10%;
margin-right: 10%;
.center-item1 {
width: 100%;
}
.center-item2 {
width: 186%;
height: 70%;
margin-left: -45%;
margin-top: 20px;
}
}
.content-right {
width: 25%;
padding: 10px;
height: 100%;
}
.content-top {
margin-top: 10px;
}
}
.map {
width: 100%;
height: 100%;
}
.home-header {
position: relative;
width: 100%;
.img-left {
width: 30px;
height: 30px;
margin-top: 11px
}
}
.header-text {
width: 300px;
font-size: 0.5rem;
font-weight: bold;
color: #43a8bf;
position: absolute;
top: 14px;
left: 38px;
}
}

88
src/views/center/css/themeMixin.less Normal file
View File

@@ -0,0 +1,88 @@
//该文件主要做主题颜色管理，方便后期换肤切换
@background-color-theme1: #23262b;
@background-color-theme2: #23262b;
@body-bg-color: #073158;
@content-bg-color: #073158;
@header-bg-color: rgba(41, 44, 74, 0.5);
@aside-bg-color: rgba(11, 95, 95, 0.48);
@aside-bg-color1: rgba(28, 43, 95, 0.88);
@aside-submenu: rgba(5, 16, 16, 0.48);
@font-color: #c3d5ea;
//主页面整体背景颜色
.body-bg-color-mixin() {
background-color: @body-bg-color !important;
// background-image: radial-gradient(#133750, #291d3b);
background-image: radial-gradient(#20676e, #291d3b);
// background-image: radial-gradient(#20676e, #0d1619);
[data-theme="theme1"] & {
background-color: @background-color-theme1;
}
[data-theme="theme2"] & {
background-color: @background-color-theme2;
}
}
//主页面content背景颜色
.content-bg-color-mixin() {
// background-color: transparent !important;
[data-theme="theme1"] & {
background-color: @background-color-theme1;
}
[data-theme="theme2"] & {
background-color: @background-color-theme2;
}
}
// 菜单header颜色
.header-bg-color-mixin() {
background-color: @header-bg-color !important;
[data-theme="theme1"] & {
background-color: @background-color-theme1;
}
[data-theme="theme2"] & {
background-color: @background-color-theme2;
}
}
//左侧menu菜单整体背景颜色
.aside-bg-color-mixin() {
background-color: @aside-bg-color !important;
[data-theme="theme1"] & {
background-color: @background-color-theme1;
}
[data-theme="theme2"] & {
background-color: @background-color-theme2;
}
}
//左侧menu一级菜单整体背景颜色
.aside-level1-bg-color-mixin() {
background-color: @aside-bg-color1 !important;
[data-theme="theme1"] & {
background-color: @background-color-theme1;
}
[data-theme="theme2"] & {
background-color: @background-color-theme2;
}
}
//左侧菜单submenutitle颜色
.aside-submenu-title {
background-color: @aside-submenu !important;
}
//菜单字体颜色
.font-color-mixin() {
color: @font-color !important;
}

12
src/views/center/fonts/digital-7.css Normal file
View File

@@ -0,0 +1,12 @@
@charset "UTF-8";
@font-face {
font-family: "digital-7";
src: url("../fonts/digital-7.woff2") format("woff2"),
url("../fonts/digital-7.woff") format("woff"),
url("../fonts/digital-7.ttf") format("truetype"),
url("../fonts/digital-7.eot") format("embedded-opentype"),
url("../fonts/digital-7.svg") format("svg");
font-weight: normal;
font-style: normal;
}

BIN
src/views/center/fonts/digital-7.eot Normal file
View File

Binary file not shown.

263
src/views/center/fonts/digital-7.svg Normal file
View File

@@ -0,0 +1,263 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<metadata>
Created by FontForge 20170924 at Wed Mar 23 16:17:49 2011
By www-data
Created by Sizenko Alexander. (c) 2008 Style-7. All rights reserved. http://www.styleseven.com
</metadata>
<defs>
<font id="Digital-7" horiz-adv-x="520" >
<font-face
font-family="Digital-7"
font-weight="400"
font-stretch="normal"
units-per-em="1100"
panose-1="2 0 0 0 0 0 0 0 0 0"
ascent="880"
descent="-220"
x-height="710"
cap-height="720"
bbox="50 -120 550 840"
underline-thickness="70"
underline-position="-225"
unicode-range="U+0020-2030"
/>
<missing-glyph horiz-adv-x="580"
d="M460 0h-360q-40 10 -50 50l80 30h300zM430 640h-299l-80 30q10 40 50 50h359zM130 100l-80 -30v580l80 -30v-520zM530 50q-10 -40 -50 -50l-30 80v560l30 80q40 -10 50 -50v-620z" />
<glyph glyph-name=".notdef" horiz-adv-x="580"
d="M460 0h-360q-40 10 -50 50l80 30h300zM430 640h-299l-80 30q10 40 50 50h359zM130 100l-80 -30v580l80 -30v-520zM530 50q-10 -40 -50 -50l-30 80v560l30 80q40 -10 50 -50v-620z" />
<glyph glyph-name=".null" horiz-adv-x="0"
/>
<glyph glyph-name="nonmarkingreturn" horiz-adv-x="500"
/>
<glyph glyph-name="space" unicode=" " horiz-adv-x="300"
/>
<glyph glyph-name="exclam" unicode="!" horiz-adv-x="180"
d="M110 350l20 -20v-170h-80v130zM50 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 0h-80v80h80v-80z" />
<glyph glyph-name="quotedbl" unicode="&#x22;" horiz-adv-x="341"
d="M130 560l-40 -40l-40 40v160h80v-160zM291 561l-40 -40l-40 40v160h80v-160z" />
<glyph glyph-name="numbersign" unicode="#" horiz-adv-x="540"
d="M290 480l40 -40l-40 -40h-40l-40 40l40 40h40zM290 320l40 -40l-40 -40h-40l-40 40l40 40h40zM150 380l40 40l40 -40v-40l-40 -40l-40 40v40zM310 380l40 40l40 -40v-40l-40 -40l-40 40v40zM150 560l40 40l40 -40v-60l-40 -40l-40 40v60zM310 560l40 40l40 -40v-60
l-40 -40l-40 40v60zM310 221l40 40l40 -40v-61l-40 -40l-40 40v61zM150 220l40 40l40 -40v-61l-40 -40l-40 40v61zM130 320l40 -40l-40 -40h-40l-40 40l40 40h40zM450 319l40 -40l-40 -40h-40l-40 40l40 40h40zM450 480l40 -40l-40 -40h-40l-40 40l40 40h40zM130 479l40 -40
l-40 -40h-40l-40 40l40 40h40z" />
<glyph glyph-name="dollar" unicode="$"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM130 620v-190l-60 -60l-20 20v260zM131 640l-80 30q10 40 50 50h319q40 -10 50 -50l-80 -30h-259zM230 750v50l40 40l40 -40v-50
h-80zM230 430v180h80v-180h-80zM230 110v180h80v-180h-80zM310 -30v-50l-40 -40l-40 40v50h80z" />
<glyph glyph-name="percent" unicode="%" horiz-adv-x="600"
d="M311 478l119 242q60 0 80 -40l-154 -310h-45v108zM289 242l-119 -242q-60 0 -80 40l154 310h45v-108zM190 640h-60l-80 30q10 40 50 50h120zM130 620v-60l-30 -80q-40 10 -50 50v120zM150 560h60l80 -30q-10 -40 -50 -50h-120zM210 580v60l30 80q40 -10 50 -50v-120z
M470 100v60l30 80q40 -10 50 -50v-120zM450 160h-60l-80 30q10 40 50 50h120zM390 140v-60l-30 -80q-40 10 -50 50v120zM410 80h60l80 -30q-10 -40 -50 -50h-120z" />
<glyph glyph-name="ampersand" unicode="&#x26;" horiz-adv-x="560"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-230h-50l-30 30v160zM490 0h-390q-40 10 -50 50l80 30h320l60 -60zM50 70v260l20 20l60 -60v-190zM330 600h-160l-80 30q10 40 50 50h220zM170 580v-110l-60 -60l-20 20v180zM350 470v130l30 80
q40 -10 50 -50v-200l-20 -20zM470 -20v-50l-20 -20l-60 60v10h80z" />
<glyph glyph-name="quotesingle" unicode="'" horiz-adv-x="180"
d="M130 560l-40 -40l-40 40v160h80v-160z" />
<glyph glyph-name="parenleft" unicode="(" horiz-adv-x="350"
d="M260 640h-110l-40 40l40 40h110l40 -40zM70 370l-20 20v230l50 50l30 -30v-210zM300 40l-40 -40h-110l-40 40l40 40h110zM130 290v-210l-30 -30l-50 50v230l20 20z" />
<glyph glyph-name="parenright" unicode=")" horiz-adv-x="350"
d="M90 80h110l40 -40l-40 -40h-110l-40 40zM280 350l20 -20v-230l-50 -50l-30 30v210zM50 680l40 40h110l40 -40l-40 -40h-110zM220 430v210l30 30l50 -50v-230l-20 -20z" />
<glyph glyph-name="asterisk" unicode="*" horiz-adv-x="430"
d="M175 430v80l40 40l40 -40v-80l70 40l55 -15l-15 -55l-69 -40l69 -40l15 -55l-55 -15l-70 40v-80l-40 -40l-40 40v80l-70 -40l-55 15l15 55l69 40l-69 40l-15 55l55 15z" />
<glyph glyph-name="plus" unicode="+" horiz-adv-x="440"
d="M180 400v90l40 40l40 -40v-90h90l40 -40l-40 -40h-90v-90l-40 -40l-40 40v90h-90l-40 40l40 40h90z" />
<glyph glyph-name="comma" unicode="," horiz-adv-x="180"
d="M130 -80l-40 -40l-40 40v160h80v-160z" />
<glyph glyph-name="hyphen" unicode="-" horiz-adv-x="440"
d="M350 400l40 -40l-40 -40h-260l-40 40l40 40h260z" />
<glyph glyph-name="period" unicode="." horiz-adv-x="180"
d="M130 0h-80v80h80v-80z" />
<glyph glyph-name="slash" unicode="/"
d="M271 478l119 242q60 0 80 -40l-154 -310h-45v108zM249 242l-119 -242q-60 0 -80 40l154 310h45v-108z" />
<glyph glyph-name="zero" unicode="0"
d="M450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
<glyph glyph-name="one" unicode="1" horiz-adv-x="180"
d="M110 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM50 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
<glyph glyph-name="two" unicode="2"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM430 0h-330q-40 10 -50 50l80 30h270zM50 70v260l20 20l60 -60v-190zM370 640h-239l-80 30q10 40 50 50h299zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
<glyph glyph-name="three" unicode="3"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM370 640h-239l-80 30q10 40 50 50h299zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
<glyph glyph-name="four" unicode="4"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM130 650v-220l-60 -60l-20 20v290zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
<glyph glyph-name="five" unicode="5"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
<glyph glyph-name="six" unicode="6"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
<glyph glyph-name="seven" unicode="7"
d="M450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
<glyph glyph-name="eight" unicode="8"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80
q40 -10 50 -50v-280l-20 -20z" />
<glyph glyph-name="nine" unicode="9"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
<glyph glyph-name="colon" unicode=":" horiz-adv-x="180"
d="M130 160h-80v80h80v-80zM130 480h-80v80h80v-80z" />
<glyph glyph-name="semicolon" unicode=";" horiz-adv-x="180"
d="M130 480h-80v80h80v-80zM130 -80l-40 -40l-40 40v160h80v-160z" />
<glyph glyph-name="less" unicode="&#x3c;" horiz-adv-x="370"
d="M160 370h-110l200 200h40l30 -39zM320 189l-30 -39h-40l-200 200h110z" />
<glyph glyph-name="equal" unicode="=" horiz-adv-x="440"
d="M350 480l40 -40l-40 -40h-260l-40 40l40 40h260zM350 319l40 -40l-40 -40h-260l-40 40l40 40h260z" />
<glyph glyph-name="greater" unicode="&#x3e;" horiz-adv-x="370"
d="M50 531l30 39h40l200 -200h-110zM210 350h110l-200 -200h-40l-30 39z" />
<glyph glyph-name="question" unicode="?"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM50 160v170l20 20l60 -60v-130h-80zM370 640h-239l-80 30q10 40 50 50h299zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 0h-80v80h80v-80z" />
<glyph glyph-name="at" unicode="@"
d="M450 350l20 -20v-120q-10 -40 -50 -50l-30 80v50zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM400 160l-140 -1
q-40 10 -50 50l80 31h80zM210 230v100l20 20l60 -60v-30zM290 460v-30l-60 -60l-20 20v100zM370 480h-80l-80 31q10 40 50 50l110 -1v-80z" />
<glyph glyph-name="A" unicode="A"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280
l20 20z" />
<glyph glyph-name="B" unicode="B"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM50 70v260l20 20l60 -60v-190zM370 640h-240l-80 30v50h320l40 -40zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 30l50 -50v-230l-20 -20zM450 350l20 -20v-230l-50 -50l-30 30v210zM409 40l-40 -40h-319v50l80 30
h239z" />
<glyph glyph-name="C" unicode="C" horiz-adv-x="480"
d="M430 0h-330q-40 10 -50 50l80 30h270zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
<glyph glyph-name="D" unicode="D"
d="M50 70v260l20 20l60 -60v-190zM370 640h-240l-80 30v50h320l40 -40zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 30l50 -50v-230l-20 -20zM450 350l20 -20v-230l-50 -50l-30 30v210zM409 40l-40 -40h-319v50l80 30h239z" />
<glyph glyph-name="E" unicode="E" horiz-adv-x="480"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM430 0h-330q-40 10 -50 50l80 30h270zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
<glyph glyph-name="F" unicode="F" horiz-adv-x="480"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20z" />
<glyph glyph-name="G" unicode="G"
d="M390 400l40 -40l-40 -40h-90l-40 40l40 40h90zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
<glyph glyph-name="H" unicode="H"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM70 360l-20 20v280q10 40 50 50l30 -80v-210z" />
<glyph glyph-name="I" unicode="I" horiz-adv-x="180"
d="M50 430v210l30 80q40 -10 50 -50v-280l-20 -20zM110 360l20 -20v-280q-10 -40 -50 -50l-30 80v210z" />
<glyph glyph-name="J" unicode="J"
d="M450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
<glyph glyph-name="K" unicode="K"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM150 480l240 240q60 0 80 -40l-260 -260h-60v60zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM70 370l-20 20v280q10 40 50 50l30 -80v-210z" />
<glyph glyph-name="L" unicode="L"
d="M130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM150 80h240l80 -30q-10 -40 -50 -50h-300zM70 370l-20 20v280q10 40 50 50l30 -80v-210z" />
<glyph glyph-name="M" unicode="M"
d="M300 390l-40 -40l-40 40v230h80v-230zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20z" />
<glyph glyph-name="N" unicode="N"
d="M130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM370 420h-70l-150 150v60h60l160 -160v-50zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM390 420v210l30 80q40 -10 50 -50v-280l-20 -20zM70 360l-20 20v280q10 40 50 50l30 -80v-210z" />
<glyph glyph-name="O" unicode="O"
d="M370 640h-220l-40 40l40 40h220l40 -40zM390 430v210l30 30l50 -50v-230l-20 -20zM450 350l20 -20v-230l-50 -50l-30 30v210zM70 370l-20 20v230l50 50l30 -30v-210zM410 40l-40 -40h-220l-40 40l40 40h220zM130 290v-210l-30 -30l-50 50v230l20 20z" />
<glyph glyph-name="P" unicode="P"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM370 640h-240l-80 30v50h320l40 -40zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 30l50 -50v-230l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20z" />
<glyph glyph-name="Q" unicode="Q" horiz-adv-x="530"
d="M450 350l20 -20v-240l-80 80v120zM380 0h-280q-40 10 -50 50l80 30h170zM50 70v260l20 20l60 -60v-190zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM290 180h60l130 -130v-60h-60l-130 130
v60z" />
<glyph glyph-name="R" unicode="R"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM150 300h60l260 -260q-20 -40 -80 -40l-240 240v60zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM370 640h-239l-80 30q10 40 50 50h299zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 620v-190l-60 -60
l-20 20v260z" />
<glyph glyph-name="S" unicode="S"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM130 620v-190l-60 -60l-20 20v260zM131 640l-80 30q10 40 50 50h319q40 -10 50 -50l-80 -30h-259z" />
<glyph glyph-name="T" unicode="T" horiz-adv-x="519"
d="M259 350l40 -40v-260q-10 -40 -50 -50l-30 80v230zM219 410v210h80v-210l-40 -40zM130 640l-80 30q10 40 50 50h319q40 -10 50 -50l-80 -30h-259z" />
<glyph glyph-name="U" unicode="U"
d="M450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM70 360l-20 20v280q10 40 50 50l30 -80v-210z" />
<glyph glyph-name="V" unicode="V"
d="M70 360l-20 20v280q10 40 50 50l30 -80v-210zM390 420v210l30 80q40 -10 50 -50v-280l-20 -20zM250 120v-120l-200 260v60l20 20l60 -60zM390 280l60 60l20 -20v-60l-200 -260v120z" />
<glyph glyph-name="W" unicode="W"
d="M300 100h-80v230l40 40l40 -40v-230zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM400 0h-299q-40 10 -50 50l80 30h239zM50 70v260l20 20l60 -60v-190zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM70 370l-20 20v280q10 40 50 50l30 -80v-210z" />
<glyph glyph-name="X" unicode="X"
d="M270 350h45l154 -310q-20 -40 -80 -40l-119 242v108zM271 478l119 242q60 0 80 -40l-154 -310h-45v108zM249 242l-119 -242q-60 0 -80 40l154 310h45v-108zM250 370h-45l-154 310q20 40 80 40l119 -243v-107z" />
<glyph glyph-name="Y" unicode="Y"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM130 650v-220l-60 -60l-20 20v290zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
<glyph glyph-name="Z" unicode="Z"
d="M430 0h-280l40 80h210zM330 640h-199l-80 30q10 40 50 50h269zM260 430l130 290q60 0 80 -40l-150 -310h-60v60zM270 290l-140 -290q-60 0 -80 40l160 310h60v-60z" />
<glyph glyph-name="bracketleft" unicode="[" horiz-adv-x="310"
d="M50 70v260l20 20l60 -60v-190zM200 640h-69l-80 30q10 40 50 50h139l20 -20zM130 620v-190l-60 -60l-20 20v260zM260 20l-20 -20h-139q-40 10 -50 50l80 30h69z" />
<glyph glyph-name="backslash" unicode="\" horiz-adv-x="518"
d="M269 350h45l154 -310q-20 -40 -80 -40l-119 242v108zM249 370h-45l-154 310q20 40 80 40l119 -243v-107z" />
<glyph glyph-name="bracketright" unicode="]" horiz-adv-x="310"
d="M240 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM160 640h-50l-60 60l20 20h120zM180 430v210l30 80q40 -10 50 -50v-280l-20 -20zM190 0h-120l-20 20l60 60h50z" />
<glyph glyph-name="asciicircum" unicode="^" horiz-adv-x="519"
d="M269 610v110l200 -200v-40l-39 -30zM89 450l-39 30v40l200 200l-1 -110z" />
<glyph glyph-name="underscore" unicode="_" horiz-adv-x="519"
d="M389 80l80 -30q-10 -40 -50 -50h-319q-40 10 -50 50l80 30h259z" />
<glyph glyph-name="grave" unicode="`" horiz-adv-x="280"
d="M230 610v-40l-40 -10l-140 140l10 40h40z" />
<glyph glyph-name="a" unicode="a"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280
l20 20z" />
<glyph glyph-name="b" unicode="b"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM50 70v260l20 20l60 -60v-190zM370 640h-240l-80 30v50h320l40 -40zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 30l50 -50v-230l-20 -20zM450 350l20 -20v-230l-50 -50l-30 30v210zM409 40l-40 -40h-319v50l80 30
h239z" />
<glyph glyph-name="c" unicode="c" horiz-adv-x="480"
d="M430 0h-330q-40 10 -50 50l80 30h270zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
<glyph glyph-name="d" unicode="d"
d="M50 70v260l20 20l60 -60v-190zM370 640h-240l-80 30v50h320l40 -40zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 30l50 -50v-230l-20 -20zM450 350l20 -20v-230l-50 -50l-30 30v210zM409 40l-40 -40h-319v50l80 30h239z" />
<glyph glyph-name="e" unicode="e" horiz-adv-x="480"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM430 0h-330q-40 10 -50 50l80 30h270zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
<glyph glyph-name="f" unicode="f" horiz-adv-x="480"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20z" />
<glyph glyph-name="g" unicode="g"
d="M390 400l40 -40l-40 -40h-90l-40 40l40 40h90zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
<glyph glyph-name="h" unicode="h"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM70 360l-20 20v280q10 40 50 50l30 -80v-210z" />
<glyph glyph-name="i" unicode="i" horiz-adv-x="180"
d="M50 430v210l30 80q40 -10 50 -50v-280l-20 -20zM110 360l20 -20v-280q-10 -40 -50 -50l-30 80v210z" />
<glyph glyph-name="j" unicode="j"
d="M450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
<glyph glyph-name="k" unicode="k"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM150 480l240 240q60 0 80 -40l-260 -260h-60v60zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM70 370l-20 20v280q10 40 50 50l30 -80v-210z" />
<glyph glyph-name="l" unicode="l"
d="M130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM150 80h240l80 -30q-10 -40 -50 -50h-300zM70 370l-20 20v280q10 40 50 50l30 -80v-210z" />
<glyph glyph-name="m" unicode="m"
d="M300 390l-40 -40l-40 40v230h80v-230zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20z" />
<glyph glyph-name="n" unicode="n"
d="M130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM370 420h-70l-150 150v60h60l160 -160v-50zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM390 420v210l30 80q40 -10 50 -50v-280l-20 -20zM70 360l-20 20v280q10 40 50 50l30 -80v-210z" />
<glyph glyph-name="o" unicode="o"
d="M370 640h-220l-40 40l40 40h220l40 -40zM390 430v210l30 30l50 -50v-230l-20 -20zM450 350l20 -20v-230l-50 -50l-30 30v210zM70 370l-20 20v230l50 50l30 -30v-210zM410 40l-40 -40h-220l-40 40l40 40h220zM130 290v-210l-30 -30l-50 50v230l20 20z" />
<glyph glyph-name="p" unicode="p"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM370 640h-240l-80 30v50h320l40 -40zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 30l50 -50v-230l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20z" />
<glyph glyph-name="q" unicode="q" horiz-adv-x="530"
d="M450 350l20 -20v-240l-80 80v120zM380 0h-280q-40 10 -50 50l80 30h170zM50 70v260l20 20l60 -60v-190zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM290 180h60l130 -130v-60h-60l-130 130
v60z" />
<glyph glyph-name="r" unicode="r"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM150 300h60l260 -260q-20 -40 -80 -40l-240 240v60zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM370 640h-239l-80 30q10 40 50 50h299zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 620v-190l-60 -60
l-20 20v260z" />
<glyph glyph-name="s" unicode="s"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM130 620v-190l-60 -60l-20 20v260zM131 640l-80 30q10 40 50 50h319q40 -10 50 -50l-80 -30h-259z" />
<glyph glyph-name="t" unicode="t" horiz-adv-x="519"
d="M259 350l40 -40v-260q-10 -40 -50 -50l-30 80v230zM219 410v210h80v-210l-40 -40zM130 640l-80 30q10 40 50 50h319q40 -10 50 -50l-80 -30h-259z" />
<glyph glyph-name="u" unicode="u"
d="M450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM70 360l-20 20v280q10 40 50 50l30 -80v-210z" />
<glyph glyph-name="v" unicode="v"
d="M70 360l-20 20v280q10 40 50 50l30 -80v-210zM390 420v210l30 80q40 -10 50 -50v-280l-20 -20zM250 120v-120l-200 260v60l20 20l60 -60zM390 280l60 60l20 -20v-60l-200 -260v120z" />
<glyph glyph-name="w" unicode="w"
d="M300 100h-80v230l40 40l40 -40v-230zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM400 0h-299q-40 10 -50 50l80 30h239zM50 70v260l20 20l60 -60v-190zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM70 370l-20 20v280q10 40 50 50l30 -80v-210z" />
<glyph glyph-name="x" unicode="x"
d="M270 350h45l154 -310q-20 -40 -80 -40l-119 242v108zM271 478l119 242q60 0 80 -40l-154 -310h-45v108zM249 242l-119 -242q-60 0 -80 40l154 310h45v-108zM250 370h-45l-154 310q20 40 80 40l119 -243v-107z" />
<glyph glyph-name="y" unicode="y"
d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM130 650v-220l-60 -60l-20 20v290zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
<glyph glyph-name="z" unicode="z"
d="M430 0h-280l40 80h210zM330 640h-199l-80 30q10 40 50 50h269zM260 430l130 290q60 0 80 -40l-150 -310h-60v60zM270 290l-140 -290q-60 0 -80 40l160 310h60v-60z" />
<glyph glyph-name="braceleft" unicode="{" horiz-adv-x="430"
d="M170 70v220l60 60l20 -20v-230zM320 640h-69l-80 30q10 40 50 50h139l20 -20zM250 620v-230l-20 -20l-60 60v220zM380 20l-20 -20h-139q-40 10 -50 50l80 30h69zM160 400l40 -40l-40 -40h-70l-40 40l40 40h70z" />
<glyph glyph-name="bar" unicode="|" horiz-adv-x="180"
d="M130 50q-10 -40 -50 -50l-30 80v560l30 80q40 -10 50 -50v-620z" />
<glyph glyph-name="braceright" unicode="}" horiz-adv-x="430"
d="M180 100v230l20 20l60 -60v-220zM50 700l20 20h139q40 -10 50 -50l-80 -30h-69zM260 650v-220l-60 -60l-20 20v230zM110 80h69l80 -30q-10 -40 -50 -50h-139l-20 20zM340 400l40 -40l-40 -40h-70l-40 40l40 40h70z" />
<glyph glyph-name="asciitilde" unicode="~" horiz-adv-x="540"
d="M290 480l40 -40l-40 -40h-40l-40 40l40 40h40zM130 479l40 -40l-40 -40h-40l-40 40l40 40h40zM450 480l40 -40l-40 -40h-40l-40 40l40 40h40zM210 540l40 -40l-40 -40h-40l-40 40l40 40h40zM370 410l40 -40l-40 -40h-40l-40 40l40 40h40z" />
<glyph glyph-name="copyright" unicode="&#xa9;" horiz-adv-x="580"
d="M460 0h-360q-40 10 -50 50l80 30h300zM430 640h-299l-80 30q10 40 50 50h359zM130 100l-80 -30v580l80 -30v-520zM530 50q-10 -40 -50 -50l-30 80v560l30 80q40 -10 50 -50v-620zM380 480h-130l-80 30q10 40 50 50h190zM250 460v-220l-30 -80q-40 10 -50 50v280zM270 240
h60l80 -30q-10 -40 -50 -50h-120z" />
<glyph glyph-name="endash" unicode="&#x2013;" horiz-adv-x="540"
d="M450 400l40 -40l-40 -40h-360l-40 40l40 40h360z" />
<glyph glyph-name="emdash" unicode="&#x2014;" horiz-adv-x="580"
d="M490 400l40 -40l-40 -40h-400l-40 40l40 40h400z" />
<glyph glyph-name="quoteleft" unicode="&#x2018;" horiz-adv-x="180"
d="M130 520h-80v160l40 40l40 -40v-160z" />
<glyph glyph-name="quoteright" unicode="&#x2019;" horiz-adv-x="180"
d="M130 560l-40 -40l-40 40v160h80v-160z" />
<glyph glyph-name="quotedblleft" unicode="&#x201c;" horiz-adv-x="340"
d="M130 521h-80v160l40 40l40 -40v-160zM290 520h-80v160l40 40l40 -40v-160z" />
<glyph glyph-name="quotedblright" unicode="&#x201d;" horiz-adv-x="341"
d="M130 560l-40 -40l-40 40v160h80v-160zM291 561l-40 -40l-40 40v160h80v-160z" />
<glyph glyph-name="bullet" unicode="&#x2022;" horiz-adv-x="390"
d="M195 220q-60 0 -102.5 42.5t-42.5 102.5t42.5 102.5t102.5 42.5t102.5 -42.5t42.5 -102.5t-42.5 -102.5t-102.5 -42.5z" />
<glyph glyph-name="perthousand" unicode="&#x2030;" horiz-adv-x="590"
d="M279 399l-160 -159q-60 -1 -59 59l189 190h30v-90zM140 640h-10l-80 30q10 40 50 50h70zM130 620v-60l-30 -80q-40 10 -50 50v120zM150 560h10l80 -30q-10 -40 -50 -50h-70zM160 580v60l30 80q40 -10 50 -50v-120zM440 160h-10l-80 30q10 40 50 50h70zM431 140v-60
l-30 -80q-40 10 -50 50v120zM450 80h10l80 -30q-10 -40 -50 -50h-70zM460 100v60l30 80q40 -10 50 -50v-120zM230 100v60l30 80q40 -10 50 -50v-120zM220 79h10l80 -30q-10 -40 -50 -50h-70zM200 140v-60l-30 -80q-40 10 -50 50v120zM210 160h-10l-80 30q10 40 50 50h70z
M290 531l160 159q60 1 59 -59l-189 -191l-30 1v90z" />
<glyph glyph-name="NULL" horiz-adv-x="500"
/>
</font>
</defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/views/center/fonts/digital-7.ttf Normal file
View File

Binary file not shown.

BIN
src/views/center/fonts/digital-7.woff Normal file
View File

Binary file not shown.

BIN
src/views/center/fonts/digital-7.woff2 Normal file
View File

Binary file not shown.

BIN
src/views/center/fonts/sszh.ttf Normal file
View File

Binary file not shown.

BIN
src/views/center/images/2b708e1ed8996fe79b1a17a7850a699.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/views/center/images/369a8784c99e23f956099a59f7bdfa1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
src/views/center/images/3d88ca8408f9026e9a5aa6073ea1249.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/views/center/images/BJ.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
src/views/center/images/BJ1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1002 KiB

BIN
src/views/center/images/GM.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/views/center/images/d045d87176109fc1dfb3b09a583fea5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/views/center/images/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 MiB

BIN
src/views/center/images/wtys.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/views/center/images/zdyc.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/views/center/images/ztsj.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

556
src/views/center/index.vue Normal file
View File

@@ -0,0 +1,556 @@
<template>
<div id="data-view">
<dv-full-screen-container ref="dataView">
<div class="main-header index-head">
<!-- 顶栏开始 -->
<div id="header" class="index-head">
<div class="bt">
{{ title }}
</div>
<!-- <div class="bt">海南监控数据中心</div> -->
<el-row class="elRow">
<el-col :span="8">
<div class="elCol">
<div class="yxsj">
运行时间：<span class="p1">{{ yxsj }}</span><span style="margin-left: 10px">天</span>
</div>
<div class="dqsj">
当前时间：<span class="p2">{{ dqsj }}</span>
</div>
</div>
</el-col>
<el-col :span="8" :offset="8">
<div class="elCol" style="padding: 0 23%">
<div class="tjsj">
统计时间：<span class="p3">{{ tjsj }}</span>
</div>
<!-- <div style="font-size: 20px; color: #00bf8f">首页概览</div> -->
</div>
</el-col>
</el-row>
<!-- <el-button
type="primary"
class="menu-index"
:icon="fullscreen ? 'el-icon-close' : 'el-icon-view'"
size="mini"
circle
@click="handleFullScreen"
></el-button> -->
</div>
</div>
<div class="main-container" :key="sun" :style="`height: calc(${fullscreen ? '100% - 80px' : '100% - 250px'
} );`">
<!-- 左 -->
<div class="rmctc-right-container">
<!-- 监测点规模 -->
<dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-1">
<MonitoringPointScale ref="MonitoringPointScale" @control="control" @Remove="Remove" />
</dv-border-box-13>
<!-- 暂降事件 -->
<dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-2" :reverse="true">
<DropEvent ref="DropEvent" @control="control" @Remove="Remove" />
<!-- <Right-Chart-2 /> -->
</dv-border-box-13>
<!-- 稳态越线占比 -->
<dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-1" :reverse="true">
<SteadyState ref="SteadyState" @control="control" @Remove="Remove" />
</dv-border-box-13>
</div>
<!-- 中 -->
<div class="right-main-container">
<!-- 地图片区 -->
<dv-border-box-1 class="rmc-top-container mapBJ">
<Map />
</dv-border-box-1>
<!-- 表格 -->
<dv-border-box-7 ref="TableHeight" :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmc-bottom-container">
<Table :height="heightTable" />
</dv-border-box-7>
</div>
<!-- 右 -->
<div class="rmctc-right-container">
<!-- 用户规模 -->
<dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-1">
<UserScale v-if="isChina" />
<tHDistortion v-else />
</dv-border-box-13>
<!-- 数据规模 -->
<!-- <dv-border-box-13
:color="['rgb(7 216 253)', 'rgb(7 216 253)']"
class="rmctc-chart-2"
:reverse="true"
>
<DataSize />
</dv-border-box-13> -->
<dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-2" :reverse="true">
<PowerLoad />
</dv-border-box-13>
<!-- 数据中心 -->
<dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-1" :reverse="true">
<DataCenter v-if="isChina" />
<datashuju v-else />
</dv-border-box-13>
</div>
</div>
</dv-full-screen-container>
</div>
</template>
<script>
import { getRunTime } from "@/api/center/DropEvent.js";
import MonitoringPointScale from "./components/MonitoringPointScale";
import DropEvent from "./components/DropEvent";
import SteadyState from "./components/SteadyState";
import Map from "./components/Map";
import Table from "./components/Table";
import UserScale from "./components/UserScale";
// import DataSize from "./components/DataSize";
import DataCenter from "./components/DataCenter";
import PowerLoad from "./components/PowerLoad";
import tHDistortion from "./components/tHDistortion";
import datashuju from "./components/datashuju";
export default {
components: {
MonitoringPointScale,
DropEvent,
SteadyState,
Map,
Table,
UserScale,
// DataSize,
DataCenter,
PowerLoad,
tHDistortion,
datashuju,
},
data() {
return {
vh: undefined,
nowTime: "",
dqsj: "",
tjsj: this.getCurrentMonthFirst() + "--" + this.getNowFormatDate(),
yxsj: this.day2 - this.day1 + 1,
heightTable: 0,
day1: "",
day2: "",
isChina: true,
title: "南京灿能监控数据中心",
isFullscreenBool: true,
fullscreen: false,
sun: 0,
};
},
created() {
const info = JSON.parse(localStorage.getItem("adminInfo"));
if (info.areaId !== "0") {
this.isChina = false;
this.title = info.areaName + "电能质量监控大屏";
}
},
mounted() {
this.vh =
(window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight) -
80 +
"px";
let _this = this;
window.addEventListener("fullscreenchange", (event) => {
if (document.fullscreenElement) {
// console.log("变大了");
} else {
// console.log("变小了");
_this.fullscreen = false;
_this.sun++;
// this.handleFullScreen()
}
});
window.addEventListener("keydown", (e) => {
// 阻止F11键默认事件，用HTML5全屏API代替
e = e || window.event;
if (e.keyCode === 122) {
this.handleFullScreen();
e.preventDefault();
}
});
setTimeout(() => {
this.heightTable = this.$refs.TableHeight.height;
}, 0);
setInterval(() => {
this.fullscreen = false;
this.GetTheCurrentTime();
}, 1000);
this.time();
},
beforeDestroy() {
window.removeEventListener("resize", this.onresize);
},
methods: {
// 点击事件 分控
control(e) {
// 片区
if (e.val == 1) {
if (e.name == "MonitoringPointScale") {
this.$refs.DropEvent.tab1(0);
this.$refs.SteadyState.tab1(0);
} else if (e.name == "DropEvent") {
this.$refs.MonitoringPointScale.tab1(0);
this.$refs.SteadyState.tab1(0);
} else if (e.name == "SteadyState") {
this.$refs.DropEvent.tab1(0);
this.$refs.MonitoringPointScale.tab1(0);
}
} else if (e.val == 2) {
if (e.name == "MonitoringPointScale") {
this.$refs.DropEvent.tab2(0);
this.$refs.SteadyState.tab2(0);
} else if (e.name == "DropEvent") {
this.$refs.MonitoringPointScale.tab2(0);
this.$refs.SteadyState.tab2(0);
} else if (e.name == "SteadyState") {
this.$refs.DropEvent.tab2(0);
this.$refs.MonitoringPointScale.tab2(0);
}
} else if (e.val == 3) {
this.$refs.MonitoringPointScale.tab2(0);
this.$refs.SteadyState.tab2(0);
}
},
time() {
getRunTime().then((res) => {
this.yxsj = res.data.days;
});
},
// 鼠标移出事件
Remove(e) {
this.$refs.SteadyState.info();
this.$refs.DropEvent.info();
this.$refs.MonitoringPointScale.info();
},
//获取当前时间
GetTheCurrentTime() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (month < 10) {
month = "0" + month;
}
if (strDate < 10) {
strDate = "0" + strDate;
}
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var currentdate =
date.getFullYear() +
seperator1 +
month +
seperator1 +
strDate +
" " +
hours +
seperator2 +
minutes +
seperator2 +
seconds;
this.dqsj = currentdate;
},
//获取当月第一天日期
getCurrentMonthFirst() {
var date = new Date();
var year = date.getFullYear();
date.setDate(1);
var month = parseInt(date.getMonth() + 1);
var day = date.getDate();
this.day1 = day;
// console.log(this.day1);
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return year + "-" + month + "-" + day;
},
//获取当天日期
getNowFormatDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
this.day2 = day;
// console.log(this.day2);
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return year + "-" + month + "-" + day;
},
handleFullScreen() {
console.log(1);
let element = document.documentElement;
// 判断是否已经是全屏
// 如果是全屏，退出
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
this.fullscreen = false;
} else {
// 否则，进入全屏
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
this.fullscreen = true;
// console.log("已全屏！");
}
this.sun++;
// 改变当前全屏状态
// this.fullscreen = !this.fullscreen;
},
//进入菜单内容页
},
};
</script>
<style lang="less" scoped>
::v-deep.dpjcksss.el-dialog .el-dialog__body {
max-height: 70vh;
padding: 0px !important;
overflow-y: auto;
}
// @import url("../center/css/commonStyle.less");
// @import url("../center/css/themeMixin.less");
@import url("./css/home.less");
// @import url("../center/css/change.less");
@font-face {
font-family: sszh;
src: url("./fonts/sszh.ttf");
/* IE9+ */
}
#data-view {
width: 100%;
height: 100%;
color: #fff;
background-color: #030409;
#dv-full-screen-container {
display: flex;
// background-image: linear-gradient(
// rgb(57, 86, 102,0.8),
// rgb(57, 86, 102,0.9),
// // rgb(41, 62, 76)
// );
// background-repeat: no-repeat;
// background-size: 100% auto;
background: url("../center/images/BJ1.png") no-repeat;
background-position: center;
background-size: 100% 100%;
box-shadow: 0 0 3px blue;
flex-direction: column;
}
.main-header {
height: 80px;
.yxsj {
// width: 165px;
font-family: electricFont;
font-size: 1.2rem;
color: #03fa2c;
.p1 {
font-size: 1.5rem;
color: rgb(1, 238, 255);
}
}
.dqsj {
width: 50%;
font-family: electricFont;
font-size: 1.2rem;
color: #06e0fa;
.p2 {
font-size: 1.5rem;
color: rgb(1, 238, 255);
}
}
.tjsj {
// width:56%;
font-family: electricFont;
font-size: 1.2rem;
color: #06e0fa;
.p3 {
font-size: 1.5rem;
color: rgb(1, 238, 255);
}
}
.bt {
// position: absolute;
// left: 38.3%;
margin-top: 10px;
font-size: 2.2rem;
color: #fff;
text-align: center;
}
.index-head {
// margin-top: 30px;
z-index: 2000 !important;
width: 100%;
height: 80px !important;
// background-image: url("../center/images/header.png");
background: url("../center/images/header.png") no-repeat;
// background-attachment: fixed;
background-position: 0 25px;
background-size: 100% 100%;
// background-size: contain;
// transform: translate(-15%, -50%);
// width: 400px;
// height: 300px;
// border-bottom: 15px solid rgb(249, 244, 245);
// /* 边框图片路径 */
// border-image-source: url(../center/images/header.png);
// /* 第一种写法上右下左值不同的时候 */
// /* border-image-slice: 170 10 45 80; */
// /* 第二种写法上右下左值都相同的时候 */
// border-image-slice: 200;
// /* 图片边框的宽度（需要加单位） */
// border-image-width: 30px;
// /* 图像边框是否平铺（repeat）、铺满（round）或拉伸（stretch） */
// border-image-repeat: stretch;
.menu-index {
position: absolute;
//right: 0;
top: 10px;
left: 95%;
width: 30px;
height: 30px;
color: aliceblue;
text-align: center;
cursor: pointer;
background: #527f74;
}
.el-icon-s-home {
font-size: 26px;
color: #00bf8f;
}
}
}
.main-container {
display: flex;
// height: calc(~"100% - 80px");
padding: 10px;
box-sizing: border-box;
}
.right-main-container {
width: 50% !important;
padding: 0 0.5% !important;
box-sizing: border-box;
}
.rmc-top-container {
display: flex;
height: 66.2% !important;
}
.mapBJ {
// background: url("../center/images/BJ.png") no-repeat;
// background-attachment: fixed;
background-position: center;
background-size: 98% 98%;
width: 100%;
}
.rmc-bottom-container {
height: 97%/3 !important;
margin-top: 1% !important;
border: 0 solid rgb(7 216 253) !important;
box-shadow: #279cb1 0 0 5px inset !important;
}
.rmctc-right-container {
width: 27% !important;
}
.rmctc-chart-1,
.rmctc-chart-2 {
height: 32.444% !important;
border: 0 solid rgb(7 216 253) !important;
box-shadow: #279cb1 0 0 1px inset !important;
}
.rmctc-chart-2 {
margin: 2% 0 !important;
}
}
.dv-border-box-13,
.dv-border-box-7 {
position: relative;
width: 100%;
height: 32.4%;
padding: 15px 10px 10px 10px;
}
.elRow {
position: relative;
top: -10px;
}
.elCol {
display: flex;
justify-content: space-between;
padding: 0 10px;
}
</style>

1585
src/views/echarts/rmsboxi.vue Normal file
View File

File diff suppressed because it is too large Load Diff

1209
src/views/echarts/shushiboxi.vue Normal file
View File

File diff suppressed because it is too large Load Diff