<!doctype html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
|
<title>画线工具-瀑布流</title>
|
<script src="../../js/config.js?v=2023032101"></script>
|
<script src="../../js/loadJsCss.js"></script>
|
<link href="../../img/LOGO_04.png" rel="shortcut icon" type="image/x-icon">
|
|
<script type="text/javascript">
|
var pageVue = null;
|
function loadJsCss(callback) {
|
var jscss_urls = [
|
{type: "css", url: "root/js/vue/element-ui/element-ui_15/theme-chalk/index.css"},
|
|
{type: "js", url: "root/js/jquery-3.5.1.min.js"},
|
{type: "js", url: "root/js/vue/vue.js"},
|
{type: "js", url: "root/js/myelement.js"},
|
{type: "js", url: "root/js/vue/element-ui/element-ui_15/index.js"},
|
{type: "js", url: "root/js/foundation.js"},
|
];
|
initJsCss(document, jscss_urls, callback, true);
|
};
|
|
function initVue() {
|
new Vue({
|
el: "#vbody",
|
data: {
|
title: "画线工具",
|
|
/* 窗体高度*/
|
clientHeight: 0,
|
|
editCanvas: null,
|
canvasHistory: [],
|
step: -1,
|
canvasWidth: 0,
|
canvasHeight: 0,
|
|
dialog_canvasTxt: false,
|
dialog_Tie: false,
|
dialog_addTie: false,
|
form_canvasTxt: {
|
id: "a1",
|
name: "画布1",
|
"basexy_type": "1",
|
"basex_bz": "left",
|
"basey_bz": "top"
|
},
|
form_Tie_: {
|
lineWidth: 1,
|
strokeStyle: "red",
|
isarrow: true,
|
textalign: "left",
|
textBaseline: "bottom"
|
},
|
form_Tie: {
|
lineWidth: 1,
|
strokeStyle: "red",
|
isarrow: true,
|
textalign: "left",
|
textBaseline: "bottom"
|
},
|
|
isEditTie: false,
|
isSaveXY: false,
|
tie_xyList: [],
|
isSave: false,
|
dialog_saveXY: false,
|
form_Text: {},
|
|
tableData: [{
|
date: '2016-05-02',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-04',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1517 弄'
|
}, {
|
date: '2016-05-01',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1519 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}],
|
|
h_obj: [
|
{
|
top: '10px',
|
right: '0px',
|
length: '400px',
|
isLeftShow: false,
|
isRightShow: false,
|
leftstyle: "color: #aaa;",
|
rightstyle:"color: #ffaa7f;",
|
linestyle: "background-color: #ffaa7f;"
|
},
|
],
|
|
s_obj: [
|
{
|
top: '50px',
|
right: '400px',
|
length: '300px',
|
isTopShow: false,
|
isBottomShow: true,
|
topstyle: "color: #aaa;",
|
bottomstyle:"color: #ffaa7f;",
|
linestyle: "background-color: #ffaa7f;"
|
},
|
],
|
|
canvas_xys: [
|
{
|
id: "11",
|
linecode: "t1",//线编号
|
lineWidth:"1",//线粗
|
strokeStyle: "green",//线色
|
isarrow: true, //是否有箭头（仅单方向）
|
txtcode: "c1", //文本编号
|
textalign: "right", //文本左右位置
|
textBaseline: "bottom", //文本上下位置
|
xys_: [
|
{
|
isratio_x: false,//是否百分比
|
isratio_y: false,
|
x_: 436,
|
y_: 110
|
},
|
{
|
isratio_x: false,
|
isratio_y: false,
|
x_: 303,
|
y_: 110
|
},
|
{
|
isratio_x: false,
|
isratio_y: false,
|
x_: 303,
|
y_: 387
|
},
|
]
|
},
|
{
|
id: "12",
|
linecode: "t2",//线编号
|
lineWidth:"1",//线粗
|
strokeStyle: "green",//线色
|
isarrow: true, //是否有箭头（仅单方向）
|
txtcode: "c2", //文本编号
|
textalign: "left", //文本左右位置
|
textBaseline: "bottom", //文本上下位置
|
xys_: [
|
{
|
isratio_x: true,
|
isratio_y: false,
|
x_: 70.12,
|
y_: 55
|
},
|
{
|
isratio_x: true,
|
isratio_y: false,
|
x_: 79.40,
|
y_: 55
|
},
|
{
|
isratio_x: true,
|
isratio_y: false,
|
x_: 79.40,
|
y_: 389
|
},
|
]
|
},
|
],
|
tieTxtList: {
|
c1: "内容1",
|
c2: "内容2",
|
},
|
|
|
},
|
created() {
|
this.clientHeight = document.documentElement.clientHeight;
|
},
|
mounted() {
|
document.getElementById('page_root').style.display = "block";
|
|
//设置画布大小
|
var w_ = document.getElementById('z_mybody').offsetWidth;
|
var h_ = document.getElementById('z_mybody').offsetHeight;
|
document.getElementById("z_myCanvas").width = w_;
|
document.getElementById("z_myCanvas").height = h_;
|
|
//画布大小
|
this.canvasWidth = w_;
|
this.canvasHeight = h_;
|
|
//设置画布百分比转换率
|
var ratio_wh = {
|
ratio_w: w_ / 100,
|
ratio_h: h_ / 100
|
}
|
|
//是否设置基准点
|
/* var base_xy = {
|
base_x: w_ / 2,
|
base_y: 0
|
} */
|
this.setCanvas(null, ratio_wh);
|
},
|
methods: {
|
setCanvas(base_xy, ratio_wh) {
|
//是否设置百分比转换
|
var ratio_w = ratio_wh ? ratio_wh.ratio_w : 1;
|
var ratio_h = ratio_wh ? ratio_wh.ratio_h : 1;
|
|
//是否设置基准点
|
var base_x = base_xy ? base_xy.base_x : 0;
|
var base_y = base_xy ? base_xy.base_y : 0;
|
|
var lineList = this.canvas_xys;
|
|
var c=document.getElementById("z_myCanvas");
|
this.editCanvas=c.getContext("2d");
|
for (var i = 0; i < lineList.length; i++) {//几条线
|
var line_ = lineList[i];
|
this.editCanvas.beginPath();
|
this.editCanvas.lineWidth = line_.lineWidth ? line_.lineWidth : "1";
|
this.editCanvas.strokeStyle = line_.strokeStyle ? line_.strokeStyle : "red";
|
for (var j = 0; j < line_.xys_.length; j++) {//每条线几个连接点
|
var xy_ = line_.xys_[j];
|
var x_ = xy_.x_;
|
var y_ = xy_.y_;
|
var ratio_w_ = xy_.isratio_x ? ratio_w : 1;
|
var ratio_h_ = xy_.isratio_y ? ratio_h : 1;
|
if(j == 0) {
|
this.editCanvas.moveTo(x_ * ratio_w_ + base_x, y_ * ratio_h_ + base_y);
|
}
|
else {
|
this.editCanvas.lineTo(x_ * ratio_w_ + base_x, y_ * ratio_h_ + base_y);
|
}
|
}
|
this.editCanvas.stroke(); //画线
|
|
if (line_.txtcode) {//如果有文本编号
|
if (this.tieTxtList[line_.txtcode]) {//如果有文本
|
var x = 0;
|
var y = 0;
|
|
var xy = line_.xys_[0];
|
var x_ = xy.x_;
|
var y_ = xy.y_;
|
var ratio_w_ = xy.isratio_x ? ratio_w : 1;
|
var ratio_h_ = xy.isratio_y ? ratio_h : 1;
|
|
x = x_ * ratio_w_ + base_x;
|
y = y_ * ratio_h_ + base_y;
|
|
this.editCanvas.fillStyle= line_.strokeStyle;
|
this.editCanvas.font = "12px 宋体";
|
this.editCanvas.textAlign = line_.textalign;
|
this.editCanvas.textBaseline = line_.textBaseline;
|
this.editCanvas.fillText(this.tieTxtList[line_.txtcode], x, y);
|
}
|
}
|
|
if (line_.isarrow) { //是否有箭头
|
var fromXY_ = line_.xys_[line_.xys_.length - 2];
|
var fromXY = this.getxy(fromXY_, ratio_w, ratio_h, base_x, base_y);
|
|
var toXY_ = line_.xys_[line_.xys_.length - 1];
|
var toXY = this.getxy(toXY_, ratio_w, ratio_h, base_x, base_y);
|
|
//fromXY = {x: 150,y: 50}
|
//toXY = {x: 150,y: 100}
|
this.drawArrow(this.editCanvas, fromXY.x, fromXY.y, toXY.x, toXY.y, line_.strokeStyle);
|
}
|
}
|
|
this.canvasHistory.push(this.editCanvas.getImageData(0, 0, this.canvasWidth, this.canvasHeight)); // 添加新的绘制到历史记录
|
this.step++;
|
},
|
|
getxy(xy_, ratio_w, ratio_h, base_x, base_y) {
|
var xy = {}
|
var x_ = xy_.x_;
|
var y_ = xy_.y_;
|
var ratio_w_ = xy_.isratio_x ? ratio_w : 1;
|
var ratio_h_ = xy_.isratio_y ? ratio_h : 1;
|
xy = {
|
x: x_ * ratio_w_ + base_x,
|
y: y_ * ratio_h_ + base_y
|
}
|
return xy;
|
},
|
|
drawArrow(ctx, fromX, fromY, toX, toY, color, theta, headlen, width) {
|
theta = typeof(theta) != 'undefined' ? theta : 30;
|
headlen = typeof(headlen) != 'undefined' ? headlen : 10;
|
width = typeof(width) != 'undefined' ? width : 1;
|
color = typeof(color) != 'undefined' ? color : 'red';
|
|
// 计算各角度和对应的P2,P3坐标
|
var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
|
angle1 = (angle + theta) * Math.PI / 180,
|
angle2 = (angle - theta) * Math.PI / 180,
|
topX = headlen * Math.cos(angle1),
|
topY = headlen * Math.sin(angle1),
|
botX = headlen * Math.cos(angle2),
|
botY = headlen * Math.sin(angle2);
|
|
ctx.beginPath();
|
|
var arrowX = toX + topX;
|
var arrowY = toY + topY;
|
|
ctx.moveTo(arrowX, arrowY);
|
ctx.lineTo(toX, toY);
|
arrowX = toX + botX;
|
arrowY = toY + botY;
|
ctx.lineTo(arrowX, arrowY);
|
ctx.strokeStyle = color;//箭头边框颜色
|
ctx.lineWidth = width;
|
ctx.stroke();
|
ctx.fillStyle = color; //填充颜色
|
ctx.fill();
|
},
|
|
|
/* 界面获取坐标 */
|
editTie() {
|
this.isEditTie = true;
|
document.getElementById("z_myCanvas").style['z-index'] = 120;
|
document.getElementById("z_myCanvas").style['background-color'] = "rgba(165, 164, 164, 0.19)";
|
},
|
cancelEditTie() {
|
this.isEditTie = false;
|
this.tie_xyList = [];
|
this.step = 0;
|
var canvasHistory_ = [];
|
canvasHistory_.push(this.canvasHistory[0]);
|
this.canvasHistory = canvasHistory_;
|
this.editCanvas.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
let canvasPic = this.canvasHistory[0];
|
this.editCanvas.putImageData(canvasPic, 0, 0);
|
|
document.getElementById("z_myCanvas").style['z-index'] = 12;
|
document.getElementById("z_myCanvas").style['background-color'] = "rgba(165, 164, 164, 0)";
|
|
this.editCanvas = null;
|
},
|
|
getClickXY(event) {
|
if (this.dialog_saveXY) {
|
this.cancelXY();
|
return
|
}
|
|
var x = event.clientX - document.getElementById("z_myCanvas").getBoundingClientRect().left;
|
var y = event.clientY - document.getElementById("z_myCanvas").getBoundingClientRect().top;
|
var d_xy = {
|
isratio_x: false,
|
x_: x,
|
isratio_y: false,
|
y_: y
|
};
|
this.tie_xyList.push(d_xy);
|
|
//////
|
/* this.editCanvas.beginPath();
|
this.editCanvas.arc(x,y,2,0,2*Math.PI);
|
this.editCanvas.stroke();
|
|
this.canvasHistory.push(this.editCanvas.getImageData(0, 0, this.canvasWidth, this.canvasHeight)); // 添加新的绘制到历史记录
|
this.step++; */
|
//////
|
|
if (this.isSaveXY) {
|
this.form_Tie = {...this.form_Tie_};
|
//显示div
|
if (this.tie_xyList.length == 2) {
|
var d_xy_ = {
|
isratio_x: false,
|
x_: this.tie_xyList[1].x_,
|
isratio_y: false,
|
y_: this.tie_xyList[0].y_
|
};
|
|
this.tie_xyList.splice(1, 0, d_xy_);
|
}
|
|
/* if (document.getElementById("z_myCanvas").width - x < 400) {
|
this.$refs.z_dialog_saveXY.style.left = x - 400 + "px";
|
}
|
else {
|
this.$refs.z_dialog_saveXY.style.left = x + "px";
|
}
|
|
if (document.getElementById("z_myCanvas").height - y < 200) {
|
this.$refs.z_dialog_saveXY.style.top = y - 200 + "px";
|
}
|
else {
|
this.$refs.z_dialog_saveXY.style.top = y + "px";
|
} */
|
this.isSave = false;
|
this.dialog_saveXY = true;
|
|
//////
|
//画线并快照
|
this.tempTie(this.tie_xyList);
|
|
//////
|
|
}
|
this.isSaveXY = !this.isSaveXY;
|
},
|
|
//画线并快照
|
tempTie(xys_) {
|
this.editCanvas.beginPath();
|
this.editCanvas.lineWidth = 1;
|
this.editCanvas.strokeStyle = "red";
|
for (var j = 0; j < xys_.length; j++) {//几个连接点
|
var xy_ = xys_[j];
|
var x_ = xy_.x_;
|
var y_ = xy_.y_;
|
var ratio_w_ = 1;
|
var ratio_h_ = 1;
|
var base_x = 0;
|
var base_y = 0;
|
|
if(j == 0) {
|
this.editCanvas.moveTo(x_ * ratio_w_ + base_x, y_ * ratio_h_ + base_y);
|
}
|
else {
|
this.editCanvas.lineTo(x_ * ratio_w_ + base_x, y_ * ratio_h_ + base_y);
|
}
|
}
|
|
this.editCanvas.stroke(); //画线
|
|
var fromXY_ = xys_[xys_.length - 2];
|
var fromXY = this.getxy(fromXY_, 1, 1, 0, 0);
|
var toXY_ = xys_[xys_.length - 1];
|
var toXY = this.getxy(toXY_, 1, 1, 0, 0);
|
this.drawArrow(this.editCanvas, fromXY.x, fromXY.y, toXY.x, toXY.y);
|
|
this.canvasHistory.push(this.editCanvas.getImageData(0, 0, this.canvasWidth, this.canvasHeight)); // 添加新的绘制到历史记录
|
this.step++;
|
},
|
|
// 撤销方法
|
canvasUndo() {
|
this.tie_xyList = [];
|
if (this.step > 0) {
|
this.canvasHistory.splice(this.step, 1);
|
this.step--;
|
this.editCanvas.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
let canvasPic = this.canvasHistory[this.step];
|
this.editCanvas.putImageData(canvasPic, 0, 0);
|
} else {
|
this.$message({
|
message: '不能再继续撤销了',
|
type: 'warning'
|
});
|
}
|
},
|
// 反撤销方法
|
canvasRedo() {
|
if (this.step < this.canvasHistory.length - 1) {
|
this.step++;
|
let canvasPic = this.canvasHistory[this.step];
|
this.editCanvas.putImageData(canvasPic, 0, 0);
|
} else {
|
this.$message({
|
message: '已经是最新的记录了',
|
type: 'warning'
|
});
|
}
|
},
|
|
ratio_v(row, code) {
|
if (code == "x") {
|
var c_w = document.getElementById("z_myCanvas").width;
|
if (row.isratio_x) {
|
var num = row.x_ * 100 / c_w;
|
row.x_ = num.toFixed(2);
|
}
|
else {
|
var num = row.x_ * c_w / 100;
|
row.x_ = num.toFixed(0);
|
}
|
}
|
else {
|
var c_h = document.getElementById("z_myCanvas").height;
|
if (row.isratio_y) {
|
var num = row.y_ * 100 / c_h;
|
row.y_ = num.toFixed(2);
|
}
|
else {
|
var num = row.y_ * c_h / 100;
|
row.y_ = num.toFixed(0);
|
}
|
}
|
},
|
|
SaveXY() {
|
this.isSave = true;
|
var formtie_ = {...this.form_Tie};
|
formtie_.xys_ = this.tie_xyList;
|
|
//保存线
|
|
|
|
this.dialog_saveXY = false;
|
this.isSaveXY = false;
|
this.tie_xyList = [];
|
},
|
cancelXY() {
|
this.dialog_saveXY = false;
|
this.isSave = false;
|
if(this.form_Tie.id) {
|
this.isSave = true;
|
}
|
|
this.drawerClose();
|
},
|
|
drawerClose() {
|
this.isSaveXY = false;
|
if (!this.isSave && this.tie_xyList.length>0) {
|
this.canvasHistory.splice(this.step, 1);
|
this.step--;
|
this.editCanvas.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
let canvasPic = this.canvasHistory[this.step];
|
this.editCanvas.putImageData(canvasPic, 0, 0);
|
}
|
this.isSave = false;
|
this.tie_xyList = [];
|
},
|
|
edit_Tie(row) {
|
this.isSave = true;
|
this.dialog_saveXY = true;
|
this.form_Tie = row;
|
this.tie_xyList = row.xys_;
|
},
|
deleteById(row) {
|
|
},
|
|
textalign_(row, column, cellValue, index) {
|
if (cellValue == "left") {
|
return "点在左面"
|
}
|
else if (cellValue == "right") {
|
return "点在右面"
|
}
|
},
|
|
textBaseline_(row, column, cellValue, index) {
|
if (cellValue == "top") {
|
return "线在上面"
|
}
|
else if (cellValue == "bottom") {
|
return "线在下面"
|
}
|
},
|
|
isratio_formatter(row, column, cellValue, index) {
|
if(cellValue) {
|
return "%";
|
}
|
else "";
|
},
|
|
}
|
});
|
};
|
loadJsCss(function () {
|
initVue();
|
});
|
</script>
|
|
<style>
|
/* 在vue.js中 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的 */
|
[v-cloak] {
|
display: none !important;
|
}
|
</style>
|
<style>
|
.z_background0 {
|
background-color: rgba(0,0,0,0);
|
}
|
.xian_ {
|
|
}
|
.h_ {
|
position: absolute;
|
height: 2px;
|
}
|
.h_l{
|
height: 100%; width: 16px; float: left; margin-left: -5px; margin-top: -10px; color: #55aa00;
|
}
|
.h_r{
|
height: 100%; width: 16px; float: right; margin-right: -5px; margin-top: -10px; color: #55aa00;
|
}
|
.h_x{
|
height: 2px; width: 100%; background-color: #55aa00;
|
}
|
|
.s_ {
|
position: absolute;
|
width: 2px;
|
}
|
.s_t{
|
position:absolute; top: 0px; height: 16px; width: 100%; margin-top: -8px; margin-left: -7px; color: #ff5500;
|
}
|
.s_b{
|
position:absolute; bottom: 0px; height: 16px;margin-bottom: -2px; margin-left: -7px; width: 100%; color: #ff5500;
|
}
|
.s_x{
|
position:absolute; top: 0px; bottom: 0px; width: 2px; background-color: #ff5500;
|
}
|
.s_txt{
|
position:absolute; top: 50px; bottom: 0px;
|
}
|
</style>
|
</head>
|
|
<body style="margin: 0px;">
|
<div v-cloak id="vbody">
|
<div id="page_root">
|
<div class="topbar">
|
<span>{{title}}</span>
|
|
<div style="margin-right: 18px;float: right;">
|
<!-- 连接线工具栏 -->
|
<el-button-group>
|
<el-button size="small" type="primary" icon="el-icon-plus" @click="dialog_canvasTxt = true">画板信息</el-button>
|
<el-button size="small" type="primary" icon="el-icon-s-unfold" @click="dialog_Tie = true">线总览</el-button>
|
<el-button size="small" type="success" icon="el-icon-edit" @click="editTie">编辑</el-button>
|
<el-button size="small" type="success" icon="el-icon-close" @click="cancelEditTie">取消编辑</el-button>
|
<el-button :disabled="step <= 0" size="small" type="success" icon="el-icon-refresh-left" @click="canvasUndo">撤销</el-button>
|
<el-button size="small" type="primary" icon="el-icon-back" @click="dialog_saveXY = true">展开</el-button>
|
</el-button-group>
|
</div>
|
</div>
|
|
<div class="h_dialog__body">
|
<el-drawer
|
:visible.sync="dialog_saveXY"
|
:close-on-press-escape="false"
|
@close="drawerClose"
|
:with-header="false">
|
<span>
|
<div style="padding: 8px; z-index: 130; border: 1px solid rgb(233,233,233); background-color: #fff;">
|
<el-form :model="form_Tie" label-width="100px">
|
<el-form-item label="编号">
|
<el-input size="small" v-model="form_Tie.linecode" ></el-input>
|
</el-form-item>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="线粗">
|
<el-input-number size="small" v-model="form_Tie.lineWidth" :min="1" :max="10" label="描述文字"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="线色">
|
<el-color-picker size="small" v-model="form_Tie.strokeStyle"></el-color-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="是否有箭头" >
|
<el-switch v-model="form_Tie.isarrow"></el-switch>
|
</el-form-item>
|
<el-form-item label="文本编号">
|
<el-input size="small" v-model="form_Tie.txtcode" ></el-input>
|
</el-form-item>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="文本左右位置">
|
<el-select size="small" v-model="form_Tie.textalign" placeholder="请选择左右位置">
|
<el-option label="点在左面" value="left"></el-option>
|
<el-option label="点在右面" value="right"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="文本上下位置">
|
<el-select size="small" v-model="form_Tie.textBaseline" placeholder="请选择上下位置">
|
<el-option label="线在上面" value="top"></el-option>
|
<el-option label="线在下面" value="bottom"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-table
|
:data="tie_xyList"
|
height="150"
|
border
|
size="mini"
|
style="width: 100%">
|
<el-table-column prop="x_" label="X坐标" width="100"> </el-table-column>
|
<el-table-column prop="isratio_x" label="X是否%" align="center">
|
<template v-slot="{row}">
|
<div>
|
<el-switch size="mini" v-model="row.isratio_x" @change="ratio_v(row, 'x')"></el-switch>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="y_" label="Y坐标" width="100"> </el-table-column>
|
<el-table-column prop="isratio_y" label="Y是否%" align="center">
|
<template v-slot="{row}">
|
<div>
|
<el-switch size="mini" v-model="row.isratio_y" @change="ratio_v(row, 'y')"></el-switch>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div style="margin-top: 8px;" align="right">
|
<el-button size="small" @click="cancelXY">撤 销</el-button>
|
<el-button size="small" type="primary" @click="SaveXY">确 定</el-button>
|
</div>
|
</div>
|
</span>
|
</el-drawer>
|
</div>
|
<div id="page_root" style="">
|
<!-- 线 -->
|
<div class="z_background0" style="z-index: 10; position: absolute; top:0px; width: 0%; height: 0%;">
|
<!-- 横线 -->
|
<div v-for="(h_item, k) in h_obj" class="z_background0 h_" :style="'top: '+ h_item.top + '; right: ' + h_item.right + '; width: ' + h_item.length + ';'">
|
<!-- 左箭头 -->
|
<div class="h_l" v-if="h_item.isLeftShow" :style="h_item.leftstyle">
|
<i class="el-icon-caret-left"></i>
|
</div>
|
<!-- 右箭头 -->
|
<div class="h_r" v-if="h_item.isRightShow" :style="h_item.rightstyle">
|
<i class="el-icon-caret-right"></i>
|
</div>
|
<!-- 线 -->
|
<div class="h_x" :style="h_item.linestyle" align="center">
|
<span>内容</span>
|
</div>
|
</div>
|
|
|
<!-- 竖线 -->
|
<div v-for="(s_item, k) in s_obj" class="z_background0 s_" :style="'top: '+ s_item.top + '; right: ' + s_item.right + '; height: ' + s_item.length + ';'">
|
<div style="position: relative; width: 100%; height: 100%;">
|
<!-- 上箭头 -->
|
<div class="s_t" v-if="s_item.isTopShow" :style="s_item.topstyle">
|
<i class="el-icon-caret-top"></i>
|
</div>
|
<!-- 下箭头 -->
|
<div class="s_b" v-if="s_item.isBottomShow" :style="s_item.bottomstyle">
|
<i class="el-icon-caret-bottom"></i>
|
</div>
|
<!-- 线 -->
|
<div class="s_x" :style="s_item.linestyle"></div>
|
<!-- 线文本 -->
|
<div class="s_txt" :style="s_item.txtstyle">
|
<span>内容</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<canvas id="z_myCanvas" width="500" height="400" style="z-index: 12; position: absolute; cursor: crosshair;" @click="getClickXY">
|
您的浏览器不支持 HTML5 canvas 标签。
|
</canvas>
|
|
<div id="z_mybody" class="z_background0" style="z-index: 100; position: absolute; width: 100%;" align="center">
|
<div class="z_background0" style="margin-top: 30px; width: 40%; height: 150px;">
|
<div style="z-index: 100; width: 100%; height: 100%; background-color: #0062CC;">
|
<el-table
|
:data="tableData"
|
height="150"
|
border
|
size="mini"
|
style="width: 100%">
|
<el-table-column prop="date" label="日期" > </el-table-column>
|
<el-table-column prop="name" label="名称" > </el-table-column>
|
<el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<div class="z_background0" style="margin-top: 30px; width: 40%; height: 150px;">
|
<div style="z-index: 100; width: 100%; height: 100%; background-color: #0062CC;">
|
<el-table
|
:data="tableData"
|
height="150"
|
border
|
size="mini"
|
style="width: 100%">
|
<el-table-column prop="date" label="日期" > </el-table-column>
|
<el-table-column prop="name" label="名称" > </el-table-column>
|
<el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<div class="z_background0" style="margin-top: 30px; width: 60%; height: 150px;">
|
<div style="float: left; z-index: 100; width: 45%; height: 100%; background-color: #0062CC;">
|
<el-table
|
:data="tableData"
|
height="150"
|
border
|
size="mini"
|
style="width: 100%">
|
<el-table-column prop="date" label="日期" > </el-table-column>
|
<el-table-column prop="name" label="名称" > </el-table-column>
|
<el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>
|
</el-table>
|
</div>
|
<div style="float: right; z-index: 100; width: 45%; height: 100%; background-color: #0062CC;">
|
<el-table
|
:data="tableData"
|
height="150"
|
border
|
size="mini"
|
style="width: 100%">
|
<el-table-column prop="date" label="日期" > </el-table-column>
|
<el-table-column prop="name" label="名称" > </el-table-column>
|
<el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<div class="z_background0" style="margin-top: 30px; width: 70%; height: 150px;">
|
<div style="float: left; z-index: 100; width: 40%; height: 100%; background-color: #0062CC;">
|
<el-table
|
:data="tableData"
|
height="150"
|
border
|
size="mini"
|
style="width: 100%">
|
<el-table-column prop="date" label="日期" > </el-table-column>
|
<el-table-column prop="name" label="名称" > </el-table-column>
|
<el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>
|
</el-table>
|
</div>
|
<div style="float: right; z-index: 100; width: 40%; height: 100%; background-color: #0062CC;">
|
<el-table
|
:data="tableData"
|
height="150"
|
border
|
size="mini"
|
style="width: 100%">
|
<el-table-column prop="date" label="日期" > </el-table-column>
|
<el-table-column prop="name" label="名称" > </el-table-column>
|
<el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
|
<!-- 样例 -->
|
<div style="z-index: 10;">
|
<!-- 横线 -->
|
<div class="z_background0 h_" style="top: 0px; right: 0px; width: 100px;">
|
<!-- 左箭头 -->
|
<div class="h_l" v-if="true" style="">
|
<i class="el-icon-caret-left"></i>
|
</div>
|
<!-- 右箭头 -->
|
<div class="h_r" v-if="true" style="">
|
<i class="el-icon-caret-right"></i>
|
</div>
|
<!-- 线 -->
|
<div class="h_x" style=""></div>
|
</div>
|
|
<!-- 竖线 -->
|
<div class="z_background0 s_" style="top: 0px; right: 0px; height: 100px;">
|
<div style="position: relative; width: 100%; height: 100%;">
|
<!-- 上箭头 -->
|
<div class="s_t" v-if="true" style="">
|
<i class="el-icon-caret-top"></i>
|
</div>
|
<!-- 下箭头 -->
|
<div class="s_b" v-if="true" style="">
|
<i class="el-icon-caret-bottom"></i>
|
</div>
|
<!-- 线 -->
|
<div class="s_x" style=""></div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
<el-dialog title="画板信息" :visible.sync="dialog_canvasTxt" v-if="dialog_canvasTxt">
|
<el-form :model="form_canvasTxt" label-position='right' label-width="100px">
|
<el-form-item label="面板名称" >
|
<el-input v-model="form_canvasTxt.name" style="width: 100%;"></el-input>
|
</el-form-item>
|
<el-form-item label="基准点">
|
<el-radio-group v-model="form_canvasTxt.basexy_type">
|
<el-radio label="1">标准基准点</el-radio>
|
<el-radio label="2">自定义基准点</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item v-if="form_canvasTxt.basexy_type == '1'" label="标准基准点X" >
|
<el-select v-model="form_canvasTxt.basex_bz" placeholder="选择基准点X">
|
<el-option label="最左" value="left"></el-option>
|
<el-option label="最右" value="right"></el-option>
|
<el-option label="居中" value="center"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="form_canvasTxt.basexy_type == '1'" label="标准基准点Y" >
|
<el-select v-model="form_canvasTxt.basey_bz" placeholder="选择基准点Y">
|
<el-option label="最上" value="top"></el-option>
|
<el-option label="最下" value="bottom"></el-option>
|
<el-option label="居中" value="center"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-row v-if="form_canvasTxt.basexy_type == '2'">
|
<el-col :span="12">
|
<el-form-item label="基准点X坐标">
|
<el-input v-model="form_canvasTxt.basex_zdy" style="width: 100%;"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="是否%" >
|
<el-switch v-model="form_canvasTxt.baseratiox_zdy"></el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row v-if="form_canvasTxt.basexy_type == '2'">
|
<el-col :span="12">
|
<el-form-item label="基准点y坐标" >
|
<el-input v-model="form_canvasTxt.basey_zdy" ></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="是否%">
|
<el-switch v-model="form_canvasTxt.baseratioy_zdy"></el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button size="small" @click="dialog_canvasTxt = false">取 消</el-button>
|
<el-button size="small" type="primary" @click="dialog_canvasTxt = false">确 定</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog title="线总览" :visible.sync="dialog_Tie" v-if="dialog_Tie">
|
<el-table
|
:data="canvas_xys"
|
height="150"
|
border
|
size="mini"
|
style="width: 100%">
|
<el-table-column prop="linecode" label="编号" width="70"></el-table-column>
|
<el-table-column prop="lineWidth" label="线粗" width="70"></el-table-column>
|
<el-table-column prop="strokeStyle" label="线色" width="70"></el-table-column>
|
<el-table-column prop="isarrow" label="有否有箭头" align="center" width="100">
|
<template v-slot="{row}">
|
<div>
|
<el-switch size="mini" v-model="row.isarrow"></el-switch>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="txtcode" label="文本编号" width="90"></el-table-column>
|
<el-table-column prop="textalign" label="文本左右位置" width="120" :formatter="textalign_"></el-table-column>
|
<el-table-column prop="textBaseline" label="文本上下位置" width="120" :formatter="textBaseline_"></el-table-column>
|
<el-table-column label="操作" align="center" width="120">
|
<template v-slot="{row}">
|
<el-row>
|
<el-tooltip class="item" effect="dark" content="编辑" placement="top">
|
<el-button size="mini" type="success" icon="el-icon-edit" circle @click="edit_Tie(row)"></el-button>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="删除" placement="top">
|
<el-button size="mini" type="danger" icon="el-icon-delete" circle @click="deleteById(row)"></el-button>
|
</el-tooltip>
|
</el-row>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button size="small" @click="dialog_Tie = false">关 闭</el-button>
|
<el-button size="small" type="primary" @click="dialog_Tie = false">保 存</el-button>
|
</div>
|
</el-dialog>
|
|
</div>
|
</div>
|
</body>
|
</html>
|
