|
|
<template>
|
|
|
<view>
|
|
|
<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="应急演练" :autoBack="true">
|
|
|
|
|
|
</u-navbar>
|
|
|
<u-tabs :list="list1" @change="clicktabs" :current="tabIndex" :scrollable="false" lineWidth="27" gutter="25"
|
|
|
:activeStyle="{
|
|
|
color: '#303133',
|
|
|
fontWeight: 'bold',
|
|
|
transform: 'scale(1.25)'
|
|
|
}" :inactiveStyle="{
|
|
|
color: '#999999',
|
|
|
transform: 'scale(1)'
|
|
|
}" itemStyle=" height: 78rpx;width:80rpx" style="background-color: #fff;white-space: nowrap !important;"></u-tabs>
|
|
|
<swiper :current="tabIndex" @change="tabChange" :style="fullHeight" class="home-data">
|
|
|
<!-- 待办 -->
|
|
|
<swiper-item @touchmove.stop>
|
|
|
<!-- 待办 -->
|
|
|
<view class="box1">
|
|
|
<swiper style="height: 100%;" :indicator-dots="true">
|
|
|
<swiper-item v-for="(item,index) in tableData" :key="index" style="height: 100%;">
|
|
|
<view class="boxInfo">
|
|
|
<!-- 头部 -->
|
|
|
<view class="box1Pic">
|
|
|
<view class="drillName">{{item.drillName}}</view>
|
|
|
<view class="address">
|
|
|
<image src="../../../static/images/drill/adress.png"
|
|
|
style="width: 24rpx;height: 24rpx;" />
|
|
|
<span style="margin-left: 15rpx;">{{item.drillAddress}}</span>
|
|
|
</view>
|
|
|
<view class="address">
|
|
|
<image src="../../../static/images/drill/time .png" alt="" srcset=""
|
|
|
style="width: 24rpx;height: 24rpx;" />
|
|
|
<span style="margin-left: 15rpx;">{{item.drillDate}}</span>
|
|
|
</view>
|
|
|
<view class="address" style="margin-bottom: 30rpx;">
|
|
|
<image src="../../../static/images/drill/dept.png" alt="" srcset=""
|
|
|
style="width: 24rpx;height: 24rpx;" />
|
|
|
<span style="margin-left: 15rpx;">{{item.secUnitName}}
|
|
|
{{item.drillDutyName}}</span>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 倒计时 -->
|
|
|
<view class="daojishi">
|
|
|
{{item.text4}}
|
|
|
</view>
|
|
|
<!-- 详情 -->
|
|
|
<view class="detail">
|
|
|
<u-row style="border-bottom: 1rpx solid #EEEEEE;">
|
|
|
<u-col span="4" class="name">应急预案:</u-col>
|
|
|
<u-col span="8" class="content">{{item.planName}}</u-col>
|
|
|
</u-row>
|
|
|
<u-row style="border-bottom: 1rpx solid #EEEEEE;">
|
|
|
<u-col span="4" class="name">演练级别:</u-col>
|
|
|
<u-col span="8" class="content"
|
|
|
style="display: flex;flex-direction: row;align-items: center;">
|
|
|
<image src="../../../static/images/zdwxy/dept.png"
|
|
|
style="width: 38rpx ;height: 38rpx;margin-right: 10rpx;" />
|
|
|
<span style="margin-left: 15rpx;">
|
|
|
<template v-if="item.enterpriseLevel === '1'">公司</template>
|
|
|
<template v-else-if="item.enterpriseLevel === '2'">二级单位</template>
|
|
|
<template v-else-if="item.enterpriseLevel === '3'">基层单位</template>
|
|
|
<template v-else-if="item.enterpriseLevel === '4'">班组</template>
|
|
|
</span>
|
|
|
</u-col>
|
|
|
</u-row>
|
|
|
<u-row style="border-bottom: 1rpx solid #EEEEEE;">
|
|
|
<u-col span="4" class="name">负责人:</u-col>
|
|
|
<u-col span="8" class="content"
|
|
|
style="display: flex;flex-direction: row;align-items: center;">
|
|
|
<image src="../../../static/images/drill/avtor.png"
|
|
|
style="width: 38rpx ;height: 38rpx;margin-right: 10rpx;" />
|
|
|
<span>{{item.fzrName}}</span>
|
|
|
</u-col>
|
|
|
</u-row>
|
|
|
<u-row>
|
|
|
<u-col span="4" class="name">演练内容:</u-col>
|
|
|
</u-row>
|
|
|
<view style="background: #F5F6FA;border-radius: 10rpx;padding: 26rpx;border: none;"
|
|
|
class="content over" v-html="item.drillContent">
|
|
|
</view>
|
|
|
<u-row>
|
|
|
<u-col span="4" class="name">演练目的:</u-col>
|
|
|
</u-row>
|
|
|
<view style="background: #F5F6FA;border-radius: 10rpx;padding: 26rpx;border: none;"
|
|
|
class="content over" v-html="item.drillPurpose">
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
</view>
|
|
|
</swiper-item>
|
|
|
<!-- 日程 -->
|
|
|
<swiper-item @touchmove.stop style="background-color: #fff;">
|
|
|
<scroll-view scroll-y="true" enableBackToTop="true" style="height: 100%;">
|
|
|
<!-- 日历 -->
|
|
|
<view class="content">
|
|
|
<view class="content-item">
|
|
|
<lunc-calendar ref="calendar" :showLunar="true" :showMonthBg="true" :showShrink="true"
|
|
|
:signList="signList" @dayChange="dayChange" @monthChange="monthChange"
|
|
|
@shrinkClick="shrinkClick"></lunc-calendar>
|
|
|
<!-- <lunc-calendar :showShrink="true" shrinkState="week"></lunc-calendar> -->
|
|
|
<!-- <view class="operation">
|
|
|
<view class="button" @click="addSign">新增标记</view>
|
|
|
<view class="button" @click="updateSign">修改标记</view>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 演练列表 -->
|
|
|
<u-collapse :border="false" style="padding: 10rpx 30rpx;" :value="['1','2']">
|
|
|
<u-collapse-item title="未完成" name="1">
|
|
|
<text slot="value" class="unfinish">{{noneList.length}}</text>
|
|
|
<view v-if="noneList.length === 0" class="listName" style="display: flex;flex-direction: column;align-items: center;justify-content: c
|
|
|
;margin-top: 100rpx;">
|
|
|
<image src="../../../static/images/none.png" style="width: 316rpx;height: 181rpx;">
|
|
|
</image>
|
|
|
<span style="color: #9f9f9f;margin-top: 30rpx;">暂无未完成演练~</span>
|
|
|
</view>
|
|
|
<view v-for="(item,index) in noneList" :key="index" @click="gotoPlanDetail(item.id)"
|
|
|
style="margin-bottom: 40rpx;">
|
|
|
<view class="unfinishlist">
|
|
|
<view style="width: 20rpx;height: 100%; background: #FFD777;"></view>
|
|
|
<view class="content">
|
|
|
<view class="name">{{item.drillName}}</view>
|
|
|
<view class="address" style="display: flex;align-items: center;">
|
|
|
<image src="../../../static/images/drill/adress.png"
|
|
|
style="width: 24rpx;height: 24rpx;margin-right: 5rpx;" />
|
|
|
{{item.drillAddress}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-icon name="eye-fill" style="margin-left: 30rpx;"></u-icon>
|
|
|
|
|
|
</view>
|
|
|
<view style="width: 648rpx;height: 1rpx;background: #D1D0DA;margin-top: 30rpx;"></view>
|
|
|
</view>
|
|
|
|
|
|
</u-collapse-item>
|
|
|
<u-collapse-item title="已完成" name="2">
|
|
|
<text slot="value" class="finish">{{complateList.length}}</text>
|
|
|
<view v-if="complateList.length === 0" class="listName" style="display: flex;flex-direction: column;align-items: center;justify-content: c
|
|
|
;margin-top: 100rpx;">
|
|
|
<image src="../../../static/images/none.png" style="width: 316rpx;height: 181rpx;">
|
|
|
</image>
|
|
|
<span style="color: #9f9f9f;margin-top: 30rpx;">暂无已完成演练~</span>
|
|
|
</view>
|
|
|
<view v-for="(item,index) in complateList" :key="index" @click="gotoPlanDetail(item.id)"
|
|
|
style="margin-bottom: 40rpx;">
|
|
|
<view class="unfinishlist">
|
|
|
<view style="width: 20rpx;height: 100%; background: #78DBA5;"></view>
|
|
|
<view class="content">
|
|
|
<view class="name">{{item.drillName}}</view>
|
|
|
<view class="address" style="display: flex;align-items: center;">
|
|
|
<image src="../../../static/images/drill/adress.png"
|
|
|
style="width: 24rpx;height: 24rpx;margin-right: 5rpx;" />
|
|
|
{{item.drillAddress}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-icon name="eye-fill" style="margin-left: 30rpx;"></u-icon>
|
|
|
</view>
|
|
|
<view style="width: 648rpx;height: 1rpx;background: #D1D0DA;margin-top: 30rpx;"></view>
|
|
|
</view>
|
|
|
|
|
|
</u-collapse-item>
|
|
|
</u-collapse>
|
|
|
</scroll-view>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import svgImage from '@/components/svgImage/svgImage.vue';
|
|
|
import {
|
|
|
getDicts
|
|
|
} from "@/api/indexpage/user.js"
|
|
|
import {
|
|
|
listPlan,
|
|
|
getPlan
|
|
|
} from '@/api/indexpage/plan/index.js'
|
|
|
import {
|
|
|
backlog,
|
|
|
getDrill,
|
|
|
scheduleMonthDrill,
|
|
|
scheduleDayDrill
|
|
|
} from "@/api/indexpage/YJDrill/index.js"
|
|
|
/**
|
|
|
* 获取任意时间
|
|
|
*/
|
|
|
function getDate(date, AddDayCount = 0) {
|
|
|
if (!date) {
|
|
|
date = new Date()
|
|
|
}
|
|
|
if (typeof date !== 'object') {
|
|
|
date = date.replace(/-/g, '/')
|
|
|
}
|
|
|
const dd = new Date(date)
|
|
|
|
|
|
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
|
|
|
|
|
|
const y = dd.getFullYear()
|
|
|
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
|
|
|
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
|
|
|
return {
|
|
|
fullDate: y + '-' + m + '-' + d,
|
|
|
year: y,
|
|
|
month: m,
|
|
|
date: d,
|
|
|
day: dd.getDay()
|
|
|
}
|
|
|
}
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
signList: [], //日历上显示数组
|
|
|
fullHeight: '',
|
|
|
tabIndex: 0,
|
|
|
list1: [{
|
|
|
name: "待演练"
|
|
|
},
|
|
|
{
|
|
|
name: "日程"
|
|
|
}
|
|
|
],
|
|
|
planTypeList: [], //预案类型字典数组
|
|
|
beianStatusList: [], //备案类型字典数组
|
|
|
tableData: [], //表格数据
|
|
|
nowDate: '', //今日日期
|
|
|
year: '', //年
|
|
|
month: '', //月
|
|
|
day: '', //日
|
|
|
noneList: [], //未完成
|
|
|
complateList: [], //已完成
|
|
|
};
|
|
|
},
|
|
|
onReady() {
|
|
|
let view = uni.createSelectorQuery().select(".home-data");
|
|
|
view.boundingClientRect(data => {
|
|
|
this.fullHeight = 'height:' + "calc(100vh - " + (data.top + 120) +
|
|
|
"rpx)";
|
|
|
}).exec();
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getDict()
|
|
|
// 获取今日日期
|
|
|
this.nowDate = getDate(new Date(), 0).fullDate;
|
|
|
if (this.nowDate) {
|
|
|
this.splitDate(this.nowDate)
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
// 把日期拆分为年、月、日
|
|
|
splitDate(date) {
|
|
|
this.year = date.slice(0, 4)
|
|
|
this.month = date.slice(5, 7)
|
|
|
this.day = date.slice(8, 10)
|
|
|
this.getMonth();
|
|
|
this.getDay()
|
|
|
},
|
|
|
// 获取当月日历上的的演练计划
|
|
|
getMonth() {
|
|
|
scheduleMonthDrill({
|
|
|
year: this.year,
|
|
|
month: this.month
|
|
|
}).then(res => {
|
|
|
this.signList = res
|
|
|
console.log(res, "当月演练");
|
|
|
})
|
|
|
},
|
|
|
getDay() {
|
|
|
scheduleDayDrill({
|
|
|
year: this.year,
|
|
|
month: this.month,
|
|
|
day: this.day
|
|
|
}).then(res => {
|
|
|
this.noneList = res.wwcList;
|
|
|
this.complateList = res.ywcList
|
|
|
console.log(res, "获取今日演练");
|
|
|
})
|
|
|
},
|
|
|
dayChange(dayInfo) { // 点击日期
|
|
|
let date = JSON.parse(JSON.stringify(dayInfo))
|
|
|
this.splitDate(date.date)
|
|
|
console.log("点击日期", JSON.parse(JSON.stringify(dayInfo)));
|
|
|
},
|
|
|
monthChange(monthInfo) { // 切换月份
|
|
|
let date = JSON.parse(JSON.stringify(monthInfo))
|
|
|
// this.getMonth(date.year, date.month)
|
|
|
// console.log("切换月份", date);
|
|
|
},
|
|
|
shrinkClick(type) {
|
|
|
console.log("当前状态", type);
|
|
|
},
|
|
|
|
|
|
addSign() { // 添加标记
|
|
|
let addList = [{
|
|
|
date: "2023-06-28",
|
|
|
title: "休息"
|
|
|
},
|
|
|
{
|
|
|
date: "2023-06-01",
|
|
|
title: "上班"
|
|
|
}
|
|
|
];
|
|
|
// 调用 addSignList 方法，传入需要添加的标记数组
|
|
|
this.$refs.calendar.addSignList(addList);
|
|
|
},
|
|
|
deleteSign() { // 删除标记
|
|
|
let deleteList = [{
|
|
|
date: "2023-06-01",
|
|
|
title: "上班"
|
|
|
}];
|
|
|
// 调用 deleteSignList 方法，传入需要删除的标记数组
|
|
|
this.$refs.calendar.deleteSignList(deleteList);
|
|
|
},
|
|
|
// tabs点击切换
|
|
|
clicktabs(e) {
|
|
|
this.switchTab(e.index);
|
|
|
},
|
|
|
// 轮播图切换
|
|
|
tabChange(e) {
|
|
|
let index = e.target.current || e.detail.current; // 获取到当前移动到第几个
|
|
|
this.switchTab(index);
|
|
|
},
|
|
|
//优化---当index相同时，不执行代码
|
|
|
switchTab(index) {
|
|
|
if (this.tabIndex == index) {
|
|
|
return;
|
|
|
} else {
|
|
|
this.tabIndex = index;
|
|
|
}
|
|
|
},
|
|
|
// 字典值
|
|
|
getDict() {
|
|
|
getDicts('emergency_plan_type').then(res => {
|
|
|
let dataInfo = res.data;
|
|
|
this.planTypeList = dataInfo.map(item => {
|
|
|
return {
|
|
|
key: item.dictLabel,
|
|
|
value: item.dictValue
|
|
|
}
|
|
|
})
|
|
|
});
|
|
|
getDicts('filing_status').then(res => {
|
|
|
let dataInfo = res.data;
|
|
|
this.beianStatusList = dataInfo.map(item => {
|
|
|
return {
|
|
|
key: item.dictLabel,
|
|
|
value: item.dictValue
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
this.getList()
|
|
|
},
|
|
|
setDict(stauts, list) {
|
|
|
for (let item of list) {
|
|
|
if (item.value === stauts) {
|
|
|
return item.key;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
getList() {
|
|
|
backlog().then(res => {
|
|
|
this.tableData = res
|
|
|
console.log(res, "待办");
|
|
|
})
|
|
|
},
|
|
|
gotoPlanDetail(id) {
|
|
|
this.$tab.navigateTo(`/pages/indexpage/YJdrill/detail/detail?id=${id}`)
|
|
|
},
|
|
|
// 下拉加载
|
|
|
loadMore() {
|
|
|
let pageSize = 8;
|
|
|
let a = 0;
|
|
|
if (this.total % pageSize === 0) {
|
|
|
a = this.total / pageSize;
|
|
|
} else {
|
|
|
a = this.total / pageSize + 1;
|
|
|
}
|
|
|
//初始化为1，触发直接请求第二页
|
|
|
this.pagenum = this.pagenum + 1;
|
|
|
//判断第几页 小于总页数才请求
|
|
|
if (this.pagenum <= a) {
|
|
|
uni.showToast({
|
|
|
title: '加载中....',
|
|
|
duration: 1000
|
|
|
});
|
|
|
this.getList();
|
|
|
} else {
|
|
|
console.log('对不', '-----');
|
|
|
// console.log(this.pagenum);
|
|
|
uni.showToast({
|
|
|
title: '没有更多了',
|
|
|
duration: 1000
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.listName {
|
|
|
font-weight: bolder;
|
|
|
color: #454545;
|
|
|
font-size: 30rpx;
|
|
|
margin-right: 50rpx;
|
|
|
}
|
|
|
|
|
|
/deep/.u-cell__body {
|
|
|
background: #F5F6FA;
|
|
|
}
|
|
|
|
|
|
/deep/.u-cell__title-text {
|
|
|
font-weight: bold;
|
|
|
font-size: 30rpx;
|
|
|
color: #333333;
|
|
|
}
|
|
|
|
|
|
.box1 {
|
|
|
background: url('../../../static/images/drill/bg.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-attachment: fixed;
|
|
|
width: 100vw;
|
|
|
height: 100%;
|
|
|
padding: 56rpx;
|
|
|
|
|
|
|
|
|
/deep/.u-scroll-list__indicator {
|
|
|
position: relative;
|
|
|
top: -50rpx;
|
|
|
}
|
|
|
|
|
|
.boxInfo {
|
|
|
width: 640rpx;
|
|
|
height: 1034rpx;
|
|
|
position: relative;
|
|
|
margin-right: 40rpx;
|
|
|
|
|
|
|
|
|
.box1Pic {
|
|
|
|
|
|
background: url('../../../static/images/drill/topbg.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-attachment: fixed;
|
|
|
width: 640rpx;
|
|
|
height: 268rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-evenly;
|
|
|
padding: 0 48rpx;
|
|
|
|
|
|
.drillName {
|
|
|
font-family: Noto Sans S Chinese;
|
|
|
font-weight: 500;
|
|
|
font-size: 34rpx;
|
|
|
color: #212121;
|
|
|
width: 420rpx;
|
|
|
}
|
|
|
|
|
|
.address {
|
|
|
font-weight: 500;
|
|
|
font-size: 28rpx;
|
|
|
color: #666666;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.daojishi {
|
|
|
width: 170rpx;
|
|
|
padding: 7rpx 0 0 0;
|
|
|
height: 60rpx;
|
|
|
line-height: 60rpx;
|
|
|
text-align: center;
|
|
|
position: absolute;
|
|
|
background: url('../../../static/images/drill/daojishi.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-attachment: fixed;
|
|
|
top: 15rpx;
|
|
|
right: -7rpx;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-weight: 400;
|
|
|
font-size: 24rpx;
|
|
|
color: #FFFFFF;
|
|
|
font-style: italic;
|
|
|
}
|
|
|
|
|
|
.detail {
|
|
|
width: 100%;
|
|
|
height: 908rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(190, 207, 228, 0.4);
|
|
|
border-radius: 20rpx;
|
|
|
opacity: 0.9;
|
|
|
position: absolute;
|
|
|
top: 240rpx;
|
|
|
padding: 30rpx 47rpx;
|
|
|
|
|
|
/deep/.u-row {
|
|
|
|
|
|
padding: 21rpx 0;
|
|
|
}
|
|
|
|
|
|
.name {
|
|
|
font-family: Noto Sans S Chinese;
|
|
|
font-weight: 400;
|
|
|
font-size: 30rpx;
|
|
|
color: #333333;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
font-family: Noto Sans S Chinese;
|
|
|
font-weight: 400;
|
|
|
font-size: 30rpx;
|
|
|
color: #737980 !important;
|
|
|
// line-height: 40rpx;
|
|
|
}
|
|
|
|
|
|
.over {
|
|
|
max-height: 180rpx !important;
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
p: span {
|
|
|
color: #737980 !important;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 日程
|
|
|
.unfinish,
|
|
|
.finish {
|
|
|
width: 28rpx;
|
|
|
height: 28rpx;
|
|
|
font-family: DIN;
|
|
|
font-weight: bold;
|
|
|
font-size: 24rpx;
|
|
|
color: #FFFFFF;
|
|
|
background: #FF7031;
|
|
|
border-radius: 50%;
|
|
|
text-align: center;
|
|
|
padding: 4rpx;
|
|
|
line-height: 28rpx;
|
|
|
}
|
|
|
|
|
|
.finish {
|
|
|
background: #1EB400;
|
|
|
}
|
|
|
|
|
|
.unfinishlist {
|
|
|
width: 672rpx;
|
|
|
height: 120rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(190, 207, 228, 0.4);
|
|
|
display: flex;
|
|
|
// align-items: flex-start;
|
|
|
|
|
|
.content {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-evenly;
|
|
|
margin-left: 20rpx;
|
|
|
|
|
|
.name {
|
|
|
font-weight: 400;
|
|
|
font-size: 30rpx;
|
|
|
color: #333333;
|
|
|
}
|
|
|
|
|
|
.address {
|
|
|
font-family: Noto Sans S Chinese;
|
|
|
font-weight: normal;
|
|
|
font-size: 24rpx;
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
