123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281 |
- <!--
- * @Author: zhangyu
- * @Date: 2019-11-13 17:00:59
- * @Info: 系统集成成果辅助屏
- * @LastEditTime: 2019-11-18 18:50:07
- -->
- <template>
- <div>
- <div class='page-bar'>
- <el-breadcrumb separator='/'>
- <el-breadcrumb-item>系统集成</el-breadcrumb-item>
- <el-breadcrumb-item>系统集成成果管理</el-breadcrumb-item>
- </el-breadcrumb>
- </div>
- <div class="page-content">
- <div class="content-left">
- <div class="data-box">
- <realtime-data :queryParams="queryParams"></realtime-data>
- </div>
- <div class="example-box">
- <example-list :queryParams="queryParams" @changeExample="handleChangeExample"></example-list>
- </div>
- </div>
- <div class="content-right" id="cadBox" v-loading="loading">
- <canvas v-show="drawCanvas" :height="cadHeight" :width="cadWidth" id="exampleCanvas" :k="refreshCanvas"></canvas>
- <div v-show="drawCanvas" class="operate">
- <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @scale="scale" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun>
- </div>
- <div class="no-data" v-show="!drawCanvas">
- <div class="position-icon">
- <i class="icon-wushuju iconfont"></i>
- 数据暂无
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { SGraphyView } from "@saga-web/graphy/lib";
- import { LocationPointScene, DivideFloorScene } from "@saga-web/cad-engine";
- import { SColor } from "@saga-web/draw/lib";
- import { queryEquip, floorQuery, queryZone } from '@/api/scan/request';
- //组件
- import realtimeData from '@/components/screen/integrateresults/realtimeData';
- import exampleList from '@/components/screen/integrateresults/exampleList';
- import canvasFun from "@/components/business_space/newGraphy/canvasFun";
- export default {
- components: {
- realtimeData,
- exampleList,
- canvasFun
- },
- mounted() {
- this.cadWidth = document.getElementById('cadBox').offsetWidth;
- this.cadHeight = document.getElementById('cadBox').offsetHeight;
- },
- data() {
- return {
- queryParams: this.$route.query,
- loading: false,
- cadWidth: 800,
- cadHeight: 600,
- views: null,//canvas view
- scenes: null,//canvas scene
- refreshCanvas: '',//重载canvas组件
- drawCanvas: false,//是否画canvas,
- ObjectLocalName: '',//对象名称
- config: {
- isEdit: false
- },
- }
- },
- methods:{
- handleChangeExample(example) {
- //存在实例ID
- if (example.ObjectID) {
- this.ObjectLocalName = example.ObjectLocalName;
- if (example.TypeCode == 'Eq' || example.TypeCode == 'Ec') {//设备或者组件
- let pa = {
- Filters: `EquipID='${example.TypeCode + localStorage.getItem('projectId').substring(2) + example.ObjectID}'`
- }
- //获取设备信息
- queryEquip(pa, equipMsg => {
- if (equipMsg.Content[0] && equipMsg.Content[0].LocationJson && equipMsg.Content[0].FloorId) {
- let canvasOption = {
- /** 标记的id */
- Id: equipMsg.Content[0].EquipID,
- /** 标记的名称 */
- Name: equipMsg.Content[0].EquipName,
- /** X坐标 */
- X: equipMsg.Content[0].LocationJson.X,
- /** Y坐标 */
- Y: -equipMsg.Content[0].LocationJson.Y
- }
- this.loadDataToInstanceByFloorID(equipMsg.Content[0].FloorId, example.TypeCode, canvasOption);
- }
- })
- } else if (example.TypeCode == 'Sp') {//空间
- let pa = {
- data: {
- Filters: `RoomID='${example.TypeCode + localStorage.getItem('projectId').substring(2) + example.ObjectID}'`
- },
- zone: example.SubTypeCode
- }
- //获取空间信息
- queryZone(pa, zoneMsg => {
- if (zoneMsg.Content[0] && zoneMsg.Content[0].Outline) {
- let canvasOption = {
- RoomLocalName: zoneMsg.Content[0].RoomLocalName,
- OutLine: zoneMsg.Content[0].Outline,
- RoomID: zoneMsg.Content[0].RoomID,
- Color: new SColor('#F9C3C3')
- }
- this.loadDataToInstanceByFloorID(zoneMsg.Content[0].FloorId, example.TypeCode, canvasOption);
- }
- });
- }
- }
- },
- //通过floorid获取信息,后通过floormap获取数据后绘制canvas
- loadDataToInstanceByFloorID(floorId, typecode, options) {
- let param = {
- Filters: `FloorId='${floorId}'`
- }
- //获取楼层信息
- floorQuery(param, floorMsg => {
- //刷新canvas
- this.refreshCanvas = new Date().getTime();
- if (!this.views) {
- this.views = new SGraphyView('exampleCanvas')
- }
- this.views.scene = null;
- this.scenes = null;
- //类型
- if (typecode == 'Eq' || typecode == 'Ec') {
- this.scenes = new LocationPointScene();
- }
- else if (typecode == 'Sp') {
- this.scenes = new DivideFloorScene();
- }
- if (floorMsg.Content[0] && floorMsg.Content[0].StructureInfo && floorMsg.Content[0].StructureInfo.FloorMap) {
- this.loading = true;
- //获取数据,并加载canvas
- this.scenes.loadUrl(`/image-service/common/file_get?systemId=revit&key=${floorMsg.Content[0].StructureInfo.FloorMap}`).then(() => {
- this.drawCanvas = true;
- this.loading = false;
- this.views.scene = this.scenes;
- this.scenes.isSpaceSelectable = false;
- if (typecode == 'Eq' || typecode == 'Ec') {
- this.scenes.addMarker(options);
- }
- else if (typecode == 'Sp') {
- this.scenes.addZone(options);
- }
- this.views.fitSceneToView();
- if (this.$refs.canvasFun) {
- this.views.maxScale = this.views.scale * 10;
- this.views.minScale = this.views.scale;
- this.$refs.canvasFun.everyScale = this.views.scale;
- }
- })
- }
- else{
- this.loading = false;
- this.drawCanvas = false;
- }
- });
- },
- // canvas 获取焦点
- focus() {
- document.getElementById('cadBox').focus()
- },
- // 工具栏操作
- // 适配底图到窗口
- fit() {
- this.views.fitSceneToView()
- },
- // 保存为png
- savePng() {
- this.views.saveImage(`${this.ObjectLocalName}.png`, 'png');
- },
- // 保存为svg
- saveSvg() {
- this.views.saveSceneSvg(`${this.ObjectLocalName}.svg`, 6400, 4800);
- },
- saveJson() {
- this.views.saveFloorJson(`${this.ObjectLocalName}.json`)
- },
- // 缩放
- scale(val) {
- if (!this.views) {
- return;
- }
- let scale = this.views.scale;
- this.views.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2);
- }
- },
- watch: {
- $route(to,from){
- this.queryParams = this.$route.query;
- this.ObjectLocalName = '';
- this.drawCanvas = false;
- },
- "views.scale": {
- handler(n) {
- if (this.$refs.canvasFun) {
- this.$refs.canvasFun.sliderVal = n * 10 / this.views.minScale;
- }
- }
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- $borderColor: rgba(201, 201, 201, 1);
- .page-bar{
- flex-grow: 0;
- flex-shrink: 0;
- height: 24px;
- padding: 0 10px;
- margin-bottom: 10px;
- border-bottom: 1px solid $borderColor;
- /deep/ .el-breadcrumb {
- font-size: 14px;
- }
- }
- .page-content{
- display: flex;
- flex-grow: 1;
- flex-shrink: 1;
- flex-direction: row;
- justify-content: flex-start;
- overflow-y: auto;
- .content-left{
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- width: 260px;
- margin-right: 15px;
- .data-box{
- height: 140px;
- margin-bottom: 15px;
- }
- .example-box{
- flex-grow: 1;
- flex-shrink: 1;
- border: 1px solid $borderColor;
- }
- }
- .content-right{
- flex-grow: 1;
- flex-shrink: 1;
- border: 1px solid $borderColor;
- overflow: hidden;
- position: relative;
- .operate {
- position: absolute;
- left: 50%;
- bottom: 20px;
- transform: translateX(-50%);
- z-index: 99;
- }
- .no-data{
- height: 100%;
- text-align: center;
- box-sizing: border-box;
- position: relative;
- .position-icon{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- }
- }
- }
- }
- </style>
|