gitadmin
/
taauav_app_front_discard_20240715
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

问题修复

master
huxinglu 4 jaren geleden
bovenliggende
668f2ada18
commit
5d54e0ed63
1 gewijzigde bestanden met toevoegingen van 326 en 275 verwijderingen
Zij-aan-zij weergave
Diff Options
Show Stats Download Patch File Download Diff File
  1. +326
    -275
      src/views/main/main.vue

+ 326
- 275
src/views/main/main.vue Bestand weergeven

@@ -7,7 +7,7 @@
</div>
<div class="main-left-box">
<div>
<img src="../../assets/img/rw.png">
<img src="../../assets/img/rw.png" />
<div>
<div>任务总数</div>
<div>{{taskInfo.totalNum}}</div>
@@ -35,7 +35,7 @@
</div>
<div class="main-left-box">
<div>
<img src="../../assets/img/wt.png">
<img src="../../assets/img/wt.png" />
<div>
<div>问题总数</div>
<div>{{questionInfo.totalNum}}</div>
@@ -64,8 +64,12 @@
</div>
<div :key="index" v-for="(item,index) in inspectQuestionCategoryList" class="left-bottom">
<div :title="item.questionContent">{{item.questionContent}}</div>
<el-progress :show-text="false" :stroke-width="20" color="#17B4AC"
:percentage="getQuestionPer(item)"></el-progress>
<el-progress
:show-text="false"
:stroke-width="20"
color="#17B4AC"
:percentage="getQuestionPer(item)"
></el-progress>
<div>{{item.questionNum}}</div>
</div>
</el-card>
@@ -73,8 +77,13 @@
<div slot="header" class="clearfix">
<span>水质分类统计</span>
</div>
<mainCake v-if="waterAlarmCategoryList.length>0" :dataList="waterAlarmCategoryList" id="mainPre" :width="360"
:height="200"></mainCake>
<mainCake
v-if="waterAlarmCategoryList.length>0"
:dataList="waterAlarmCategoryList"
id="mainPre"
:width="360"
:height="200"
></mainCake>
</el-card>
</div>
</div>
@@ -85,13 +94,20 @@
<el-button @click="waterAlarmOpen" style="float: right; padding: 3px 0" type="text">更多</el-button>
</div>
<div class="right-waterAlarm">
<div @click="waterAlarmClick(item.id)" :key="index" v-for="(item,index) in waterAlarmList">
<div
@click="waterAlarmClick(item.id)"
:key="index"
v-for="(item,index) in waterAlarmList"
>
<div>
<img
:src="item.measuredStandard==5?require('../../assets/img/main/red.png'):(item.measuredStandard==4?require('../../assets/img/main/orange.png'):require('../../assets/img/main/yellow.png'))"/>
:src="item.measuredStandard==5?require('../../assets/img/main/red.png'):(item.measuredStandard==4?require('../../assets/img/main/orange.png'):require('../../assets/img/main/yellow.png'))"
/>
<div>{{item.alarmInfo}}</div>
</div>
<div><span v-if="item.alarmTime">{{item.alarmTime.split(' ')[0]}}</span></div>
<div>
<span v-if="item.alarmTime">{{item.alarmTime.split(' ')[0]}}</span>
</div>
</div>
</div>
</el-card>
@@ -108,9 +124,9 @@
</div>
<div>
<div>{{item.warnContent}}</div>
<div :class="item.warnLevel==5?'red-div':(item.warnLevel==4?'orange-div':'yellow-div')">
{{item.warnLevel}}级
</div>
<div
:class="item.warnLevel==5?'red-div':(item.warnLevel==4?'orange-div':'yellow-div')"
>{{item.warnLevel}}级</div>
</div>
</div>
</div>
@@ -123,7 +139,12 @@
<el-tabs v-model="noticeType" @tab-click="noticeTypeClick">
<el-tab-pane label="水务新闻" :name="1">
<div v-if="noticeType==1" class="notice-list">
<div @click="noticeClick(item.id)" :key="index" v-for="(item,index) in noticeList" class="notice-child">
<div
@click="noticeClick(item.id)"
:key="index"
v-for="(item,index) in noticeList"
class="notice-child"
>
<div>{{item.title}}</div>
<div>{{item.createTime}}</div>
</div>
@@ -131,7 +152,12 @@
</el-tab-pane>
<el-tab-pane label="政策法规" :name="2">
<div v-if="noticeType==2" class="notice-list">
<div @click="noticeClick(item.id)" :key="index" v-for="(item,index) in noticeList" class="notice-child">
<div
@click="noticeClick(item.id)"
:key="index"
v-for="(item,index) in noticeList"
class="notice-child"
>
<div>{{item.title}}</div>
<div>{{item.createTime}}</div>
</div>
@@ -145,342 +171,367 @@
@handleClose="waterAlarmVisible=false"
v-if="waterAlarmVisible"
:visible="waterAlarmVisible"
>
</waterAlarmInfo>
<noticeDetial :noticeId="noticeId" :visible="noticeVisible" v-if="noticeVisible" @handleClose="noticeVisible=false"></noticeDetial>
></waterAlarmInfo>
<noticeDetial
:noticeId="noticeId"
:visible="noticeVisible"
v-if="noticeVisible"
@handleClose="noticeVisible=false"
></noticeDetial>
</div>
</template>

<script>
import mainApi from '@/api/main/index'
import mainCake from './mainCake'
import waterAlarmInfo from '../water/waterAlarm/infoForm'
import noticeDetial from '@/components/noticeDetail'

export default {
name: "main-pc-index",
data() {
return {
noticeVisible:false,
noticeId:'',
waterAlarmVisible: false,
waterAlarmId: '',
height: document.body.clientHeight - 125,
taskInfo: {},
questionInfo: {},
waterAlarmCategoryList: [],
waterAlarmList: [],
waterWarnList: [],
noticeType: 1,
noticeList:[]
}
import mainApi from "@/api/main/index";
import mainCake from "./mainCake";
import waterAlarmInfo from "../water/waterAlarm/infoForm";
import noticeDetial from "@/components/noticeDetail";

export default {
name: "main-pc-index",
data() {
return {
noticeVisible: false,
noticeId: "",
waterAlarmVisible: false,
waterAlarmId: "",
height: document.body.clientHeight - 125,
taskInfo: {},
questionInfo: {},
waterAlarmCategoryList: [],
waterAlarmList: [],
waterWarnList: [],
noticeType: 1,
noticeList: []
};
},
created() {},
mounted() {
this.getDetail();
this.getNoticeMainList();
},
components: { mainCake, waterAlarmInfo, noticeDetial },
methods: {
noticeClick(id) {
this.noticeId = id;
this.noticeVisible = true;
},
created() {
noticeTypeClick() {
this.noticeList = [];
this.getNoticeMainList();
},
mounted() {
this.getDetail()
this.getNoticeMainList()
noticeOpen() {
this.$router.push({ path: "/work/notice" });
},
components: {mainCake, waterAlarmInfo,noticeDetial},
methods: {
noticeClick(id){
this.noticeId=id
this.noticeVisible=true
},
noticeTypeClick(){
this.noticeList=[]
this.getNoticeMainList()
},
noticeOpen() {
this.$router.push({path: "/work/notice"});
},
waterWarnOpen() {
this.$router.push({path: "/water/warn"});
},
waterAlarmOpen() {
this.$router.push({path: "/water/waterAlarm"});
},
waterAlarmClick(id) {
this.waterAlarmId = id
this.waterAlarmVisible = true
},
getQuestionPer(item) {
let total = 0
this.inspectQuestionCategoryList.map(item => {
total += item.questionNum
})
return (item.questionNum / total) * 100
},
getNoticeMainList() {
mainApi.getNoticeMainList(this.noticeType).then(res => {
this.noticeList=res.data?res.data:[]
}).catch(e => {
this.noticeList=[]
waterWarnOpen() {
this.$router.push({ path: "/water/warn" });
},
waterAlarmOpen() {
this.$router.push({ path: "/water/waterAlarm" });
},
waterAlarmClick(id) {
this.waterAlarmId = id;
this.waterAlarmVisible = true;
},
getQuestionPer(item) {
let total = 0;
this.inspectQuestionCategoryList.map(item => {
total += item.questionNum;
});
return (item.questionNum / total) * 100;
},
getNoticeMainList() {
mainApi
.getNoticeMainList(this.noticeType)
.then(res => {
this.noticeList = res.data ? res.data : [];
})
},
getDetail() {
mainApi.getMainDetail().then(res => {
const {waterWarnList, taskInfo, questionInfo, inspectQuestionCategoryList, waterAlarmCategoryList, waterAlarmList} = res.data
this.taskInfo = taskInfo ? taskInfo : {}
this.questionInfo = questionInfo ? questionInfo : {}
this.inspectQuestionCategoryList = inspectQuestionCategoryList ? inspectQuestionCategoryList : []
this.waterAlarmCategoryList = waterAlarmCategoryList ? waterAlarmCategoryList : []
this.waterAlarmList = waterAlarmList ? waterAlarmList : []
this.waterWarnList = waterWarnList ? waterWarnList : []
}).catch(e => {
this.taskInfo = {}
this.questionInfo = {}
this.inspectQuestionCategoryList = []
this.waterAlarmCategoryList = []
this.waterAlarmList = []
this.waterWarnList = []
.catch(e => {
this.noticeList = [];
});
},
getDetail() {
mainApi
.getMainDetail()
.then(res => {
const {
waterWarnList,
taskInfo,
questionInfo,
inspectQuestionCategoryList,
waterAlarmCategoryList,
waterAlarmList
} = res.data;
this.taskInfo = taskInfo ? taskInfo : {};
this.questionInfo = questionInfo ? questionInfo : {};
this.inspectQuestionCategoryList = inspectQuestionCategoryList
? inspectQuestionCategoryList
: [];
this.waterAlarmCategoryList = waterAlarmCategoryList
? waterAlarmCategoryList
: [];
this.waterAlarmList = waterAlarmList ? waterAlarmList : [];
this.waterWarnList = waterWarnList ? waterWarnList : [];
})
}
.catch(e => {
this.taskInfo = {};
this.questionInfo = {};
this.inspectQuestionCategoryList = [];
this.waterAlarmCategoryList = [];
this.waterAlarmList = [];
this.waterWarnList = [];
});
}
}
};
</script>

<style lang="less">
.main-pc-index{
width: 100%;
padding: 10px;
background-color: #ffffff;
height: 100%;
display: flex;

.main-left {
width: 64%;
margin-right: 1%;

.main-left-box {
.main-pc-index {
width: 100%;
padding: 10px;
background-color: #ffffff;
height: 100%;
display: flex;

.main-left {
width: 64%;
margin-right: 1%;

.main-left-box {
display: flex;
align-items: center;
font-size: 12px;

> div:first-child {
display: flex;
align-items: center;
font-size: 12px;

> div:first-child {
display: flex;
align-items: center;
justify-content: flex-start;
color: #999999;
width: 190px;
border-right: 1px #eeeeee solid;
justify-content: flex-start;
color: #999999;
width: 190px;
border-right: 1px #eeeeee solid;

> img {
width: 60px;
height: 60px;
}
> img {
width: 60px;
height: 60px;
}

> div {
margin-left: 15px;
> div {
margin-left: 15px;

> div:last-child {
font-size: 24px;
color: #333333;
}
> div:last-child {
font-size: 24px;
color: #333333;
}
}
}

> div:last-child {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
> div:last-child {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;

> div {
color: #999999;
> div {
color: #999999;

> div:last-child {
font-size: 24px;
color: #333333;
}
> div:last-child {
font-size: 24px;
color: #333333;
}
}
}
}

.left-bottom {
margin-top: 15px;
display: flex;
align-items: center;

> div:first-child {
width: 100px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}

.left-bottom {
margin-top: 15px;
> div:nth-child(2) {
flex: 1;
display: flex;
align-items: center;
margin-left: 10px;

.el-progress-bar {
padding-right: 0rem;
width: 100%;
margin-right: -0rem;
}

.el-progress-bar__outer {
background: #0b2221;
border-radius: 10px;
}
}

> div:last-child {
width: 60px;
margin-left: 30px;
text-align: left;
font-family: PingFangSC-Medium;
font-size: 14px !important;
color: #17b4ac;
line-height: 20px;
}
}
}

.main-right {
width: 35%;

.el-card__header {
.el-button--text {
color: #ffffff !important;
}
}

.notice-list {
.notice-child {
width: 100%;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #333333;
cursor: pointer;
> div:first-child {
width: 100px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
text-align: right;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
> div:last-child {
color: #666666;
flex: none;
width: 150px;
text-align: right;
}
}
}

> div:nth-child(2) {
flex: 1;
.right-waterAlarm {
> div {
cursor: pointer;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;

> div:first-child {
display: flex;
align-items: center;
margin-left: 10px;

.el-progress-bar {
padding-right: 0rem;
width: 100%;
margin-right: -0rem;
> img {
width: 20px;
height: 20px;
margin-right: 10px;
}

.el-progress-bar__outer {
background: #0B2221;
border-radius: 10px
> div:last-child {
font-family: PingFangSC-Regular;
font-size: 16px;
color: #333333;
line-height: 16px;
}
}

> div:last-child {
width: 60px;
margin-left: 30px;
text-align: left;
font-family: PingFangSC-Medium;
font-size: 14px !important;
color: #17B4AC;
line-height: 20px;
flex: none;
font-family: PingFangSC-Regular;
font-size: 16px;
text-align: right;
width: 100px;
color: #333333;
line-height: 16px;
}
}
}

.main-right {
width: 35%;

.el-card__header {
.el-button--text {
color: #ffffff !important;
}
> div:first-child {
margin-top: 0px;
}
}

.notice-list{
.notice-child{
width: 100%;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #333333;
cursor: pointer;
>div:last-child{
color: #666666;
flex: none;
width: 150px;
text-align: right;
}
}
}
.right-waterWarn {
> div {
margin-top: 10px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;

.right-waterAlarm {
> div {
cursor: pointer;
margin-top: 10px;
> div:first-child {
display: flex;
justify-content: space-between;
align-items: center;

> div:first-child {
display: flex;
align-items: center;

> img {
width: 20px;
height: 20px;
margin-right: 10px;
}

> div:last-child {
font-family: PingFangSC-Regular;
font-size: 16px;
color: #333333;
line-height: 16px;
}
}

> div:last-child {
flex: none;
font-family: PingFangSC-Regular;
font-size: 16px;
text-align: right;
width: 100px;
font-size: 14px;
font-weight: bold;
line-height: 14px;
color: #333333;
line-height: 16px;
}
}

> div:first-child {
margin-top: 0px;
> div:last-child {
line-height: 14px;
}
}
}

.right-waterWarn {
> div {
margin-top: 10px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
> div:last-child {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 5px;
color: #666666;

> div:first-child {
display: flex;
justify-content: space-between;
align-items: center;

> div:first-child {
font-family: PingFangSC-Regular;
font-size: 14px;
font-weight: bold;
line-height: 14px;
color: #333333;
}

> div:last-child {
line-height: 14px;
}
line-height: 14px;
}

> div:last-child {
color: #ffffff;
border-radius: 10px;
height: 14px;
width: 37px;
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
margin-top: 5px;
color: #666666;

> div:first-child {
line-height: 14px;
}

> div:last-child {
color: #ffffff;
border-radius: 10px;
height: 14px;
width: 37px;
display: flex;
justify-content: center;
align-items: center;
}

.red-div {
background: #FF0000;
}

.orange-div {
background: #f5A623;
}

.yellow-div {
background: #f5d823;
}
}
}

> div:first-child {
margin-top: 0px;
.red-div {
background: #ff0000;
}

.orange-div {
background: #f5a623;
}

.yellow-div {
background: #f5d823;
}
}
}
}

> div:first-child {
margin-top: 0px;
}
}
}

}
</style>

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan