Skip to content

H
hnsd
Commit 71345daf authored by liubinyu's avatar liubinyu
Browse files
Options

调整样式，最终版

parent 0e49f18b
Hide whitespace changes
Inline Side-by-side
Showing with 332 additions and 87 deletions
src/assets/img/crew-run.png
View replaced file @ 0e49f18b View file @ 71345daf
src/assets/img/crew-run.png

19.7 KB | W: | H:

src/assets/img/crew-run.png

19.6 KB | W: | H:

src/assets/img/crew-run.png
src/assets/img/crew-run.png
src/assets/img/crew-run.png
src/assets/img/crew-run.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/crew-stop.png
View replaced file @ 0e49f18b View file @ 71345daf
src/assets/img/crew-stop.png

19.6 KB | W: | H:

src/assets/img/crew-stop.png

19.7 KB | W: | H:

src/assets/img/crew-stop.png
src/assets/img/crew-stop.png
src/assets/img/crew-stop.png
src/assets/img/crew-stop.png
  • 2-up
  • Swipe
  • Onion skin
src/common/const.js
View file @ 71345daf
...@@ -8,7 +8,7 @@ export const CONFIG = { ...@@ -8,7 +8,7 @@ export const CONFIG = {
SOCKET: server_ip + '/socket', // 线上 SOCKET: server_ip + '/socket', // 线上
// SOCKET: server_ip, // 本地 // SOCKET: server_ip, // 本地
API_URL: '/plant/', API_URL: '/plant/',
TITLE: '湖南三厂机组实时监测系统', // 项目名称 TITLE: '湖南水电公司机组状态监测系统', // 项目名称
CHARACTER_TAB: '#', // 测点名字里的标识，比如1F定子CA线电压，中的"F"，因为会根据这个标识来分割测点名字，可以为空，也可以为多个字符 CHARACTER_TAB: '#', // 测点名字里的标识，比如1F定子CA线电压，中的"F"，因为会根据这个标识来分割测点名字，可以为空，也可以为多个字符
} }
...@@ -16,6 +16,7 @@ export const CONFIG = { ...@@ -16,6 +16,7 @@ export const CONFIG = {
export const RouteMap = { export const RouteMap = {
FactoryMonitoring: '全厂监测', FactoryMonitoring: '全厂监测',
CrewMonitoring: '机组监测', CrewMonitoring: '机组监测',
FactoryInfo: '数据一览',
TrendAnalysis: '趋势分析', TrendAnalysis: '趋势分析',
AlarmRecord: '报警记录', AlarmRecord: '报警记录',
UserManage: '用户管理', UserManage: '用户管理',
...@@ -97,9 +98,9 @@ export const WarningConfig = { ...@@ -97,9 +98,9 @@ export const WarningConfig = {
// 高高报警（一级） // 高高报警（一级）
protect: { protect: {
name: '一级报警', name: '一级报警',
color: '#FF636B', color: '#ffff00',
color2: '#823237', color2: '#828200',
state: 5, state: 3,
warnLevel: 1, // 报警等级，会依次按照这个字段统计报警数量，用于阈值更新里的测试 warnLevel: 1, // 报警等级，会依次按照这个字段统计报警数量，用于阈值更新里的测试
}, },
// 高报警（二级） // 高报警（二级）
...@@ -113,9 +114,9 @@ export const WarningConfig = { ...@@ -113,9 +114,9 @@ export const WarningConfig = {
// 预报警（三级） // 预报警（三级）
earlywarning: { earlywarning: {
name: '三级报警', name: '三级报警',
color: '#ffff00', color: '#FF636B',
color2: '#828200', color2: '#823237',
state: 3, state: 5,
warnLevel: 3, warnLevel: 3,
}, },
// // 上趋势报警 // // 上趋势报警
......
src/common/util.js
View file @ 71345daf
...@@ -609,7 +609,7 @@ export function gaosi(value) { ...@@ -609,7 +609,7 @@ export function gaosi(value) {
* @auto 刘彬瑜 * @auto 刘彬瑜
* @todo 根据机组id获取机组名 * @todo 根据机组id获取机组名
* @param {String} id 机组id(code) * @param {String} id 机组id(code)
* @param {Boolean} short 是否使用简称：1#，2#，默认不使用 * @param {Boolean} short 是否使用简称,默认不使用
* @return {String} name 机组名 * @return {String} name 机组名
*/ */
export function getDeviceNameById(id, short = false) { export function getDeviceNameById(id, short = false) {
...@@ -619,7 +619,7 @@ export function getDeviceNameById(id, short = false) { ...@@ -619,7 +619,7 @@ export function getDeviceNameById(id, short = false) {
} else if (store.state.$x_factoryList) { } else if (store.state.$x_factoryList) {
store.state.$x_factoryList.forEach(f => { store.state.$x_factoryList.forEach(f => {
f.plantDevices.forEach(i => { f.plantDevices.forEach(i => {
if(i.deviceId == id) name = i.deviceName; if(i.deviceId == id) name = (short && i.shortName) ? i.shortName : i.deviceName;
return; return;
}) })
if(name) return; if(name) return;
......
src/components/NumberFlipper/index.vue
View file @ 71345daf
<!-- 数字翻牌器 --> <!-- 数字翻牌器 -->
<template> <template>
<div class="number-flipper" :class="direction ? 'flex' : ''"> <div class="number-flipper" :class="direction ? 'flex' : ''">
<div class="up" v-if="title" :class="direction ? 'up-flex' : ''"> <div class="up" v-if="title" :class="[direction ? 'up-flex' : '', simple ? 'flex' : '']">
<div class="i" />{{title}} <!-- <div class="i" /> -->{{title}}
</div> </div>
<div v-if="simple" class="down"> <div v-if="simple" class="down">
<div class="simple" :style="{color: getWarnColor(state)}">{{animatedNumber}}</div> <div class="simple" :style="{color: getWarnColor(state)}">{{animatedNumber}}</div>
...@@ -45,6 +45,10 @@ ...@@ -45,6 +45,10 @@
state: { state: {
type: Number, type: Number,
}, },
// 整数位数
len: {
type: Number,
},
// 小数位数 // 小数位数
point: { point: {
type:Number, type:Number,
...@@ -57,7 +61,7 @@ ...@@ -57,7 +61,7 @@
data() { data() {
return { return {
getWarnColor: getWarnColor, getWarnColor: getWarnColor,
relNumber: 0, relNumber: '0',
tweenedNumber: 0, tweenedNumber: 0,
} }
}, },
...@@ -71,11 +75,20 @@ ...@@ -71,11 +75,20 @@
number: { number: {
immediate: true, immediate: true,
handler(val) { handler(val) {
if(this.len) for (let i = 0; i < this.len - 1; i++) this.relNumber = '0' + this.relNumber; // 补0
// 补小数
if(this.point) {
this.relNumber += '.';
for (let i = 0; i < this.point; i++) this.relNumber += '0';
}
if(!val) return; if(!val) return;
if(this.simple) { if(this.simple) {
Gsap.to(this.$data, { duration: 1, tweenedNumber: parseFloat(val) }); Gsap.to(this.$data, { duration: 1, tweenedNumber: parseFloat(val) });
} else { } else {
this.relNumber = this.point === undefined ? parseFloat(val) : parseFloat(val).toFixed(this.point < 0 ? 0 : this.point); let num = this.point === undefined ? parseFloat(val) : parseFloat(val).toFixed(this.point < 0 ? 0 : this.point);
let tmpLen = num.toString().split('.')[0].length; // 整数部分的长度
if(this.len && tmpLen < this.len) for (let i = 0; i < this.len - tmpLen; i++) num = '0' + num; // 补0
this.relNumber = num;
} }
} }
} }
...@@ -88,8 +101,8 @@ ...@@ -88,8 +101,8 @@
.up{ .up{
font-size: 1.2rem; font-size: 1.2rem;
color: $color-cyan; color: $color-cyan;
@extend %flex-center;
margin-bottom: $up-m-b; margin-bottom: $up-m-b;
text-align: left;
.i { .i {
width: 0.2rem; width: 0.2rem;
......
src/components/Sidebar/index.vue
View file @ 71345daf
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<div class="line-x-item"></div> <div class="line-x-item"></div>
<el-submenu :index="index + '_' + index2"> <el-submenu :index="index + '_' + index2">
<template slot="title"> <template slot="title">
<span>{{ crew.deviceName }}</span> <span>{{ crew.shortName }}</span>
</template> </template>
<div class="sub-menu" v-for="(character, index3) of crew.characters" :key="index3"> <div class="sub-menu" v-for="(character, index3) of crew.characters" :key="index3">
<div v-if="index3 == crew.characters.length - 1" class="line-y-item"></div> <div v-if="index3 == crew.characters.length - 1" class="line-y-item"></div>
......
src/components/UserInfo/index.vue
View file @ 71345daf
...@@ -85,6 +85,7 @@ ...@@ -85,6 +85,7 @@
.dropdown-txt { .dropdown-txt {
color: $color-cyan; color: $color-cyan;
cursor: pointer;
} }
} }
} }
......
src/router/index.js
View file @ 71345daf
...@@ -52,6 +52,16 @@ const roleRoutes = [{ ...@@ -52,6 +52,16 @@ const roleRoutes = [{
path: 'index', path: 'index',
component: () => import('@/views/CrewMonitoring'), component: () => import('@/views/CrewMonitoring'),
}] }]
}, {
// 全厂数据一览
path: '/FactoryInfo',
name: 'FactoryInfo',
component: Index,
redirect: '/FactoryInfo/index',
children: [{
path: 'index',
component: () => import('@/views/FactoryInfo'),
}]
}, { }, {
// 趋势分析 // 趋势分析
path: '/TrendAnalysis', path: '/TrendAnalysis',
...@@ -144,14 +154,16 @@ function initLocal() { ...@@ -144,14 +154,16 @@ function initLocal() {
// 获取用户信息 // 获取用户信息
let user = JSON.parse(localStorage.getItem('electric_user')); let user = JSON.parse(localStorage.getItem('electric_user'));
let token = localStorage.getItem('electric_user_token'); let token = localStorage.getItem('electric_user_token');
if (!user || !token || user.endTime < Date.now()) return 1; // 如果没有用户和token，或者过期，说明未登录，则返回1，意味着需要跳转到登录页 // if (!user || !token || user.endTime < Date.now()) return 1; // 如果没有用户和token，或者过期，说明未登录，则返回1，意味着需要跳转到登录页
if (!user || !token) return 1; // 如果没有用户和token，说明未登录，则返回1，意味着需要跳转到登录页
user.data.token = token; // 将token放入user里，方便全局取 user.data.token = token; // 将token放入user里，方便全局取
user.data.checkPermission = makeMap(user.data.permission); // 添加一个查询权限的参数 user.data.checkPermission = makeMap(user.data.permission); // 添加一个查询权限的参数
store.commit('user', user.data); store.commit('user', user.data);
// 获取电厂信息 // 获取电厂信息
let factoryList = JSON.parse(localStorage.getItem('electric_factoryList')); let factoryList = JSON.parse(localStorage.getItem('electric_factoryList'));
let factory = JSON.parse(localStorage.getItem('electric_factory')); let factory = JSON.parse(localStorage.getItem('electric_factory'));
if (!factory || !factoryList || factory.endTime < Date.now()) return 2; // 如果没有电厂和设备列表，或者过期，说明未选择电厂，则返回2，意味着需要跳转到电厂选择页 // if (!factory || !factoryList || factory.endTime < Date.now()) return 2; // 如果没有电厂和设备列表，或者过期，说明未选择电厂，则返回2，意味着需要跳转到电厂选择页
if (!factory || !factoryList) return 2; // 如果没有电厂和设备列表，说明未选择电厂，则返回2，意味着需要跳转到电厂选择页
store.commit('factory', factory.data); store.commit('factory', factory.data);
store.commit('factoryList', factoryList.data); store.commit('factoryList', factoryList.data);
initRoleRoute(); initRoleRoute();
......
src/style/index.scss
View file @ 71345daf
...@@ -41,6 +41,7 @@ $color-blue: #0984FF; ...@@ -41,6 +41,7 @@ $color-blue: #0984FF;
$color-deep-blue: #1C529D; $color-deep-blue: #1C529D;
$color-green: #00de6b; $color-green: #00de6b;
$color-red: #E53B4C; $color-red: #E53B4C;
$color-grey: #cccccc;
$txt-color: #eeeeee; $txt-color: #eeeeee;
// 背景图片居中 // 背景图片居中
......
src/views/AlarmRecord.vue
View file @ 71345daf
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<el-button class="btn" @click="goPage">趋势分析</el-button> <el-button class="btn" @click="goPage">趋势分析</el-button>
</div> </div>
<div class="center"> <div class="center">
{{$x_factory.plantName}}{{$x_crew ? ' - ' + $x_crew.deviceName : ''}} - 报警记录 {{$x_factory.plantName}}{{$x_crew ? ' - ' + $x_crew.shortName : ''}} - 报警记录
<!-- {{$x_factory.plantName}} - 报警记录 --> <!-- {{$x_factory.plantName}} - 报警记录 -->
</div> </div>
<div class="right"> <div class="right">
...@@ -28,7 +28,13 @@ ...@@ -28,7 +28,13 @@
<el-table-column prop="kkscode.cpName" label="测点名称" min-width="20%" align="center"></el-table-column> <el-table-column prop="kkscode.cpName" label="测点名称" min-width="20%" align="center"></el-table-column>
<el-table-column prop="kkscode.kksCode" label="测点编码" min-width="20%" align="center"></el-table-column> <el-table-column prop="kkscode.kksCode" label="测点编码" min-width="20%" align="center"></el-table-column>
<el-table-column prop="kkscode.cpUnit" label="单位" min-width="5%" align="center"></el-table-column> <el-table-column prop="kkscode.cpUnit" label="单位" min-width="5%" align="center"></el-table-column>
<el-table-column prop="value" label="报警值" min-width="10%" align="center"> </el-table-column> <el-table-column prop="value" label="报警值" min-width="10%" align="center">
<template v-slot="scope">
<div class="warn-state" :style="{color: getWarnColor(scope.row.alertStat)}">
<i class="el-icon-warning-outline" />{{scope.row.value}}
</div>
</template>
</el-table-column>
<el-table-column label="报警时刻" min-width="15%" align="center"> <el-table-column label="报警时刻" min-width="15%" align="center">
<template v-slot="scope"> <template v-slot="scope">
{{scope.row.valueTime | dateFormat('YYYY/MM/DD HH:mm:ss')}} {{scope.row.valueTime | dateFormat('YYYY/MM/DD HH:mm:ss')}}
...@@ -52,7 +58,8 @@ ...@@ -52,7 +58,8 @@
} from '@/common/const.js'; } from '@/common/const.js';
import { import {
dateFormat, dateFormat,
getDeviceNameById getDeviceNameById,
getWarnColor
} from '@/common/util.js'; } from '@/common/util.js';
import Warn from '@/api/warn.js'; import Warn from '@/api/warn.js';
export default { export default {
...@@ -73,6 +80,7 @@ ...@@ -73,6 +80,7 @@
pointListMax: 12, // 报警最多选择数量 pointListMax: 12, // 报警最多选择数量
// 报警表格是否可选，小于5个点可选，大于5个点，则已选的点可选 // 报警表格是否可选，小于5个点可选，大于5个点，则已选的点可选
tableCanSelect: row => this.pointList.length < this.pointListMax || this.pointList.find(i => i.id ==row.id), tableCanSelect: row => this.pointList.length < this.pointListMax || this.pointList.find(i => i.id ==row.id),
getWarnColor: getWarnColor,
}; };
}, },
created() { created() {
...@@ -301,6 +309,7 @@ ...@@ -301,6 +309,7 @@
.header { .header {
height: 4.25rem; height: 4.25rem;
line-height: 4.25rem;
background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%); background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%);
padding: 0 1.875rem; padding: 0 1.875rem;
box-sizing: border-box; box-sizing: border-box;
...@@ -348,7 +357,11 @@ ...@@ -348,7 +357,11 @@
.table { .table {
height: calc(100% - 40px); height: calc(100% - 40px);
.warn-state{
i{
margin-right: 0.3rem;
}
}
.table-btn { .table-btn {
color: $color-cyan; color: $color-cyan;
} }
......
src/views/CrewMonitoring.vue
View file @ 71345daf
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<template> <template>
<div class="crew-monitoring"> <div class="crew-monitoring">
<div class="title"> <div class="title">
{{$x_factory.plantName}} - {{$x_crew ? $x_crew.deviceName : ''}} {{$x_factory.plantName}} - {{$x_crew ? $x_crew.shortName : ''}}
</div> </div>
<!-- <div class="number"> <!-- <div class="number">
<number-flipper class="num" title="机组转速" unit="r/min" :number="dataTop ? dataTop[0].kksValueR : 0" :point="1" /> <number-flipper class="num" title="机组转速" unit="r/min" :number="dataTop ? dataTop[0].kksValueR : 0" :point="1" />
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
</div> --> </div> -->
<div class="model"> <div class="model">
<img src="../assets/img/crew.png" /> <img src="../assets/img/crew.png" />
<div class="name" :class="dataTop && getCrewState(dataTop[0]) ? (getCrewState(dataTop[0]) == 1 ? 'name-run' : 'name-stop') : 'name-error' ">{{$x_crew ? $x_crew.shortName : ' '}}</div>
<scroll-window class="roll-left-top"> <scroll-window class="roll-left-top">
<div class="win-list flex-down" v-if="listLeftTop"> <div class="win-list flex-down" v-if="listLeftTop">
<!-- <el-scrollbar class="win-list flex-down" v-if="listLeftTop"> --> <!-- <el-scrollbar class="win-list flex-down" v-if="listLeftTop"> -->
...@@ -64,7 +65,7 @@ ...@@ -64,7 +65,7 @@
</div> </div>
<div class="block right"> <div class="block right">
<div class="border-sm"> <div class="border-sm">
<div class="chart-title">发电机监测</div> <div class="chart-title">机组摆度监测</div>
<div class="chart-main" style="flex-direction: column;"> <div class="chart-main" style="flex-direction: column;">
<div class="single-row" v-for="(row,index) of dataRightTop" :key="index"> <div class="single-row" v-for="(row,index) of dataRightTop" :key="index">
<div class="single-col" :style="{width: (100 / getArrMaxLen(dataRightTop)) + '%'}" v-for="(v,index2) of row" :key="index2"> <div class="single-col" :style="{width: (100 / getArrMaxLen(dataRightTop)) + '%'}" v-for="(v,index2) of row" :key="index2">
...@@ -76,7 +77,7 @@ ...@@ -76,7 +77,7 @@
</div> </div>
</div> </div>
<div class="border-sm"> <div class="border-sm">
<div class="chart-title">水轮机监测</div> <div class="chart-title">机组振动监测</div>
<div class="chart-main" style="flex-direction: column;"> <div class="chart-main" style="flex-direction: column;">
<div class="single-row" v-for="(row,index) of dataRightCenter" :key="index"> <div class="single-row" v-for="(row,index) of dataRightCenter" :key="index">
<div class="single-col" :style="{width: (100 / getArrMaxLen(dataRightCenter)) + '%'}" v-for="(v,index2) of row" :key="index2"> <div class="single-col" :style="{width: (100 / getArrMaxLen(dataRightCenter)) + '%'}" v-for="(v,index2) of row" :key="index2">
...@@ -160,6 +161,7 @@ ...@@ -160,6 +161,7 @@
handler(val) { handler(val) {
if (!val) this.$router.push('/FactoryMonitoring'); if (!val) this.$router.push('/FactoryMonitoring');
else { else {
this.clearChart(); // 清空图表
// this.initRandomData(); // 模拟数据 // this.initRandomData(); // 模拟数据
this.initData(); // 图表数据 this.initData(); // 图表数据
this.closeSocket(); this.closeSocket();
...@@ -180,7 +182,7 @@ ...@@ -180,7 +182,7 @@
methods: { methods: {
initData() { initData() {
if(!this.$x_crew || !this.$x_allData.length) return; if(!this.$x_crew || !this.$x_allData.length) return;
// this.dataTop = this.initDataList('top'); this.dataTop = this.initDataList('top');
this.dataLeftBottom = this.initDataList('leftBottom', 9); this.dataLeftBottom = this.initDataList('leftBottom', 9);
this.dataRightTop = this.initDataChartSingle('rightTop', 3); this.dataRightTop = this.initDataChartSingle('rightTop', 3);
this.dataRightCenter = this.initDataChartSingle('rightCenter', 3); this.dataRightCenter = this.initDataChartSingle('rightCenter', 3);
...@@ -253,7 +255,8 @@ ...@@ -253,7 +255,8 @@
// console.log('socket_crew data', msg); // console.log('socket_crew data', msg);
// console.log('socket_crew data', data); // console.log('socket_crew data', data);
if (!data) return; if (!data) return;
data.xAxis = data.xaxis.map(i => dateFormat(new Date(i * 1000), 'YY/MM/DD\nHH:mm:ss')); data.xAxis = data.xaxis.map(i => dateFormat(new Date(i * 1000), 'YY/MM/DD\nHH:mm:ss')); // 时间转换
data.dataList.sort((a,b) => a.name.localeCompare(b.name));
this.dataLeftTop = data; this.dataLeftTop = data;
}catch(e){ }catch(e){
console.log(e); console.log(e);
...@@ -274,6 +277,25 @@ ...@@ -274,6 +277,25 @@
this.timer = null; this.timer = null;
} }
}, },
// 清空图表
clearChart() {
this.dataTop = null;
this.dataLeftTop = null;
this.dataLeftBottom = null;
this.dataRightTop = null;
this.dataRightCenter = null;
this.dataRightBottom = null;
this.countLeftBottom = null;
this.countRightTop = null;
this.countRightCenter = null;
this.countRightBottom = null;
this.listLeftTop = null;
this.listLeftBottom = null;
this.listRightTop = null;
this.listRightBottom = null;
if (this.$refs.ChartLeftTop) this.$refs.ChartLeftTop.clear();
if (this.$refs.ChartRightBottom) this.$refs.ChartRightBottom.clear();
},
// 初始化虚拟数据 // 初始化虚拟数据
initRandomData() { initRandomData() {
this.clearTimer(); this.clearTimer();
...@@ -481,6 +503,12 @@ ...@@ -481,6 +503,12 @@
if(i.length > max) max = i.length; if(i.length > max) max = i.length;
}) })
return max; return max;
},
// 获取机组状态,传入转速测点,1正常，0维修，2停机
getCrewState(chat) {
if(!chat.kksValue || (Date.now() - chat.kksValue.timestamp) > (24 * 3600 * 1000) ) return 0;
if(chat.kksValueR > 1) return 1;
return 2;
} }
} }
} }
...@@ -526,6 +554,43 @@ ...@@ -526,6 +554,43 @@
transform: translateX(-1.5rem); transform: translateX(-1.5rem);
} }
.name {
width: 6rem;
height: 2.25rem;
border-radius: 4px;
background: rgba(0, 0, 0, 0.20);
border: 1px dashed $color-cyan;
@extend %flex-center;
@extend %pos-center;
top: 62%;
}
.name-run{
border-color: $color-red;
background: rgba($color: $color-red, $alpha: 0.3);
animation: switch 2s infinite;
}
.name-stop{
border-color: $color-green;
background: rgba($color: $color-green, $alpha: 0.3);
}
.name-error{
border-color: $color-grey;
background: rgba($color: $color-grey, $alpha: 0.3);
}
@keyframes switch
{
0% {
background: rgba($color: $color-red, $alpha: 0.3);
}
50% {
background: rgba($color: $color-red, $alpha: 0.7);
}
100% {
background: rgba($color: $color-red, $alpha: 0.3);
}
}
$win-width: 40%; $win-width: 40%;
$win-pos: 0; $win-pos: 0;
.roll-left-top { .roll-left-top {
...@@ -665,7 +730,7 @@ ...@@ -665,7 +730,7 @@
.chart-title { .chart-title {
font-size: 1.125rem; font-size: 1.125rem;
color: $color-cyan; color: $color-cyan;
line-height: 2.5rem; line-height: 3rem;
} }
} }
</style> </style>
src/views/Factory.vue
View file @ 71345daf
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<img class="left-border" src="../assets/img/border-left.png" /> <img class="left-border" src="../assets/img/border-left.png" />
<img class="right-border" src="../assets/img/border-right.png" /> <img class="right-border" src="../assets/img/border-right.png" />
<div class="title"> <div class="title">
<img class="logo" src="../assets/img/logo-small.png" />
<span class="txt">{{title}}</span> <span class="txt">{{title}}</span>
</div> </div>
<user-info class="user-info" /> <user-info class="user-info" />
...@@ -20,23 +21,24 @@ ...@@ -20,23 +21,24 @@
<!-- 展开 --> <!-- 展开 -->
<transition name="item"> <transition name="item">
<div v-if="factoryShow" class="factory-block factory-sign" @mouseleave="closeFactory" @click="goPage(factoryItem)"> <div v-if="factoryShow" class="factory-block factory-sign" @mouseleave="closeFactory" @click="goPage(factoryItem)">
<!-- <div v-if="factoryShow" class="factory-block factory-sign" @click="goPage(factoryItem)"> -->
<div class="factory-name">{{factoryItem.plantName}}</div> <div class="factory-name">{{factoryItem.plantName}}</div>
<div class="y-line" :style="{height: (factoryItem.plantDevices.length > 11 ? 10 * 4.75 + 'rem' : (factoryItem.plantDevices.length - 1) * 4.75 + 'rem')}"></div> <div class="y-line" :style="{height: (factoryItem.plantDevices.length > 11 ? 10 * 4.75 + 'rem' : (factoryItem.plantDevices.length - 1) * 4.75 + 'rem')}"></div>
<div class="crew-list"> <div class="crew-list">
<div class="crew-item" v-for="(dev,i) of factoryItem.plantDevices.slice(0,11)" :class="dev.runstate ? 'crew-item-run' : 'crew-item-stop'" <div class="crew-item" v-for="(dev,i) of factoryItem.plantDevices.slice(0,11)" :class="dev.runstate == null ? 'crew-item-error' : dev.runstate ? 'crew-item-run' : 'crew-item-stop'"
:style="{'align-self': i % 2 !== 1 ? 'flex-start' : 'flex-end'}" :key="dev.deviceId"> :style="{'align-self': i % 2 !== 1 ? 'flex-start' : 'flex-end'}" :key="dev.deviceId">
<span>{{dev.deviceName}}</span> <span>{{dev.shortName}}</span>
<span>{{dev.runstate ? '运行' : '停机'}}</span> <span>{{dev.runstate == null ? '检修' : dev.runstate ? '运行' : '停机'}}</span>
<div class="x-line" :class="i % 2 !== 1 ? 'x-line-s' : 'x-line-l'"> <div class="x-line" :class="i % 2 !== 1 ? 'x-line-s' : 'x-line-l'">
<img class="x-line-arrow" src="../assets/img/arrow-double-s.png" /> <img class="x-line-arrow" src="../assets/img/arrow-double-s.png" />
</div> </div>
</div> </div>
</div> </div>
<div class="crew-list crew-list2" v-if="factoryItem.plantDevices.length > 11"> <div class="crew-list crew-list2" v-if="factoryItem.plantDevices.length > 11">
<div class="crew-item" v-for="(dev,i) in factoryItem.plantDevices.slice(11)" :class="dev.runstate ? 'crew-item-run' : 'crew-item-stop'" <div class="crew-item" v-for="(dev,i) in factoryItem.plantDevices.slice(11)" :class="dev.runstate == null ? 'crew-item-error' : dev.runstate ? 'crew-item-run' : 'crew-item-stop'"
:style="{'align-self': i % 2 !== 1 ? 'flex-start' : 'flex-end'}" :key="dev.deviceId"> :style="{'align-self': i % 2 !== 1 ? 'flex-start' : 'flex-end'}" :key="dev.deviceId">
<span>{{dev.deviceName}}</span> <span>{{dev.shortName}}</span>
<span>{{dev.runstate ? '运行' : '停机'}}</span> <span>{{dev.runstate == null ? '检修' : dev.runstate ? '运行' : '停机'}}</span>
<div class="x-line x-line-m"></div> <div class="x-line x-line-m"></div>
</div> </div>
</div> </div>
...@@ -121,8 +123,14 @@ ...@@ -121,8 +123,14 @@
res.forEach(i => { res.forEach(i => {
i.name = i.plantName; i.name = i.plantName;
i.value = [i.latitude, i.longitude]; i.value = [i.latitude, i.longitude];
// 电厂简称
let arr = i.plantName.match(/国网(.+)厂/); let arr = i.plantName.match(/国网(.+)厂/);
i.shortName = arr ? arr[1] : i.plantName; i.shortName = arr ? arr[1] : i.plantName;
// 机组简称
i.plantDevices.forEach(j => {
let arr2 = j.deviceName.match(/^.+(\d.+)/);
j.shortName = arr2 ? arr2[1] : j.deviceName;
})
}) })
this.factoryList = res; this.factoryList = res;
} catch (e) { } catch (e) {
...@@ -220,10 +228,19 @@ ...@@ -220,10 +228,19 @@
.title { .title {
@extend %pos-center; @extend %pos-center;
width: 58.75rem; // width: 58.75rem;
width: 64rem;
height: 4.875rem; height: 4.875rem;
background-image: url(../assets/img/title-bg.png); background-image: url(../assets/img/title-bg.png);
@extend %background-center; @extend %background-center;
.logo{
width: auto;
height: 3rem;
margin-right: 0.5rem;
position: relative;
top: 0.5rem;
}
.txt { .txt {
font-size: 2.5rem; font-size: 2.5rem;
...@@ -290,10 +307,12 @@ ...@@ -290,10 +307,12 @@
.crew-item-run { .crew-item-run {
background-image: url(../assets/img/crew-run.png); background-image: url(../assets/img/crew-run.png);
} }
.crew-item-stop { .crew-item-stop {
background-image: url(../assets/img/crew-stop.png); background-image: url(../assets/img/crew-stop.png);
} }
.crew-item-error {
background-image: url(../assets/img/crew-error.png);
}
} }
.crew-list2 { .crew-list2 {
...@@ -307,6 +326,9 @@ ...@@ -307,6 +326,9 @@
height: 1px; height: 1px;
background-color: $line-color; background-color: $line-color;
position: absolute; position: absolute;
top: 0;
bottom: 0;
margin: auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
src/views/FactoryMonitoring2.vue → src/views/FactoryInfo.vue
View file @ 71345daf
<!-- 全厂监测 --> <!-- 全厂数据一览 -->
<template> <template>
<div class="factory-monitoring"> <div class="factory-monitoring">
<div class="title"> <!-- <div class="title">
{{$x_factory.plantName}} - 全部机组 {{$x_factory.plantName}} - 全部机组
</div> </div> -->
<transition name="fade"> <transition name="fade">
<div class="crew-list" v-show="crewListShow"> <div class="crew-list" v-show="crewListShow">
<div class="crew-item" v-for="item of crewList" :key="item.deviceId"> <div class="crew-item" v-for="item of $x_allData" :key="item.deviceId" @click="goPage(item.deviceId)">
<img src="../assets/img/crew.png" /> <!-- <img src="../assets/img/crew.png" /> -->
<div class="name" @click="goPage(item)">{{item.deviceName}}</div> <div class="name" :class="item.runstate ? (item.runstate == 1 ? 'name-run' : 'name-stop') : 'name-error'">{{item.deviceName}}</div>
<number-flipper class="number" unit="kW" :number="item.power" :point="1" /> <!-- <number-flipper class="number" unit="kW" :number="item.power" :point="1" /> -->
<scroll-window class="roll-left"> <scroll-window class="roll-left">
<el-scrollbar class="win-list"> <el-scrollbar class="win-list">
<div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vList">{{v.cpName + ' ' + v.kksValueR + ' ' + v.cpUnit}}</div> <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.tSdb">
<div class="left">{{v.cpName}}</div>
<div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
</div>
</el-scrollbar> </el-scrollbar>
</scroll-window> </scroll-window>
</div> </div>
...@@ -72,20 +75,25 @@ ...@@ -72,20 +75,25 @@
immediate: true, immediate: true,
handler(val) { handler(val) {
this.crewListShow = false; this.crewListShow = false;
this.initData(); // 图表数据 // this.initData(); // 图表数据
// 延迟执行,因为动画 // 延迟执行,因为动画
setTimeout(()=> { setTimeout(()=> {
this.crewListShow = true; this.crewListShow = true;
}, 200) }, 200)
} }
}, },
$x_allData: { // $x_allData: {
handler(val) { // handler(val) {
this.initData(); // this.initData();
} // }
} // }
}, },
methods: { methods: {
// 跳转到机组
goPage(item) {
this.$store.commit('crew', item);
this.$router.push('/CrewMonitoring');
},
// 处理页面数据 // 处理页面数据
initData() { initData() {
let crewList = [...this.$x_factory.plantDevices]; let crewList = [...this.$x_factory.plantDevices];
...@@ -110,9 +118,10 @@ ...@@ -110,9 +118,10 @@
} }
this.crewList = crewList; this.crewList = crewList;
}, },
// 跳转到机组 // 跳转到机组，这里去匹配factory里的机组，因为这里是alldata里的机组
goPage(item) { goPage(id) {
this.$store.commit('crew', item); const crew = this.$x_factory.plantDevices.find(i => i.deviceId == id);
this.$store.commit('crew', crew);
this.$router.push('/CrewMonitoring'); this.$router.push('/CrewMonitoring');
}, },
// 显示小窗口 // 显示小窗口
...@@ -154,8 +163,8 @@ ...@@ -154,8 +163,8 @@
.crew-list { .crew-list {
@extend %pos-center; @extend %pos-center;
bottom: 0; bottom: 0;
height: 96%; height: 100%;
padding: 0 2% 1% 2%; padding: 1% 2%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -164,6 +173,7 @@ ...@@ -164,6 +173,7 @@
position: relative; position: relative;
width: 20%; width: 20%;
height: 50%; height: 50%;
cursor: pointer;
img { img {
width: auto; width: auto;
...@@ -173,16 +183,41 @@ ...@@ -173,16 +183,41 @@
} }
.name { .name {
width: 6rem; width: 8rem;
height: 2.25rem; height: 2rem;
border-radius: 4px; border-radius: 4px;
background: rgba(0, 0, 0, 0.20); background: rgba(0, 0, 0, 0.20);
border: 1px dashed $color-cyan; border: 1px dashed $color-cyan;
@extend %flex-center; @extend %flex-center;
position: absolute; @extend %pos-center;
top: 7%; top: 0.5rem;
left: 5%; // position: absolute;
cursor: pointer; // left: 5%;
}
.name-run{
border-color: $color-red;
background: rgba($color: $color-red, $alpha: 0.3);
animation: switch 2s infinite;
}
.name-stop{
border-color: $color-green;
background: rgba($color: $color-green, $alpha: 0.3);
}
.name-error{
border-color: $color-grey;
background: rgba($color: $color-grey, $alpha: 0.3);
}
@keyframes switch
{
0% {
background: rgba($color: $color-red, $alpha: 0.3);
}
50% {
background: rgba($color: $color-red, $alpha: 0.7);
}
100% {
background: rgba($color: $color-red, $alpha: 0.3);
}
} }
.number{ .number{
...@@ -193,14 +228,26 @@ ...@@ -193,14 +228,26 @@
} }
.roll-left { .roll-left {
width: 90%; width: 97%;
height: 80%; height: calc(100% - 3rem);
@extend %pos-center; @extend %pos-center;
bottom: 0; bottom: 0;
.win-list{ .win-list{
height: 100%; height: 100%;
line-height: 2rem; line-height: 1.5rem;
.win-item{
display: flex;
align-items: center;
.left {
text-align: right;
margin-right: 1rem;
width: 55%;
}
.right {
text-align: left;
}
}
} }
/deep/.el-scrollbar__wrap { /deep/.el-scrollbar__wrap {
......
src/views/FactoryMonitoring.vue
View file @ 71345daf
...@@ -10,18 +10,20 @@ ...@@ -10,18 +10,20 @@
<div class="crew-item" v-for="item of crewList.slice(page * 4 - 4, page * 4)" :key="item.deviceId"> <div class="crew-item" v-for="item of crewList.slice(page * 4 - 4, page * 4)" :key="item.deviceId">
<img src="../assets/img/crew.png" @click="goPage(item)" /> <img src="../assets/img/crew.png" @click="goPage(item)" />
<div class="numbers"> <div class="numbers">
<number-flipper class="number" title="转速" unit="r/min" :number="item.top ? item.top[0].kksValueR : 0" :state="item.top ? item.top[0].state : 0" :point="1" /> <number-flipper class="number" title="转速" unit="r/min" :number="item.top ? item.top[0].kksValueR : 0" :state="item.top ? item.top[0].state : 0" :point="1" :len="3" />
<number-flipper class="number" title="有功功率" unit="kW" :number="item.top ? item.top[1].kksValueR : 0" :state="item.top ? item.top[1].state : 0" :point="1" /> <number-flipper class="number" title="有功功率" unit="MW" :number="item.top ? item.top[1].kksValueR : 0" :state="item.top ? item.top[1].state : 0" :point="1" :len="3" />
</div> </div>
<div class="name" :class="item.top && item.top[0].kksValueR > 0 ? 'name-run' : 'name-stop' " @click="goPage(item)">{{item.deviceName}}</div> <div class="name" :class="item.top && getCrewState(item.top[0]) ? (getCrewState(item.top[0]) == 1 ? 'name-run' : 'name-stop') : 'name-error' " @click="goPage(item)">{{item.shortName}}</div>
<scroll-window class="roll-top"> <scroll-window class="roll-top">
<div class="roll-title">报警值</div> <div class="roll-title">报警值</div>
<el-scrollbar class="win-list" v-if="item.vListW && item.vListW.length"> <div class="win-list flex-down" v-if="item.vListW && item.vListW.length">
<!-- <el-scrollbar class="win-list flex-down" v-if="item.vListW && item.vListW.length"> -->
<div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vListW" :key="v.kksCode"> <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vListW" :key="v.kksCode">
<div class="left">{{v.cpName}}</div> <div class="left">{{v.cpName}}</div>
<div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div> <div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
</div> </div>
</el-scrollbar> <!-- </el-scrollbar> -->
</div>
<div class="win-list no-data" v-else>暂无报警</div> <div class="win-list no-data" v-else>暂无报警</div>
</scroll-window> </scroll-window>
<scroll-window class="roll-bottom"> <scroll-window class="roll-bottom">
...@@ -97,7 +99,8 @@ ...@@ -97,7 +99,8 @@
return false; return false;
}).filter(i => !!i); }).filter(i => !!i);
// 报警 // 报警
i.vListW = i.vList.filter(i => i.state == 3 || i.state == 4 || i.state == 5); // i.vListW = i.vList.filter(i => i.state == 1 || i.state == 4 || i.state == 5);
i.vListW = crew.tSdbWarn;
// 功率 // 功率
i.top = FactoryMConfig.top.map(arr => { i.top = FactoryMConfig.top.map(arr => {
for (let key of arr) { for (let key of arr) {
...@@ -115,6 +118,12 @@ ...@@ -115,6 +118,12 @@
this.$store.commit('crew', item); this.$store.commit('crew', item);
this.$router.push('/CrewMonitoring'); this.$router.push('/CrewMonitoring');
}, },
// 获取机组状态,传入转速测点,1正常，0维修，2停机
getCrewState(chat) {
if(!chat.kksValue || (Date.now() - chat.kksValue.timestamp) > (24 * 3600 * 1000) ) return 0;
if(chat.kksValueR > 1) return 1;
return 2;
},
}, },
} }
</script> </script>
...@@ -197,7 +206,7 @@ ...@@ -197,7 +206,7 @@
} }
.name { .name {
width: 8rem; width: 6rem;
height: 2.25rem; height: 2.25rem;
padding: 0 0.5rem; padding: 0 0.5rem;
border-radius: 4px; border-radius: 4px;
...@@ -211,14 +220,29 @@ ...@@ -211,14 +220,29 @@
cursor: pointer; cursor: pointer;
} }
.name-run{ .name-run{
border-color: $color-red;
background: rgba($color: $color-red, $alpha: 0.3);
animation: switch 2s infinite;
}
.name-stop{
border-color: $color-green; border-color: $color-green;
background: rgba($color: $color-green, $alpha: 0.3); background: rgba($color: $color-green, $alpha: 0.3);
// color: $color-green;
} }
.name-stop{ .name-error{
border-color: $color-red; border-color: $color-grey;
background: rgba($color: $color-red, $alpha: 0.3); background: rgba($color: $color-grey, $alpha: 0.3);
// color: $color-red; }
@keyframes switch
{
0% {
background: rgba($color: $color-red, $alpha: 0.3);
}
50% {
background: rgba($color: $color-red, $alpha: 0.7);
}
100% {
background: rgba($color: $color-red, $alpha: 0.3);
}
} }
.numbers{ .numbers{
...@@ -235,7 +259,7 @@ ...@@ -235,7 +259,7 @@
.roll-top{ .roll-top{
@extend %pos-center; @extend %pos-center;
width: 80%; width: 80%;
height: 12vh; height: 14vh;
top: 6rem; top: 6rem;
} }
...@@ -262,13 +286,18 @@ ...@@ -262,13 +286,18 @@
.left { .left {
text-align: right; text-align: right;
margin-right: 1rem; margin-right: 1rem;
width: 50%; width: 55%;
} }
.right { .right {
text-align: left; text-align: left;
} }
} }
} }
.flex-down{
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.no-data{ .no-data{
@extend %flex-center; @extend %flex-center;
color: #b8b8b8; color: #b8b8b8;
......
src/views/Index.vue
View file @ 71345daf
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<img class="left-border" src="../assets/img/border-left.png" /> <img class="left-border" src="../assets/img/border-left.png" />
<img class="right-border" src="../assets/img/border-right.png" /> <img class="right-border" src="../assets/img/border-right.png" />
<div class="title"> <div class="title">
<img class="logo" src="../assets/img/logo-small.png" />
<span class="txt">{{title}}</span> <span class="txt">{{title}}</span>
</div> </div>
<user-info class="user-info" /> <user-info class="user-info" />
...@@ -19,12 +20,13 @@ ...@@ -19,12 +20,13 @@
<div class="btn left-bg left-pos2" :class="$route.path == '/CrewMonitoring/index' ? 'left-bg2' : ''"> <div class="btn left-bg left-pos2" :class="$route.path == '/CrewMonitoring/index' ? 'left-bg2' : ''">
<el-select v-model="crewValue" :popper-append-to-body="false" @change="changeCrew"> <el-select v-model="crewValue" :popper-append-to-body="false" @change="changeCrew">
<el-option label="全部机组" :value="0" /> <el-option label="全部机组" :value="0" />
<el-option v-for="item of $x_factory.plantDevices" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" @click.native="clickCrew(item.deviceId)" /> <el-option v-for="item of $x_factory.plantDevices" :key="item.deviceId" :label="item.shortName" :value="item.deviceId" @click.native="clickCrew(item.deviceId)" />
</el-select> </el-select>
</div> </div>
<div class="btn left-bg left-pos3" :class="$route.path == '/TrendAnalysis/index' ? 'left-bg2' : ''" @click="goPage('/TrendAnalysis')">趋势分析</div> <div class="btn left-bg left-pos3" :class="$route.path == '/FactoryInfo/index' ? 'left-bg2' : ''" @click="goPage('/FactoryInfo')">数据一览</div>
</div> </div>
<div class="block"> <div class="block">
<div class="btn right-bg right-pos3" :class="$route.path == '/TrendAnalysis/index' ? 'right-bg2' : ''" @click="goPage('/TrendAnalysis')">趋势分析</div>
<div class="btn right-bg right-pos2" :class="$route.path == '/AlarmRecord/index' ? 'right-bg2' : ''" @click="goPage('/AlarmRecord')">报警记录</div> <div class="btn right-bg right-pos2" :class="$route.path == '/AlarmRecord/index' ? 'right-bg2' : ''" @click="goPage('/AlarmRecord')">报警记录</div>
<div class="btn right-bg" :class="$route.path == '/UserManage/index' ? 'right-bg2' : ''" @click="goPage('/UserManage')">用户管理</div> <div class="btn right-bg" :class="$route.path == '/UserManage/index' ? 'right-bg2' : ''" @click="goPage('/UserManage')">用户管理</div>
</div> </div>
...@@ -151,8 +153,8 @@ ...@@ -151,8 +153,8 @@
// console.log('socket_all data', data); // console.log('socket_all data', data);
if (!data) return; if (!data) return;
this.$store.commit('allData', data); this.$store.commit('allData', data);
if(this.dialogShow) this.initTableData(); // if(this.dialogShow) this.initTableData();
// this.initTableData(); this.initTableData();
}catch(e){ }catch(e){
console.log(e); console.log(e);
} }
...@@ -208,7 +210,7 @@ ...@@ -208,7 +210,7 @@
// 打开弹窗 // 打开弹窗
showDialog() { showDialog() {
this.dialogShow = true; this.dialogShow = true;
this.initTableData(); // this.initTableData();
}, },
// 切换标签 // 切换标签
changeTab(i) { changeTab(i) {
...@@ -218,16 +220,29 @@ ...@@ -218,16 +220,29 @@
// 处理表格数据 // 处理表格数据
initTableData() { initTableData() {
let tableData1 = [], tableData2 = [], tableData3 = [], warnStateMap = {3:true,4:true,5:true}; let tableData1 = [], tableData2 = [], tableData3 = [], warnStateMap = {3:true,4:true,5:true};
// 遍历机组
for (let i = 0; i < this.$x_allData.length; i++) { for (let i = 0; i < this.$x_allData.length; i++) {
let warnList = []; // 存放报警测点,放入全局的alldata
// 遍历测点
for (let j = 0; j < this.$x_allData[i].tSdb.length; j++) { for (let j = 0; j < this.$x_allData[i].tSdb.length; j++) {
const item = this.$x_allData[i].tSdb[j]; // 当前测点 const item = this.$x_allData[i].tSdb[j]; // 当前测点
if(!item.kksValue) continue; // 如果没有查出值，则跳过
if(!item.kksValueR) chatValueHandler(item); // 补数据，只补一次 if(!item.kksValueR) chatValueHandler(item); // 补数据，只补一次
if(!item.deviceName) item.deviceName = getDeviceNameById(item.deviceId); // 添加机组名 if(!item.deviceName) item.deviceName = getDeviceNameById(item.deviceId, true); // 添加机组名
// tableData3.push(item); // 全部 // 根据转速判断机组状态
if(warnStateMap[item.state]) tableData1.push(item); // 报警 if(item.cpName == '转速') {
if(!item.kksValue || (Date.now() - item.kksValue.timestamp) > (24 * 3600 * 1000)) this.$x_allData[i].runstate = 0;
else if(item.kksValueR > 1) this.$x_allData[i].runstate = 1;
else this.$x_allData[i].runstate = 2;
}
// tableData3.push(item); // 全部，因为allData里是按机组分类的，所以这里重新放了一次展开的
// 放入报警
if(warnStateMap[item.state]) {
tableData1.push(item);
warnList.push(item);
}
if(item.state == 2) tableData2.push(item); // 无效 if(item.state == 2) tableData2.push(item); // 无效
} }
this.$x_allData[i].tSdbWarn = warnList;
} }
// 排序 // 排序
tableData1.sort((a, b) => a.kksCode.localeCompare(b.kksCode)); tableData1.sort((a, b) => a.kksCode.localeCompare(b.kksCode));
...@@ -297,10 +312,19 @@ ...@@ -297,10 +312,19 @@
.title { .title {
@extend %pos-center; @extend %pos-center;
width: 58.75rem; // width: 58.75rem;
width: 64rem;
height: 4.875rem; height: 4.875rem;
background-image: url(../assets/img/title-bg.png); background-image: url(../assets/img/title-bg.png);
@extend %background-center; @extend %background-center;
.logo{
width: auto;
height: 3rem;
margin-right: 0.5rem;
position: relative;
top: 0.5rem;
}
.txt { .txt {
font-size: 2.5rem; font-size: 2.5rem;
...@@ -437,6 +461,10 @@ ...@@ -437,6 +461,10 @@
position: relative; position: relative;
right: -1.875rem; right: -1.875rem;
} }
.right-pos3{
position: relative;
right: -3.75rem;
}
} }
} }
......
src/views/Login.vue
View file @ 71345daf
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<template> <template>
<div class="login"> <div class="login">
<div class="title">{{title}}</div> <div class="title">{{title}}</div>
<img class="logo" src="../assets/img/logo-big.png" />
<div class="main"> <div class="main">
<div class="line"> <div class="line">
<div class="circle-o"> <div class="circle-o">
...@@ -100,6 +101,14 @@ ...@@ -100,6 +101,14 @@
@extend %txt-gradients; @extend %txt-gradients;
} }
.logo{
width: 30rem;
height: auto;
position: absolute;
top: 2rem;
left: 2rem;
}
.main { .main {
width: 58.6875rem; width: 58.6875rem;
height: 39.625rem; height: 39.625rem;
......
src/views/RoleManage.vue
View file @ 71345daf
...@@ -212,6 +212,7 @@ ...@@ -212,6 +212,7 @@
.header { .header {
height: 4.25rem; height: 4.25rem;
line-height: 4.25rem;
background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%); background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%);
padding: 0 1.875rem; padding: 0 1.875rem;
box-sizing: border-box; box-sizing: border-box;
......
src/views/TrendAnalysis.vue
View file @ 71345daf
...@@ -205,6 +205,7 @@ ...@@ -205,6 +205,7 @@
.header { .header {
height: 4.25rem; height: 4.25rem;
line-height: 4.25rem;
background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%); background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%);
padding: 0 1.875rem; padding: 0 1.875rem;
box-sizing: border-box; box-sizing: border-box;
...@@ -257,6 +258,7 @@ ...@@ -257,6 +258,7 @@
.charts { .charts {
width: calc(100% - 30rem); width: calc(100% - 30rem);
height: 100%;
overflow: hidden; overflow: hidden;
.btns { .btns {
......
src/views/UserManage.vue
View file @ 71345daf
...@@ -272,6 +272,7 @@ ...@@ -272,6 +272,7 @@
.header { .header {
height: 4.25rem; height: 4.25rem;
line-height: 4.25rem;
background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%); background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%);
padding: 0 1.875rem; padding: 0 1.875rem;
box-sizing: border-box; box-sizing: border-box;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment