|
@@ -1,231 +1,17 @@
|
|
<template>
|
|
<template>
|
|
- <div class="com-upload">
|
|
|
|
- <div class="file-upload">
|
|
|
|
- <div class="file-upload-text">上传文件</div>
|
|
|
|
- <input
|
|
|
|
- class="file-upload-input"
|
|
|
|
- id="upfile"
|
|
|
|
- type="file"
|
|
|
|
- @change="getFile"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <canvas id="myCanvas" width="10000" height="10000">
|
|
|
|
- Canvas画正多边形
|
|
|
|
- </canvas>
|
|
|
|
|
|
+ <div class="com-pic">
|
|
|
|
+ <div class="pic-1"></div>
|
|
|
|
+ <div class="div2"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
-
|
|
|
|
-<script lang="ts">
|
|
|
|
-import { number } from "echarts";
|
|
|
|
|
|
+
|
|
|
|
+ <script lang="ts">
|
|
import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
|
|
import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
|
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
components: {},
|
|
components: {},
|
|
setup() {
|
|
setup() {
|
|
- let allObj: any = [];
|
|
|
|
- const proxyData = reactive({
|
|
|
|
- allObj: allObj,
|
|
|
|
- // canvas画图
|
|
|
|
- initCanvas() {
|
|
|
|
- let canvasDom: any = document.querySelector("#myCanvas");
|
|
|
|
- let ctx: any = canvasDom.getContext("2d");
|
|
|
|
- let dots: any = proxyData.allObj.objArr;
|
|
|
|
- console.log(proxyData.allObj.objArr);
|
|
|
|
- for (let key in dots) {
|
|
|
|
- let item = dots[key];
|
|
|
|
- console.log(item);
|
|
|
|
- ctx.lineWidth = 1;
|
|
|
|
- ctx.fillStyle = "#cfefef";
|
|
|
|
- ctx.beginPath();
|
|
|
|
- let circleArr: any = [];
|
|
|
|
- for (let i = 0; i < item.length; i++) {
|
|
|
|
- item[i].left = item[i].left;
|
|
|
|
- item[i].top = item[i].top;
|
|
|
|
- if (item[i].type === "circle") {
|
|
|
|
- circleArr.push(item[i]);
|
|
|
|
- } else {
|
|
|
|
- if (!item[i].type) {
|
|
|
|
- ctx.lineTo(item[i].left, item[i].top);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- if (circleArr && circleArr.length) {
|
|
|
|
- ctx.lineTo(circleArr[0].left, circleArr[0].top);
|
|
|
|
- ctx.bezierCurveTo(
|
|
|
|
- circleArr[1].left,
|
|
|
|
- circleArr[1].top,
|
|
|
|
- circleArr[2].left,
|
|
|
|
- circleArr[2].top,
|
|
|
|
- circleArr[3].left,
|
|
|
|
- circleArr[3].top
|
|
|
|
- );
|
|
|
|
- } else {
|
|
|
|
- ctx.lineTo(item[0].left, item[0].top);
|
|
|
|
- }
|
|
|
|
- ctx.fill();
|
|
|
|
- ctx.closePath();
|
|
|
|
- ctx.strokeStyle = "red"; //填充边框颜色
|
|
|
|
- ctx.stroke();
|
|
|
|
- // canvasDom.addEventListener("click", function (e: any) {
|
|
|
|
- // const canvasInfo = canvasDom.getBoundingClientRect();
|
|
|
|
- // console.log(e);
|
|
|
|
- // console.log(canvasInfo);
|
|
|
|
- // console.log(ctx.isPointInPath(e.layerX, e.layerY));
|
|
|
|
- // });
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- getFile(e: any) {
|
|
|
|
- console.log(e.target.files);
|
|
|
|
- let fileSelect: any = e.target.files[0];
|
|
|
|
- let name: any = fileSelect.name;
|
|
|
|
- name = name.split(".")[0];
|
|
|
|
- // this.fileName = fileSelect.name;
|
|
|
|
- let reader: any = new FileReader();
|
|
|
|
- if (typeof FileReader === "undefined") {
|
|
|
|
- console.log("您的浏览器不支持FileReader接口");
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- reader.readAsText(fileSelect, "gb2312"); //注意读取中文的是用这个编码,不是utf-8
|
|
|
|
- // const _this = this;
|
|
|
|
- reader.onload = function () {
|
|
|
|
- // console.log(reader.result);
|
|
|
|
- let result: any = reader.result;
|
|
|
|
- // _this.$nextTick(() => {
|
|
|
|
- // _this.voiceContent = reader.result;
|
|
|
|
- // });
|
|
|
|
- // proxyData.handleStr(result);
|
|
|
|
- proxyData.handPoint(result, name);
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- handPoint(result: any, name: any) {
|
|
|
|
- result = result.replace(/\"/g, "");
|
|
|
|
- let nameArr: any = name.split("-");
|
|
|
|
- let arr: any = result.split(/[(\r\n)\r\n]+/);
|
|
|
|
- let p: any = localStorage.getItem("ponit");
|
|
|
|
- let objArr: any = JSON.parse(p) || {};
|
|
|
|
- let pointObj: any = {
|
|
|
|
- spaceId: nameArr[0].toString(),
|
|
|
|
- pointArr: [],
|
|
|
|
- circularPoints: [],
|
|
|
|
- logPointArr: [],
|
|
|
|
- };
|
|
|
|
- arr.map((item: any, index: any) => {
|
|
|
|
- if (item) {
|
|
|
|
- let itemArr: any = item.split(",");
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- proxyData.allObj.objArr = objArr;
|
|
|
|
- localStorage.setItem("ponit", JSON.stringify(proxyData.allObj.objArr));
|
|
|
|
- proxyData.initCanvas();
|
|
|
|
- },
|
|
|
|
- // 处理坐标
|
|
|
|
- handleStr(mapstr: any) {
|
|
|
|
- let maparr: any = mapstr.split("<DIV ");
|
|
|
|
- //console.log("maparr", maparr);
|
|
|
|
- let _this: any = proxyData;
|
|
|
|
- let allDiv: any = [];
|
|
|
|
- let objArr: any = {};
|
|
|
|
- let allObj: any = {};
|
|
|
|
- //debugger;
|
|
|
|
- maparr.map((item: any) => {
|
|
|
|
- let divobj: any = {};
|
|
|
|
- let divarr: any = item.split(" ");
|
|
|
|
- //console.log("divarr", divarr);
|
|
|
|
- divarr.map(function (item: any) {
|
|
|
|
- if (item.indexOf("id=") > -1) {
|
|
|
|
- let idarr: any = item.split("=");
|
|
|
|
- // debugger;
|
|
|
|
- let idstr: any = idarr[1];
|
|
|
|
- divobj.id = idstr;
|
|
|
|
- // console.log("idstr", idstr);
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- divobj.height = proxyData.getNum(item, "HEIGHT");
|
|
|
|
- divobj.width = proxyData.getNum(item, "WIDTH");
|
|
|
|
- divobj.left = proxyData.getNum(item, "LEFT");
|
|
|
|
- divobj.top = proxyData.getNum(item, "TOP");
|
|
|
|
- let title: any = proxyData.getNum(item, "title");
|
|
|
|
- let titleArr: any = title.split("-");
|
|
|
|
- console.log(titleArr);
|
|
|
|
- divobj.spaceId = titleArr[0];
|
|
|
|
- divobj.order = titleArr[1] * 1;
|
|
|
|
- if (titleArr[2] && titleArr[2] === "c") {
|
|
|
|
- divobj.type = "circle";
|
|
|
|
- }
|
|
|
|
- if (divobj.width) {
|
|
|
|
- allDiv.push(divobj);
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- allDiv.map((item: any) => {
|
|
|
|
- if (item.spaceId) {
|
|
|
|
- if (objArr[item.spaceId]) {
|
|
|
|
- objArr[item.spaceId].push(item);
|
|
|
|
- } else {
|
|
|
|
- objArr[item.spaceId] = [item];
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- allObj.width = item.width;
|
|
|
|
- allObj.height = item.height;
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- for (let key in objArr) {
|
|
|
|
- objArr[key].sort(proxyData.sortab("order"));
|
|
|
|
- }
|
|
|
|
- proxyData.allObj.objArr = objArr;
|
|
|
|
- // 画图
|
|
|
|
- proxyData.initCanvas();
|
|
|
|
- console.log(JSON.stringify(proxyData.allObj.objArr));
|
|
|
|
- },
|
|
|
|
- sortab(data: any) {
|
|
|
|
- return function (obj1: any, obj2: any) {
|
|
|
|
- var value1 = obj1[data];
|
|
|
|
- var value2 = obj2[data];
|
|
|
|
- if (value2 < value1) {
|
|
|
|
- return 1;
|
|
|
|
- } else if (value2 > value1) {
|
|
|
|
- return -1;
|
|
|
|
- } else {
|
|
|
|
- return 0;
|
|
|
|
- }
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- getNum(str: any, param: any) {
|
|
|
|
- //debugger;
|
|
|
|
- let paindex: any = str.indexOf(param);
|
|
|
|
- // console.log(str);
|
|
|
|
- if (paindex > -1) {
|
|
|
|
- if (param === "title") {
|
|
|
|
- let palength: any = param.length;
|
|
|
|
- let otherstr: any = str.substr(paindex + palength);
|
|
|
|
- let pxindex: any = otherstr.indexOf("#");
|
|
|
|
- // debugger
|
|
|
|
- let numstr: any = otherstr.substr(0, pxindex);
|
|
|
|
- // console.log(numstr);
|
|
|
|
- let arr: any = numstr.split("=");
|
|
|
|
- let tempStr: any = arr[1];
|
|
|
|
- if (tempStr) {
|
|
|
|
- tempStr = tempStr.substr(1, tempStr.length);
|
|
|
|
- }
|
|
|
|
- // console.log(tempStr);
|
|
|
|
- return tempStr;
|
|
|
|
- } else {
|
|
|
|
- let palength: any = param.length;
|
|
|
|
- let otherstr: any = str.substr(paindex + palength);
|
|
|
|
- // console.log(otherstr)
|
|
|
|
- let pxindex: any = otherstr.indexOf("px");
|
|
|
|
- let numstr: any = otherstr.substr(0, pxindex);
|
|
|
|
- numstr = numstr.replace(/:/, "");
|
|
|
|
- return numstr ? Number(numstr) : "";
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- return "";
|
|
|
|
- },
|
|
|
|
- });
|
|
|
|
|
|
+ const proxyData = reactive({});
|
|
nextTick(() => {});
|
|
nextTick(() => {});
|
|
onMounted(() => {});
|
|
onMounted(() => {});
|
|
return {
|
|
return {
|
|
@@ -234,27 +20,38 @@ export default defineComponent({
|
|
},
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
</script>
|
|
- <style lang="scss" scoped>
|
|
|
|
-.home {
|
|
|
|
- .child-view {
|
|
|
|
- position: absolute;
|
|
|
|
- width: 100%;
|
|
|
|
- transition: all 0.8s cubic-bezier(0.55, 0, 0.1, 1);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .slide-left-enter,
|
|
|
|
- .slide-right-leave-active {
|
|
|
|
- opacity: 0;
|
|
|
|
- -webkit-transform: translate(50px, 0);
|
|
|
|
- transform: translate(50px, 0);
|
|
|
|
- }
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.com-pic {
|
|
|
|
+ position: relative;
|
|
|
|
+}
|
|
|
|
+.pic-1 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ left: 50px;
|
|
|
|
+ width: 120px;
|
|
|
|
+ height: 300px;
|
|
|
|
+ background-size: 50% 100%;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ border-top-left-radius: 180px;
|
|
|
|
+ border-bottom-left-radius: 180px;
|
|
|
|
+ // border-bottom: 120px solid red;
|
|
|
|
+ // border-right: 60px solid transparent;
|
|
|
|
+ // border-left: 60px solid transparent;
|
|
|
|
+ // rotate: (90deg);
|
|
|
|
+ border-left: 120px solid red;
|
|
|
|
+ border-top: 100px solid transparent;
|
|
|
|
+ border-bottom: 100px solid transparent;
|
|
|
|
+}
|
|
|
|
|
|
- .slide-left-leave-active,
|
|
|
|
- .slide-right-enter {
|
|
|
|
- opacity: 0;
|
|
|
|
- -webkit-transform: translate(-50px, 0);
|
|
|
|
- transform: translate(-50px, 0);
|
|
|
|
- }
|
|
|
|
|
|
+.div2 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 20px;
|
|
|
|
+ left: 350px;
|
|
|
|
+ width: 200px;
|
|
|
|
+ height: 200px;
|
|
|
|
+ background: #99b4d3;
|
|
|
|
+ clip-path: polygon(0 0, 300 0, 150 200, 0 200);
|
|
|
|
+ // rotate: (15deg);
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
-
|
|
|
|
|
|
+
|