lamp网站架构,江西省住房和城乡建设厅网站,好网站开发,淮南查查网随着社会的不断发现#xff0c;现实生活中有很多时候会使用到全景现实#xff0c;比如房地产行业vr看房#xff0c;汽车行业vr看车之类的#xff0c;全景可视化真实还原了现场的场景#xff0c;真正做到沉浸式体验。
现在我们基于vue3.0版本开发出了一款沉浸式的编辑器现实生活中有很多时候会使用到全景现实比如房地产行业vr看房汽车行业vr看车之类的全景可视化真实还原了现场的场景真正做到沉浸式体验。
现在我们基于vue3.0版本开发出了一款沉浸式的编辑器只需要使用全景相机在现场拍摄全景场景然后将场景倒入编辑器通过拖动图标和导航的方式绑定数据从而实现沉浸式场景可视化。
部分洁面 1、自定义动态添加数据绑定图标实时监控数据运行状态 2、自定义添加文字标记绑定文字文本标识场景设备名称 3、自定义添加场景标记点击可以切换不同场景视角 4、自定义添加地图经纬度标记查看当前标记位置 5、自定义添加音视频标记点击查看音视频播放 6、自定义添加网址和富文本标记点击跳转网址查看富文本内容 部分代码如下
(function (w) { // isFormat 表示是否格式化时间格式默认为格式化function $Date (isFormat true) { // 格式化日期 前台传值方式 引用类.dateFormat(1402233166999,yyyy-MM-dd hh:mm:ss)this.dateFormat function (date, fmt yyyy-MM-dd hh:mm:ss) {let getDate new Date(date);let o {M: getDate.getMonth() 1,d: getDate.getDate(),h: getDate.getHours(),m: getDate.getMinutes(),s: getDate.getSeconds(),q: Math.floor((getDate.getMonth() 3) / 3),S: getDate.getMilliseconds()};if (/(y)/.test(fmt)) {fmt fmt.replace(RegExp.$1, (getDate.getFullYear() ).substr(4 - RegExp.$1.length));}for (let k in o) {if (new RegExp(( k )).test(fmt)) {fmt fmt.replace(RegExp.$1, (RegExp.$1.length 1) ? (o[k]) : ((00 o[k]).substr(( o[k]).length)));}}return fmt;};// 当前日期时间this.now isFormat ? this.dateFormat(new Date()) : new Date();// 当前日期this.date this.dateFormat(new Date()).split( )[0];// 当前时间this.time this.dateFormat(new Date()).split( )[1];// 当前月this.month new Date().getMonth() 1;// 当前消失this.hours new Date().getHours();// 当前月天数this.monthDays (() {let nowMonth new Date().getMonth(); // 当前月let nowYear new Date().getYear(); // 当前年let monthStartDate new Date(nowYear, nowMonth, 1);let monthEndDate new Date(nowYear, nowMonth 1, 1);let days (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);return days;})();// 本周的开始日期和结束日日期this.endDayOfWeek (() {let nowMonth new Date().getMonth(); // 当前月let nowDay new Date().getDate(); // 当前日let nowDayOfWeek new Date().getDay(); // 今天本周的第几天let day nowDayOfWeek || 7;const start new Date(new Date().getFullYear(), nowMonth, nowDay - day 1);const starts new Date(new Date().getFullYear(), nowMonth, nowDay - day 1);const end new Date(new Date().getFullYear(), nowMonth, nowDay 7 - day);const ends new Date(new Date().getFullYear(), nowMonth, nowDay 7 - day);starts.setHours(23);starts.setMinutes(59);starts.setSeconds(59);ends.setHours(23);ends.setMinutes(59);ends.setSeconds(59);const firstDay isFormat ? this.dateFormat(start) : start;const firstDays isFormat ? this.dateFormat(starts) : starts;const lastDay isFormat ? this.dateFormat(end) : end;const lastDays isFormat ? this.dateFormat(ends) : ends;return {firstDay, firstDays, lastDay, lastDays};})();// 当天开始时间this.todayBegin (() {const now new Date();now.setHours(0);now.setMinutes(0);now.setSeconds(0);return isFormat ? this.dateFormat(now) : now;})();// 当天59时59分59秒this.todayEnd (() {const now new Date();now.setHours(23);now.setMinutes(59);now.setSeconds(59);return isFormat ? this.dateFormat(now) : now;})();// 指定月的最后第一天和最后一天this.getNowTheMothEnd (M) {if (typeof M ! number) {throw new Error(输入数字);}if (M 0 || M 12) {console.error(日期大于1小于12);return false;}const now new Date();let y now.getFullYear();let m M - 1;const firstDay new Date(y, m, 1);const firstDays new Date(y, m, 1);firstDays.setHours(23);firstDays.setMinutes(59);firstDays.setSeconds(59);const lastDay new Date(y, m 1, 0);const lastDays new Date(y, m 1, 0);lastDays.setHours(23);lastDays.setMinutes(59);lastDays.setSeconds(59);return {firstDay: isFormat ? this.dateFormat(firstDay) : firstDay,firstDays: isFormat ? this.dateFormat(firstDays) : firstDays,lastDay: isFormat ? this.dateFormat(lastDay) : lastDay,lastDays: isFormat ? this.dateFormat(lastDays) : lastDays};};// 当月的最后第一天和最后一天this.nowMothEnd (() {const now new Date();let y now.getFullYear();let m now.getMonth();const firstDay new Date(y, m, 1);const firstDays new Date(y, m, 1);firstDays.setHours(23);firstDays.setMinutes(59);firstDays.setSeconds(59);const lastDay new Date(y, m 1, 0);const lastDays new Date(y, m 1, 0);lastDays.setHours(23);lastDays.setMinutes(59);lastDays.setSeconds(59);return {firstDay: isFormat ? this.dateFormat(firstDay) : firstDay,firstDays: isFormat ? this.dateFormat(firstDays) : firstDays,lastDay: isFormat ? this.dateFormat(lastDay) : lastDay,lastDays: isFormat ? this.dateFormat(lastDays) : lastDays};})();// 今年的第一天和今年的最后一天this.nowYearsEnd (() {const now new Date();let y now.getFullYear();let m now.getMonth();console.log(m);const firstDay new Date(y, 0, 1);const firstDays new Date(y, 0, 1);firstDays.setHours(23);firstDays.setMinutes(59);firstDays.setSeconds(59);const lastDay new Date(y, 12, 0);const lastDays new Date(y, 12, 0);lastDays.setHours(23);lastDays.setMinutes(59);lastDays.setSeconds(59);return {firstDay: isFormat ? this.dateFormat(firstDay) : firstDay,firstDays: isFormat ? this.dateFormat(firstDays) : firstDays,lastDay: isFormat ? this.dateFormat(lastDay) : lastDay,lastDays: isFormat ? this.dateFormat(lastDays) : lastDays};})();// 指定年的第一天和今年的最后一天this.nowTheYearsEnd (Y) {const now new Date();let y Y;let m now.getMonth();console.log(m);const firstDay new Date(y, 0, 1);const firstDays new Date(y, 0, 1);firstDays.setHours(23);firstDays.setMinutes(59);firstDays.setSeconds(59);const lastDay new Date(y, 12, 0);const lastDays new Date(y, 12, 0);lastDays.setHours(23);lastDays.setMinutes(59);lastDays.setSeconds(59);return {firstDay: isFormat ? this.dateFormat(firstDay) : firstDay,firstDays: isFormat ? this.dateFormat(firstDays) : firstDays,lastDay: isFormat ? this.dateFormat(lastDay) : lastDay,lastDays: isFormat ? this.dateFormat(lastDays) : lastDays};};// 当前时间最近前N天this.getNowBeforeNday (N) {const now new Date().getTime();const before new Date().getTime() - (24 * 60 * 60 * 1000) * N;return {now: isFormat ? this.dateFormat(new Date(now)) : new Date(now),before: isFormat ? this.dateFormat(new Date(before)) : new Date(before)};};// 当前时间后面N天this.getNowAfterNday (N) {const now new Date().getTime();const after new Date().getTime() (24 * 60 * 60 * 1000) * N;return {now: isFormat ? this.dateFormat(new Date(now)) : new Date(now),after: isFormat ? this.dateFormat(new Date(after)) : new Date(after)};};}w.$Date $Date;
})(window);
const date window.$Date;
export const $Date date;templatediv classedit-hot_wrapperel-dialogv-modeldialogVisible:title${hotSpot.id ? 修改 : 新增}${spotTypeName(form.iconType)}标记:width360px:top10px:modalfalse:close-on-click-modalfalse:custom-classedit-hot_dialog:before-closecloseel-form :modelform refruleForm :rulesrulesel-form-item label标记名称 required propnameel-input v-modelform.name placeholder输入名称 clearable//el-form-item!--基础图标绑定--template v-ifform.iconType 1el-form-item label绑定数据 requiredel-selectv-modelform.devicesplaceholder选择设备filterablemultiplecollapse-tagsel-optionv-forv in deviveData.data:labelv.name:valuev.id:keyv.id/el-option/el-select/el-form-itemel-form-item label标记图标 required propspotTypesel-image:class[icon-types, form.spotTypes v.id ? active : ]v-forv in hotTypes:keyv.id:srcv.urlclickform.spotTypes v.id//el-form-item/template!-- 文字图标绑定--template v-ifform.iconType 2el-form-item label绑定数据 required propdevicesel-selectv-modelform.devicesplaceholder选择设备filterablemultiplecollapse-tagsel-optionv-forv in deviveData.data:labelv.name:valuev.id:keyv.id/el-option/el-select/el-form-itemel-form-item label文字内容 required proptextel-inputv-modelform.text:rows4typetextareaplaceholder输入文字内容//el-form-item/template!-- 场景图标绑定--template v-ifform.iconType 3el-form-item label绑定场景 required propsceneIdel-selectv-modelform.sceneIdplaceholder选择场景el-optionv-forv in scenes:labelv.name:valuev.id:keyv.id/el-option/el-select/el-form-item/template!-- 位置图标绑定--template v-ifform.iconType 4el-form-item label地图位置 required proplocaltionel-input v-modelform.localtion placeholder输入经纬度 clearable//el-form-itemel-form-item label经纬度查询el-button typesuccess查询/el-button/el-form-item/template!-- 位置图标绑定--template v-ifform.iconType 5el-form-item label媒体地址 required propmediael-input v-modelform.media.url placeholder输入媒体地址 clearable//el-form-itemel-form-item label媒体类型 requiredel-radio-group v-modelform.media.type classml-4el-radio :label0 sizelarge音频/el-radioel-radio :label1 sizelarge视频/el-radio/el-radio-group/el-form-item/template!-- 网址图标绑定--template v-ifform.iconType 6el-form-item label网站地址 required propwebsiteel-input v-modelform.website placeholder输入网址 clearable//el-form-item/template!-- 网址图标绑定--template v-ifform.iconType 7el-form-item label富文本 required prophtmlel-input v-modelform.html :rows5 typetextarea placeholder输入网址 clearable//el-form-item/template/el-formtemplate #footerspan classdialog-footerel-button clickclose取消/el-buttonel-button typeprimary clicksave(ruleForm)保存/el-button/span/template/el-dialog/div
/templatescript setup
import { res } from ../data/res.js;
// import store from ../../../store/index.js;
import { hotTypes } from ../utils/data.js;
import { defineEmits, defineProps } from vue;
import { reactive, ref, computed, onMounted } from vue;
import { useStore } from vuex;
import { ElMessage } from element-plus;
import store from ../vuex/vrViewer.js;
import { ICOM_TYPE } from ../utils/data.js;const ruleForm ref(null);
const rules reactive({name: [{required: true,trigger: change,message: 标记名称必填}],devices: [{required: true,trigger: change,message: 绑定设备必填}],spotTypes: [{required: true,trigger: change,message: 标记图标类型必填}],text: [{required: true,trigger: change,message: 文本内容必填}],sceneId: [{required: true,trigger: change,message: 绑定场景必填}],localtion: [{required: true,trigger: change,message: 绑定位置必填}],media: [{required: true,trigger: change,message: 媒体地址必填}],website: [{required: true,trigger: change,message: 网站地址必填}],html: [{required: true,trigger: change,message: 富文本内容必填}],
});
const dialogVisible ref(true);
const deviveData ref(res);
const props defineProps({hotSpot: {}, // 当前标记scenes: {}
});let stores useStore();
// 当前标记类型id
const iconType computed(() {return stores.state.vrViewer.type;
});// 当前标记类型名称
const spotTypeName () {const list Object.values(ICOM_TYPE);return list.find(v v.type form.value.iconType).name;
};const types ref(hotTypes);
const emits defineEmits([success,close,save
]);onMounted(() {// 编辑回显示if (props.hotSpot.id) {form.value props.hotSpot.data;// store.commit(vrViewer/setIconType, props.hotSpot.data.iconType);}
});const form ref({id: , // 标记idname: ,devices: [],spotTypes: types.value[0].id, // 图标类型spotUrl: types.value[0].url, // 标记图表urliconType: stores.state.vrViewer.type,text: , // 文字绑定sceneId: , // 场景绑定localtion: , // 位置经纬度绑定media: {type: 0, // 0代表音频 1代表视频url: // url播放地址},website: , // 网址html: , // html绑定
});const close () emits(close);const save async (formEl) {// if (!form.value.name) {// // 其他类型报错// ElMessage({// showClose: true,// message: 输入名称,// type: error// });// return;// }// if (!form.value.devices.length) {// // 其他类型报错// ElMessage({// showClose: true,// message: 选择设备,// type: error// });// return;// }console.log(formEl, formEl);await formEl.validate((valid, fields) {if (valid) {emits(save, form.value, props.hotSpot);close();} else {console.log(error submit!, fields)}})
};const success () {emits(success);
};
/script
style langscss.edit-hot_dialog {.el-dialog__body {padding: 10px 20px;.el-select {width: 245px;}}}
/style
style langscss scoped.icon-types {width: 36px;height: 35px;margin: 2px;border: 1px solid #ccc;user-select: none;.active {border: 2px solid blue;}}
/style
