|
|
@@ -51,301 +51,309 @@
|
|
|
</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 BillboardEntry from './components/billboard-entry.vue';
|
|
|
- import windRoad from './components/wind-road-middle.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('国家能源神东煤炭集团');
|
|
|
- // let mainTitle = ref('XXXX集团');
|
|
|
- const isShowDialog = ref(false);
|
|
|
- const dialogTitle = ref('');
|
|
|
+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 BillboardEntry from './components/billboard-entry.vue';
|
|
|
+import windRoad from './components/wind-road-middle.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('国家能源神东煤炭集团');
|
|
|
+// let mainTitle = ref('XXXX集团');
|
|
|
+const isShowDialog = ref(false);
|
|
|
+const dialogTitle = ref('');
|
|
|
|
|
|
- //矿井通风状态数据
|
|
|
- let airKjStatus = reactive<any[]>([]);
|
|
|
+//矿井通风状态数据
|
|
|
+let airKjStatus = reactive<any[]>([]);
|
|
|
|
|
|
- //风险分析与预警数据
|
|
|
- let earlyWarn = ref<any[]>([]);
|
|
|
+//风险分析与预警数据
|
|
|
+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 warningList = ref([]);
|
|
|
+let warningList = ref([]);
|
|
|
|
|
|
- //通风巷道长度统计数据
|
|
|
- let roadData = reactive({
|
|
|
- totallength: 0,
|
|
|
- data: [],
|
|
|
- data1: [],
|
|
|
- });
|
|
|
+//通风巷道长度统计数据
|
|
|
+let roadData = reactive({
|
|
|
+ totallength: 0,
|
|
|
+ data: [],
|
|
|
+ data1: [],
|
|
|
+});
|
|
|
|
|
|
- let orgcode = ref('');
|
|
|
+let orgcode = ref('');
|
|
|
|
|
|
- // https获取监测数据
|
|
|
- let timer: null | NodeJS.Timeout = null;
|
|
|
- function getMonitor() {
|
|
|
- timer = setTimeout(async () => {
|
|
|
- await getHomeDataList();
|
|
|
- await getLists();
|
|
|
- if (timer) {
|
|
|
- timer = null;
|
|
|
- }
|
|
|
- getMonitor();
|
|
|
- }, 10000);
|
|
|
- }
|
|
|
+// https获取监测数据
|
|
|
+let timer: null | NodeJS.Timeout = null;
|
|
|
+function getMonitor() {
|
|
|
+ timer = setTimeout(async () => {
|
|
|
+ await getHomeDataList();
|
|
|
+ await getLists();
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ getMonitor();
|
|
|
+ }, 10000);
|
|
|
+}
|
|
|
+
|
|
|
+//获取公司端首页数据
|
|
|
+async function getHomeDataList() {
|
|
|
+ let res = await getHomeData();
|
|
|
+ console.log(res, '公司端首页数据----------');
|
|
|
+ if (res && res.length > 0) {
|
|
|
+ earlyWarn.value = res;
|
|
|
+ roadData.totallength = res.reduce((len, r) => {
|
|
|
+ return r.sys_data ? len + r.sys_data.totallength : len;
|
|
|
+ }, 0);
|
|
|
+ roadData.data.length = 0;
|
|
|
+ roadData.data1.length = 0;
|
|
|
+ airKjStatus.length = 0;
|
|
|
+ const warningListTemp: { orgcode: string; isWarning: boolean }[] = [];
|
|
|
+ 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,
|
|
|
+ isWarning: el.sys_data.zongjinfeng < el.sys_data.xufengliang,
|
|
|
+ });
|
|
|
|
|
|
- //获取公司端首页数据
|
|
|
- async function getHomeDataList() {
|
|
|
- let res = await getHomeData();
|
|
|
- console.log(res, '公司端首页数据----------');
|
|
|
- if (res && res.length > 0) {
|
|
|
- earlyWarn.value = res;
|
|
|
- roadData.totallength = res.reduce((len, r) => {
|
|
|
- return r.sys_data ? len + r.sys_data.totallength : len;
|
|
|
- }, 0);
|
|
|
- roadData.data.length = 0;
|
|
|
- roadData.data1.length = 0;
|
|
|
- airKjStatus.length = 0;
|
|
|
- const warningListTemp: { orgcode: string; isWarning: boolean }[] = [];
|
|
|
- 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,
|
|
|
- isWarning: el.sys_data.zongjinfeng < el.sys_data.xufengliang,
|
|
|
- });
|
|
|
+ //临时添加，前端判断，后期后端加上预警再处理
|
|
|
+ if (el.sys_data.zongjinfeng < el.sys_data.xufengliang) {
|
|
|
+ warningListTemp.push({ orgcode: el.orgcode, isWarning: true });
|
|
|
+ } else {
|
|
|
+ warningListTemp.push({ orgcode: el.orgcode, isWarning: false });
|
|
|
+ }
|
|
|
|
|
|
- //临时添加，前端判断，后期后端加上预警再处理
|
|
|
- if (el.sys_data.zongjinfeng < el.sys_data.xufengliang) {
|
|
|
- warningListTemp.push({ orgcode: el.orgcode, isWarning: true });
|
|
|
- } else {
|
|
|
- warningListTemp.push({ orgcode: el.orgcode, isWarning: false });
|
|
|
- }
|
|
|
+ roadData.data.push(el.sys_data.flength);
|
|
|
+ // roadData.data.push(el.sys_data.totallength);
|
|
|
+ roadData.data1.push(el.sys_data.deviceName);
|
|
|
+ });
|
|
|
+ warningList.value = warningListTemp;
|
|
|
+ compositeData.value = res.reduce((arr, e) => {
|
|
|
+ return [...arr, ...e.majorpath_data];
|
|
|
+ }, []);
|
|
|
|
|
|
- roadData.data.push(el.sys_data.flength);
|
|
|
- // roadData.data.push(el.sys_data.totallength);
|
|
|
- roadData.data1.push(el.sys_data.deviceName);
|
|
|
- });
|
|
|
- warningList.value = warningListTemp;
|
|
|
- compositeData.value = res.reduce((arr, e) => {
|
|
|
- return [...arr, ...e.majorpath_data];
|
|
|
- }, []);
|
|
|
+ let centerDetail = res.filter((v) => v.orgcode == orgcode.value)[0];
|
|
|
+ if (centerDetail.majorpath_data.length != 0 || JSON.stringify(centerDetail.sys_data) != '{}') {
|
|
|
centerDetail.value = res.filter((v) => v.orgcode == orgcode.value)[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 });
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function showDetail(code, label, leftV, topV) {
|
|
|
- if (code) {
|
|
|
- orgcode.value = code;
|
|
|
- dialogTitle.value = label;
|
|
|
- isShowDialog.value = true;
|
|
|
- getHomeDataList();
|
|
|
- }
|
|
|
- nextTick(() => {
|
|
|
- const tooltipDom = document.getElementById('detailModal') as HTMLElement;
|
|
|
- tooltipDom.style.left = leftV;
|
|
|
- tooltipDom.style.top = topV;
|
|
|
+}
|
|
|
+//获取文件共享中心数据
|
|
|
+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 closeDialog() {
|
|
|
- isShowDialog.value = false;
|
|
|
- }
|
|
|
+}
|
|
|
|
|
|
- onMounted(() => {
|
|
|
+function showDetail(code, label, leftV, topV) {
|
|
|
+ if (code) {
|
|
|
+ orgcode.value = code;
|
|
|
+ dialogTitle.value = label;
|
|
|
+ isShowDialog.value = true;
|
|
|
getHomeDataList();
|
|
|
- getLists();
|
|
|
- getMonitor();
|
|
|
- });
|
|
|
- onUnmounted(() => {
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = null;
|
|
|
- }
|
|
|
+ }
|
|
|
+ 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(() => {
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+});
|
|
|
</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;
|
|
|
+ .area-content {
|
|
|
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 {
|
|
|
- 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;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
|
|
|
- .left-area {
|
|
|
- width: 23%;
|
|
|
- height: 100%;
|
|
|
- margin-right: 15px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- .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-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-card1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 40%;
|
|
|
+ background: url('../../../../assets/images/company/area-card1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-area {
|
|
|
+ width: 1000px;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
|
|
|
- .center-area {
|
|
|
- width: 1000px;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
+ .center-bg {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 240px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ width: 1128px;
|
|
|
+ height: 630px;
|
|
|
+ background: url('../../../../assets/images/company/home-dz.png') no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
+ background-position: 50% 50px;
|
|
|
z-index: 0;
|
|
|
- .center-bg {
|
|
|
- position: absolute;
|
|
|
- bottom: 240px;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- width: 1128px;
|
|
|
- height: 630px;
|
|
|
- background: url('../../../../assets/images/company/home-dz.png') no-repeat center;
|
|
|
+
|
|
|
+ .bg-map {
|
|
|
+ width: 1086px;
|
|
|
+ height: 610px;
|
|
|
+ left: 30px;
|
|
|
+ top: 60px;
|
|
|
+ background: url('../../../../assets/images/company/home-map.png') no-repeat center;
|
|
|
background-size: contain;
|
|
|
- background-position: 50% 50px;
|
|
|
+ // background-position: 0px 70px;
|
|
|
+ position: relative;
|
|
|
z-index: 0;
|
|
|
- .bg-map {
|
|
|
- width: 1086px;
|
|
|
- height: 610px;
|
|
|
- left: 30px;
|
|
|
- top: 60px;
|
|
|
- background: url('../../../../assets/images/company/home-map.png') no-repeat center;
|
|
|
- background-size: contain;
|
|
|
- // background-position: 0px 70px;
|
|
|
- position: relative;
|
|
|
- z-index: 0;
|
|
|
- }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .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-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-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%;
|
|
|
- }
|
|
|
+ .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;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- // 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%;
|
|
|
- }
|
|
|
+ .right-area {
|
|
|
+ width: 23%;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 15px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
|
|
|
- .area-card1 {
|
|
|
- width: 100%;
|
|
|
- height: 40%;
|
|
|
- background: url('../../../../assets/images/company/area-card1.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%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
