|
@@ -2,13 +2,14 @@
|
|
|
<div class="scenario">
|
|
|
<div class="title">切换场景</div>
|
|
|
<div class="scenario-box">
|
|
|
- <div class="scenario-item"
|
|
|
- @click="handleScene(item,index)"
|
|
|
- :class="item.code===activeIndex?'active':''"
|
|
|
- :key="index"
|
|
|
- v-for="(item,index) in popList"
|
|
|
+ <div
|
|
|
+ class="scenario-item"
|
|
|
+ @click="handleScene(item, index)"
|
|
|
+ :class="item.code === activeIndex ? 'active' : ''"
|
|
|
+ :key="index"
|
|
|
+ v-for="(item, index) in popList"
|
|
|
>
|
|
|
- <img :src="parseImgUrl('page-officehome',item.img)" alt="">
|
|
|
+ <img :src="parseImgUrl('page-officehome', item.img)" alt="" />
|
|
|
<span>{{ item.name }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -16,37 +17,47 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { defineComponent, computed, onMounted, reactive, toRefs, watch, getCurrentInstance } from 'vue'
|
|
|
-import { switchoverSceneHttp } from '@/apis/envmonitor'
|
|
|
-import Keys from '@/constant/key'
|
|
|
-import { getUserInfo, parseImgUrl } from '@/utils'
|
|
|
-import { Toast } from 'vant'
|
|
|
+import {
|
|
|
+ defineComponent,
|
|
|
+ computed,
|
|
|
+ onMounted,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
+ watch,
|
|
|
+ getCurrentInstance,
|
|
|
+} from "vue";
|
|
|
+import { switchoverSceneHttp } from "@/apis/envmonitor";
|
|
|
+import Keys from "@/constant/key";
|
|
|
+import { getUserInfo, parseImgUrl } from "@/utils";
|
|
|
+import { Toast } from "vant";
|
|
|
|
|
|
export default defineComponent({
|
|
|
props: {
|
|
|
projectId: {
|
|
|
type: String,
|
|
|
- default: () => ''
|
|
|
+ default: () => "",
|
|
|
},
|
|
|
spaceId: {
|
|
|
type: String,
|
|
|
- default: () => ''
|
|
|
+ default: () => "",
|
|
|
},
|
|
|
- popList: { // 场景信息
|
|
|
+ popList: {
|
|
|
+ // 场景信息
|
|
|
type: Array,
|
|
|
- default: () => []
|
|
|
+ default: () => [],
|
|
|
},
|
|
|
vanPopupIndex: {
|
|
|
type: String,
|
|
|
- default: () => ''
|
|
|
- }
|
|
|
+ default: () => "",
|
|
|
+ },
|
|
|
},
|
|
|
setup(props, contx) {
|
|
|
- const sceneDetail: any = {}
|
|
|
+ const sceneDetail: any = {};
|
|
|
// const activeIndex: any = props.vanPopupIndex
|
|
|
const proxyData = reactive({
|
|
|
parseImgUrl: parseImgUrl,
|
|
|
- showSecenDetailDalig: false, // 是否展示场景详情页面
|
|
|
+ popList: props.popList,
|
|
|
+ showSecenDetailDalig: false, // 是否展示场景详情页面
|
|
|
sceneDetail: sceneDetail,
|
|
|
activeIndex: props.vanPopupIndex,
|
|
|
/**
|
|
@@ -56,68 +67,72 @@ export default defineComponent({
|
|
|
Toast.loading({
|
|
|
duration: 0, // 持续展示 toast
|
|
|
forbidClick: true,
|
|
|
- message: '正在切换...'
|
|
|
- })
|
|
|
+ message: "正在切换...",
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* 结束
|
|
|
*/
|
|
|
loadinngEnd() {
|
|
|
- Toast.clear()
|
|
|
+ Toast.clear();
|
|
|
},
|
|
|
// 切换场景
|
|
|
handleScene(mitem: any, idx: any) {
|
|
|
- let popList = props.popList
|
|
|
- let name = mitem.name
|
|
|
+ let popList: any = props.popList;
|
|
|
+ let name = mitem.name;
|
|
|
for (let i = 0; i < popList.length; i++) {
|
|
|
- let item: any = popList[i]
|
|
|
+ let item: any = popList[i];
|
|
|
if (name === item.name) {
|
|
|
- proxyData.sceneDetail = JSON.parse(JSON.stringify(item))
|
|
|
- proxyData.sceneDetail.textObj = []
|
|
|
+ proxyData.sceneDetail = JSON.parse(JSON.stringify(item));
|
|
|
+ proxyData.sceneDetail.textObj = [];
|
|
|
|
|
|
item.textObj.map((element: any, idx: any) => {
|
|
|
setTimeout(() => {
|
|
|
- proxyData.sceneDetail.textObj.push(element)
|
|
|
- }, 150 * (idx + 1))
|
|
|
- })
|
|
|
+ proxyData.sceneDetail.textObj.push(element);
|
|
|
+ }, 150 * (idx + 1));
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
- proxyData.loadingStart()
|
|
|
- proxyData.activeIndex = proxyData.sceneDetail.code
|
|
|
+ proxyData.loadingStart();
|
|
|
+ proxyData.activeIndex = proxyData.sceneDetail.code;
|
|
|
// 展示场景详情页面
|
|
|
- proxyData.showSecenDetailDalig = true
|
|
|
- const userInfo: any = getUserInfo()
|
|
|
+ proxyData.showSecenDetailDalig = true;
|
|
|
+ const userInfo: any = getUserInfo();
|
|
|
const params = {
|
|
|
spaceId: props.spaceId,
|
|
|
projectId: props.projectId,
|
|
|
type: proxyData.sceneDetail.code,
|
|
|
- pubname: userInfo.pubname
|
|
|
- }
|
|
|
- switchoverSceneHttp(params).then(res => {
|
|
|
- // contx.emit('timerSpaceInfo')
|
|
|
- proxyData.loadinngEnd()
|
|
|
- contx.emit('setHeadScene', proxyData.sceneDetail.name, proxyData.sceneDetail)
|
|
|
- }).catch(() => {
|
|
|
- proxyData.loadinngEnd()
|
|
|
- contx.emit('setHeadScene', proxyData.sceneDetail.name, proxyData.sceneDetail)
|
|
|
- // contx.emit('timerSpaceInfo')
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- watch(
|
|
|
- props,
|
|
|
- (newProps: any) => {
|
|
|
- proxyData.activeIndex = newProps.vanPopupIndex
|
|
|
- // if (newProps.spaceId) { // 空间id改变的重新获取值调用接口
|
|
|
- //
|
|
|
- // }
|
|
|
- }
|
|
|
- )
|
|
|
+ pubname: userInfo.pubname,
|
|
|
+ };
|
|
|
+ switchoverSceneHttp(params)
|
|
|
+ .then((res) => {
|
|
|
+ // contx.emit('timerSpaceInfo')
|
|
|
+ proxyData.loadinngEnd();
|
|
|
+ contx.emit(
|
|
|
+ "setHeadScene",
|
|
|
+ proxyData.sceneDetail.name,
|
|
|
+ proxyData.sceneDetail
|
|
|
+ );
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ proxyData.loadinngEnd();
|
|
|
+ contx.emit(
|
|
|
+ "setHeadScene",
|
|
|
+ proxyData.sceneDetail.name,
|
|
|
+ proxyData.sceneDetail
|
|
|
+ );
|
|
|
+ // contx.emit('timerSpaceInfo')
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ watch(props, (newProps: any) => {
|
|
|
+ proxyData.activeIndex = newProps.vanPopupIndex;
|
|
|
+ });
|
|
|
return {
|
|
|
- ...toRefs(proxyData)
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
+ ...toRefs(proxyData),
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -150,7 +165,7 @@ export default defineComponent({
|
|
|
font-size: 12px;
|
|
|
line-height: 14px;
|
|
|
text-align: center;
|
|
|
- color: #4D5262;
|
|
|
+ color: #4d5262;
|
|
|
|
|
|
img {
|
|
|
display: block;
|
|
@@ -161,7 +176,7 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
- background: #FFE823;
|
|
|
+ background: #ffe823;
|
|
|
border-radius: 16px;
|
|
|
}
|
|
|
}
|