huajimang
/
yanDuLargeScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-01-16 09:35:05 +08:00
parent df68891c60
commit 289844c46f
5 changed files with 2463 additions and 2426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

537
src/App.vue
View File

@ -1,253 +1,284 @@
<template> <template>
<div id="app"> <div id="app">
<div class="top"> <div class="top">
<div class="left" text="盐都电力可视化系统"> <div class="left" text="盐都电力可视化系统">
盐都电力可视化系统 盐都电力可视化系统
</div> </div>
<div class="middle"> <div class="middle">
<div class="router" :class="{'active':routerActive==index}" v-for="(item,index) in routerTitle" @click="handleChange(index)" :key="index" :text="item">{{item}}</div> <div class="router" :class="{'active':routerActive==index}" v-for="(item,index) in routerTitle" @click="handleChange(index)" :key="index" :text="item">{{item}}</div>
</div> </div>
<div class="right"> <div class="right">
<div class="time"> <div class="time">
<span>{{this.$moment().format("MM月DD日")}} {{week}}</span> <span>{{this.$moment().format("MM月DD日")}} {{week}}</span>
<span style="font-size:24px;margin-top: 3px;">{{this.$moment().format("YYYY-MM-DD")}}</span> <span style="font-size:24px;margin-top: 3px;">{{this.$moment().format("YYYY-MM-DD")}}</span>
</div> </div>
<div class="weather" v-for="(item,index) in weatherArr" :key="index"> <div class="weather" v-for="(item,index) in weatherArr" :key="index">
<div class="pic"> <div class="pic">
<img :src="item.pic" alt="" style="height:100%;width:100%"> <img :src="item.pic" alt="" style="height:100%;width:100%">
</div> </div>
<div class="date"> <div class="date">
<span>{{item.date}}</span> <span>{{item.date}}</span>
<span style="font-size:24px;margin-top: 3px;">{{item.high}}-{{item.low}}</span> <span style="font-size:24px;margin-top: 3px;">{{item.temperature}}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<router-view /> <router-view />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import MinxinItem from "./mixins" import MinxinItem from "./mixins"
import axios from 'axios' import axios from 'axios'
import {getWather,Weather} from "./api/index.js"; import {getWather,Weather} from "./api/index.js";
export default { export default {
name: 'home', name: 'home',
mixins:[MinxinItem], mixins:[MinxinItem],
data(){ data(){
return{ return{
routerTitle:['首页','20kv','35kv','站房智辅'], addDay:'',
routerActive:0, subDay:'',
weatherArr:[ routerTitle:['首页','20kv','35kv','站房智辅'],
{day:'今天',temperature:'27℃-19℃',pic:require('./assets/images/sun.png')}, routerActive:0,
{day:'12月01日',temperature:'27℃-19℃',pic:require('./assets/images/union.png')}, weatherArr:[
{day:'12月02日',temperature:'27℃-19℃',pic:require('./assets/images/windy.png')} {day:'今天',temperature:'',pic:require('./assets/images/sun.png')},
], {day:'昨天',temperature:'',pic:require('./assets/images/union.png')},
weekList:['周日','周一','周二','周三','周四','周五','周六'], {day:'明天',temperature:'',pic:require('./assets/images/windy.png')}
week:'', ],
} weekList:['周日','周一','周二','周三','周四','周五','周六'],
}, week:'',
mounted(){ }
this.handleWather() },
let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay() mounted(){
this.week = this.weekList[week] this.handleWather()
}, let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
this.week = this.weekList[week]
methods:{ },
//天气
handleWather(){ methods:{
// axios({url:"http://www.jcznedu.com:5000/weather/prediction/?city=盐都&&limit=3",methods:'GET'}).then(res=>{ getDateSub(n){
// }) let day = this.$moment(new Date()).subtract(n, 'days').format('YYYY-MM-DD');
Weather({ this.subDay = day
return day;
}).then((res)=>{ },
this.weatherArr = res.data.data.daly; getDateAdd(n){
this.weatherArr[0].date = '今天'; var dd = new Date();
for (let i = 0; i < this.weatherArr.length; i++) { dd.setDate(dd.getDate() + n); //获取n天后的日期
this.Onweather(this.weatherArr[i].weather,i) var y = dd.getFullYear();
} var m = dd.getMonth() + 1; //获取当前月份的日期
}) var d = dd.getDate();
}, let day = y + '-' + m + '-' + d;
//天气 this.addDay = day
Onweather(name,index){ return day;
switch (name) { },
case "多云": //天气
return this.weatherArr[index].pic = require('./assets/weather/Cloudy .png'); handleWather(){
case "阴": // axios({url:"http://www.jcznedu.com:5000/weather/prediction/?city=盐都&&limit=3",methods:'GET'}).then(res=>{
return this.weatherArr[index].pic = require('./assets/weather/Cloudy .png') // })
case "暴雨": Weather({
return this.weatherArr[index].pic = require('./assets/weather/rainstorm.png') action:'one',
case "冰雹": key:'天气情况'
return this.weatherArr[index].pic = require('./assets/weather/hail.png') }).then((res)=>{
case "大风": let toDay = this.$moment().format("D")
return this.weatherArr[index].pic = require('./assets/weather/gale.png') this.getDateSub(1);
case "大雪": this.getDateAdd(1),
return this.weatherArr[index].pic = require('./assets/weather/bigsnow.png') res.data.data.forEach((item,index) => {
case "大雨": if (item.第N天 == this.$moment(this.subDay).format("D")) {
return this.weatherArr[index].pic = require('./assets/weather/bigrain.png') this.weatherArr[1].date = '昨天'
case "雷电": this.weatherArr[1].temperature = item.最低温度 +'℃' + '~' + item.最高温度 +'℃'
return this.weatherArr[index].pic = require('./assets/weather/thunder.png') this.Onweather(item.天气,1)
case "雷阵雨": }else if (item.第N天 == this.$moment(this.addDay).format("D")) {
return this.weatherArr[index].pic = require('./assets/weather/shower.png') this.weatherArr[2].date = '明天'
case "沙尘暴": this.weatherArr[2].temperature = item.最低温度 +'℃' + '~' + item.最高温度 +'℃'
return this.weatherArr[index].pic = require('./assets/weather/sand.png') this.Onweather(item.天气,2)
case "晴": }else if (item.第N天 == toDay) {
return this.weatherArr[index].pic = require('./assets/weather/sun.png') this.weatherArr[0].date = '今天'
case "雾霾": this.weatherArr[0].temperature = item.最低温度 +'℃' + '~' + item.最高温度 +'℃'
return this.weatherArr[index].pic = require('./assets/weather/smog.png') this.Onweather(item.天气,0)
case "小雪": }
return this.weatherArr[index].pic = require('./assets/weather/snow.png') });
case "小雨": })
return this.weatherArr[index].pic = require('./assets/weather/rain.png') },
case "雪": //天气
return this.weatherArr[index].pic = require('./assets/weather/rainlitter.png') Onweather(name,index){
case "多云": switch (name) {
return this.weatherArr[index].pic = require('./assets/weather/night.png') case "多云":
case "雨夹雪": return this.weatherArr[index].pic = require('./assets/weather/Cloudy .png');
return this.weatherArr[index].pic = require('./assets/weather/rainsnow.png') case "阴":
case "月亮": return this.weatherArr[index].pic = require('./assets/weather/Cloudy .png')
return this.weatherArr[index].pic = require('./assets/weather/moon.png') case "暴雨":
case "中雪": return this.weatherArr[index].pic = require('./assets/weather/rainstorm.png')
return this.weatherArr[index].pic = require('./assets/weather/mieddlesnow.png') case "冰雹":
case "中雨": return this.weatherArr[index].pic = require('./assets/weather/hail.png')
return this.weatherArr[index].pic = require('./assets/weather/middlerain.png') case "大风":
} return this.weatherArr[index].pic = require('./assets/weather/gale.png')
}, case "大雪":
handleChange(index){ return this.weatherArr[index].pic = require('./assets/weather/bigsnow.png')
let that = this; case "大雨":
this.routerActive = index return this.weatherArr[index].pic = require('./assets/weather/bigrain.png')
if (this.routerActive == 0) { case "雷电":
if (this.$route.name != 'index') { return this.weatherArr[index].pic = require('./assets/weather/thunder.png')
that.$router.push({name:'index'}) case "雷阵雨":
} return this.weatherArr[index].pic = require('./assets/weather/shower.png')
}else if (this.routerActive == 3) { case "沙尘暴":
that.$router.push({name:'stationBuilding'}) return this.weatherArr[index].pic = require('./assets/weather/sand.png')
}else if (this.routerActive == 1) { case "晴":
that.$router.push({name:'twentyKV'}) return this.weatherArr[index].pic = require('./assets/weather/sun.png')
}else if (this.routerActive == 2) { case "雾霾":
that.$router.push({name:'thirtyFiveKV'}) return this.weatherArr[index].pic = require('./assets/weather/smog.png')
} case "小雪":
} return this.weatherArr[index].pic = require('./assets/weather/snow.png')
} case "小雨":
} return this.weatherArr[index].pic = require('./assets/weather/rain.png')
</script> case "雪":
<style> return this.weatherArr[index].pic = require('./assets/weather/rainlitter.png')
@import "./assets/index.css"; case "多云":
#app { return this.weatherArr[index].pic = require('./assets/weather/night.png')
font-family: "Avenir", Helvetica, Arial, sans-serif; case "雨夹雪":
-webkit-font-smoothing: antialiased; return this.weatherArr[index].pic = require('./assets/weather/rainsnow.png')
-moz-osx-font-smoothing: grayscale; case "月亮":
text-align: center; return this.weatherArr[index].pic = require('./assets/weather/moon.png')
color: #2c3e50; case "中雪":
background: url('./assets/images/homePg.png') no-repeat; return this.weatherArr[index].pic = require('./assets/weather/mieddlesnow.png')
background-size: 100% 100%; case "中雨":
} return this.weatherArr[index].pic = require('./assets/weather/middlerain.png')
}
</style> },
<style lang="less" scoped> handleChange(index){
.top { let that = this;
width: 100%; this.routerActive = index
height: 100px; if (this.routerActive == 0) {
/* background: rgba(147, 230, 244,0.6); */ if (this.$route.name != 'index') {
/* background-image: linear-gradient(90deg, rgba(147, 230, 244,0.6),rgba(147, 230, 244,0), rgba(147, 230, 244,0.6)); */ that.$router.push({name:'index'})
background: url('./assets/images/topBg.png') no-repeat; }
background-size: 100% 100%; }else if (this.routerActive == 3) {
display: flex; that.$router.push({name:'stationBuilding'})
flex-flow: row nowrap; }else if (this.routerActive == 1) {
justify-content: space-between; that.$router.push({name:'twentyKV'})
.left{ }else if (this.routerActive == 2) {
width: 815px; that.$router.push({name:'thirtyFiveKV'})
height: 97px; }
background: url('./assets/images/titleBg1.png') no-repeat; }
background-size: 100% 100%; }
font-size: 44px; }
font-weight: 700; </script>
letter-spacing: 22px; <style>
color: #ffffff; @import "./assets/index.css";
line-height: 97px; #app {
padding-left: 86px; font-family: "Avenir", Helvetica, Arial, sans-serif;
text-align: left; -webkit-font-smoothing: antialiased;
box-sizing: border-box; -moz-osx-font-smoothing: grayscale;
} text-align: center;
.left:before{ color: #2c3e50;
content: attr(text); background: url('./assets/images/homePg.png') no-repeat;
position: absolute; background-size: 100% 100%;
z-index: 10; }
color:rgb(86, 254, 246);
-webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent ); </style>
} <style lang="less" scoped>
.middle{ .top {
width: auto; width: 100%;
height: 78px; height: 100px;
display: flex; /* background: rgba(147, 230, 244,0.6); */
flex-flow: row nowrap; /* background-image: linear-gradient(90deg, rgba(147, 230, 244,0.6),rgba(147, 230, 244,0), rgba(147, 230, 244,0.6)); */
.router{ background: url('./assets/images/topBg.png') no-repeat;
width: 244px; background-size: 100% 100%;
height: 100%; display: flex;
line-height: 78px; flex-flow: row nowrap;
color: rgb(41,114,124); justify-content: space-between;
font-size: 22px; .left{
cursor: pointer; width: 815px;
} height: 97px;
.active{ background: url('./assets/images/titleBg1.png') no-repeat;
color: #ffffff; background-size: 100% 100%;
background: url('./assets/images/routerActive.png') no-repeat; font-size: 44px;
background-size: 100% 100%; font-weight: 700;
} letter-spacing: 22px;
.active:before{ color: #ffffff;
content: attr(text); line-height: 97px;
position: absolute; padding-left: 86px;
z-index: 10; text-align: left;
color:rgb(86, 254, 246); box-sizing: border-box;
-webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent ); }
} .left:before{
} content: attr(text);
.right{ position: absolute;
// width: 740px; z-index: 10;
height: 78px; color:rgb(86, 254, 246);
display: flex; -webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent );
flex-flow: row nowrap; }
justify-content: space-between; .middle{
padding-right: 15px; width: auto;
.time{ height: 78px;
height: 100%; display: flex;
color: #ffffff; flex-flow: row nowrap;
font-size: 18px; .router{
display: flex; width: 244px;
flex-flow: column nowrap; height: 100%;
justify-content: center; line-height: 78px;
text-align: left; color: rgb(41,114,124);
} font-size: 22px;
.weather{ cursor: pointer;
display: flex; }
flex-flow: row nowrap; .active{
height: 100%; color: #ffffff;
align-items: center; background: url('./assets/images/routerActive.png') no-repeat;
margin-left: 36px; background-size: 100% 100%;
.pic{ }
width: 61px; .active:before{
height: 61px; content: attr(text);
} position: absolute;
.date{ z-index: 10;
height: 100%; color:rgb(86, 254, 246);
color: #ffffff; -webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent );
font-size: 18px; }
display: flex; }
flex-flow: column nowrap; .right{
justify-content: center; // width: 740px;
margin-left: 19px; height: 78px;
text-align: left; display: flex;
} flex-flow: row nowrap;
} justify-content: space-between;
} padding-right: 15px;
} .time{
.content { height: 100%;
width: 100%; color: #ffffff;
height: calc(100% - 100px); font-size: 18px;
display: flex; display: flex;
align-items: center; flex-flow: column nowrap;
justify-content: space-around; justify-content: center;
} text-align: left;
</style> }
.weather{
display: flex;
flex-flow: row nowrap;
height: 100%;
align-items: center;
margin-left: 36px;
.pic{
width: 61px;
height: 61px;
}
.date{
height: 100%;
color: #ffffff;
font-size: 18px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
margin-left: 19px;
text-align: left;
}
}
}
}
.content {
width: 100%;
height: calc(100% - 100px);
display: flex;
align-items: center;
justify-content: space-around;
}
</style>

142
src/api/index.js
View File

@ -1,69 +1,75 @@
import axios from 'axios' import axios from 'axios'
// if (process.env.NODE_ENV === 'development') { // if (process.env.NODE_ENV === 'development') {
// axios.defaults.baseURL = '/api' // axios.defaults.baseURL = '/api'
// } else if (process.env.NODE_ENV === 'production') { // } else if (process.env.NODE_ENV === 'production') {
// axios.defaults.baseURL = '/api' // axios.defaults.baseURL = '/api'
// } // }
//设置请求头参数 common 为设置所有的接口 post为设置post请求的接口 //设置请求头参数 common 为设置所有的接口 post为设置post请求的接口
// axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`; // axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
// 电力概况 // 电力概况
export const getCompanyInfo = (params) => { export const getCompanyInfo = (params) => {
return axios.get('api/Handler/Company.ashx', { return axios.get('api/Handler/Company.ashx', {
params params
}) })
}; };
// 路线查询 下拉 // 路线查询 下拉
export const getLine = (params) => { export const getLine = (params) => {
return axios.get('api/Handler/Line.ashx', { return axios.get('api/Handler/Line.ashx', {
params params
}) })
}; };
// 查询设备素材 // 查询设备素材
export const getDevice = (params) => { export const getDevice = (params) => {
return axios.get('api/Handler/Device.ashx', { return axios.get('api/Handler/Device.ashx', {
params params
}) })
}; };
//班组故障查询 //班组故障查询
export const getBanzugz = (params) => { export const getBanzugz = (params) => {
return axios.get('api/Handler/Banzugz.ashx', { return axios.get('api/Handler/Banzugz.ashx', {
params params
}) })
}; };
//查询工单统计 //查询工单统计
export const getGdtj = (params) => { export const getGdtj = (params) => {
return axios.get('api/Handler/gdtj.ashx', { return axios.get('api/Handler/gdtj.ashx', {
params params
}) })
}; };
//查询单位本周故障 //查询单位本周故障
export const getDwbzgz = (params) => { export const getDwbzgz = (params) => {
return axios.get('api/Handler/Dwbzgz.ashx', { return axios.get('api/Handler/Dwbzgz.ashx', {
params params
}) })
}; };
//查询供电所供电质量情况 //查询供电所供电质量情况
export const getGdsgdzl = (params) => { export const getGdsgdzl = (params) => {
return axios.get('api/Handler/Gdsgdzl.ashx', { return axios.get('api/Handler/Gdsgdzl.ashx', {
params params
}) })
}; };
//查询配变停运情况 //查询配变停运情况
export const getPbtyqk = (params) => { export const getPbtyqk = (params) => {
return axios.get('api/Handler/Pbtyqk.ashx', { return axios.get('api/Handler/Pbtyqk.ashx', {
params params
}) })
}; };
// //查询天气 // //查询天气
// export const getWather = (params) => { // export const getWather = (params) => {
// return axios.get('aps/weather/prediction/', { // return axios.get('aps/weather/prediction/', {
// params // params
// }) // })
// }; // };
//查询天气 //查询天气
export const Weather = (params) => { // export const Weather = (params) => {
return axios.get('api/Handler/Weather.ashx', { // return axios.get('api/Handler/Weather.ashx', {
params // params
}) // })
// };
//查询天气1
export const Weather = (params) => {
return axios.get('api/Handler/Data.ashx', {
params
})
}; };

BIN
src/assets/videos/1667823525562.mp4 Normal file
View File

Binary file not shown.

4138
src/views/index.vue
View File

File diff suppressed because it is too large Load Diff

72
vue.config.js
View File

@ -1,37 +1,37 @@
module.exports = { module.exports = {
// 打包文件配置 // 打包文件配置
publicPath: "/", publicPath: "/",
assetsDir: "static", assetsDir: "static",
lintOnSave: false, lintOnSave: false,
devServer: { devServer: {
// overlay: { // 让浏览器 overlay 同时显示警告和错误 // overlay: { // 让浏览器 overlay 同时显示警告和错误
// warnings: true, // warnings: true,
// errors: true, // errors: true,
// }, // },
// hotOnly: true, // hotOnly: true,
// open: false, // npm run serve后自动打开页面 // open: false, // npm run serve后自动打开页面
// https: false, // https:{type:Boolean} // https: false, // https:{type:Boolean}
// host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0) // host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
// port: 8989, // 开发服务器运行端口号 // port: 8989, // 开发服务器运行端口号
proxy: { proxy: {
'/api': { //代理的名字 '/api': { //代理的名字
target:'http://111.229.30.246:3111/', // target:'http://111.229.30.246:3111/',
// target: 'http://172.16.1.254:3111/', target: 'http://172.16.1.254:3111/',
ws: true, ws: true,
changeOrigin: true, changeOrigin: true,
pathRewrite:{ pathRewrite:{
'^/api':'', '^/api':'',
} }
}, },
// '/aps': { //代理的名字 // '/aps': { //代理的名字
// target:'http://www.jcznedu.com:5000/', // target:'http://www.jcznedu.com:5000/',
// // target: 'http://172.16.1.254:3111/', // // target: 'http://172.16.1.254:3111/',
// ws: true, // ws: true,
// changeOrigin: true, // changeOrigin: true,
// pathRewrite:{ // pathRewrite:{
// '^/aps':'', // '^/aps':'',
// } // }
// } // }
} }
} }
} }