Newer
Older
DH_Apicture / src / views / pictureOnMap / page / FloodControlAndDrainage / Fuzhujuece / AuxiliaryResearchAndJudgmentLeft / component / Beonduty.vue
@leishan leishan on 30 Nov 7 KB youhua
  1. <template>
  2. <!-- 值班 -->
  3. <div class="Beonduty ">
  4. <EachModuleTitle title="辅助研判" :isTab="false"></EachModuleTitle>
  5. <div class="typeList flex">
  6. <!-- <div
  7. class="flex-1 tab"
  8. :class="tabActive == i.value ? 'active' : ''"
  9. v-for="i in tabData"
  10. :key="i.value"
  11. @click="tabClickFun(i)"
  12. >
  13. {{ i.label }}
  14. </div> -->
  15. <div
  16. class="flex-1 tab"
  17. >
  18. 防汛值班{{ ZBTJData?.fbDutySignUserNum||0 }}/{{ZBTJData?.fbDutyUserNum||0}}
  19. </div>
  20. <div
  21. class="flex-1 tab"
  22. >
  23. 泵站值班{{ ZBTJData?.pumpDutySignNum||0 }}/{{ZBTJData?.pumpDutyNum||0}}
  24. </div>
  25. <div
  26. class="flex-1 tab"
  27. >
  28. 排涝车辆{{ ZBTJData?.carOnlineNum||0 }}/{{ZBTJData?.carNum||0}}
  29. </div>
  30. </div>
  31. <div class="yjBtn flex flex-align-center">
  32. 警情建议
  33. <div class="blue pointer" @click="startEmergencyResponse">{{yjtj?.recommendGrade}}</div>
  34. </div>
  35. <!-- 防汛值班 -->
  36. <div class="dutyBox">
  37. <div class="text">防汛值班</div>
  38. <div class="showDuty">
  39. <div class="eachdutyInfo">
  40. <div class="imgBox jrzbimg"></div>
  41. <div>
  42. <div class="typeText">今日值班</div>
  43. <div class="name jrzbName" v-for="(item) in jrzbText" :key="item" >
  44. <span :title="item.name+''+item.phone">{{item.name}}&nbsp; </span>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="eachdutyInfo">
  49. <div class="imgBox dbldimg"></div>
  50. <div>
  51. <div class="typeText">带班领导</div>
  52. <div class="name dbldName" v-for="(item) in zbldText" :key="item" >
  53. <span :title="item.name+''+item.phone">{{item.name}}&nbsp; </span>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. <!-- 排涝值守 -->
  60. <div class="dutyBox">
  61. <div class="text">排涝值守</div>
  62. <div class="showDuty">
  63. <div class="eachdutyInfo">
  64. <div class="imgBox jrxcimg"></div>
  65. <div>
  66. <div class="typeText">今日巡查人数</div>
  67. <div class="name jrzbName">{{PLZSData?.watchUserNum||0}}</div>
  68. </div>
  69. </div>
  70. <div class="eachdutyInfo">
  71. <div class="imgBox plddimg"></div>
  72. <div>
  73. <div class="typeText">排涝调度次数</div>
  74. <div class="name dbldName">{{PLZSData?.dispatchNum||0}}次</div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <!-- 启动应急响应弹框 -->
  80. <el-dialog
  81. title="发布响应"
  82. style="height:670px"
  83. append-to-body
  84. modal-class="pmpSitNewDialog"
  85. v-model="floodDialogRelease"
  86. v-if="floodDialogRelease"
  87. width="1200px"
  88. :before-close="floodReleaseClose"
  89. >
  90. <FloodReleaseForm @floodReleaseClose="floodReleaseClose" :fxType="1" :fxLeve="3" />
  91. </el-dialog>
  92. </div>
  93. </template>
  94. <script setup nama="Beonduty">
  95. import { ref, reactive, onMounted } from 'vue';
  96. import EachModuleTitle from '@/views/pictureOnMap/page/components/EachModuleTitle.vue';
  97. import FloodReleaseForm from './FloodReleaseForm/index.vue';
  98. import {
  99. drainageDispatchGetDutyCount,drainageDispatchGetFbTodayDutyUserShift,drainageDispatchGetWatchCount,getResponseRecommend
  100. } from '@/api/FloodControlAndDrainage.js';
  101. import bus from "@/bus";
  102.  
  103. const { proxy } = getCurrentInstance();
  104. const tabData = [
  105. { label: '防汛值班(2/2)', value: '1' },
  106. { label: '泵站值班(10/10)', value: '2' },
  107. { label: '排涝车辆(10/18)', value: '3' },
  108. ];
  109. const tabActive = ref(1);
  110. const tabClickFun = item => {
  111. tabActive.value = item.value;
  112. };
  113. const floodDialogRelease=ref(false)
  114. const startEmergencyResponse=()=>{
  115. floodDialogRelease.value=true
  116.  
  117. }
  118. function floodReleaseClose(){
  119. floodDialogRelease.value=false
  120. }
  121. // 获取数据
  122. const loading1=ref(false)
  123. const loading2=ref(false)
  124. const loading3=ref(false)
  125. const ZBTJData=ref(null) //值班统计
  126. const JRZBData=ref(null) //今日防汛值班
  127. const PLZSData=ref(null) //排涝值守
  128. function gitDataFunZBTJ() {
  129. loading1.value=true
  130. drainageDispatchGetDutyCount().then(res => {
  131. console.log('获取值班统计', res);
  132. loading1.value=false
  133. if (res && res.code == 200) {
  134. ZBTJData.value=res.data
  135. }
  136. },(error)=>{
  137. loading1.value=false
  138. });
  139. }
  140. const jrzbText=ref([])
  141. const zbldText=ref([])
  142. function gitDataFunJRZB() {
  143. loading2.value=true
  144. drainageDispatchGetFbTodayDutyUserShift().then(res => {
  145. console.log('获取今日防汛值班', res);
  146. loading2.value=false
  147. if (res && res.code == 200) {
  148. JRZBData.value=res.data
  149. let jrzb=JRZBData.value[0]?.dutyUserList
  150. let zbld=JRZBData.value[1]?.dutyUserList
  151. if(jrzb?.length>0){
  152. jrzb.map((e)=>{
  153. let obj={
  154. name:e.dutyUserName,
  155. phone:e.dutyUserPhone,
  156. }
  157. jrzbText.value.push(obj)
  158. })
  159. }
  160. if(zbld?.length>0){
  161. zbld.map((e)=>{
  162. let obj={
  163. name:e.dutyUserName,
  164. phone:e.dutyUserPhone,
  165. }
  166. zbldText.value.push(obj)
  167. })
  168. }
  169. }
  170. },(error)=>{
  171. loading2.value=false
  172. });
  173. }
  174. function gitDataFunPLZS() {
  175. loading3.value=true
  176. drainageDispatchGetWatchCount().then(res => {
  177. console.log('获取排涝值守', res);
  178. loading3.value=false
  179. if (res && res.code == 200) {
  180. PLZSData.value=res.data
  181. }
  182. },(error)=>{
  183. loading3.value=false
  184. });
  185. }
  186. const yjtj=ref(null)
  187. // 获取预警推荐等级
  188. function gitDataFunYJTJ() {
  189. getResponseRecommend().then(res => {
  190. console.log('获取警情建议', res);
  191. if (res && res.code == 200) {
  192. yjtj.value=res.data
  193. }
  194. },(error)=>{
  195. });
  196. }
  197. onMounted(() => {
  198. gitDataFunZBTJ()
  199. gitDataFunJRZB()
  200. gitDataFunPLZS()
  201. gitDataFunYJTJ()
  202. });
  203. onMounted(() => {});
  204. </script>
  205. <style lang="scss" scoped>
  206. .Beonduty {
  207. .dutyBox {
  208. background: linear-gradient(0deg, #00134f 0%, #003065 100%);
  209. border-radius: 6px;
  210. border: 1px solid #163f80;
  211. display: flex;
  212. height: 100px;
  213. margin-top: 8px;
  214. .text {
  215. width: 50px;
  216. height: 100%;
  217. background: linear-gradient(0deg, rgba(0, 98, 183, 0.9) 0%, rgba(0, 98, 183, 0.3) 100%);
  218. border-radius: 6px;
  219. writing-mode: vertical-rl;
  220. text-align: center;
  221. padding-right: 14px;
  222. font-weight: bold;
  223. font-size: 16px;
  224. color: #ffffff;
  225. }
  226. .showDuty {
  227. display: flex;
  228. flex: 1;
  229. justify-content: space-around;
  230. align-items: center;
  231. .eachdutyInfo {
  232. display: flex;
  233. font-weight: 500;
  234. font-size: 14px;
  235. color: #CCDFFF;
  236. }
  237. .imgBox {
  238. width: 90px;
  239. height: 84px;
  240. }
  241. .jrzbimg {
  242. background: url('@/assets/images/pictureOnMap/jrzb.png') no-repeat center;
  243. background-size: 100% 100%;
  244. }
  245. .dbldimg {
  246. background: url('@/assets/images/pictureOnMap/dbld.png') no-repeat center;
  247. background-size: 100% 100%;
  248. }
  249. .jrxcimg {
  250. background: url('@/assets/images/pictureOnMap/jrxc.png') no-repeat center;
  251. background-size: 100% 100%;
  252. }
  253. .plddimg {
  254. background: url('@/assets/images/pictureOnMap/pldd.png') no-repeat center;
  255. background-size: 100% 100%;
  256. }
  257. .typeText {
  258. width: 95px;
  259. padding-top: 10px;
  260. padding-bottom: 5px;
  261. }
  262. .name {
  263. font-weight: bold;
  264. font-size: 16px;
  265. line-height: 25px;
  266. }
  267. .jrzbName {
  268. color: #2cb7ff;
  269. }
  270. .dbldName {
  271. color: #00FCFF;
  272. }
  273. }
  274. }
  275. .typeList {
  276. .tab {
  277. cursor: auto;
  278. }
  279. }
  280. }
  281. </style>