- <template>
- <!-- 值班 -->
- <div class="Beonduty ">
- <EachModuleTitle title="辅助研判" :isTab="false"></EachModuleTitle>
- <div class="typeList flex">
- <!-- <div
- class="flex-1 tab"
- :class="tabActive == i.value ? 'active' : ''"
- v-for="i in tabData"
- :key="i.value"
- @click="tabClickFun(i)"
- >
- {{ i.label }}
- </div> -->
- <div
- class="flex-1 tab"
- >
- 防汛值班{{ ZBTJData?.fbDutySignUserNum||0 }}/{{ZBTJData?.fbDutyUserNum||0}}
- </div>
- <div
- class="flex-1 tab"
- >
- 泵站值班{{ ZBTJData?.pumpDutySignNum||0 }}/{{ZBTJData?.pumpDutyNum||0}}
- </div>
- <div
- class="flex-1 tab"
- >
- 排涝车辆{{ ZBTJData?.carOnlineNum||0 }}/{{ZBTJData?.carNum||0}}
- </div>
- </div>
- <div class="yjBtn flex flex-align-center">
- 警情建议
- <div class="blue pointer" @click="startEmergencyResponse">{{yjtj?.recommendGrade}}</div>
- </div>
- <!-- 防汛值班 -->
- <div class="dutyBox">
- <div class="text">防汛值班</div>
- <div class="showDuty">
- <div class="eachdutyInfo">
- <div class="imgBox jrzbimg"></div>
- <div>
- <div class="typeText">今日值班</div>
- <div class="name jrzbName" v-for="(item) in jrzbText" :key="item" >
- <span :title="item.name+''+item.phone">{{item.name}} </span>
- </div>
-
- </div>
- </div>
- <div class="eachdutyInfo">
- <div class="imgBox dbldimg"></div>
- <div>
- <div class="typeText">带班领导</div>
- <div class="name dbldName" v-for="(item) in zbldText" :key="item" >
- <span :title="item.name+''+item.phone">{{item.name}} </span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 排涝值守 -->
- <div class="dutyBox">
- <div class="text">排涝值守</div>
- <div class="showDuty">
- <div class="eachdutyInfo">
- <div class="imgBox jrxcimg"></div>
- <div>
- <div class="typeText">今日巡查人数</div>
- <div class="name jrzbName">{{PLZSData?.watchUserNum||0}}</div>
- </div>
- </div>
- <div class="eachdutyInfo">
- <div class="imgBox plddimg"></div>
- <div>
- <div class="typeText">排涝调度次数</div>
- <div class="name dbldName">{{PLZSData?.dispatchNum||0}}次</div>
- </div>
- </div>
- </div>
- </div>
- <!-- 启动应急响应弹框 -->
- <el-dialog
- title="发布响应"
- style="height:670px"
- append-to-body
- modal-class="pmpSitNewDialog"
- v-model="floodDialogRelease"
- v-if="floodDialogRelease"
- width="1200px"
- :before-close="floodReleaseClose"
- >
- <FloodReleaseForm @floodReleaseClose="floodReleaseClose" :fxType="1" :fxLeve="3" />
- </el-dialog>
- </div>
- </template>
- <script setup nama="Beonduty">
- import { ref, reactive, onMounted } from 'vue';
- import EachModuleTitle from '@/views/pictureOnMap/page/components/EachModuleTitle.vue';
- import FloodReleaseForm from './FloodReleaseForm/index.vue';
- import {
- drainageDispatchGetDutyCount,drainageDispatchGetFbTodayDutyUserShift,drainageDispatchGetWatchCount,getResponseRecommend
- } from '@/api/FloodControlAndDrainage.js';
- import bus from "@/bus";
-
- const { proxy } = getCurrentInstance();
- const tabData = [
- { label: '防汛值班(2/2)', value: '1' },
- { label: '泵站值班(10/10)', value: '2' },
- { label: '排涝车辆(10/18)', value: '3' },
- ];
- const tabActive = ref(1);
- const tabClickFun = item => {
- tabActive.value = item.value;
- };
- const floodDialogRelease=ref(false)
- const startEmergencyResponse=()=>{
- floodDialogRelease.value=true
-
- }
- function floodReleaseClose(){
- floodDialogRelease.value=false
- }
- // 获取数据
- const loading1=ref(false)
- const loading2=ref(false)
- const loading3=ref(false)
- const ZBTJData=ref(null) //值班统计
- const JRZBData=ref(null) //今日防汛值班
- const PLZSData=ref(null) //排涝值守
- function gitDataFunZBTJ() {
- loading1.value=true
- drainageDispatchGetDutyCount().then(res => {
- console.log('获取值班统计', res);
- loading1.value=false
- if (res && res.code == 200) {
- ZBTJData.value=res.data
- }
- },(error)=>{
- loading1.value=false
- });
- }
- const jrzbText=ref([])
- const zbldText=ref([])
- function gitDataFunJRZB() {
- loading2.value=true
- drainageDispatchGetFbTodayDutyUserShift().then(res => {
- console.log('获取今日防汛值班', res);
- loading2.value=false
- if (res && res.code == 200) {
- JRZBData.value=res.data
- let jrzb=JRZBData.value[0]?.dutyUserList
- let zbld=JRZBData.value[1]?.dutyUserList
- if(jrzb?.length>0){
- jrzb.map((e)=>{
- let obj={
- name:e.dutyUserName,
- phone:e.dutyUserPhone,
- }
- jrzbText.value.push(obj)
- })
- }
- if(zbld?.length>0){
- zbld.map((e)=>{
- let obj={
- name:e.dutyUserName,
- phone:e.dutyUserPhone,
- }
- zbldText.value.push(obj)
- })
- }
-
-
- }
- },(error)=>{
- loading2.value=false
- });
- }
- function gitDataFunPLZS() {
- loading3.value=true
- drainageDispatchGetWatchCount().then(res => {
- console.log('获取排涝值守', res);
- loading3.value=false
- if (res && res.code == 200) {
- PLZSData.value=res.data
- }
- },(error)=>{
- loading3.value=false
- });
- }
- const yjtj=ref(null)
- // 获取预警推荐等级
- function gitDataFunYJTJ() {
- getResponseRecommend().then(res => {
- console.log('获取警情建议', res);
- if (res && res.code == 200) {
- yjtj.value=res.data
- }
- },(error)=>{
- });
- }
- onMounted(() => {
- gitDataFunZBTJ()
- gitDataFunJRZB()
- gitDataFunPLZS()
- gitDataFunYJTJ()
- });
- onMounted(() => {});
- </script>
- <style lang="scss" scoped>
- .Beonduty {
- .dutyBox {
- background: linear-gradient(0deg, #00134f 0%, #003065 100%);
- border-radius: 6px;
- border: 1px solid #163f80;
- display: flex;
- height: 100px;
- margin-top: 8px;
- .text {
- width: 50px;
- height: 100%;
- background: linear-gradient(0deg, rgba(0, 98, 183, 0.9) 0%, rgba(0, 98, 183, 0.3) 100%);
- border-radius: 6px;
- writing-mode: vertical-rl;
- text-align: center;
- padding-right: 14px;
- font-weight: bold;
- font-size: 16px;
- color: #ffffff;
- }
- .showDuty {
- display: flex;
- flex: 1;
- justify-content: space-around;
- align-items: center;
- .eachdutyInfo {
- display: flex;
- font-weight: 500;
- font-size: 14px;
- color: #CCDFFF;
- }
- .imgBox {
- width: 90px;
- height: 84px;
- }
- .jrzbimg {
- background: url('@/assets/images/pictureOnMap/jrzb.png') no-repeat center;
- background-size: 100% 100%;
- }
- .dbldimg {
- background: url('@/assets/images/pictureOnMap/dbld.png') no-repeat center;
- background-size: 100% 100%;
- }
- .jrxcimg {
- background: url('@/assets/images/pictureOnMap/jrxc.png') no-repeat center;
- background-size: 100% 100%;
- }
- .plddimg {
- background: url('@/assets/images/pictureOnMap/pldd.png') no-repeat center;
- background-size: 100% 100%;
- }
- .typeText {
- width: 95px;
- padding-top: 10px;
- padding-bottom: 5px;
- }
- .name {
- font-weight: bold;
- font-size: 16px;
- line-height: 25px;
- }
- .jrzbName {
- color: #2cb7ff;
- }
- .dbldName {
- color: #00FCFF;
- }
- }
- }
- .typeList {
- .tab {
- cursor: auto;
- }
- }
- }
- </style>