|
|
@@ -6,23 +6,26 @@
|
|
|
<div class="left">
|
|
|
<div class="left_top" v-loading="loading">
|
|
|
<div class="video" ref="myVideoRef" id="video-container" v-if="videoDataState"></div>
|
|
|
- <div v-if="!videoDataState" style="width: 100%;height: 100%; display: flex;flex-direction: column; justify-content: center;align-items: center;">
|
|
|
+ <div v-if="!videoDataState"
|
|
|
+ style="width: 100%;height: 100%; display: flex;flex-direction: column; justify-content: center;align-items: center;">
|
|
|
<img style="width: 262px;height: 101px;" src="../../assets/img/video_miss.png" alt="">
|
|
|
<span style="font-size: 18px;color: #4F80F8;margin-top: 20px;">视频未接入</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="left_bottom">
|
|
|
- <span style="margin-left: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;">
|
|
|
+ <span
|
|
|
+ style="margin-left: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;">
|
|
|
大车机构
|
|
|
</span>
|
|
|
- <div style="display: flex;padding:30px 40px;margin-top: 30px;align-items: center;border-bottom: 1px solid #306AF7;justify-content: space-between;">
|
|
|
+ <div
|
|
|
+ style="display: flex;padding:30px 40px;margin-top: 30px;align-items: center;border-bottom: 1px solid #306AF7;justify-content: space-between;">
|
|
|
<div style="display: flex;flex-direction: column;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
|
|
|
大车行程
|
|
|
</span>
|
|
|
<div style="margin-top: 5px;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
|
|
|
- {{ craneStrokeData.value != null ? craneStrokeData.value : 0}}
|
|
|
+ {{ craneStrokeData.value != null ? craneStrokeData.value : 0 }}
|
|
|
</span>
|
|
|
<span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
|
|
|
m
|
|
|
@@ -35,7 +38,8 @@
|
|
|
挡位
|
|
|
</span>
|
|
|
</div>
|
|
|
- <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
|
|
|
+ <div
|
|
|
+ style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
|
|
|
{{ formatGears(craneGearData) }}
|
|
|
</span>
|
|
|
@@ -48,9 +52,10 @@
|
|
|
制动器
|
|
|
</span>
|
|
|
</div>
|
|
|
- <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
|
|
|
+ <div
|
|
|
+ style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
|
|
|
- {{ craneBrakeData.value!=null ? craneBrakeData.value : '未知' }}
|
|
|
+ {{ craneBrakeData.value != null ? craneBrakeData.value : '未知' }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -62,18 +67,19 @@
|
|
|
</span>
|
|
|
<div style="margin-top: 5px;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
|
|
|
- {{ craneFrequencyData.value != null ? craneFrequencyData.value : '0.00'}}
|
|
|
+ {{ craneFrequencyData.value != null ? craneFrequencyData.value : '0.00' }}
|
|
|
</span>
|
|
|
<span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
|
|
|
Hz
|
|
|
</span>
|
|
|
</div>
|
|
|
- <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;margin-top: 15px;">
|
|
|
+ <span
|
|
|
+ style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;margin-top: 15px;">
|
|
|
电流
|
|
|
</span>
|
|
|
<div style="margin-top: 5px;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
|
|
|
- {{craneCurrentData.value != null ? craneCurrentData.value : '0.00'}}
|
|
|
+ {{ craneCurrentData.value != null ? craneCurrentData.value : '0.00' }}
|
|
|
</span>
|
|
|
<span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
|
|
|
A
|
|
|
@@ -84,7 +90,8 @@
|
|
|
<el-carousel indicator-position="outside" :height="'204px'" :interval="10000" style="margin-top: 30px">
|
|
|
<el-carousel-item v-for="(group, index) in craneSwitchVariablesData" :key="index">
|
|
|
<div class="left_bottom_grid">
|
|
|
- <div v-for="item in group" :key="item.id" :class="['left_bottom_grid_item', item.value ? item.trueLight : item.falseLight]">
|
|
|
+ <div v-for="item in group" :key="item.id"
|
|
|
+ :class="['left_bottom_grid_item', item.value ? item.trueLight : item.falseLight]">
|
|
|
<span>{{ formatStr(item.variableName) }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -96,7 +103,8 @@
|
|
|
<div class="middle_top"></div>
|
|
|
<div class="middle_bottom">
|
|
|
<div style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
|
|
|
- <div style="padding-left: 100px;padding-top: 4px;color: white;font-size: 18px;font-family: Alibaba-PuHuiTi-B;font-style: normal;text-transform: none;">
|
|
|
+ <div
|
|
|
+ style="padding-left: 100px;padding-top: 4px;color: white;font-size: 18px;font-family: Alibaba-PuHuiTi-B;font-style: normal;text-transform: none;">
|
|
|
起升机构
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -104,52 +112,54 @@
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
<!-- <img style="width: 41px;height: 234px;" src="../../assets/img/screen_middle_bottom_left.png"> -->
|
|
|
<div style="display: flex;flex-direction: column;margin-left: 20px;min-width: 130px;">
|
|
|
- <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
|
|
|
- 起升高度
|
|
|
- </span>
|
|
|
- <div style="margin-top: 5px;">
|
|
|
- <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
|
|
|
- {{ hoistStrokeData.value != null ? hoistStrokeData.value : 0}}
|
|
|
- </span>
|
|
|
- <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
|
|
|
- m
|
|
|
+ <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
|
|
|
+ 起升高度
|
|
|
</span>
|
|
|
- </div>
|
|
|
- <div style="display: flex;margin-top: 20px;flex-direction: column;">
|
|
|
- <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
|
|
|
- <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
|
|
|
- <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
|
|
|
- 挡位
|
|
|
+ <div style="margin-top: 5px;">
|
|
|
+ <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
|
|
|
+ {{ hoistStrokeData.value != null ? hoistStrokeData.value : 0 }}
|
|
|
</span>
|
|
|
- </div>
|
|
|
- <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
|
|
|
- <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
|
|
|
- {{ formatGears(hoistGearData) }}
|
|
|
+ <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
|
|
|
+ m
|
|
|
</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div style="display: flex;margin-top: 10px;flex-direction: column;">
|
|
|
- <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
|
|
|
- <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
|
|
|
- <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
|
|
|
- 制动器
|
|
|
- </span>
|
|
|
+ <div style="display: flex;margin-top: 20px;flex-direction: column;">
|
|
|
+ <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
|
|
|
+ <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
|
|
|
+ <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
|
|
|
+ 挡位
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
|
|
|
+ <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
|
|
|
+ {{ formatGears(hoistGearData) }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
|
|
|
- <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
|
|
|
- {{ hoistBrakeData.value!=null ? hoistBrakeData.value : '未知' }}
|
|
|
- </span>
|
|
|
+ <div style="display: flex;margin-top: 10px;flex-direction: column;">
|
|
|
+ <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
|
|
|
+ <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
|
|
|
+ <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
|
|
|
+ 制动器
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
|
|
|
+ <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
|
|
|
+ {{ hoistBrakeData.value != null ? hoistBrakeData.value : '未知' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
<div class="screen_middle_bottom_middle">
|
|
|
<div style="color: #ABC0E0;font-family: Alibaba-PuHuiTi-R;font-size: 16px;">
|
|
|
载荷
|
|
|
</div>
|
|
|
<div style="margin-top: 5px;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
|
|
|
- {{ hoistWeightData.value!=null ? hoistWeightData.value : '0.00' }}
|
|
|
+ {{ hoistWeightData.value != null ? hoistWeightData.value : '0.00' }}
|
|
|
</span>
|
|
|
<span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
|
|
|
t
|
|
|
@@ -159,15 +169,17 @@
|
|
|
<div style="margin-right: 20px;min-width: 390px;">
|
|
|
<div style="display: flex">
|
|
|
<div style="display: flex;">
|
|
|
- <div style="width: 47px;height: 28px;background-color: #294587;display: flex;align-items: center;justify-content: center;">
|
|
|
+ <div
|
|
|
+ style="width: 47px;height: 28px;background-color: #294587;display: flex;align-items: center;justify-content: center;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
|
|
|
频率
|
|
|
</span>
|
|
|
</div>
|
|
|
- <div style="width: 126px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;">
|
|
|
+ <div
|
|
|
+ style="width: 126px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;">
|
|
|
<div>
|
|
|
<span style="font-family: Alibaba-PuHuiTi-B;font-size: 24px;color: #4F80F8;margin-left: 9px;">
|
|
|
- {{ hoistFrequencyData.value != null ? hoistFrequencyData.value : '0.00'}}
|
|
|
+ {{ hoistFrequencyData.value != null ? hoistFrequencyData.value : '0.00' }}
|
|
|
</span>
|
|
|
<span style="font-family: Alibaba-PuHuiTi-B;font-size: 14px;color: #4F80F8;">
|
|
|
Hz
|
|
|
@@ -176,15 +188,17 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex;margin-left: 30px;">
|
|
|
- <div style="width: 47px;height: 28px;background-color: #294587;display: flex;align-items: center;justify-content: center;">
|
|
|
+ <div
|
|
|
+ style="width: 47px;height: 28px;background-color: #294587;display: flex;align-items: center;justify-content: center;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
|
|
|
电流
|
|
|
</span>
|
|
|
</div>
|
|
|
- <div style="width: 126px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;">
|
|
|
+ <div
|
|
|
+ style="width: 126px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;">
|
|
|
<div>
|
|
|
<span style="font-family: Alibaba-PuHuiTi-B;font-size: 24px;color: #4F80F8;margin-left: 9px;">
|
|
|
- {{ hoistCurrentData.value != null ? hoistCurrentData.value : '0.00'}}
|
|
|
+ {{ hoistCurrentData.value != null ? hoistCurrentData.value : '0.00' }}
|
|
|
</span>
|
|
|
<span style="font-family: Alibaba-PuHuiTi-B;font-size: 14px;color: #4F80F8;">
|
|
|
A
|
|
|
@@ -196,7 +210,8 @@
|
|
|
<el-carousel indicator-position="outside" :height="'180px'" :interval="10000" style="margin-top: 20px">
|
|
|
<el-carousel-item v-for="(group, index) in hoistSwitchVariablesData" :key="index">
|
|
|
<div class="middle_bottom_right_grid">
|
|
|
- <div v-for="item in group" :key="item.id" :class="['middle_bottom_right_grid_item', item.value ? item.trueLight : item.falseLight]">
|
|
|
+ <div v-for="item in group" :key="item.id"
|
|
|
+ :class="['middle_bottom_right_grid_item', item.value ? item.trueLight : item.falseLight]">
|
|
|
<span>{{ formatStr(item.variableName) }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -209,39 +224,39 @@
|
|
|
<div class="right">
|
|
|
<div class="right_top">
|
|
|
|
|
|
- <div style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
- <div style="display: flex;align-items: center;">
|
|
|
- <div style="width: 8px;height: 8px;background-color: #02803A;margin-right: 15px;" />
|
|
|
- <span style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
|
|
|
- 本次工作
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
|
|
|
- {{ currentDurationData.value != null ? currentDurationData.value : 0 }}
|
|
|
- </span>
|
|
|
+ <div style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <div style="width: 8px;height: 8px;background-color: #02803A;margin-right: 15px;" />
|
|
|
+ <span style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
|
|
|
+ 本次工作
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div style="display: flex;justify-content: space-between;align-items: center;border-top:0.5px solid #152844;">
|
|
|
- <div style="display: flex;align-items: center;">
|
|
|
- <div style="width: 8px;height: 8px;background-color: #306AF7;margin-right: 15px;" />
|
|
|
- <span style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
|
|
|
- 累计工作
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
|
|
|
- {{ totalDurationData.value != null ? totalDurationData.value : 0 }}
|
|
|
- </span>
|
|
|
+ <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
|
|
|
+ {{ currentDurationData.value != null ? currentDurationData.value : 0 }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;justify-content: space-between;align-items: center;border-top:0.5px solid #152844;">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <div style="width: 8px;height: 8px;background-color: #306AF7;margin-right: 15px;" />
|
|
|
+ <span style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
|
|
|
+ 累计工作
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div style="display: flex;justify-content: space-between;align-items: center;border-top:0.5px solid #152844;">
|
|
|
- <div style="display: flex;align-items: center;">
|
|
|
- <div style="width: 8px;height: 8px;background-color: #306AF7;margin-right: 15px;" />
|
|
|
- <span style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
|
|
|
- 工作循环
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
|
|
|
- {{ totalCountData.value != null ? totalCountData.value+' 次' : 0+' 次' }}
|
|
|
- </span>
|
|
|
+ <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
|
|
|
+ {{ totalDurationData.value != null ? totalDurationData.value : 0 }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;justify-content: space-between;align-items: center;border-top:0.5px solid #152844;">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <div style="width: 8px;height: 8px;background-color: #306AF7;margin-right: 15px;" />
|
|
|
+ <span style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
|
|
|
+ 工作循环
|
|
|
+ </span>
|
|
|
</div>
|
|
|
+ <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
|
|
|
+ {{ totalCountData.value != null ? totalCountData.value + ' 次' : 0 + ' 次' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="right_alert">
|
|
|
<el-carousel height="110px">
|
|
|
@@ -252,12 +267,13 @@
|
|
|
报警
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div style="font-size: 15px;color: white;font-family: Alibaba-PuHuiTi-R;font-style: normal;text-transform: none;">
|
|
|
+ <div
|
|
|
+ style="font-size: 15px;color: white;font-family: Alibaba-PuHuiTi-R;font-style: normal;text-transform: none;">
|
|
|
{{ item.time }}
|
|
|
</div>
|
|
|
<div style="font-size: 16px;color: white;font-family: Alibaba-PuHuiTi-R;">
|
|
|
{{ item.message }}
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
@@ -268,28 +284,31 @@
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
<div class="right_small">
|
|
|
- <span style="margin-right: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;text-align: right;">
|
|
|
+ <span
|
|
|
+ style="margin-right: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;text-align: right;">
|
|
|
小车机构
|
|
|
</span>
|
|
|
- <div style="display: flex;padding:30px 40px;margin-top: 30px;align-items: center;border-bottom: 1px solid #306AF7;justify-content: space-between">
|
|
|
+ <div
|
|
|
+ style="display: flex;padding:30px 40px;margin-top: 30px;align-items: center;border-bottom: 1px solid #306AF7;justify-content: space-between">
|
|
|
<div style="height: 100%;display: flex;flex-direction: column;justify-content: flex-end;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
|
|
|
频率
|
|
|
</span>
|
|
|
<div style="margin-top: 5px;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
|
|
|
- {{ trolleyFrequencyData.value != null ? trolleyFrequencyData.value : '0.00'}}
|
|
|
+ {{ trolleyFrequencyData.value != null ? trolleyFrequencyData.value : '0.00' }}
|
|
|
</span>
|
|
|
<span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
|
|
|
Hz
|
|
|
</span>
|
|
|
</div>
|
|
|
- <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;margin-top: 15px;">
|
|
|
+ <span
|
|
|
+ style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;margin-top: 15px;">
|
|
|
电流
|
|
|
</span>
|
|
|
<div style="margin-top: 5px;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
|
|
|
- {{trolleyCurrentData.value != null ? trolleyCurrentData.value : '0.00'}}
|
|
|
+ {{ trolleyCurrentData.value != null ? trolleyCurrentData.value : '0.00' }}
|
|
|
</span>
|
|
|
<span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
|
|
|
A
|
|
|
@@ -303,7 +322,7 @@
|
|
|
</span>
|
|
|
<div style="margin-top: 5px;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
|
|
|
- {{ trolleyStrokeData.value != null ? trolleyStrokeData.value : 0}}
|
|
|
+ {{ trolleyStrokeData.value != null ? trolleyStrokeData.value : 0 }}
|
|
|
</span>
|
|
|
<span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
|
|
|
m
|
|
|
@@ -316,7 +335,8 @@
|
|
|
挡位
|
|
|
</span>
|
|
|
</div>
|
|
|
- <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
|
|
|
+ <div
|
|
|
+ style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
|
|
|
{{ formatGears(trolleyGearData) }}
|
|
|
</span>
|
|
|
@@ -329,7 +349,8 @@
|
|
|
制动器
|
|
|
</span>
|
|
|
</div>
|
|
|
- <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
|
|
|
+ <div
|
|
|
+ style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
|
|
|
<span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
|
|
|
{{ trolleyBrakeData.value != null ? trolleyBrakeData.value : '未知' }}
|
|
|
</span>
|
|
|
@@ -340,18 +361,21 @@
|
|
|
<el-carousel indicator-position="outside" :height="'80px'" :interval="10000" style="margin-top: 12px">
|
|
|
<el-carousel-item v-for="(group, index) in trolleySwitchVariablesData" :key="index">
|
|
|
<div class="right_small_grid">
|
|
|
- <div v-for="item in group" :key="item.id" :class="['right_small_grid_item', item.value ? item.trueLight : item.falseLight]">
|
|
|
- <span>{{ formatStr(item.variableName) }}</span>
|
|
|
+ <div v-for="item in group" :key="item.id"
|
|
|
+ :class="['right_small_grid_item', item.value ? item.trueLight : item.falseLight]">
|
|
|
+ <span>{{ formatStr(item.variableName) }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
<div class="right_bottom">
|
|
|
- <el-carousel indicator-position="outside" :height="'80px'" :interval="10000" style="margin-top: 20px;width: 360px">
|
|
|
+ <el-carousel indicator-position="outside" :height="'80px'" :interval="10000"
|
|
|
+ style="margin-top: 20px;width: 360px">
|
|
|
<el-carousel-item v-for="(group, index) in otherSwitchData" :key="index">
|
|
|
<div class="right_bottom_grid">
|
|
|
- <div v-for="item in group" :key="item.id" :class="['right_bottom_grid_item', item.value ? item.trueLight : item.falseLight]">
|
|
|
+ <div v-for="item in group" :key="item.id"
|
|
|
+ :class="['right_bottom_grid_item', item.value ? item.trueLight : item.falseLight]">
|
|
|
<span>{{ formatStr(item.variableName) }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -362,684 +386,711 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
- import EZUIKit from 'ezuikit-js'
|
|
|
- import {getRealtime, getAlertRecordsByDevice,getDeviceMonitors} from '@/api/bigScreen';
|
|
|
- import {formatGears, formatValue, parseGear} from '@/utils/tools';
|
|
|
- import router from '@/router';
|
|
|
- const myVideoRef = ref(null)
|
|
|
- let loading = ref(false)
|
|
|
- let myVideo: any = ref(null)
|
|
|
- const deviceId = ref(0)
|
|
|
- const deviceCode = ref('')
|
|
|
- const deviceData: any = ref({})
|
|
|
- //大车变量
|
|
|
- const craneData: any = ref({})
|
|
|
- const craneStrokeData: any = ref({})
|
|
|
- const craneGearData: any = ref({})
|
|
|
- const craneBrakeData: any = ref({})
|
|
|
- const craneFrequencyData: any = ref({})
|
|
|
- const craneCurrentData: any = ref({})
|
|
|
- const craneSwitchVariablesData: any = ref([])
|
|
|
- //小车变量
|
|
|
- const trolleyData: any = ref({})
|
|
|
- const trolleyStrokeData: any = ref({})
|
|
|
- const trolleyGearData: any = ref({})
|
|
|
- const trolleyBrakeData: any = ref({})
|
|
|
- const trolleyFrequencyData: any = ref({})
|
|
|
- const trolleyCurrentData: any = ref({})
|
|
|
- const trolleySwitchVariablesData: any = ref([])
|
|
|
- //起升变量
|
|
|
- const hoistData: any = ref({})
|
|
|
- const hoistStrokeData: any = ref({})
|
|
|
- const hoistWeightData: any = ref({})
|
|
|
- const hoistGearData: any = ref({})
|
|
|
- const hoistBrakeData: any = ref({})
|
|
|
- const hoistFrequencyData: any = ref({})
|
|
|
- const hoistCurrentData: any = ref({})
|
|
|
- const hoistSwitchVariablesData: any = ref([])
|
|
|
- //总配电变量
|
|
|
- const otherSwitchData: any = ref([])
|
|
|
+import EZUIKit from 'ezuikit-js'
|
|
|
+import { getRealtime, getAlertRecordsByDevice, getDeviceMonitors } from '@/api/bigScreen';
|
|
|
+import { formatGears, formatValue, parseGear } from '@/utils/tools';
|
|
|
+import router from '@/router';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
+const myVideoRef = ref(null)
|
|
|
+let loading = ref(false)
|
|
|
+let myVideo: any = ref(null)
|
|
|
+const deviceId = ref(0)
|
|
|
+const deviceCode = ref('')
|
|
|
+const deviceData: any = ref({})
|
|
|
+//大车变量
|
|
|
+const craneData: any = ref({})
|
|
|
+const craneStrokeData: any = ref({})
|
|
|
+const craneGearData: any = ref({})
|
|
|
+const craneBrakeData: any = ref({})
|
|
|
+const craneFrequencyData: any = ref({})
|
|
|
+const craneCurrentData: any = ref({})
|
|
|
+const craneSwitchVariablesData: any = ref([])
|
|
|
+//小车变量
|
|
|
+const trolleyData: any = ref({})
|
|
|
+const trolleyStrokeData: any = ref({})
|
|
|
+const trolleyGearData: any = ref({})
|
|
|
+const trolleyBrakeData: any = ref({})
|
|
|
+const trolleyFrequencyData: any = ref({})
|
|
|
+const trolleyCurrentData: any = ref({})
|
|
|
+const trolleySwitchVariablesData: any = ref([])
|
|
|
+//起升变量
|
|
|
+const hoistData: any = ref({})
|
|
|
+const hoistStrokeData: any = ref({})
|
|
|
+const hoistWeightData: any = ref({})
|
|
|
+const hoistGearData: any = ref({})
|
|
|
+const hoistBrakeData: any = ref({})
|
|
|
+const hoistFrequencyData: any = ref({})
|
|
|
+const hoistCurrentData: any = ref({})
|
|
|
+const hoistSwitchVariablesData: any = ref([])
|
|
|
+//总配电变量
|
|
|
+const otherSwitchData: any = ref([])
|
|
|
+//本次工作
|
|
|
+const currentDurationData: any = ref({})
|
|
|
+//累计工作
|
|
|
+const totalDurationData: any = ref({})
|
|
|
+//工作循环
|
|
|
+const totalCountData: any = ref({})
|
|
|
+//报警集合
|
|
|
+const alarmRecordArr: any = ref([]);
|
|
|
+let videoDataState = true;
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ deviceId.value = parseInt(useQuery('id'))
|
|
|
+ deviceCode.value = useQuery('code')
|
|
|
+ init()
|
|
|
+ getData()
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+const init = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ await videoData.getData()
|
|
|
+ if (videoData.data.cameras == null) {
|
|
|
+ videoDataState = false;
|
|
|
+ // ElMessage.error('视频加载失败!');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ myVideo.value = new EZUIKit.EZUIKitPlayer({
|
|
|
+ id: 'video-container', // 视频容器ID
|
|
|
+ width: 402,
|
|
|
+ height: 236,
|
|
|
+ accessToken: videoData.data.token,
|
|
|
+ url: videoData.data.cameras[0].url,
|
|
|
+ template: 'security',
|
|
|
+ audio: 0,
|
|
|
+ footer: ['hd', 'fullScreen'],
|
|
|
+ handleSuccess: () => {
|
|
|
+ ElMessage.success('连接成功!')
|
|
|
+ loading.value = false
|
|
|
+ },
|
|
|
+ handleError: () => {
|
|
|
+ ElMessage.error('连接失败')
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+const videoData = useRequest(() => getDeviceMonitors({ deviceId: deviceId.value }), false)
|
|
|
+const getData = async () => {
|
|
|
+ const res: any = await getRealtime({ deviceId: deviceId.value })
|
|
|
+ deviceData.value = res
|
|
|
+ //大车数据
|
|
|
+ craneData.value = deviceData.value.crane
|
|
|
+ //大车行程
|
|
|
+ craneStrokeData.value = craneData.value.stroke
|
|
|
+ //大车挡位
|
|
|
+ craneGearData.value = craneData.value.gear
|
|
|
+ //大车制动器
|
|
|
+ if (craneData.value.brake) {
|
|
|
+ craneBrakeData.value = craneData.value.brake
|
|
|
+ }
|
|
|
+ //大车频率
|
|
|
+ if (craneData.value.frequency) {
|
|
|
+ craneFrequencyData.value = craneData.value.frequency
|
|
|
+ }
|
|
|
+ //大车电流
|
|
|
+ if (craneData.value.current) {
|
|
|
+ craneCurrentData.value = craneData.value.current
|
|
|
+ }
|
|
|
+ //大车开关量
|
|
|
+ craneSwitchVariablesData.value = chunkArray(craneData.value.switchVariables, 10)
|
|
|
+ //小车数据
|
|
|
+ trolleyData.value = deviceData.value.trolley
|
|
|
+ //小车行程
|
|
|
+ trolleyStrokeData.value = trolleyData.value.stroke
|
|
|
+ //小车挡位
|
|
|
+ trolleyGearData.value = trolleyData.value.gear
|
|
|
+ //小车制动器
|
|
|
+ if (trolleyData.value.brake) {
|
|
|
+ trolleyBrakeData.value = trolleyData.value.brake
|
|
|
+ }
|
|
|
+ //小车频率
|
|
|
+ if (trolleyData.value.frequency) {
|
|
|
+ trolleyFrequencyData.value = trolleyData.value.frequency
|
|
|
+ }
|
|
|
+ //小车电流
|
|
|
+ if (trolleyData.value.current) {
|
|
|
+ trolleyCurrentData.value = trolleyData.value.current
|
|
|
+ }
|
|
|
+ //小车开关量
|
|
|
+ trolleySwitchVariablesData.value = chunkArray(trolleyData.value.switchVariables, 16)
|
|
|
+ //起升数据
|
|
|
+ hoistData.value = deviceData.value.hoist
|
|
|
+ //起升重量
|
|
|
+ if (hoistData.value.weight) {
|
|
|
+ hoistWeightData.value = hoistData.value.weight
|
|
|
+ }
|
|
|
+ //起升行程
|
|
|
+ hoistStrokeData.value = hoistData.value.stroke
|
|
|
+ //起升挡位
|
|
|
+ hoistGearData.value = hoistData.value.gear
|
|
|
+ //起升制动器
|
|
|
+ if (hoistData.value.brake) {
|
|
|
+ hoistBrakeData.value = hoistData.value.brake
|
|
|
+ }
|
|
|
+ //起升频率
|
|
|
+ if (hoistData.value.frequency) {
|
|
|
+ hoistFrequencyData.value = hoistData.value.frequency
|
|
|
+ }
|
|
|
+ //起升电流
|
|
|
+ if (hoistData.value.current) {
|
|
|
+ hoistCurrentData.value = hoistData.value.current
|
|
|
+ }
|
|
|
+ //起升开关量
|
|
|
+ hoistSwitchVariablesData.value = chunkArray(hoistData.value.switchVariables, 12)
|
|
|
+ //总配电开关量
|
|
|
+ otherSwitchData.value = chunkArray(deviceData.value.otherSwitchData, 6)
|
|
|
//本次工作
|
|
|
- const currentDurationData: any = ref({})
|
|
|
+ currentDurationData.value = deviceData.value.dutyCycle.currentDuration
|
|
|
//累计工作
|
|
|
- const totalDurationData: any = ref({})
|
|
|
+ totalDurationData.value = deviceData.value.dutyCycle.totalDuration
|
|
|
//工作循环
|
|
|
- const totalCountData: any = ref({})
|
|
|
- //报警集合
|
|
|
- const alarmRecordArr: any = ref([]);
|
|
|
- let videoDataState = true;
|
|
|
+ totalCountData.value = deviceData.value.dutyCycle.totalCount
|
|
|
+ //获取报警信息
|
|
|
+ const record = await getAlertRecordsByDevice({ deviceId: deviceId.value, maxCount: 10 })
|
|
|
+ alarmRecordArr.value = record
|
|
|
|
|
|
- onMounted(async () => {
|
|
|
- deviceId.value = parseInt(useQuery('id'))
|
|
|
- deviceCode.value = useQuery('code')
|
|
|
- init()
|
|
|
- getData()
|
|
|
+ onSubscribe([`Json/${deviceCode.value}`], (topic: string, payload: any) => {
|
|
|
+ const jsonArray = JSON.parse(payload).Items
|
|
|
+ parseMqttData(jsonArray)
|
|
|
})
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 拆分数组
|
|
|
+ * @param array 数组
|
|
|
+ * @param size 拆分的数量
|
|
|
+ */
|
|
|
+const chunkArray = (array: any, size: number) => {
|
|
|
+ const arr: any = []
|
|
|
+ for (let index = 0; index < array.length; index += size) {
|
|
|
+ arr.push(array.slice(index, index + size));
|
|
|
+ }
|
|
|
+ return arr;
|
|
|
+}
|
|
|
+//解析数据
|
|
|
+const parseMqttData = (jsonArray: any) => {
|
|
|
+ jsonArray.forEach((res: any) => {
|
|
|
+ const { Value, Code } = res
|
|
|
|
|
|
- onUnmounted(() => {
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- const init = async () => {
|
|
|
- loading.value = true
|
|
|
- try {
|
|
|
- await videoData.getData()
|
|
|
- if(videoData.data.cameras == null){
|
|
|
- videoDataState = false;
|
|
|
- ElMessage.error('视频加载失败!');
|
|
|
- return;
|
|
|
+ //大车档位
|
|
|
+ const craneGear = craneGearData.value
|
|
|
+ if (craneGear) {
|
|
|
+ if (parseGear(craneGear, Code, Value)) {
|
|
|
+ return
|
|
|
}
|
|
|
- myVideo.value = new EZUIKit.EZUIKitPlayer({
|
|
|
- id: 'video-container', // 视频容器ID
|
|
|
- width: 402,
|
|
|
- height: 236,
|
|
|
- accessToken: videoData.data.token,
|
|
|
- url: videoData.data.cameras[0].url,
|
|
|
- template: 'security',
|
|
|
- audio: 0,
|
|
|
- footer: ['hd', 'fullScreen'],
|
|
|
- handleSuccess: () => {
|
|
|
- ElMessage.success('连接成功!')
|
|
|
- loading.value = false
|
|
|
- },
|
|
|
- handleError: () => {
|
|
|
- ElMessage.error('连接失败')
|
|
|
- loading.value = false
|
|
|
- }
|
|
|
- })
|
|
|
- }finally {
|
|
|
- loading.value = false
|
|
|
}
|
|
|
- }
|
|
|
- const videoData = useRequest(() => getDeviceMonitors({ deviceId:deviceId.value }), false)
|
|
|
- const getData = async () => {
|
|
|
- const res: any = await getRealtime({ deviceId: deviceId.value })
|
|
|
- deviceData.value = res
|
|
|
- //大车数据
|
|
|
- craneData.value = deviceData.value.crane
|
|
|
//大车行程
|
|
|
- craneStrokeData.value = craneData.value.stroke
|
|
|
- //大车挡位
|
|
|
- craneGearData.value = craneData.value.gear
|
|
|
+ const craneStroke = craneStrokeData.value
|
|
|
+ if (craneStroke) {
|
|
|
+ if (craneStroke.code == Code) {
|
|
|
+ craneStroke.value = formatValue(Value, craneStroke.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
//大车制动器
|
|
|
- if(craneData.value.brake){
|
|
|
- craneBrakeData.value = craneData.value.brake
|
|
|
+ const craneBrake = craneBrakeData.value
|
|
|
+ if (craneBrake) {
|
|
|
+ if (craneBrake.code == Code) {
|
|
|
+ craneBrake.value = formatValue(Value, craneBrake.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
}
|
|
|
//大车频率
|
|
|
- if(craneData.value.frequency){
|
|
|
- craneFrequencyData.value = craneData.value.frequency
|
|
|
+ const craneFrequency = craneFrequencyData.value
|
|
|
+ if (craneFrequency) {
|
|
|
+ if (craneFrequency.code == Code) {
|
|
|
+ craneFrequency.value = formatValue(Value, craneFrequency.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
}
|
|
|
//大车电流
|
|
|
- if(craneData.value.current){
|
|
|
- craneCurrentData.value = craneData.value.current
|
|
|
+ const craneCurrent = craneCurrentData.value
|
|
|
+ if (craneCurrent) {
|
|
|
+ if (craneCurrent.code == Code) {
|
|
|
+ craneCurrent.value = formatValue(Value, craneCurrent.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
}
|
|
|
//大车开关量
|
|
|
- craneSwitchVariablesData.value = chunkArray(craneData.value.switchVariables,10)
|
|
|
- //小车数据
|
|
|
- trolleyData.value = deviceData.value.trolley
|
|
|
+ const craneSwitchVariables = craneSwitchVariablesData.value
|
|
|
+ if (craneSwitchVariables) {
|
|
|
+ craneSwitchVariables.forEach((item: any) => {
|
|
|
+ const result = item.find((item: any) => item.code == Code)
|
|
|
+ if (result) {
|
|
|
+ result.value = result.isReverse != Value
|
|
|
+ return
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //小车档位
|
|
|
+ const trolleyGear = trolleyGearData.value
|
|
|
+ if (trolleyGear) {
|
|
|
+ if (parseGear(trolleyGear, Code, Value)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
//小车行程
|
|
|
- trolleyStrokeData.value = trolleyData.value.stroke
|
|
|
- //小车挡位
|
|
|
- trolleyGearData.value = trolleyData.value.gear
|
|
|
+ const trolleyStroke = trolleyStrokeData.value
|
|
|
+ if (trolleyStroke) {
|
|
|
+ if (trolleyStroke.code == Code) {
|
|
|
+ trolleyStroke.value = formatValue(Value, trolleyStroke.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
//小车制动器
|
|
|
- if(trolleyData.value.brake){
|
|
|
- trolleyBrakeData.value = trolleyData.value.brake
|
|
|
+ const trolleyBrake = trolleyBrakeData.value
|
|
|
+ if (trolleyBrake) {
|
|
|
+ if (trolleyBrake.code == Code) {
|
|
|
+ trolleyBrake.value = formatValue(Value, trolleyBrake.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
}
|
|
|
//小车频率
|
|
|
- if(trolleyData.value.frequency){
|
|
|
- trolleyFrequencyData.value = trolleyData.value.frequency
|
|
|
+ const trolleyFrequency = trolleyFrequencyData.value
|
|
|
+ if (trolleyFrequency) {
|
|
|
+ if (trolleyFrequency.code == Code) {
|
|
|
+ trolleyFrequency.value = formatValue(Value, trolleyFrequency.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
}
|
|
|
//小车电流
|
|
|
- if(trolleyData.value.current){
|
|
|
- trolleyCurrentData.value = trolleyData.value.current
|
|
|
+ const trolleyCurrent = trolleyCurrentData.value
|
|
|
+ if (trolleyCurrent) {
|
|
|
+ if (trolleyCurrent.code == Code) {
|
|
|
+ trolleyCurrent.value = formatValue(Value, trolleyCurrent.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
}
|
|
|
//小车开关量
|
|
|
- trolleySwitchVariablesData.value = chunkArray(trolleyData.value.switchVariables,16)
|
|
|
- //起升数据
|
|
|
- hoistData.value = deviceData.value.hoist
|
|
|
+ const trolleySwitchVariables = trolleySwitchVariablesData.value
|
|
|
+ if (trolleySwitchVariables) {
|
|
|
+ trolleySwitchVariables.forEach((item: any) => {
|
|
|
+ const result = item.find((item: any) => item.code == Code)
|
|
|
+ if (result) {
|
|
|
+ result.value = result.isReverse != Value
|
|
|
+ return
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //起升档位
|
|
|
+ const hoistGear = hoistGearData.value
|
|
|
+ if (hoistGear) {
|
|
|
+ if (parseGear(hoistGear, Code, Value)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
//起升重量
|
|
|
- if(hoistData.value.weight){
|
|
|
- hoistWeightData.value = hoistData.value.weight
|
|
|
+ const hoistWeight = hoistWeightData.value
|
|
|
+ if (hoistWeight) {
|
|
|
+ if (hoistWeight.code == Code) {
|
|
|
+ hoistWeight.value = formatValue(Value, hoistWeight.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
}
|
|
|
//起升行程
|
|
|
- hoistStrokeData.value = hoistData.value.stroke
|
|
|
- //起升挡位
|
|
|
- hoistGearData.value = hoistData.value.gear
|
|
|
+ const hoistStroke = hoistStrokeData.value
|
|
|
+ if (hoistStroke) {
|
|
|
+ if (hoistStroke.code == Code) {
|
|
|
+ hoistStroke.value = formatValue(Value, hoistStroke.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
//起升制动器
|
|
|
- if(hoistData.value.brake){
|
|
|
- hoistBrakeData.value = hoistData.value.brake
|
|
|
+ const hoistBrake = hoistBrakeData.value
|
|
|
+ if (hoistBrake) {
|
|
|
+ if (hoistBrake.code == Code) {
|
|
|
+ hoistBrake.value = formatValue(Value, hoistBrake.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
}
|
|
|
//起升频率
|
|
|
- if(hoistData.value.frequency){
|
|
|
- hoistFrequencyData.value = hoistData.value.frequency
|
|
|
+ const hoistFrequency = hoistFrequencyData.value
|
|
|
+ if (hoistFrequency) {
|
|
|
+ if (hoistFrequency.code == Code) {
|
|
|
+ hoistFrequency.value = formatValue(Value, hoistFrequency.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
}
|
|
|
//起升电流
|
|
|
- if(hoistData.value.current){
|
|
|
- hoistCurrentData.value = hoistData.value.current
|
|
|
+ const hoistCurrent = hoistCurrentData.value
|
|
|
+ if (hoistCurrent) {
|
|
|
+ if (hoistCurrent.code == Code) {
|
|
|
+ hoistCurrent.value = formatValue(Value, hoistCurrent.translate)
|
|
|
+ return
|
|
|
+ }
|
|
|
}
|
|
|
//起升开关量
|
|
|
- hoistSwitchVariablesData.value = chunkArray(hoistData.value.switchVariables,12)
|
|
|
+ const hoistSwitchVariables = hoistSwitchVariablesData.value
|
|
|
+ if (hoistSwitchVariables) {
|
|
|
+ hoistSwitchVariables.forEach((item: any) => {
|
|
|
+ const result = item.find((item: any) => item.code == Code)
|
|
|
+ if (result) {
|
|
|
+ result.value = result.isReverse != Value
|
|
|
+ return
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
//总配电开关量
|
|
|
- otherSwitchData.value = chunkArray(deviceData.value.otherSwitchData,6)
|
|
|
+ const otherSwitch = otherSwitchData.value
|
|
|
+ if (otherSwitch) {
|
|
|
+ otherSwitch.forEach((item: any) => {
|
|
|
+ const result = item.find((item: any) => item.code == Code)
|
|
|
+ if (result) {
|
|
|
+ result.value = result.isReverse != Value
|
|
|
+ return
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
//本次工作
|
|
|
- currentDurationData.value = deviceData.value.dutyCycle.currentDuration
|
|
|
+ const currentDuration = currentDurationData.value
|
|
|
+ if (currentDuration) {
|
|
|
+ if (currentDuration.code == Code) {
|
|
|
+ let value = formatValue(Value, currentDuration.translate)
|
|
|
+ currentDuration.value = evaluateFormula(value, currentDuration.formula)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
//累计工作
|
|
|
- totalDurationData.value = deviceData.value.dutyCycle.totalDuration
|
|
|
+ const totalDuration = totalDurationData.value
|
|
|
+ if (totalDuration) {
|
|
|
+ if (totalDuration.code == Code) {
|
|
|
+ let value = formatValue(Value, totalDuration.translate)
|
|
|
+ totalDuration.value = evaluateFormula(value, totalDuration.formula)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
//工作循环
|
|
|
- totalCountData.value = deviceData.value.dutyCycle.totalCount
|
|
|
- //获取报警信息
|
|
|
- const record = await getAlertRecordsByDevice({ deviceId: deviceId.value, maxCount: 10 })
|
|
|
- alarmRecordArr.value = record
|
|
|
-
|
|
|
- onSubscribe([`Json/${deviceCode.value}`], (topic: string, payload: any) => {
|
|
|
- const jsonArray = JSON.parse(payload).Items
|
|
|
- parseMqttData(jsonArray)
|
|
|
- })
|
|
|
- }
|
|
|
- /**
|
|
|
- * 拆分数组
|
|
|
- * @param array 数组
|
|
|
- * @param size 拆分的数量
|
|
|
- */
|
|
|
- const chunkArray = (array: any, size: number) => {
|
|
|
- const arr: any = []
|
|
|
- for (let index = 0; index < array.length; index += size) {
|
|
|
- arr.push(array.slice(index, index + size));
|
|
|
+ const totalCount = totalCountData.value
|
|
|
+ if (totalCount) {
|
|
|
+ if (totalCount.code == Code) {
|
|
|
+ totalCount.value = formatValue(Value, totalCount.translate)
|
|
|
+ return
|
|
|
}
|
|
|
- return arr;
|
|
|
- }
|
|
|
- //解析数据
|
|
|
- const parseMqttData = (jsonArray: any) => {
|
|
|
- jsonArray.forEach((res: any) => {
|
|
|
- const { Value, Code } = res
|
|
|
-
|
|
|
- //大车档位
|
|
|
- const craneGear = craneGearData.value
|
|
|
- if (craneGear) {
|
|
|
- if (parseGear(craneGear, Code, Value)) {
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //大车行程
|
|
|
- const craneStroke = craneStrokeData.value
|
|
|
- if(craneStroke) {
|
|
|
- if (craneStroke.code == Code) {
|
|
|
- craneStroke.value = formatValue(Value, craneStroke.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //大车制动器
|
|
|
- const craneBrake = craneBrakeData.value
|
|
|
- if(craneBrake) {
|
|
|
- if (craneBrake.code == Code) {
|
|
|
- craneBrake.value = formatValue(Value, craneBrake.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //大车频率
|
|
|
- const craneFrequency = craneFrequencyData.value
|
|
|
- if(craneFrequency) {
|
|
|
- if (craneFrequency.code == Code) {
|
|
|
- craneFrequency.value = formatValue(Value, craneFrequency.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //大车电流
|
|
|
- const craneCurrent = craneCurrentData.value
|
|
|
- if(craneCurrent) {
|
|
|
- if (craneCurrent.code == Code) {
|
|
|
- craneCurrent.value = formatValue(Value, craneCurrent.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //大车开关量
|
|
|
- const craneSwitchVariables = craneSwitchVariablesData.value
|
|
|
- if(craneSwitchVariables){
|
|
|
- craneSwitchVariables.forEach((item: any) => {
|
|
|
- const result = item.find((item: any) => item.code == Code)
|
|
|
- if (result) {
|
|
|
- result.value = result.isReverse != Value
|
|
|
- return
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- //小车档位
|
|
|
- const trolleyGear = trolleyGearData.value
|
|
|
- if (trolleyGear) {
|
|
|
- if (parseGear(trolleyGear, Code, Value)) {
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //小车行程
|
|
|
- const trolleyStroke = trolleyStrokeData.value
|
|
|
- if(trolleyStroke) {
|
|
|
- if (trolleyStroke.code == Code) {
|
|
|
- trolleyStroke.value = formatValue(Value, trolleyStroke.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //小车制动器
|
|
|
- const trolleyBrake = trolleyBrakeData.value
|
|
|
- if(trolleyBrake) {
|
|
|
- if (trolleyBrake.code == Code) {
|
|
|
- trolleyBrake.value = formatValue(Value, trolleyBrake.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //小车频率
|
|
|
- const trolleyFrequency = trolleyFrequencyData.value
|
|
|
- if(trolleyFrequency) {
|
|
|
- if (trolleyFrequency.code == Code) {
|
|
|
- trolleyFrequency.value = formatValue(Value, trolleyFrequency.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //小车电流
|
|
|
- const trolleyCurrent = trolleyCurrentData.value
|
|
|
- if(trolleyCurrent) {
|
|
|
- if (trolleyCurrent.code == Code) {
|
|
|
- trolleyCurrent.value = formatValue(Value, trolleyCurrent.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //小车开关量
|
|
|
- const trolleySwitchVariables = trolleySwitchVariablesData.value
|
|
|
- if(trolleySwitchVariables){
|
|
|
- trolleySwitchVariables.forEach((item: any) => {
|
|
|
- const result = item.find((item: any) => item.code == Code)
|
|
|
- if (result) {
|
|
|
- result.value = result.isReverse != Value
|
|
|
- return
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- //起升档位
|
|
|
- const hoistGear = hoistGearData.value
|
|
|
- if (hoistGear) {
|
|
|
- if (parseGear(hoistGear, Code, Value)) {
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //起升重量
|
|
|
- const hoistWeight = hoistWeightData.value
|
|
|
- if(hoistWeight) {
|
|
|
- if (hoistWeight.code == Code) {
|
|
|
- hoistWeight.value = formatValue(Value, hoistWeight.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //起升行程
|
|
|
- const hoistStroke = hoistStrokeData.value
|
|
|
- if(hoistStroke) {
|
|
|
- if (hoistStroke.code == Code) {
|
|
|
- hoistStroke.value = formatValue(Value, hoistStroke.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //起升制动器
|
|
|
- const hoistBrake = hoistBrakeData.value
|
|
|
- if(hoistBrake) {
|
|
|
- if (hoistBrake.code == Code) {
|
|
|
- hoistBrake.value = formatValue(Value, hoistBrake.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //起升频率
|
|
|
- const hoistFrequency = hoistFrequencyData.value
|
|
|
- if(hoistFrequency) {
|
|
|
- if (hoistFrequency.code == Code) {
|
|
|
- hoistFrequency.value = formatValue(Value, hoistFrequency.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //起升电流
|
|
|
- const hoistCurrent = hoistCurrentData.value
|
|
|
- if(hoistCurrent) {
|
|
|
- if (hoistCurrent.code == Code) {
|
|
|
- hoistCurrent.value = formatValue(Value, hoistCurrent.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //起升开关量
|
|
|
- const hoistSwitchVariables = hoistSwitchVariablesData.value
|
|
|
- if(hoistSwitchVariables){
|
|
|
- hoistSwitchVariables.forEach((item: any) => {
|
|
|
- const result = item.find((item: any) => item.code == Code)
|
|
|
- if (result) {
|
|
|
- result.value = result.isReverse != Value
|
|
|
- return
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- //总配电开关量
|
|
|
- const otherSwitch = otherSwitchData.value
|
|
|
- if(otherSwitch){
|
|
|
- otherSwitch.forEach((item: any) => {
|
|
|
- const result = item.find((item: any) => item.code == Code)
|
|
|
- if (result) {
|
|
|
- result.value = result.isReverse != Value
|
|
|
- return
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- //本次工作
|
|
|
- const currentDuration = currentDurationData.value
|
|
|
- if(currentDuration){
|
|
|
- if (currentDuration.code == Code) {
|
|
|
- let value = formatValue(Value, currentDuration.translate)
|
|
|
- currentDuration.value = evaluateFormula(value, currentDuration.formula)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //累计工作
|
|
|
- const totalDuration = totalDurationData.value
|
|
|
- if(totalDuration){
|
|
|
- if (totalDuration.code == Code) {
|
|
|
- let value = formatValue(Value, totalDuration.translate)
|
|
|
- totalDuration.value = evaluateFormula(value, totalDuration.formula)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- //工作循环
|
|
|
- const totalCount = totalCountData.value
|
|
|
- if(totalCount){
|
|
|
- if (totalCount.code == Code) {
|
|
|
- totalCount.value = formatValue(Value, totalCount.translate)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- onUnmounted(() => {
|
|
|
- onUnsubscribe(`Json/${deviceCode.value}`)
|
|
|
+ }
|
|
|
})
|
|
|
+}
|
|
|
|
|
|
- const backMainPage = () => {
|
|
|
- router.go(-1)
|
|
|
- }
|
|
|
+onUnmounted(() => {
|
|
|
+ onUnsubscribe(`Json/${deviceCode.value}`)
|
|
|
+})
|
|
|
|
|
|
- const evaluateFormula = (value: any, formula: any) => {
|
|
|
- if (formula == null || formula == undefined || formula === '') {
|
|
|
- return value
|
|
|
- }
|
|
|
- //函数模板
|
|
|
- const array = formula.split(",")
|
|
|
- //字符串模本
|
|
|
- var templete = array[0]
|
|
|
- const formulaArray = array.slice(1)
|
|
|
- formulaArray.forEach((item: any, index: number) => {
|
|
|
- const func = item.replace("{Value}", value)
|
|
|
- const result = eval(func)
|
|
|
- templete = templete.replace(`{${index}}`, Math.floor(parseFloat(result)))
|
|
|
- })
|
|
|
- return templete
|
|
|
- }
|
|
|
+const backMainPage = () => {
|
|
|
+ router.go(-1)
|
|
|
+}
|
|
|
|
|
|
- const formatStr = (value:string) => {
|
|
|
- return value.replace('大车','').replace('副小车','').replace('主起升','').replace('配电','').replace('起升','').replace('小车','')
|
|
|
+const evaluateFormula = (value: any, formula: any) => {
|
|
|
+ if (formula == null || formula == undefined || formula === '') {
|
|
|
+ return value
|
|
|
}
|
|
|
+ //函数模板
|
|
|
+ const array = formula.split(",")
|
|
|
+ //字符串模本
|
|
|
+ var templete = array[0]
|
|
|
+ const formulaArray = array.slice(1)
|
|
|
+ formulaArray.forEach((item: any, index: number) => {
|
|
|
+ const func = item.replace("{Value}", value)
|
|
|
+ const result = eval(func)
|
|
|
+ templete = templete.replace(`{${index}}`, Math.floor(parseFloat(result)))
|
|
|
+ })
|
|
|
+ return templete
|
|
|
+}
|
|
|
+
|
|
|
+const formatStr = (value: string) => {
|
|
|
+ return value.replace('大车', '').replace('副小车', '').replace('主起升', '').replace('配电', '').replace('起升', '').replace('小车', '')
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .bg {
|
|
|
- min-height: 1080px;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- background-image: url(../../assets/img/screen_bg.png);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .top-bg {
|
|
|
- width: 100%;
|
|
|
- height: 77px;
|
|
|
- background-image: url(../../assets/img/big_screen_top_bg.png);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- position: absolute;
|
|
|
- cursor: pointer;
|
|
|
- .device-name {
|
|
|
- color: white;
|
|
|
- font-size: 30px;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 35%;
|
|
|
- font-weight: bold;
|
|
|
- transform: translateX(-50%) translateY(-35%);
|
|
|
- font-family: Alibaba-PuHuiTi-R;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .left {
|
|
|
- top: 77px;
|
|
|
- left: 35px;
|
|
|
- width: 450px;
|
|
|
- min-height: 988px;
|
|
|
+.bg {
|
|
|
+ min-height: 1080px;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-image: url(../../assets/img/screen_bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.top-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 77px;
|
|
|
+ background-image: url(../../assets/img/big_screen_top_bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .device-name {
|
|
|
+ color: white;
|
|
|
+ font-size: 30px;
|
|
|
position: absolute;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .left_top {
|
|
|
- width: 422px;
|
|
|
- height: 256px;
|
|
|
- background-image: url(../../assets/img/screen_top_bottom_bg.png);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- padding: 10px;
|
|
|
- }
|
|
|
- .left_bottom {
|
|
|
- width: 450px;
|
|
|
- height: 653px;
|
|
|
- background-image: url(../../assets/img/screen_left_bottom_bg.png);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding: 10px 39px;
|
|
|
- }
|
|
|
- .left_bottom_grid {
|
|
|
- display: grid;
|
|
|
- grid-template-rows: 32px 32px 32px 32px 32px;
|
|
|
- grid-template-columns: 180px 180px;
|
|
|
- gap: 11px;
|
|
|
- }
|
|
|
- .left_bottom_grid_item {
|
|
|
- border-radius: 5px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Alibaba-PuHuiTi-R;
|
|
|
- }
|
|
|
- .middle {
|
|
|
- top: 77px;
|
|
|
left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 950px;
|
|
|
- min-height: 988px;
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .middle_bottom {
|
|
|
- width: 100%;
|
|
|
- height: 356px;
|
|
|
- background-image: url(../../assets/img/single_middle_bg.png);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- .screen_middle_bottom_middle {
|
|
|
- width: 204px;
|
|
|
- height: 204px;
|
|
|
- background-image: url('../../assets/img/screen_middle_bottom_middle.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center
|
|
|
- }
|
|
|
- .middle_bottom_right_grid {
|
|
|
- display: grid;
|
|
|
- grid-template-rows: 32px 32px 32px 32px;
|
|
|
- grid-template-columns: 120px 120px 120px;
|
|
|
- gap: 11px;
|
|
|
- }
|
|
|
- .middle_bottom_right_grid_item {
|
|
|
- border-radius: 5px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #ABC0E0;
|
|
|
- font-size: 16px;
|
|
|
+ top: 35%;
|
|
|
+ font-weight: bold;
|
|
|
+ transform: translateX(-50%) translateY(-35%);
|
|
|
font-family: Alibaba-PuHuiTi-R;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
}
|
|
|
- .middle_top {
|
|
|
+}
|
|
|
|
|
|
+.left {
|
|
|
+ top: 77px;
|
|
|
+ left: 35px;
|
|
|
+ width: 450px;
|
|
|
+ min-height: 988px;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.left_top {
|
|
|
+ width: 422px;
|
|
|
+ height: 256px;
|
|
|
+ background-image: url(../../assets/img/screen_top_bottom_bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.left_bottom {
|
|
|
+ width: 450px;
|
|
|
+ height: 653px;
|
|
|
+ background-image: url(../../assets/img/screen_left_bottom_bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 10px 39px;
|
|
|
+}
|
|
|
+
|
|
|
+.left_bottom_grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: 32px 32px 32px 32px 32px;
|
|
|
+ grid-template-columns: 180px 180px;
|
|
|
+ gap: 11px;
|
|
|
+}
|
|
|
+
|
|
|
+.left_bottom_grid_item {
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Alibaba-PuHuiTi-R;
|
|
|
+}
|
|
|
+
|
|
|
+.middle {
|
|
|
+ top: 77px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 950px;
|
|
|
+ min-height: 988px;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.middle_bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 356px;
|
|
|
+ background-image: url(../../assets/img/single_middle_bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.screen_middle_bottom_middle {
|
|
|
+ width: 204px;
|
|
|
+ height: 204px;
|
|
|
+ background-image: url('../../assets/img/screen_middle_bottom_middle.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center
|
|
|
+}
|
|
|
+
|
|
|
+.middle_bottom_right_grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: 32px 32px 32px 32px;
|
|
|
+ grid-template-columns: 120px 120px 120px;
|
|
|
+ gap: 11px;
|
|
|
+}
|
|
|
+
|
|
|
+.middle_bottom_right_grid_item {
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #ABC0E0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Alibaba-PuHuiTi-R;
|
|
|
+}
|
|
|
+
|
|
|
+.middle_top {}
|
|
|
+
|
|
|
+.right {
|
|
|
+ top: 77px;
|
|
|
+ right: 35px;
|
|
|
+ width: 450px;
|
|
|
+ min-height: 988px;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.right_top {
|
|
|
+ width: 100%;
|
|
|
+ height: 194px;
|
|
|
+ background-image: url(../../assets/img/screen_right_top_bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 40px 45px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.right_alert {
|
|
|
+ width: 100%;
|
|
|
+ height: 130px;
|
|
|
+ padding: 10px 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.right_alert_item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0px 30px 0px 35px;
|
|
|
+ background-image: url(../../assets/img/screen_right_alert_bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.right_small {
|
|
|
+ width: 450px;
|
|
|
+ height: 502px;
|
|
|
+ background-image: url(../../assets/img/screen_right_small_bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 10px 39px;
|
|
|
+}
|
|
|
+
|
|
|
+.right_small_grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: 32px 32px;
|
|
|
+ grid-template-columns: 115px 115px 115px;
|
|
|
+ gap: 11px;
|
|
|
+}
|
|
|
+
|
|
|
+.right_small_grid_item {
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #ABC0E0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Alibaba-PuHuiTi-R;
|
|
|
+}
|
|
|
+
|
|
|
+.right_bottom {
|
|
|
+ width: 450px;
|
|
|
+ height: 151px;
|
|
|
+ background-image: url(../../assets/img/screen_right_bottom_bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.right_bottom_grid {
|
|
|
+ height: 70px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: 32px 32px;
|
|
|
+ grid-template-columns: 110px 110px 110px;
|
|
|
+ gap: 11px;
|
|
|
+}
|
|
|
+
|
|
|
+.right_bottom_grid_item {
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Alibaba-PuHuiTi-R;
|
|
|
+}
|
|
|
+
|
|
|
+.middle_bottom_right_top {
|
|
|
+ width: 100px;
|
|
|
+ height: 32px;
|
|
|
+ background-color: #334A6C;
|
|
|
+ border: 1px solid #455A7A;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #ABC0E0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Alibaba-PuHuiTi-R;
|
|
|
+}
|
|
|
+
|
|
|
+.middle_bottom_right_top.is-active {
|
|
|
+ background-color: #158E4B;
|
|
|
+}
|
|
|
+
|
|
|
+.red {
|
|
|
+ color: rgb(251, 104, 104);
|
|
|
+ background-color: rgba(125, 32, 32, 0.2);
|
|
|
+ border: 1px solid #FD4142;
|
|
|
+}
|
|
|
+
|
|
|
+.green {
|
|
|
+ color: #26F884;
|
|
|
+ background: rgba(21, 142, 75, 0.2);
|
|
|
+ border: 1px solid #02803A;
|
|
|
+}
|
|
|
+
|
|
|
+.yellow {
|
|
|
+ color: #fba34a;
|
|
|
+ background-color: rgba(240, 128, 15, 0.2);
|
|
|
+ border: 1px solid #fc7e03;
|
|
|
+}
|
|
|
+
|
|
|
+.gray {
|
|
|
+ color: #ABC0E0;
|
|
|
+ background-color: rgba(51, 74, 108, 0.2);
|
|
|
+ border: 1px solid #455A7A;
|
|
|
+}</style>
|
|
|
+<style lang="less">.right_alert {
|
|
|
+ .el-carousel__button {
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ border-radius: 2.5px;
|
|
|
}
|
|
|
- .right {
|
|
|
- top: 77px;
|
|
|
- right: 35px;
|
|
|
- width: 450px;
|
|
|
- min-height: 988px;
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .right_top {
|
|
|
- width: 100%;
|
|
|
- height: 194px;
|
|
|
- background-image: url(../../assets/img/screen_right_top_bg.png);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- padding: 40px 45px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .right_alert {
|
|
|
- width: 100%;
|
|
|
- height: 130px;
|
|
|
- padding: 10px 0px;
|
|
|
- }
|
|
|
- .right_alert_item {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0px 30px 0px 35px;
|
|
|
- background-image: url(../../assets/img/screen_right_alert_bg.png);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .right_small {
|
|
|
- width: 450px;
|
|
|
- height: 502px;
|
|
|
- background-image: url(../../assets/img/screen_right_small_bg.png);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding: 10px 39px;
|
|
|
- }
|
|
|
- .right_small_grid {
|
|
|
- display: grid;
|
|
|
- grid-template-rows: 32px 32px;
|
|
|
- grid-template-columns: 115px 115px 115px;
|
|
|
- gap: 11px;
|
|
|
- }
|
|
|
- .right_small_grid_item {
|
|
|
- border-radius: 5px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #ABC0E0;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Alibaba-PuHuiTi-R;
|
|
|
- }
|
|
|
- .right_bottom {
|
|
|
- width: 450px;
|
|
|
- height: 151px;
|
|
|
- background-image: url(../../assets/img/screen_right_bottom_bg.png);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .right_bottom_grid {
|
|
|
- height: 70px;
|
|
|
- display: grid;
|
|
|
- grid-template-rows: 32px 32px;
|
|
|
- grid-template-columns: 110px 110px 110px;
|
|
|
- gap: 11px;
|
|
|
- }
|
|
|
- .right_bottom_grid_item {
|
|
|
- border-radius: 5px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Alibaba-PuHuiTi-R;
|
|
|
- }
|
|
|
- .middle_bottom_right_top {
|
|
|
- width: 100px;
|
|
|
- height: 32px;
|
|
|
- background-color: #334A6C;
|
|
|
- border: 1px solid #455A7A;
|
|
|
- border-radius: 5px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #ABC0E0;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Alibaba-PuHuiTi-R;
|
|
|
- }
|
|
|
- .middle_bottom_right_top.is-active {
|
|
|
- background-color: #158E4B;
|
|
|
- }
|
|
|
- .red{
|
|
|
- color:rgb(251, 104, 104);
|
|
|
- background-color: rgba(125, 32, 32,0.2);
|
|
|
- border: 1px solid #FD4142;
|
|
|
- }
|
|
|
- .green{
|
|
|
- color: #26F884;
|
|
|
- background: rgba(21, 142, 75, 0.2);
|
|
|
- border: 1px solid #02803A;
|
|
|
- }
|
|
|
- .yellow{
|
|
|
- color: #fba34a;
|
|
|
- background-color: rgba(240, 128, 15, 0.2);
|
|
|
- border: 1px solid #fc7e03;
|
|
|
- }
|
|
|
- .gray{
|
|
|
- color: #ABC0E0;
|
|
|
- background-color: rgba(51, 74, 108, 0.2);
|
|
|
- border: 1px solid #455A7A;
|
|
|
+
|
|
|
+ .el-carousel__indicator.is-active button {
|
|
|
+ width: 14px;
|
|
|
+ height: 5px;
|
|
|
}
|
|
|
-</style>
|
|
|
-<style lang="less">
|
|
|
- .right_alert {
|
|
|
- .el-carousel__button {
|
|
|
- width: 5px;
|
|
|
- height: 5px;
|
|
|
- border-radius: 2.5px;
|
|
|
- }
|
|
|
- .el-carousel__indicator.is-active button {
|
|
|
- width: 14px;
|
|
|
- height: 5px;
|
|
|
- }
|
|
|
- .el-carousel__indicators--horizontal {
|
|
|
- left: 95px;
|
|
|
- top: 20px;
|
|
|
- transform:none
|
|
|
- }
|
|
|
+
|
|
|
+ .el-carousel__indicators--horizontal {
|
|
|
+ left: 95px;
|
|
|
+ top: 20px;
|
|
|
+ transform: none
|
|
|
}
|
|
|
-</style>
|
|
|
+}</style>
|
