代码提交

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

View File

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

View File

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

Binary file not shown.

File diff suppressed because it is too large Load Diff

View File

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