|
|
@@ -8,11 +8,11 @@
|
|
|
<div class="left-area">
|
|
|
<!-- 矿井通风状态监测 -->
|
|
|
<div class="area-card">
|
|
|
- <mineWind :airKjStatus="airKjStatus"/>
|
|
|
+ <mineWind :airKjStatus="airKjStatus" />
|
|
|
</div>
|
|
|
<!-- 一通三防风险分析与预警 -->
|
|
|
<div class="area-card1">
|
|
|
- <riskWarn :earlyWarn="earlyWarn"/>
|
|
|
+ <riskWarn :earlyWarn="earlyWarn" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="center-area">
|
|
|
@@ -34,11 +34,11 @@
|
|
|
<div class="right-area">
|
|
|
<!-- 关键场景通防综合监测 -->
|
|
|
<div class="area-card">
|
|
|
- <sceneKey :compositeData="compositeData"/>
|
|
|
+ <sceneKey :compositeData="compositeData" />
|
|
|
</div>
|
|
|
<!-- 通风巷道长度统计 -->
|
|
|
<div class="area-card1">
|
|
|
- <windRoad :roadData="roadData"/>
|
|
|
+ <windRoad :roadData="roadData" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -49,48 +49,41 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, reactive, nextTick,onMounted,onUnmounted } from 'vue';
|
|
|
- import mineWind from './components/mine-wind.vue';
|
|
|
- import riskWarn from './components/risk-warn.vue';
|
|
|
- import fileShare from './components/file-share.vue';
|
|
|
- import windRoad from './components/wind-road.vue';
|
|
|
- import sceneKey from './components/scene-key.vue';
|
|
|
- import iconLight from './components/icon-light.vue';
|
|
|
- import dialogModal from './components/dialog-modal.vue';
|
|
|
- import {getHomeData,getList} from './clique.api'
|
|
|
- const dialogModalRef = ref();
|
|
|
- // let mainTitle = ref('国家能源神东煤炭集团');
|
|
|
- let mainTitle = ref('XXXX集团');
|
|
|
- const isShowDialog = ref(false);
|
|
|
+import { ref, reactive, nextTick, onMounted, onUnmounted } from 'vue';
|
|
|
+import mineWind from './components/mine-wind.vue';
|
|
|
+import riskWarn from './components/risk-warn.vue';
|
|
|
+import fileShare from './components/file-share.vue';
|
|
|
+import windRoad from './components/wind-road.vue';
|
|
|
+import sceneKey from './components/scene-key.vue';
|
|
|
+import iconLight from './components/icon-light.vue';
|
|
|
+import dialogModal from './components/dialog-modal.vue';
|
|
|
+import { getHomeData, getList } from './clique.api'
|
|
|
+const dialogModalRef = ref();
|
|
|
+// let mainTitle = ref('国家能源神东煤炭集团');
|
|
|
+let mainTitle = ref('XXXX集团');
|
|
|
+const isShowDialog = ref(false);
|
|
|
|
|
|
- //矿井通风状态数据
|
|
|
- let airKjStatus=reactive<any[]>([])
|
|
|
+//矿井通风状态数据
|
|
|
+let airKjStatus = reactive<any[]>([])
|
|
|
|
|
|
- //风险分析与预警数据
|
|
|
- let earlyWarn=reactive({
|
|
|
- levels: 0,
|
|
|
- fire: '',
|
|
|
- sb: '',
|
|
|
- ws: '',
|
|
|
- fc: '',
|
|
|
- tf: '',
|
|
|
- })
|
|
|
+//风险分析与预警数据
|
|
|
+let earlyWarn = ref<any[]>([])
|
|
|
|
|
|
- //通防综合监测数据
|
|
|
- let compositeData=ref<any[]>([])
|
|
|
+//通防综合监测数据
|
|
|
+let compositeData = ref<any[]>([])
|
|
|
|
|
|
- //地图区域详情数据
|
|
|
- let centerDetail=ref({})
|
|
|
+//地图区域详情数据
|
|
|
+let centerDetail = ref({})
|
|
|
|
|
|
- //文件共享中心数据
|
|
|
- let shareData=reactive<any[]>([])
|
|
|
+//文件共享中心数据
|
|
|
+let shareData = reactive<any[]>([])
|
|
|
|
|
|
- //通风巷道长度统计数据
|
|
|
- let roadData=reactive({
|
|
|
- totallength:0,
|
|
|
- data:[],
|
|
|
- data1:[]
|
|
|
- })
|
|
|
+//通风巷道长度统计数据
|
|
|
+let roadData = reactive({
|
|
|
+ totallength: 0,
|
|
|
+ data: [],
|
|
|
+ data1: []
|
|
|
+})
|
|
|
|
|
|
// https获取监测数据
|
|
|
let timer: null | NodeJS.Timeout = null;
|
|
|
@@ -109,68 +102,56 @@ function getMonitor() {
|
|
|
}
|
|
|
|
|
|
//获取公司端首页数据
|
|
|
-async function getHomeDataList(){
|
|
|
- let res=await getHomeData()
|
|
|
- console.log(res,'公司端首页数据----------')
|
|
|
- if(res.length!=0){
|
|
|
- earlyWarn.levels=res[0].sys_warndata.info.sysInfo.synthesizeS.maxLevel
|
|
|
- earlyWarn.fire=res[0].sys_warndata.info.sysInfo.fireS.maxLevel_str
|
|
|
- earlyWarn.sb=res[0].sys_warndata.info.sysInfo.deviceWarnInfo.maxLevel_str
|
|
|
- earlyWarn.ws=res[0].sys_warndata.info.sysInfo.gasS.maxLevel_str
|
|
|
- earlyWarn.fc=res[0].sys_warndata.info.sysInfo.dustS.maxLevel_str
|
|
|
- earlyWarn.tf=res[0].sys_warndata.info.sysInfo.ventS.maxLevel_str
|
|
|
-
|
|
|
- roadData.totallength=res[0].sys_data.totallength
|
|
|
- roadData.data.length=0
|
|
|
- roadData.data1.length=0
|
|
|
-
|
|
|
- airKjStatus.length=0
|
|
|
- res.forEach(el=>{
|
|
|
- airKjStatus.push({deviceName:el.sys_data.deviceName,jf:el.sys_data.zongjinfeng,xf:el.sys_data.xufengliang,hf:el.sys_data.zonghuifeng})
|
|
|
+async function getHomeDataList() {
|
|
|
+ let res = await getHomeData()
|
|
|
+ console.log(res, '公司端首页数据----------')
|
|
|
+ if (res.length != 0) {
|
|
|
+ earlyWarn.value = res
|
|
|
+ roadData.totallength = res[0].sys_data.totallength
|
|
|
+ roadData.data.length = 0
|
|
|
+ roadData.data1.length = 0
|
|
|
+ airKjStatus.length = 0
|
|
|
+ res.forEach(el => {
|
|
|
+ airKjStatus.push({ deviceName: el.sys_data.deviceName, jf: el.sys_data.zongjinfeng, xf: el.sys_data.xufengliang, hf: el.sys_data.zonghuifeng })
|
|
|
roadData.data.push(el.sys_data.totallength)
|
|
|
roadData.data1.push(el.sys_data.deviceName)
|
|
|
})
|
|
|
-
|
|
|
- compositeData.value=res[0].majorpath_data
|
|
|
- centerDetail.value=res[0]
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ compositeData.value = res[0].majorpath_data
|
|
|
+ centerDetail.value = res[0]
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
//获取文件共享中心数据
|
|
|
-async function getLists(){
|
|
|
- let res=await getList()
|
|
|
- if(res.length!=0){
|
|
|
- shareData.length=0
|
|
|
- res.forEach(el=>{
|
|
|
- shareData.push({title:el.sysOrgName,value:el.tolalNum,value1:el.approveNum})
|
|
|
+async function getLists() {
|
|
|
+ let res = await getList()
|
|
|
+ if (res.length != 0) {
|
|
|
+ shareData.length = 0
|
|
|
+ res.forEach(el => {
|
|
|
+ shareData.push({ title: el.sysOrgName, value: el.tolalNum, value1: el.approveNum })
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
- function showDetail(code, leftV, topV) {
|
|
|
- if (code) {
|
|
|
- isShowDialog.value = true;
|
|
|
- }
|
|
|
- nextTick(() => {
|
|
|
- const tooltipDom = document.getElementById('detailModal') as HTMLElement;
|
|
|
- tooltipDom.style.left = leftV;
|
|
|
- tooltipDom.style.top = topV;
|
|
|
- });
|
|
|
- }
|
|
|
- function closeDialog() {
|
|
|
- isShowDialog.value = false;
|
|
|
+function showDetail(code, leftV, topV) {
|
|
|
+ if (code) {
|
|
|
+ isShowDialog.value = true;
|
|
|
}
|
|
|
+ nextTick(() => {
|
|
|
+ const tooltipDom = document.getElementById('detailModal') as HTMLElement;
|
|
|
+ tooltipDom.style.left = leftV;
|
|
|
+ tooltipDom.style.top = topV;
|
|
|
+ });
|
|
|
+}
|
|
|
+function closeDialog() {
|
|
|
+ isShowDialog.value = false;
|
|
|
+}
|
|
|
|
|
|
- onMounted(()=>{
|
|
|
- getHomeDataList()
|
|
|
- getLists()
|
|
|
- getMonitor()
|
|
|
- })
|
|
|
- onUnmounted(() => {
|
|
|
+onMounted(() => {
|
|
|
+ getHomeDataList()
|
|
|
+ getLists()
|
|
|
+ getMonitor()
|
|
|
+})
|
|
|
+onUnmounted(() => {
|
|
|
if (timer) {
|
|
|
clearTimeout(timer);
|
|
|
timer = null;
|
|
|
@@ -178,149 +159,156 @@ async function getLists(){
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- @font-face {
|
|
|
- font-family: 'douyuFont';
|
|
|
- src: url('../../../../assets/font/douyuFont.otf');
|
|
|
+@font-face {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ src: url('../../../../assets/font/douyuFont.otf');
|
|
|
+}
|
|
|
+
|
|
|
+// @font-face {
|
|
|
+// font-family: 'yjsz';
|
|
|
+// src: url('../../../../assets/font/yjsz.TTF');
|
|
|
+// }
|
|
|
+.company-home {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ background: url('../../../../assets/images/company/home-pageBg.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .top-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 97px;
|
|
|
+ background: url('../../../../assets/images/company/top-bg.png') no-repeat center;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ .main-title {
|
|
|
+ height: 96px;
|
|
|
+ color: #fff;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- // @font-face {
|
|
|
- // font-family: 'yjsz';
|
|
|
- // src: url('../../../../assets/font/yjsz.TTF');
|
|
|
- // }
|
|
|
- .company-home {
|
|
|
+ .company-content {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- position: relative;
|
|
|
- background: url('../../../../assets/images/company/home-pageBg.png') no-repeat center;
|
|
|
+ background: url('../../../../assets/images/company/content-bg.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
- .top-bg {
|
|
|
- width: 100%;
|
|
|
- height: 97px;
|
|
|
- background: url('../../../../assets/images/company/top-bg.png') no-repeat center;
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
- .main-title {
|
|
|
- height: 96px;
|
|
|
- color: #fff;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 20px;
|
|
|
- letter-spacing: 2px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .company-content {
|
|
|
+ .area-content {
|
|
|
position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
+ top: 45px;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: url('../../../../assets/images/company/content-bg.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ height: calc(100% - 45px);
|
|
|
+ padding: 0px 20px 20px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .area-content {
|
|
|
- position: absolute;
|
|
|
- top: 45px;
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 45px);
|
|
|
- padding: 0px 20px 20px 20px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .left-area {
|
|
|
+ width: 23%;
|
|
|
+ height: 100%;
|
|
|
+ margin-right: 15px;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- .left-area {
|
|
|
- width: 23%;
|
|
|
- height: 100%;
|
|
|
- margin-right: 15px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .area-card {
|
|
|
- width: 100%;
|
|
|
- height: calc(60% - 15px);
|
|
|
- margin-bottom: 15px;
|
|
|
- background: url('../../../../assets/images/company/area-card.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .area-card1 {
|
|
|
- width: 100%;
|
|
|
- height: 40%;
|
|
|
- background: url('../../../../assets/images/company/area-card1.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
+ .area-card {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(60% - 15px);
|
|
|
+ margin-bottom: 15px;
|
|
|
+ background: url('../../../../assets/images/company/area-card.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
- .center-area {
|
|
|
- width: calc(54% - 30px);
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- .center-bg {
|
|
|
- position: absolute;
|
|
|
- bottom: 269px;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- height: calc(100% - 325px);
|
|
|
- width: 100%;
|
|
|
- background: url('../../../../assets/images/company/home-dz.png') no-repeat center;
|
|
|
- background-position: 50% 90%;
|
|
|
- .bg-map {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: url('../../../../assets/images/company/home-map.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .area-card2 {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 62px;
|
|
|
- width: 568px;
|
|
|
- height: 437px;
|
|
|
- background: url('../../../../assets/images/company/area-card2.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- // pointer-events: auto;
|
|
|
- }
|
|
|
+ .area-card1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 40%;
|
|
|
+ background: url('../../../../assets/images/company/area-card1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .area-card3 {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: 0px;
|
|
|
+ .center-area {
|
|
|
+ width: calc(54% - 30px);
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .center-bg {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 269px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ height: calc(100% - 325px);
|
|
|
+ width: 100%;
|
|
|
+ background: url('../../../../assets/images/company/home-dz.png') no-repeat center;
|
|
|
+ background-position: 50% 90%;
|
|
|
+
|
|
|
+ .bg-map {
|
|
|
width: 100%;
|
|
|
- height: 269px;
|
|
|
- background: url('../../../../assets/images/company/area-card3.png') no-repeat;
|
|
|
+ height: 100%;
|
|
|
+ background: url('../../../../assets/images/company/home-map.png') no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .right-area {
|
|
|
- width: 23%;
|
|
|
- height: 100%;
|
|
|
- margin-left: 15px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .area-card2 {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 62px;
|
|
|
+ width: 568px;
|
|
|
+ height: 437px;
|
|
|
+ background: url('../../../../assets/images/company/area-card2.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
// pointer-events: auto;
|
|
|
- .area-card {
|
|
|
- width: 100%;
|
|
|
- height: calc(60% - 15px);
|
|
|
- margin-bottom: 15px;
|
|
|
- background: url('../../../../assets/images/company/area-card.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .area-card1 {
|
|
|
- width: 100%;
|
|
|
- height: 40%;
|
|
|
- background: url('../../../../assets/images/company/area-card1.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
+ .area-card3 {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 269px;
|
|
|
+ background: url('../../../../assets/images/company/area-card3.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-area {
|
|
|
+ width: 23%;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 15px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ // pointer-events: auto;
|
|
|
+ .area-card {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(60% - 15px);
|
|
|
+ margin-bottom: 15px;
|
|
|
+ background: url('../../../../assets/images/company/area-card.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .area-card1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 40%;
|
|
|
+ background: url('../../../../assets/images/company/area-card1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
