index.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <template>
  2. <div class="layout-pd">
  3. <el-row>
  4. <el-col :xs="24">
  5. <el-card style="height: 86vh" class="mt8 my-fill all-con" shadow="hover">
  6. <div class="tip-con">
  7. <el-alert
  8. title="加油机长时间离线"
  9. type="error"
  10. class="mb15"
  11. ></el-alert>
  12. </div>
  13. <div class="ma-con">
  14. <div class="top-con" id="top-conId" v-loading="oilListData.loading">
  15. <el-scrollbar>
  16. <div class="scrollbar-flex-content" >
  17. <div :class="{'card':true,'active-card':index === 0} " name="card" @click="onCardChange($event,item)" v-for="(item,index) in oilListData.list" v-bind:key="index" >
  18. <div class="info-con">
  19. <span>{{item.oilEngineName}}&nbsp;&nbsp;
  20. <span :style="{color:item.oilEngineStatus === '在线' ? '#67C23A' : '#F56C6C'}">
  21. {{item.oilEngineStatus}}
  22. </span>
  23. </span>
  24. <span >{{item.oilSpecifications}}</span>
  25. </div>
  26. <div class="info-con">
  27. <span>油品:&nbsp;{{item.oils}}</span>
  28. <span>自锁状态:&nbsp;
  29. <span :style="{color:item.selfLockingState === '已启动' ? '#67C23A' : '#F56C6C'}">{{item.selfLockingState}}</span>
  30. </span>
  31. </div>
  32. <div class="info-con">
  33. <span>ESQS编码:&nbsp;{{item.ECQSCode}}</span>
  34. </div>
  35. </div>
  36. </div>
  37. </el-scrollbar>
  38. </div>
  39. <div class="bom-con">
  40. <div class="bomCon-lef">3D</div>
  41. <div class="bomCon-rig">
  42. <div class="bomConR-lef">
  43. <el-card v-loading="detailsData.loading" style="height:100%;" :header="detailsData.list.oilEngineName+'号机油机'">
  44. <div class="oilInfo-con" >
  45. <div class="oilInfo-item">出厂编号:&nbsp;{{detailsData.list.factoryNumber}}</div>
  46. <div class="oilInfo-item">机型:&nbsp;{{detailsData.list.model}}</div>
  47. <div class="oilInfo-item">制造商:&nbsp;{{detailsData.list.manufacture}}</div>
  48. <div class="oilInfo-item oilInfo-item-two">
  49. <span>规格参数:&nbsp;{{detailsData.list.specifications}}</span>
  50. <span>生产日期:&nbsp;{{detailsData.list.dateOfManufacture}}</span>
  51. </div>
  52. <div class="oilInfo-item oilInfo-item-two">
  53. <span>测量范围:&nbsp;{{detailsData.list.measuringRange}}</span>
  54. <span>安装日期:&nbsp;{{detailsData.list.installDate}}</span>
  55. </div>
  56. <div class="oilInfo-item oilInfo-item-two">
  57. <span>准确度等级:&nbsp;{{detailsData.list.accuracyLevel}}</span>
  58. <span>启用日期:&nbsp;{{detailsData.list.dateOfActivation}}</span>
  59. </div>
  60. <div class="oilInfo-item oilInfo-item-two">
  61. <span>设备状态:&nbsp;{{detailsData.list.equipmentStatus}}</span>
  62. <span>在线状态:&nbsp;{{detailsData.list.onlineStatus}}</span>
  63. </div>
  64. <div class="oilInfo-item oilInfo-item-two">
  65. <span>报警状态:&nbsp;{{detailsData.list.alarmStatus}}</span>
  66. <span>报警次数:&nbsp;{{detailsData.list.numberOfAlarms}}</span>
  67. </div>
  68. <div class="oilInfo-item oilInfo-item-two">
  69. <span>累计在线时间:&nbsp;{{detailsData.list.accumulatedOnline}}</span>
  70. </div>
  71. </div>
  72. </el-card>
  73. </div>
  74. <div class="bomConR-rig">
  75. <el-card v-loading="tableData.loading" style="height:100%" >
  76. <el-table :data="tableData.list" stripe row-key="id" style="width: 100%">
  77. <el-table-column prop="time" label="时间" />
  78. <el-table-column prop="refuelingGun" label="加油枪" />
  79. <el-table-column prop="alarmSource" label="报警来源" />
  80. <el-table-column prop="alarmDescription" label="报警描述" />
  81. <el-table-column prop="alarmType" label="报警类型" />
  82. </el-table>
  83. </el-card>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </el-card>
  89. </el-col>
  90. </el-row>
  91. </div>
  92. </template>
  93. <script setup lang="ts">
  94. import {onMounted, reactive, ref, watch} from "vue";
  95. import {
  96. moreOilEngineDetails_DetailsData, moreOilEngineDetails_OilListData,
  97. moreOilEngineDetails_TableData
  98. } from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsDto";
  99. import {MoreOilEngineDetailsApi} from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsApi";
  100. /******************************数据对象***************************************/
  101. /**
  102. * 表格数据对象
  103. */
  104. const tableData = reactive({
  105. loading: false,
  106. list: [] as Array<moreOilEngineDetails_TableData>
  107. })
  108. /**
  109. * 油机详情数据对象
  110. */
  111. const detailsData = reactive({
  112. loading: false,
  113. list: {} as moreOilEngineDetails_DetailsData
  114. })
  115. /**
  116. * 油机列表详情数据对象
  117. */
  118. const oilListData = reactive({
  119. loading: false,
  120. list: [] as Array<moreOilEngineDetails_OilListData>
  121. })
  122. /**
  123. * 油机列表初始ID
  124. */
  125. const initID = ref()
  126. /******************************数据对象***************************************/
  127. /*******************************方法**************************************/
  128. /**
  129. * 变换时改样式
  130. * @param event
  131. * @param item
  132. */
  133. const onCardChange = (event, item) => {
  134. // console.log(event)
  135. // console.log(item);
  136. let ele = event.target
  137. if( ele.getAttribute('name') !== 'card') {
  138. ele = ele.closest('.card')
  139. }
  140. if(ele.classList.contains("active-card")) return
  141. initID.value = item.oilEngineName
  142. const parentElement = document.getElementById('top-conId')
  143. const myElement = parentElement.querySelector('.active-card')
  144. if(myElement){
  145. myElement.classList.remove('active-card')
  146. }
  147. ele.classList.add("active-card")
  148. }
  149. watch(() => initID.value, ()=>{
  150. initTableData()
  151. initDetailsData()
  152. })
  153. /*******************************方法**************************************/
  154. /**********************************初始化***********************************/
  155. /**
  156. * 初始化油机列表详情数据对象
  157. */
  158. const initOilListData = async () => {
  159. oilListData.loading = true
  160. const { data } = await new MoreOilEngineDetailsApi().getOilListData()
  161. oilListData.list = data
  162. initID.value = data[0].oilEngineName
  163. oilListData.loading = false
  164. }
  165. /**
  166. * 初始化表格数据对象
  167. */
  168. const initTableData = async () => {
  169. tableData.loading = true
  170. const { data } = await new MoreOilEngineDetailsApi().getTableData()
  171. tableData.list = data
  172. tableData.loading = false
  173. }
  174. /**
  175. * 初始化油机详情数据对象
  176. */
  177. const initDetailsData = async () => {
  178. detailsData.loading = true
  179. const { data } = await new MoreOilEngineDetailsApi().getDetailsData()
  180. detailsData.list = data
  181. detailsData.loading = false
  182. }
  183. const init = () => {
  184. initOilListData()
  185. }
  186. onMounted(() => {
  187. init()
  188. })
  189. /**********************************初始化***********************************/
  190. </script>
  191. <style scoped lang="scss">
  192. .all-con {
  193. .ma-con {
  194. height: 100%;
  195. .top-con {
  196. height: 18%;
  197. .scrollbar-flex-content {
  198. display: flex;
  199. height: 100%;
  200. }
  201. .card {
  202. flex-shrink: 0;
  203. display: flex;
  204. flex-direction: column;
  205. justify-content: space-around;
  206. padding: 10px;
  207. width: 240px;
  208. margin: 14px;
  209. border-radius: 4px;
  210. box-shadow: var(--el-box-shadow-light);
  211. cursor: pointer;
  212. font-size: 12px;
  213. font-weight: 600;
  214. .info-con {
  215. display: flex;
  216. justify-content: space-between;
  217. }
  218. }
  219. .active-card {
  220. background-color: #9fcaf3;
  221. }
  222. }
  223. .bom-con {
  224. display: flex;
  225. height: 82%;
  226. .bomCon-lef {
  227. width: 24%;
  228. }
  229. .bomCon-rig {
  230. display: flex;
  231. width: 80%;
  232. .bomConR-lef {
  233. width: 50%;
  234. .oilInfo-con {
  235. .oilInfo-item {
  236. margin-bottom: 25px;
  237. }
  238. .oilInfo-item-two > span {
  239. display: inline-block;
  240. width: 50%;
  241. }
  242. }
  243. }
  244. .bomConR-rig {
  245. width: 50%;
  246. }
  247. .bomConR-lef, .bomConR-rig {
  248. padding: 20px;
  249. }
  250. }
  251. }
  252. }
  253. }
  254. </style>