123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294 |
- <template>
- <div class="layout-pd">
- <el-row>
- <el-col :xs="24">
- <el-card style="height: 86vh" class="mt8 my-fill all-con" shadow="hover">
- <div class="tip-con">
- <el-alert
- title="加油机长时间离线"
- type="error"
- class="mb15"
- ></el-alert>
- </div>
- <div class="ma-con">
- <div class="top-con" id="top-conId" v-loading="oilListData.loading">
- <el-scrollbar>
- <div class="scrollbar-flex-content" >
- <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" >
- <div class="info-con">
- <span>{{item.oilEngineName}}
- <span :style="{color:item.oilEngineStatus === '在线' ? '#67C23A' : '#F56C6C'}">
- {{item.oilEngineStatus}}
- </span>
- </span>
- <span >{{item.oilSpecifications}}</span>
- </div>
- <div class="info-con">
- <span>油品: {{item.oils}}</span>
- <span>自锁状态:
- <span :style="{color:item.selfLockingState === '已启动' ? '#67C23A' : '#F56C6C'}">{{item.selfLockingState}}</span>
- </span>
- </div>
- <div class="info-con">
- <span>ESQS编码: {{item.ECQSCode}}</span>
- </div>
- </div>
- </div>
- </el-scrollbar>
- </div>
- <div class="bom-con">
- <div class="bomCon-lef">3D</div>
- <div class="bomCon-rig">
- <div class="bomConR-lef">
- <el-card v-loading="detailsData.loading" style="height:100%;" :header="detailsData.list.oilEngineName+'号机油机'">
- <div class="oilInfo-con" >
- <div class="oilInfo-item">出厂编号: {{detailsData.list.factoryNumber}}</div>
- <div class="oilInfo-item">机型: {{detailsData.list.model}}</div>
- <div class="oilInfo-item">制造商: {{detailsData.list.manufacture}}</div>
- <div class="oilInfo-item oilInfo-item-two">
- <span>规格参数: {{detailsData.list.specifications}}</span>
- <span>生产日期: {{detailsData.list.dateOfManufacture}}</span>
- </div>
- <div class="oilInfo-item oilInfo-item-two">
- <span>测量范围: {{detailsData.list.measuringRange}}</span>
- <span>安装日期: {{detailsData.list.installDate}}</span>
- </div>
- <div class="oilInfo-item oilInfo-item-two">
- <span>准确度等级: {{detailsData.list.accuracyLevel}}</span>
- <span>启用日期: {{detailsData.list.dateOfActivation}}</span>
- </div>
- <div class="oilInfo-item oilInfo-item-two">
- <span>设备状态: {{detailsData.list.equipmentStatus}}</span>
- <span>在线状态: {{detailsData.list.onlineStatus}}</span>
- </div>
- <div class="oilInfo-item oilInfo-item-two">
- <span>报警状态: {{detailsData.list.alarmStatus}}</span>
- <span>报警次数: {{detailsData.list.numberOfAlarms}}</span>
- </div>
- <div class="oilInfo-item oilInfo-item-two">
- <span>累计在线时间: {{detailsData.list.accumulatedOnline}}</span>
- </div>
- </div>
- </el-card>
- </div>
- <div class="bomConR-rig">
- <el-card v-loading="tableData.loading" style="height:100%" >
- <el-table :data="tableData.list" stripe row-key="id" style="width: 100%">
- <el-table-column prop="time" label="时间" />
- <el-table-column prop="refuelingGun" label="加油枪" />
- <el-table-column prop="alarmSource" label="报警来源" />
- <el-table-column prop="alarmDescription" label="报警描述" />
- <el-table-column prop="alarmType" label="报警类型" />
- </el-table>
- </el-card>
- </div>
- </div>
- </div>
- </div>
- </el-card>
- </el-col>
- </el-row>
- </div>
- </template>
- <script setup lang="ts">
- import {onMounted, reactive, ref, watch} from "vue";
- import {
- moreOilEngineDetails_DetailsData, moreOilEngineDetails_OilListData,
- moreOilEngineDetails_TableData
- } from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsDto";
- import {MoreOilEngineDetailsApi} from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsApi";
- /******************************数据对象***************************************/
- /**
- * 表格数据对象
- */
- const tableData = reactive({
- loading: false,
- list: [] as Array<moreOilEngineDetails_TableData>
- })
- /**
- * 油机详情数据对象
- */
- const detailsData = reactive({
- loading: false,
- list: {} as moreOilEngineDetails_DetailsData
- })
- /**
- * 油机列表详情数据对象
- */
- const oilListData = reactive({
- loading: false,
- list: [] as Array<moreOilEngineDetails_OilListData>
- })
- /**
- * 油机列表初始ID
- */
- const initID = ref()
- /******************************数据对象***************************************/
- /*******************************方法**************************************/
- /**
- * 变换时改样式
- * @param event
- * @param item
- */
- const onCardChange = (event, item) => {
- // console.log(event)
- // console.log(item);
- let ele = event.target
- if( ele.getAttribute('name') !== 'card') {
- ele = ele.closest('.card')
- }
- if(ele.classList.contains("active-card")) return
- initID.value = item.oilEngineName
- const parentElement = document.getElementById('top-conId')
- const myElement = parentElement.querySelector('.active-card')
- if(myElement){
- myElement.classList.remove('active-card')
- }
- ele.classList.add("active-card")
- }
- watch(() => initID.value, ()=>{
- initTableData()
- initDetailsData()
- })
- /*******************************方法**************************************/
- /**********************************初始化***********************************/
- /**
- * 初始化油机列表详情数据对象
- */
- const initOilListData = async () => {
- oilListData.loading = true
- const { data } = await new MoreOilEngineDetailsApi().getOilListData()
- oilListData.list = data
- initID.value = data[0].oilEngineName
- oilListData.loading = false
- }
- /**
- * 初始化表格数据对象
- */
- const initTableData = async () => {
- tableData.loading = true
- const { data } = await new MoreOilEngineDetailsApi().getTableData()
- tableData.list = data
- tableData.loading = false
- }
- /**
- * 初始化油机详情数据对象
- */
- const initDetailsData = async () => {
- detailsData.loading = true
- const { data } = await new MoreOilEngineDetailsApi().getDetailsData()
- detailsData.list = data
- detailsData.loading = false
- }
- const init = () => {
- initOilListData()
- }
- onMounted(() => {
- init()
- })
- /**********************************初始化***********************************/
- </script>
- <style scoped lang="scss">
- .all-con {
- .ma-con {
- height: 100%;
- .top-con {
- height: 18%;
- .scrollbar-flex-content {
- display: flex;
- height: 100%;
- }
- .card {
- flex-shrink: 0;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- padding: 10px;
- width: 240px;
- margin: 14px;
- border-radius: 4px;
- box-shadow: var(--el-box-shadow-light);
- cursor: pointer;
- font-size: 12px;
- font-weight: 600;
- .info-con {
- display: flex;
- justify-content: space-between;
- }
- }
- .active-card {
- background-color: #9fcaf3;
- }
- }
- .bom-con {
- display: flex;
- height: 82%;
- .bomCon-lef {
- width: 24%;
- }
- .bomCon-rig {
- display: flex;
- width: 80%;
- .bomConR-lef {
- width: 50%;
- .oilInfo-con {
- .oilInfo-item {
- margin-bottom: 25px;
- }
- .oilInfo-item-two > span {
- display: inline-block;
- width: 50%;
- }
- }
- }
- .bomConR-rig {
- width: 50%;
- }
- .bomConR-lef, .bomConR-rig {
- padding: 20px;
- }
- }
- }
- }
- }
- </style>
|