<template>
<view class="content">
<cu-custom bgColor="bg-blacks" :isBack="false">
<block slot="right"><image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image></block>
<block slot="right">
<view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
<view class="cu-tag looknumber" style="margin-top: -2%;">
<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
</view>
</view>
</block>
<block slot="right"></block>
<block slot="content">{{ address }}</block>
<block slot="right"><view class="plus" @tap="showModal" data-target="viewModal">+</view></block>
</cu-custom>
<!-- 抽屉组件 -->
<div><drawer ref="drawer"></drawer></div>
<div class="plusDrawer" @tap="hideModal"><plusDrawer ref="plusDrawer"></plusDrawer></div>
<scroll-view @tap="hideModal" scroll-y class="DrawerPage" :class="modalName == 'viewModal' ? 'show' : ''">
<!-- 任务组件 -->
<view class="taskcard solid">
<view class="tasktab" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)"><view class="cu-tag" :class="'line-white'">任务一</view></view>
<view class="taskcontent solids-bottom flex align-center" style="color: #FFFFFF;" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)">
<view class="flex-subs text-center"><view class="padding">用于摘要或阅读文本页面默认字号</view></view>
</view>
<view class="taskbutton align-center padding">
<button class="cu-btn ">确认</button>
<button class="cu-btn ">取消</button>
</view>
</view>
<!-- 任务组件 -->
<view class="taskcard solid">
<view class="tasktab" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)"><view class="cu-tag" :class="'line-white'">任务二</view></view>
<view class="taskcontent solids-bottom flex align-center" style="color: #FFFFFF;" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)">
<view class="flex-subs text-center"><view class="padding">用于摘要或阅读文本页面默认字号</view></view>
</view>
<view class="taskbutton align-center padding">
<button class="cu-btn ">确认</button>
<button class="cu-btn ">取消</button>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import res from '../../common/data.json';
import drawer from '../../components/drawer/threeLineDrawer.vue';
import plusDrawer from '../../components/drawer/plusDrawer.vue';
export default {
components: {
drawer: drawer,
plusDrawer: plusDrawer
},
data: function() {
return {
taskName: '任务',
badge: 22,
inconList: ['form', 'favor', 'question', 'edit'],
modalName: null,
address: '宁夏新能源公司',
drawerList: [
{
name: '首页'
},
{
name: '状态监视'
},
{
name: '矩阵监视'
},
{
name: '风场监视'
},
{
name: '人员监视'
}
],
plusDrawerList: [
{
name: '宁夏新能源公司',
windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
},
{
name: '牛首山风电场',
windPowerStationId: 'NSS_FDC'
},
{
name: '香山风电场',
windPowerStationId: 'XS_FDC'
},
{
name: '石板泉风电场',
windPowerStationId: 'SBQ_FDC'
},
{
name: '青山风电场',
windPowerStationId: 'QS_FDC'
},
{
name: '麻黄山风电场',
windPowerStationId: 'MHS_FDC'
}
]
};
},
onHide() {
this.$refs.drawer.closeDrawer();
this.hideModal();
},
onShow() {
this.windPowerStationId = uni.getStorageSync('windPowerStationId');
this.address = this.getWindPowerStationNameToSessionStorage();
},
methods: {
openDrawer: function() {
this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
},
closeDrawer: function() {
this.drawerIsShow = false;
},
pushWindPowerStationNameToSessionStorage(windpowerstationName) {
uni.setStorageSync('windpowerstationName', windpowerstationName);
//sessionStorage.setItem('windpowerstationName', windpowerstationName);
//alert("v"+ sessionStorage.getItem("windpowerstationName"));
//this.common.goback('/pages/index/Index');
},
getWindPowerStationNameToSessionStorage() {
uni.getStorageSync('windpowerstationName');
return uni.getStorageSync('windpowerstationName');
},
openDrawer: function() {
this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
},
showModal(e) {
this.modalName = e.currentTarget.dataset.target;
this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
},
hideModal() {
this.modalName = null;
this.$refs.plusDrawer.hideModal(this.modalName);
}
}
};
</script>
<style>
body {
font-family: '方正兰亭细黑_GBK';
font-size: 20px;
color: silver;
background: #fff;
}
@font-face {
font-family: '方正兰亭细黑_GBK';
src: url(../../static/fzltxh.TTF);
}
page {
background-color: #1f1f1f;
font-family: '方正兰亭细黑_GBK';
overflow-x: hidden;
}
.top {
width: 100%;
height: 130upx;
padding-top: 5upx;
background-color: #1f1f1f;
position: fixed;
top: 0px;
left: 0px;
z-index: 100;
}
.threeLine {
width: 50px;
height: 45px;
float: left;
}
.text {
width: calc(100% - 100px);
height: 45px;
float: left;
user-select: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
color: silver;
line-height: 45px;
margin-top: 11px;
font-size: 18px;
}
.notice {
width: 50px;
height: 45px;
float: left;
}
.plus {
width: 30px;
height: 45px;
float: right;
color: white;
font-size: 35px;
line-height: 45px;
text-align: right;
margin-right: 2.5%;
}
.textWindpowerstation {
width: 180px;
height: 45px;
float: left;
text-align: center;
margin-left: 18px;
}
.taskcard {
margin-left: 10%;
width: 80%;
height: 200px;
margin-top: 3%;
border:2px solid white;
}
.tasktab {
height: 30px;
width: 100%;
margin-left: 3%;
margin-top: 3%;
}
.taskcontent {
height: 100px;
}
.taskbutton {
width: 100%;
height: 50px;
}
.cu-tag {
float: left;
}
.solids-bottom::after {
border-bottom: 0px solid #eee;
}
.cu-btn {
float: right;
margin-left: 3px;
}
.DrawerPage {
position: fixed;
width: 100vw;
height: 100vh;
left: 0vw;
background-color: #1f1f1f;
transition: all 0.4s;
}
.DrawerPage.show {
transform: scale(0.9, 0.9);
left: 85vw;
box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
transform-origin: 0;
}
.DrawerPage .cu-bar.tabbar .action button.cuIcon {
width: 64upx;
height: 64upx;
line-height: 64upx;
margin: 0;
display: inline-block;
}
.DrawerPage .cu-bar.tabbar .action .cu-avatar {
margin: 0;
}
.DrawerPage .nav {
flex: 1;
}
.DrawerPage .nav .cu-item.cur {
border-bottom: 0;
position: relative;
}
.DrawerPage .nav .cu-item.cur::after {
content: '';
width: 10upx;
height: 10upx;
background-color: currentColor;
position: absolute;
bottom: 10upx;
border-radius: 10upx;
left: 0;
right: 0;
margin: auto;
}
.DrawerPage .cu-bar.tabbar .action {
flex: initial;
}
</style>