VR全景编辑器v1.0版本上线，为企业提供沉浸式全景可视化服务。

news2024/9/20 20:34:30

随着物联网技术的迅速发展，可视化技术在物联网中起到越来越重要的作用，当康科技经过不懈努力，研发了自己的一款基于物联网VR全景可视化的编辑器，为企业助力可视化服务。

部分源代码：：

// 基础图标图库
export const COMMOM_ICON = [
  {
    id: 1,
    url: require('@/assets/vrEditor/icon/icon01.png'),
    name: '图标1',
  },
  {
    id: 2,
    url: require('@/assets/vrEditor/icon/icon02.png'),
    name: '图标2',
  },
  {
    id: 3,
    url: require('@/assets/vrEditor/icon/icon03.png'),
    name: '图标3',
  },
  {
    id: 4,
    url: require('@/assets/vrEditor/icon/icon04.png'),
    name: '图标1',
  },
  {
    id: 5,
    url: require('@/assets/vrEditor/icon/icon05.png'),
    name: '图标1',
  },
  {
    id: 6,
    url: require('@/assets/vrEditor/icon/icon06.png'),
    name: '图标1',
  }
];

// 绑定的图标类型分类
export const ICOM_TYPE = {
  icon: {type: 1, name: '图标绑定'},
  text: {type: 2, name: '文字绑定'},
  sence: {type: 3, name: '场景绑定'},
  position: {type: 4, name: '位置绑定'},
  media: {type: 5, name: '媒体绑定'},
  website: {type: 6, name: '网址绑定'},
  html: {type: 7, name: '富文本绑定'},
};

// 热点图标类型
export const hotTypes = [
  { id: 1, label: '水泵', url: require('@/assets/icon/icon01.png') },
  { id: 2, label: '阀门', url: require('@/assets/icon/icon02.png') },
  { id: 3, label: '水箱', url: require('@/assets/icon/icon03.png') },
  { id: 4, label: '烟感', url: require('@/assets/icon/icon04.png') },
  { id: 5, label: '水浸', url: require('@/assets/icon/icon05.png') },
  { id: 6, label: '摄像头', url: require('@/assets/icon/icon06.png') },
];

<template>
  <div class="edit-sence_wrapper">
    <el-dialog
      v-model="dialogVisible"
      :title="`${sence.id ? '编辑' : '新增'}场景`"
      :width="'350px'"
      :top="'10px'"
      :modal="false"
      :close-on-click-modal="false"
      :custom-class="'edit-sence_dialog'"
      :before-close="close"
    >
      <el-form :model="form">
        <!--基础图标绑定-->
        <el-form-item label="场景ID">
          <el-input v-model="form.id" placeholder="输入名称" clearable readonly/>
        </el-form-item>
        <el-form-item label="场景名称">
          <el-input v-model="form.name" placeholder="输入名称" clearable/>
        </el-form-item>
        <el-form-item label="场景名称">
          <fileUpload
            @handleSuccess="handleSuccess"
            :fileUrl="form.panorama"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { res } from '../data/res.js';
// import store from '../../../store/index.js';
import { hotTypes } from '../utils/data.js';
import { reactive, ref, computed, defineEmits, defineProps, onMounted } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import fileUpload from './fileUpload.vue';
const dialogVisible = ref(true);
const deviveData = ref(res);
const props = defineProps({
  sence: {} // 当前场景
});

let stores = useStore();
const iconType = computed(() => {
  return stores.state.vrViewer.type;
});

const types = ref(hotTypes);
const emits = defineEmits([
  'success',
  'close',
  'save'
]);

const form = ref({
  id: `sceneId-${new Date().getTime().toString()}`,
  sceneId: `sceneId-${new Date().getTime().toString()}`,
  name: ``,
  type: 'equirectangular',
  showControls: true, // 显示控制器
  autoLoad: true, // 自动加载
  // autoRotate: 2, // 自动旋转场景
  compass: true, // 指南针
  sceneFadeDuration: 2000,
  panorama: '', // 全景照片url
});

// 页面加载初始化渲染
onMounted(() => {
  // 编辑回显
  if (props.sence.id) {
    form.value = {...props.sence };
  }
});

const close = () => emits('close');

const save = () => {
  // if (!form.value.name) {
  //   // 其他类型报错
  //   ElMessage({
  //     showClose: true,
  //     message: '输入名称',
  //     type: 'error'
  //   });
  //   return;
  // }

  // if (!form.value.devices.length) {
  //   // 其他类型报错
  //   ElMessage({
  //     showClose: true,
  //     message: '选择设备',
  //     type: 'error'
  //   });
  //   return;
  // }


  emits('save', form.value, props.sence.id ? true : false);
  close();
};

const handleSuccess = (url) => {
  form.value.panorama = url;
};

const success = () => {
  emits('success');
};
</script>
<style lang="scss">
  .edit-sence_dialog {
    .el-dialog__body {
      padding: 10px 20px;
      .el-select {
        width: 245px;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .icon-types {
    width: 36px;
    height: 35px;
    margin: 2px;
    border: 1px solid #ccc;
    user-select: none;
    &.active {
      border: 2px solid blue;
    }
  }
</style>

演示视频如下：

水泵房vr全景可视化

1、vr可视化数据绑定流程