|
|
@@ -22,27 +22,55 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="content-img">
|
|
|
- <div v-for="(item, index) in StStatsData.StStatsData" :key="index" @click="tabSwitch(item, 2)">
|
|
|
- <div>{{ item.type_name }}</div>
|
|
|
- <div>{{ item.all_num }}</div>
|
|
|
+ <!-- autoplay -->
|
|
|
+ <a-carousel arrows :beforeChange="afterChangeData" v-if="showCarousel">
|
|
|
+ <template #prevArrow>
|
|
|
+ <div class="custom-slick-arrow" style="left: 10px; zindex: 1">
|
|
|
+ <left-circle-outlined />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #nextArrow>
|
|
|
+ <div class="custom-slick-arrow" style="right: 10px; zindex: 1">
|
|
|
+ <right-circle-outlined />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="top-pd">
|
|
|
+ <div class="content-img">
|
|
|
+ <div v-for="(item, index) in StStatsData.StStatsData" :key="index" @click="tabSwitch(item, 2)">
|
|
|
+ <div>{{ item.type_name }}</div>
|
|
|
+ <div>{{ item.all_num }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="total">
|
|
|
+ <div>自建站总数</div>
|
|
|
+ <div>{{ num.totai }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="total">
|
|
|
- <div>总数</div>
|
|
|
- <div>{{ num.totai }}</div>
|
|
|
+ <div class="top-pd">
|
|
|
+ <div class="content-img jr">
|
|
|
+ <div v-for="(item, index) in StStatsData.StStatsData2" :key="index" @click="tabSwitch(item, 2)">
|
|
|
+ <div>{{ item.type_name }}</div>
|
|
|
+ <div>{{ item.all_num }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="total">
|
|
|
+ <div>接入站总数</div>
|
|
|
+ <div>{{ num2.totai }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </a-carousel>
|
|
|
+
|
|
|
<div class="abnormal">
|
|
|
<div @click="isOkFn(1)">
|
|
|
<img src="/src/assets/newDp/img6.png">
|
|
|
<span>通信正常</span>
|
|
|
- <span>{{ num.normal }}</span>
|
|
|
+ <span>{{ refTypr==0?num.normal:num2.normal }}</span>
|
|
|
<span>个</span>
|
|
|
</div>
|
|
|
<div @click="isOkFn(2)">
|
|
|
<img src="/src/assets/newDp/img7.png">
|
|
|
<span>通信异常</span>
|
|
|
- <span>{{ num.abnormal }}</span>
|
|
|
+ <span>{{ refTypr==0?num.abnormal:num2.abnormal }}</span>
|
|
|
<span>个</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -93,12 +121,14 @@ import weatherTitle from '../../../components/Title/weatherTitle.vue';
|
|
|
import doubleScreenBack from '/@/assets/images/doubleScreenBack.png';
|
|
|
import { useBasicStore } from '/@/store/modules/basicData';
|
|
|
import { getStStats, getRealDataNum } from '/@/api/swHome/index';
|
|
|
+import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
|
|
|
import { fontSize } from '../../../utils/util';
|
|
|
import eventBus from '/@/utils/eventBus';
|
|
|
import { useMapStore } from '/@/store/modules/map';
|
|
|
import { getAppEnvConfig } from '/@/utils/env';
|
|
|
+import { nextTick } from 'process';
|
|
|
const { VITE_GLOB_UPDATE_TIME } = getAppEnvConfig();
|
|
|
-
|
|
|
+let showCarousel = ref(false)
|
|
|
const mapStore = useBasicStore();
|
|
|
const mapStore2 = useMapStore()
|
|
|
let setIntervalFn = null
|
|
|
@@ -122,6 +152,7 @@ const settab2 = (item) => {
|
|
|
}
|
|
|
// 刷新数据
|
|
|
eventBus.on('statisRefreshName', () => {
|
|
|
+ showCarousel.value = false
|
|
|
console.log(setIntervalFn)
|
|
|
// isSwitch.value = 2;
|
|
|
if (setIntervalFn) {
|
|
|
@@ -129,8 +160,16 @@ eventBus.on('statisRefreshName', () => {
|
|
|
}
|
|
|
setIntervalFn = setInterval(() => {
|
|
|
getStStats().then((res) => {
|
|
|
- StStatsData.StStatsData = res.data;
|
|
|
- countNum(StStatsData.StStatsData);
|
|
|
+ // jr 接入
|
|
|
+ // zj 自建
|
|
|
+ StStatsData.StStatsData = res.data.zj;
|
|
|
+ StStatsData.StStatsData2 = res.data.jr;
|
|
|
+ countNum(StStatsData.StStatsData,num);
|
|
|
+ countNum(StStatsData.StStatsData2,num2);
|
|
|
+ getStStats(1)
|
|
|
+ nextTick(() => {
|
|
|
+ showCarousel.value = true
|
|
|
+ })
|
|
|
});
|
|
|
// 获取实时数据统计
|
|
|
getRealDataNum().then((res) => {
|
|
|
@@ -140,6 +179,21 @@ eventBus.on('statisRefreshName', () => {
|
|
|
}, VITE_GLOB_UPDATE_TIME)
|
|
|
|
|
|
});
|
|
|
+const setIfNew = (e) => {
|
|
|
+ eventBus.emit('homeType', e);
|
|
|
+
|
|
|
+}
|
|
|
+let refTypr = ref(0)
|
|
|
+//获取stDetailInfo结束
|
|
|
+const afterChangeData = (from,to) => {
|
|
|
+ refTypr.value = to
|
|
|
+ if(to == 0){
|
|
|
+ setIfNew(1)
|
|
|
+ }else{
|
|
|
+ setIfNew(0)
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
// 列表数据获取结束
|
|
|
function thousands(num) {
|
|
|
var str = num + ''
|
|
|
@@ -148,6 +202,7 @@ function thousands(num) {
|
|
|
}
|
|
|
let StStatsData = reactive({
|
|
|
StStatsData: {},
|
|
|
+ StStatsData2:{}
|
|
|
});
|
|
|
let realDataNum = reactive({
|
|
|
month_num: {},
|
|
|
@@ -162,8 +217,14 @@ onUnmounted(() => {
|
|
|
onMounted(() => {
|
|
|
setIntervalFn = setInterval(() => {
|
|
|
getStStats().then((res) => {
|
|
|
- StStatsData.StStatsData = res.data;
|
|
|
- countNum(StStatsData.StStatsData);
|
|
|
+ StStatsData.StStatsData = res.data.zj;
|
|
|
+ StStatsData.StStatsData2 = res.data.jr;
|
|
|
+ countNum(StStatsData.StStatsData,num);
|
|
|
+ countNum(StStatsData.StStatsData2,num2);
|
|
|
+ setIfNew(1)
|
|
|
+ nextTick(() => {
|
|
|
+ showCarousel.value = true
|
|
|
+ })
|
|
|
});
|
|
|
// 获取实时数据统计
|
|
|
getRealDataNum().then((res) => {
|
|
|
@@ -172,8 +233,14 @@ onMounted(() => {
|
|
|
});
|
|
|
}, 1200000)
|
|
|
getStStats().then((res) => {
|
|
|
- StStatsData.StStatsData = res.data;
|
|
|
- countNum(StStatsData.StStatsData);
|
|
|
+ StStatsData.StStatsData = res.data.zj;
|
|
|
+ StStatsData.StStatsData2 = res.data.jr;
|
|
|
+ countNum(StStatsData.StStatsData,num);
|
|
|
+ countNum(StStatsData.StStatsData2,num2);
|
|
|
+ setIfNew(1)
|
|
|
+ nextTick(() => {
|
|
|
+ showCarousel.value = true
|
|
|
+ })
|
|
|
});
|
|
|
// 获取实时数据统计
|
|
|
getRealDataNum().then((res) => {
|
|
|
@@ -191,36 +258,44 @@ let num = reactive({
|
|
|
normalArr: [],
|
|
|
abnormalArr: [],
|
|
|
});
|
|
|
-function countNum(StStatsData) {
|
|
|
- num.totai = 0;
|
|
|
- num.normal = 0;
|
|
|
- num.normalArr = [];
|
|
|
- num.abnormalArr = [];
|
|
|
+let num2 = reactive({
|
|
|
+ totai: 0,
|
|
|
+ normal: 0,
|
|
|
+ abnormal: 0,
|
|
|
+ normalPercent: 0,
|
|
|
+ abnormalPercent: 0,
|
|
|
+ normalArr: [],
|
|
|
+ abnormalArr: [],
|
|
|
+});
|
|
|
+function countNum(StStatsData,names) {
|
|
|
+ names.totai = 0;
|
|
|
+ names.normal = 0;
|
|
|
+ names.normalArr = [];
|
|
|
+ names.abnormalArr = [];
|
|
|
StStatsData.map((item) => {
|
|
|
- num.totai += item.all_num;
|
|
|
- num.normal += item.ok_num;
|
|
|
+ names.totai += item.all_num;
|
|
|
+ names.normal += item.ok_num;
|
|
|
item.detail.forEach((element) => {
|
|
|
if (element.state == 0) {
|
|
|
- num.normalArr.push(element);
|
|
|
+ names.normalArr.push(element);
|
|
|
} else {
|
|
|
- num.abnormalArr.push(element);
|
|
|
+ names.abnormalArr.push(element);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- num.abnormal = num.totai - num.normal;
|
|
|
- num.normalPercent = ((num.normal / num.totai) * 100).toFixed(2);
|
|
|
- num.abnormalPercent = ((num.abnormal / num.totai) * 100).toFixed(2);
|
|
|
+ names.abnormal = names.totai - names.normal;
|
|
|
+ names.normalPercent = ((names.normal / names.totai) * 100).toFixed(2);
|
|
|
+ names.abnormalPercent = ((names.abnormal / names.totai) * 100).toFixed(2);
|
|
|
}
|
|
|
function isOkFn(type) {
|
|
|
isSwitch.value = 2;
|
|
|
if (type == 1) {
|
|
|
- itemList = num.normalArr;
|
|
|
+ itemList = refTypr.value == 0?num.normalArr:num2.normalArr;
|
|
|
} else {
|
|
|
- itemList = num.abnormalArr;
|
|
|
+ itemList = refTypr.value == 0?num.abnormalArr:num2.abnormalArr;
|
|
|
}
|
|
|
}
|
|
|
-//获取stDetailInfo结束
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@@ -341,6 +416,37 @@ function isOkFn(type) {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .jr{
|
|
|
+ &>div:nth-child(1) {
|
|
|
+ top: -20px;
|
|
|
+ left: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &>div:nth-child(2) {
|
|
|
+ top: 200px;
|
|
|
+ left: 68px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &>div:nth-child(3) {
|
|
|
+ top: -20px;
|
|
|
+ right: 44px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &>div:nth-child(4) {
|
|
|
+ top: 86px;
|
|
|
+ right: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &>div:nth-child(5) {
|
|
|
+ top: 84px;
|
|
|
+ left: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &>div:nth-child(6) {
|
|
|
+ top: 200px;
|
|
|
+ right: 45px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.abnormal {
|
|
|
margin-top: 10px;
|
|
|
@@ -416,6 +522,7 @@ function isOkFn(type) {
|
|
|
// padding-left: 20px;
|
|
|
color: #fff;
|
|
|
font-size: 16px;
|
|
|
+
|
|
|
.qx-table-top {
|
|
|
display: flex;
|
|
|
}
|
|
|
@@ -465,6 +572,7 @@ function isOkFn(type) {
|
|
|
display: flex;
|
|
|
height: 300px;
|
|
|
color: #fff;
|
|
|
+
|
|
|
&>div {
|
|
|
width: 50%;
|
|
|
display: flex;
|
|
|
@@ -509,4 +617,53 @@ function isOkFn(type) {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+/* For demo */
|
|
|
+.ant-carousel :deep(.slick-slide) {
|
|
|
+ text-align: center;
|
|
|
+ // height: 160px;
|
|
|
+ // line-height: 160px;
|
|
|
+ // background: #364d79;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ font-size: 25px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgba(31, 45, 61, 0.11);
|
|
|
+ opacity: 0.3;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-carousel :deep(.custom-slick-arrow:before) {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-carousel :deep(.custom-slick-arrow:hover) {
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-carousel :deep(.slick-slide h3) {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.slick-arrow.custom-slick-arrow) {
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+:deep(.slick-active){
|
|
|
+ buttom{
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.ant-carousel .slick-next,.ant-carousel .slick-prev{
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+:deep(.ant-carousel .slick-dots li button){
|
|
|
+ background-color: #fff !important;
|
|
|
+}
|
|
|
+.top-pd{
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
</style>
|
cl
