lixuliang
2024-04-18 419ce8d31a69c59d5796567173c1f8dc438652fc
src/components/props/situationComparison7-9.vue
@@ -9,9 +9,34 @@
      <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>
@@ -20,22 +45,105 @@
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;
@@ -44,7 +152,7 @@
    });
    bus.$on("areaData",(e) => {
      this.regions=e;
    });
    bus.$on("showdio",(e) => {
      this.showsituation=e=="7-9-1"
@@ -54,21 +162,32 @@
  },
  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>
@@ -121,34 +240,7 @@
  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;
@@ -160,17 +252,7 @@
  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);
@@ -179,14 +261,36 @@
  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>