Newer
Older
KaiFengPC / src / views / dataAnalysis / syntheticData / equipLeft.vue
@zhangdeliang zhangdeliang on 16 Oct 8 KB update
  1. <template>
  2. <!-- 综合分析左侧列表 -->
  3. <div class="equipLeftPage">
  4. <div class="equipTotal">
  5. <div class="title"><img src="@/assets/images/monitor/jcsb_icon.png" alt="监测设备" />监测状态统计</div>
  6. <template v-if="statusData.length > 0">
  7. <div class="total" v-for="(item, index) in statusData" :key="index">
  8. <p>
  9. {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }}
  10. </p>
  11. <p><img src="@/assets/images/monitor/online_icon.png" alt="在线" title="在线" />{{ item.onlineCount }}</p>
  12. <p><img src="@/assets/images/monitor/outline_icon.png" alt="离线" title="离线" />{{ item.offlineCount }}</p>
  13. <p><img src="@/assets/images/monitor/error_icon.png" alt="故障" title="故障" />{{ item.faultCount }}</p>
  14. </div>
  15. </template>
  16. <!-- 暂无数据 -->
  17. <el-empty :image-size="30" v-if="statusData.length == 0" style="padding: 5px" />
  18. </div>
  19.  
  20. <!-- 搜索 -->
  21. <div class="search">
  22. <el-select v-model="stationCode" filterable clearable placeholder="选择监测站点" @change="searchData">
  23. <el-option v-for="item in stationList" :key="item.value" :label="item.stName" :value="item.stCode" />
  24. </el-select>
  25. </div>
  26. <!-- 站点列表 -->
  27. <div class="station" v-if="stationList.length > 0" v-loading="loadingList">
  28. <div
  29. :class="['part', checkedCode == item.stCode ? 'checkedActive' : '']"
  30. v-for="(item, index) in stationList"
  31. :key="index"
  32. @click="checkStation(item)"
  33. >
  34. <div class="title" :title="item.stName">
  35. <span>{{ item.stName }}</span>
  36. </div>
  37. <div class="cont">
  38. <p>
  39. <span class="status">站点状态</span>
  40. <span class="success" v-if="item.onlineStatus == 'online'">在线</span>
  41. <span class="fail" v-if="item.onlineStatus == 'offline'">离线</span>
  42. <img
  43. src="@/assets/images/monitor/yw_btn.png"
  44. title="运维派单"
  45. @click.stop="checkOrder(item)"
  46. v-if="item.onlineStatus == 'offline'"
  47. />
  48. </p>
  49. <p>
  50. <span class="status">数据状态</span>
  51. <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
  52. {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
  53. </span>
  54. <img
  55. src="@/assets/images/monitor/sj_btn.png"
  56. title="故障及离线设备分析"
  57. @click.stop="checkFault(item)"
  58. v-if="item.faultStatus == 'offline'"
  59. />
  60. <img
  61. src="@/assets/images/monitor/sj_btn.png"
  62. title="数据异常分析"
  63. @click.stop="checkError(item)"
  64. v-if="item.faultStatus == 'exception'"
  65. />
  66. </p>
  67. <p>
  68. <span style="margin-right: 15px">建设方式</span>
  69. <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
  70. {{ item.buildType == 'owner' ? '新建' : '共享' }}
  71. </span>
  72. </p>
  73. <p>
  74. <span style="margin-right: 15px">监测类型</span>
  75. <span>
  76. {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }}
  77. </span>
  78. </p>
  79. <p>
  80. <span style="margin-right: 15px">最后通讯</span>
  81. <span style="font-weight: bold">{{ item.tt }}</span>
  82. <!-- videoFlag 0否 1是-->
  83. <img src="@/assets/images/monitor/video_btn.png" title="站点视频" @click.stop="checkVideo(item)" v-if="item.videoFlag == 1" />
  84. </p>
  85. </div>
  86. </div>
  87. </div>
  88. <!-- 暂无数据 -->
  89. <el-empty :image-size="100" v-if="stationList.length == 0" />
  90. </div>
  91. </template>
  92. <script setup name="equipLeftPage">
  93. import { getStationList, rtuSiteTypeStatusCount } from '@/api/dataAnalysis/syntherticData';
  94. import bus from '@/utils/mitt';
  95.  
  96. const { proxy } = getCurrentInstance();
  97. const emit = defineEmits(['getDialogData']);
  98. const props = defineProps({
  99. monitorTargetType: String,
  100. });
  101. // 变量声明
  102. const stationCode = ref('');
  103. const stationList = ref([]);
  104. const faultList = ref([
  105. { value: 'normal', label: '正常' },
  106. { value: 'low_battery', label: '低电压' },
  107. { value: 'low_signal', label: '低信号' },
  108. { value: 'exception', label: '异常值' },
  109. { value: 'offline', label: '离线' },
  110. ]);
  111. const loadingList = ref(true);
  112. const checkedCode = ref('');
  113. const statusData = ref([]);
  114.  
  115. //获取站点数据
  116. const getStationData = async stCode => {
  117. loadingList.value = true;
  118. let params = {
  119. monitorTargetType: props.monitorTargetType == 'total' ? '' : props.monitorTargetType,
  120. stCode: stCode,
  121. orderBy: 'tt desc',
  122. };
  123. let res = await getStationList(params);
  124. if (res && res.code == 200) {
  125. let datas = res.data;
  126. stationList.value = datas || [];
  127. if (datas.length > 0) {
  128. checkStation(datas[0]); //有数据时默认点击第一个
  129. } else {
  130. bus.emit('leftStationClick', { id: '', stCode: '' }); //给右侧传相应值
  131. }
  132. }
  133. loadingList.value = false;
  134. };
  135. // 按名称搜索
  136. function searchData() {
  137. getStationData(stationCode.value);
  138. }
  139. // 点击站点
  140. function checkStation(row) {
  141. checkedCode.value = row.stCode;
  142. bus.emit('leftStationClick', { id: row.id, stCode: row.stCode }); //给右侧传相应值
  143. }
  144. // 获取状态统计
  145. function getStatusType() {
  146. let types = props.monitorTargetType == 'total' ? '' : props.monitorTargetType;
  147. rtuSiteTypeStatusCount({ monitorTargetType: types }).then(res => {
  148. statusData.value = res.data;
  149. });
  150. }
  151. // 故障及离线设备分析
  152. function checkFault(row) {
  153. emit('getDialogData', {
  154. name: '故障及离线设备分析',
  155. type: 'dialogFault',
  156. obj: row,
  157. });
  158. }
  159. // 数据异常分析
  160. function checkError(row) {
  161. emit('getDialogData', {
  162. name: '数据异常分析',
  163. type: 'dialogSjyc',
  164. obj: row,
  165. });
  166. }
  167. // 站点视频
  168. function checkVideo(row) {
  169. emit('getDialogData', {
  170. name: '视频监控点',
  171. type: 'dialogVideo',
  172. obj: row,
  173. });
  174. }
  175. // 运维派单
  176. function checkOrder(row) {
  177. emit('getDialogData', {
  178. name: '运维派单',
  179. type: 'dialogOrder',
  180. obj: row,
  181. });
  182. }
  183. // 初始化
  184. onMounted(() => {
  185. getStatusType(); //获取状态数据
  186. getStationData(''); //获取列表
  187. });
  188. watch(
  189. () => props.monitorTargetType,
  190. value => {
  191. // console.log('左侧站点列表--', value);
  192. getStationData('');
  193. }
  194. );
  195. // 页面销毁
  196. onBeforeUnmount(() => {});
  197. </script>
  198. <style lang="scss" scoped>
  199. @import '@/assets/styles/variables.module.scss';
  200. .equipLeftPage {
  201. padding: 10px;
  202. position: relative;
  203. .equipTotal {
  204. background: $mainColor1;
  205. box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
  206. border-radius: 6px;
  207. padding: 10px;
  208. height: 123px;
  209. overflow: auto;
  210. .title {
  211. display: flex;
  212. align-items: center;
  213. font-size: 15px;
  214. margin-bottom: 5px;
  215. img {
  216. margin-right: 10px;
  217. }
  218. }
  219. .total {
  220. display: flex;
  221. align-items: center;
  222. justify-content: space-around;
  223. font-size: 14px;
  224. height: 26px;
  225. p {
  226. width: 32%;
  227. padding-left: 8px;
  228. img {
  229. position: relative;
  230. top: 2px;
  231. margin-right: 4px;
  232. }
  233. }
  234. }
  235. }
  236. .search {
  237. margin: 0px auto 10px auto;
  238. .el-select {
  239. width: 100%;
  240. }
  241. }
  242. .station {
  243. height: calc(100vh - 340px);
  244. overflow: auto;
  245.  
  246. .part {
  247. background: $mainBg;
  248. box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
  249. border-radius: 6px;
  250. padding: 10px;
  251. margin-bottom: 5px;
  252. cursor: pointer;
  253. img {
  254. float: right;
  255. cursor: pointer;
  256. width: 22px;
  257. height: 22px;
  258. }
  259. .title {
  260. font-weight: bold;
  261. color: #00d1ff;
  262. font-size: 16px;
  263. overflow: hidden;
  264. white-space: nowrap;
  265. text-overflow: ellipsis;
  266. }
  267. .cont {
  268. margin-bottom: 0px;
  269. padding-bottom: 5px;
  270. p {
  271. font-weight: 500;
  272. color: #c6c6c6;
  273. font-size: 15px;
  274. margin-bottom: 0px;
  275. height: 13px;
  276. .status {
  277. margin-right: 15px;
  278. }
  279. .success {
  280. color: #24de8d;
  281. font-weight: bold;
  282. }
  283. .fail {
  284. color: #f85050;
  285. font-weight: bold;
  286. }
  287. .outline {
  288. color: #999999;
  289. font-weight: bold;
  290. }
  291. .yellow {
  292. color: #faff00;
  293. }
  294. }
  295. }
  296. }
  297. .checkedActive {
  298. border: 1px solid $mainColor2;
  299. background: $mainColor2;
  300. }
  301. }
  302. }
  303. </style>