<!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:"10",//线粗
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>