| | |
| | | <span class="close" |
| | | @click="close">x</span> |
| | | </div> |
| | | <div class="next"> |
| | | </div> |
| | | <div class="content"> |
| | | <div class="plotTitle"> 二维标绘</div> |
| | | <div class="menuContent"> |
| | | <div class="menuItem" |
| | | @click="setMenuClick(item)" |
| | | v-for="(item,index) in Option" |
| | | :key="index"> |
| | | {{ item.name}} |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="plotTitle"> 三维标绘</div> |
| | | <div class="menuContent"> |
| | | <div class="menuItem" |
| | | @click="setMenuClick(item)" |
| | | v-for="(item,index) in Option1" |
| | | :key="index"> |
| | | {{ item.name}} |
| | | </div> |
| | | </div> |
| | | <div class="plotTitle"> </div> |
| | | <div class="menuContent"> |
| | | <div class="menuItem" |
| | | @click="setMenuClick1()"> |
| | | 清除绘制 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import bus from "../../utils/bus"; |
| | | import axios from "axios"; |
| | | |
| | | |
| | | |
| | | export default { |
| | | components: { |
| | | changePic, |
| | | |
| | | }, |
| | | data () { |
| | | return { |
| | | Option: [ |
| | | { |
| | | name: '粗直箭头', |
| | | type: 'StraightArrow', |
| | | value: 'polygon', |
| | | }, |
| | | { |
| | | name: '燕尾直箭头', |
| | | type: 'SwallowtailArrow', |
| | | value: 'polygon', |
| | | },{ |
| | | name: '钳击箭头', |
| | | type: 'PincerArrow', |
| | | value: 'polygon', |
| | | },{ |
| | | name: '集结地', |
| | | type: 'GatheringPlace', |
| | | value: 'polygon', |
| | | },{ |
| | | name: '圆角矩形', |
| | | type: 'RoundedRectangle', |
| | | value: 'polygon', |
| | | }, |
| | | { |
| | | name: '扇形', |
| | | type: 'Sector', |
| | | value: 'polygon', |
| | | },{ |
| | | name: '弓形', |
| | | type: 'Bow', |
| | | value: 'polygon', |
| | | },{ |
| | | name: '攻击箭头', |
| | | type: 'AttackArrow', |
| | | value: 'polygon', |
| | | },{ |
| | | name: '贝塞尔曲线', |
| | | type: 'Bezierline', |
| | | |
| | | },{ |
| | | name: '贝塞尔箭头', |
| | | type: 'BezierArrow', |
| | | |
| | | } |
| | | |
| | | ], |
| | | Option1: [ |
| | | { |
| | | name: '粗直箭头', |
| | | type: 'StraightArrow', |
| | | value: 'box', |
| | | }, |
| | | { |
| | | name: '燕尾直箭头', |
| | | type: 'SwallowtailArrow', |
| | | value: 'box', |
| | | },{ |
| | | name: '钳击箭头', |
| | | type: 'PincerArrow', |
| | | value: 'box', |
| | | },{ |
| | | name: '集结地', |
| | | type: 'GatheringPlace', |
| | | value: 'box', |
| | | },{ |
| | | name: '圆角矩形', |
| | | type: 'RoundedRectangle', |
| | | value: 'box', |
| | | }, |
| | | { |
| | | name: '扇形', |
| | | type: 'Sector', |
| | | value: 'box', |
| | | },{ |
| | | name: '弓形', |
| | | type: 'Bow', |
| | | value: 'box', |
| | | },{ |
| | | name: '攻击箭头', |
| | | type: 'AttackArrow', |
| | | value: 'box', |
| | | } |
| | | ], |
| | | showdata1: true, |
| | | showdata2: true, |
| | | |
| | | showsituation: false, |
| | | }; |
| | | }, |
| | | mounted () { |
| | | bus.$on("clearEve",(e) => { |
| | | |
| | | this.reset(); |
| | | }); |
| | | bus.$on("radioData",(e) => { |
| | | this.radios=e; |
| | |
| | | |
| | | }); |
| | | bus.$on("areaData",(e) => { |
| | | |
| | | this.regions=e; |
| | | }); |
| | | bus.$on("showdio",(e) => { |
| | | this.showsituation=e=="7-9-1" |
| | |
| | | }, |
| | | methods: { |
| | | |
| | | change () { |
| | | this.showdata1=false; |
| | | }, |
| | | change1 () { |
| | | this.showdata2=false; |
| | | }, |
| | | |
| | | close () { |
| | | this.showsituation=false; |
| | | }, |
| | | setMenuClick1 () { |
| | | sgworld.Creator.ClearMilitaryStandard(); |
| | | }, |
| | | setMenuClick (res) { |
| | | if(res.value) { |
| | | sgworld.Creator.militaryPlotting(res.type,res.value,(entity) => { |
| | | }); |
| | | } else { |
| | | sgworld.Creator.militaryPlotting(res.type,(entity) => { |
| | | }); |
| | | } |
| | | |
| | | } |
| | | }, |
| | | watch: { |
| | | colorContainer: { |
| | | deep: true, |
| | | handler (data) { |
| | | let colornow={ |
| | | width: "30%", |
| | | height: "70%", |
| | | border: "1px solid #000", |
| | | transform: "translate(40px,90px)", |
| | | backgroundImage: `linear-gradient(${data.maxColor},${data.minColor})`, |
| | | }; |
| | | this.innerbac=colornow; |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | transition: color 1s; |
| | | cursor: pointer; |
| | | } |
| | | .next { |
| | | width: 89%; |
| | | height: 79%; |
| | | margin: 100px auto; |
| | | } |
| | | .next >>> .el-select { |
| | | width: 95% !important; |
| | | } |
| | | .next >>> .el-form-item { |
| | | margin-top: 60px; |
| | | } |
| | | .next >>> .el-input { |
| | | width: 84%; |
| | | } |
| | | .next >>> .el-date-editor { |
| | | width: 515px; |
| | | } |
| | | .next >>> .el-form-item__label { |
| | | color: #fff; |
| | | font-size: 40px; |
| | | } |
| | | .next >>> .el-input__inner { |
| | | font-size: 30px; |
| | | } |
| | | .next >>> .el-form-item__error { |
| | | font-size: 30px; |
| | | font-weight: 700; |
| | | } |
| | | |
| | | .botcon { |
| | | display: inline-block; |
| | | margin-top: 34px; |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | } |
| | | .btns > span { |
| | | display: block; |
| | | width: 200px; |
| | | height: 70px; |
| | | border: 1px solid #000; |
| | | text-align: center; |
| | | font-size: 35px; |
| | | margin: 0 50px; |
| | | line-height: 70px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .btns > span:nth-child(3) { |
| | | color: #fff; |
| | | background-image: linear-gradient(#76c2f6, #6a9cf1); |
| | |
| | | color: #000; |
| | | background: #cadaea; |
| | | } |
| | | .showpic { |
| | | width: 260px; |
| | | height: 400px; |
| | | background: url(~@/assets/image/botbtn/bac.png); |
| | | background-position: center; |
| | | background-size: 100% 100%; |
| | | position: absolute; |
| | | top: 1200px; |
| | | right: 0px; |
| | | .content { |
| | | width: 92%; |
| | | height: 80%; |
| | | position: relative; |
| | | margin: 3% 4%; |
| | | } |
| | | .plotTitle { |
| | | width: 100%; |
| | | color: #fff; |
| | | font-size: 40px; |
| | | } |
| | | .menuContent { |
| | | width: 100%; |
| | | display: grid; |
| | | grid-template-columns: auto auto auto; |
| | | font-size: 32px; |
| | | margin: 10px 0px; |
| | | cursor: pointer; |
| | | } |
| | | .menuItem { |
| | | margin: 10px 40px; |
| | | min-width: 150px; |
| | | background: rgb(135, 206, 235, 0.6); |
| | | text-align: center; |
| | | padding: 10px; |
| | | border-radius: 5px; |
| | | color: #fff; |
| | | } |
| | | .menuItem:hover { |
| | | transform: scale(1.1); |
| | | color: #494949; |
| | | } |
| | | </style> |