2021-11-09

最新推荐文章于 2021-11-10 16:44:46 发布
最新推荐文章于 2021-11-10 16:44:46 发布
阅读量563 收藏
点赞数 1
分类专栏： vue 文章标签： javascript vue.js 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45184807/article/details/121233939
版权

在这里插入图片描述
代码

<template>
  <div style="width: calc(100vw - 300px); height: calc(80vh - 10px)">
    <el-scrollbar always>
      <canvas ref="canvas" id="cavsElem" :width="width" :height="height">
        您的浏览器不支持canvas, 请升级更换或升级浏览器
      </canvas>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import tranListToTreeData from "@/utils/tree";
import { Item } from "ant-design-vue/lib/menu";
// 字符串分割
function splitArr(arr: string | any[], num: number) {
  var resultArr = [];
  for (var i = 0, len = arr.length; i < len; i += num) {
    resultArr.push(arr.slice(i, i + num));
  }
  return resultArr;
}

export default defineComponent({
  setup() {
    const store = useStore();
    store.dispatch("financialPlan/getProductionListAndAxis", 0);

    // 获取canvas实例
    const canvas: any = ref(null);
    const timeaxis: any = computed(() => store.state.financialPlan.axisList);
    const dataList: any = computed(() => store.state.financialPlan.childlist);
    const parentlist: any = computed(() => store.state.financialPlan.parentlist);
    console.log(parentlist.value, 123);
    const width: any = ref(0);
    const height: any = ref(0);
    console.log(width, height);

    watch(
      () => timeaxis.value,
      (val) => {
        console.log(123);

        width.value = computed(() => timeaxis.value.length * 300 + 600).value;
        height.value = computed(() => dataList.value.length * 100 + 200).value;
      }
    );

    onMounted(() => {
      const cavesSave = () => {
        var ctx = canvas.value.getContext("2d");
        // 获取鼠标位置
        // let bgID = -1;
        // 	canvas.addEventListener("mousemove", function(e) {
        // 		var x = e.clientX;
        // 		var y = e.clientY;
        // 		var rect = canvas.getBoundingClientRect();
        // 		x -= rect.left;
        // 		y -= rect.top;
        // 		console.log(x, y); // (x, y) 就是鼠标在 canvas 单击时的坐标
        // 		console.log(parseInt(y / 100))

        // 		ctx.clearRect(250,75,2000, 50);
        // 		if(bgID != 0 ){
        // 			console.log(1123123)
        // 			ctx.beginPath()
        // 			ctx.clearRect(250,75,2000, 50);
        // 			ctx.clearRect(250,75,2000, 50);
        // 			ctx.fillStyle = "rgba(0, 0, 0, 0)"
        // 			ctx.fillRect(250,75,2000, 50);
        // 			ctx.fill()
        // 		}

        // 		bgID = 2
        // 	})

        // 渲染表格
        var rectH = 100;
        var rectW = 300;
        ctx.lineWidth = 1;
        console.log(ctx);

        //绘制表格
        ctx.lineWidth = 1;
        // 第一步： 绘制y线 和 x的值
        let starty = 400; // y轴起始位置的基数
        timeaxis.value.forEach((item: any, i: any) => {
          ctx.setLineDash([5, 1]);
          starty = item.interval * (rectW / 10) + starty;
          ctx.beginPath();
          ctx.strokeStyle = "rgba(0, 0, 0, 0.5)";
          ctx.moveTo(starty, 0);
          //如果不设置moveTo，当前画笔没有位置
          ctx.lineTo(starty, canvas.value.height - 100);
          ctx.stroke();
          ctx.font = "16px 微软雅黑";
          ctx.fillText(item.day, starty - 50, canvas.value.height - 80);
        });
        ctx.setLineDash([0, 0]);
        //第二步：绘制横线
        let startx = 400; // x轴起始位置的基数
        for (var i = 0; i < 19; i++) {
          ctx.beginPath();
          ctx.strokeStyle = "rgba(0, 0, 0, 0.5)";
          ctx.moveTo(startx, rectH * i);
          ctx.lineTo(canvas.value.width - 380, rectH * i);
          ctx.stroke();
        }

        // 数据清洗
        let dataID = 0;
        dataID = 0;
        let dataArr2: any = [];
        dataList.value.map((itemFa: any, i: any) => {
          itemFa.data.map((item: any) => {
            const x = dataArr2.findIndex((res: any) => res.dwID === itemFa.id);
            const endTime = new Date(new Date(item.ENDTIME).getTime() + 86400000).toISOString();
            if (x == -1) {
              dataArr2.push({
                dwID: itemFa.id,
                id: dataID,
                type: item.NAME,
                childer: [
                  {
                    values: [
                      item.STARTTIME.split("T")[0].split("-").join("/"),
                      endTime.split("T")[0].split("-").join("/")
                    ],
                    text: item.NAME,
                    name: item.NAME,
                    dwname: item.DWNAME,
                    planeclass: item.PLANECLASS,
                    drawrowno: item.DRAWROWNO,
                    isoverdraw: item.ISOVERDRAW,
                    daysprogressed: item.DAYSPROGRESSED
                  }
                ],
                text: item.NAME + item.DWNAME
              });
              dataID++;
            } else {
              dataArr2[x].childer.push({
                values: [item.STARTTIME.split("T")[0].split("-").join("/"), endTime.split("T")[0].split("-").join("/")],
                text: item.NAME,
                name: item.NAME,
                dwname: item.DWNAME,
                planeclass: item.PLANECLASS,
                drawrowno: item.DRAWROWNO,
                isoverdraw: item.ISOVERDRAW,
                daysprogressed: item.DAYSPROGRESSED
              });
            }
          });
        });

        // 数据条数绘制
        dataArr2.forEach((res: any) => {
          res.childer.forEach((resChi: any) => {
            let dataStarsx =
              (new Date(resChi.values[0]).getTime() - new Date(timeaxis.value[0].day).getTime()) / 86400000;
            let dateTime = (new Date(resChi.values[1]).getTime() - new Date(resChi.values[0]).getTime()) / 86400000;
            // 绘制 单条数据的填充
            ctx.beginPath();
            //
            // 数据长度
            let datax = dateTime * (rectW / 10);
            //(x起始位置, y起始位置, 长度, 高度 )
            // 填充
            if (resChi.isoverdraw) {
              if (resChi.drawrowno == 1) {
                ctx.rect(startx + dataStarsx * (rectW / 10), res.id * 100 + 75, datax, 22);
              } else {
                ctx.rect(startx + dataStarsx * (rectW / 10), res.id * 100 + 75 + 29, datax, 21);
              }
              // 填充色
              if (resChi.planeclass === 11) {
                ctx.fillStyle = "#FFF2CC";
              } else if (resChi.planeclass === 12) {
                ctx.fillStyle = "#F2DCDA";
              } else if (resChi.planeclass === 13) {
                ctx.fillStyle = "#99FFCC";
              } else {
                ctx.fillStyle = "#00ffff";
              }
              ctx.strokeStyle = "rgba(0, 0, 0,1)";
              ctx.stroke();
              ctx.fill();
              // 绘制进度方框
              // 需要一个进度参数

              if (resChi.drawrowno == 1) {
                for (var i = 0; i < datax / (rectW / 10); i++) {
                  ctx.beginPath();
                  if (i < resChi.daysprogressed) {
                    ctx.lineWidth = 1;
                    ctx.fillStyle = "rgba(170, 0, 0, 0.5)";
                    ctx.fillRect(
                      startx + dataStarsx * (rectW / 10) + i * (rectW / 10),
                      res.id * 100 + 98,
                      rectW / 10,
                      5
                    );
                  }
                  ctx.rect(startx + dataStarsx * (rectW / 10) + i * (rectW / 10), res.id * 100 + 98, rectW / 10, 5);
                  ctx.strokeStyle = "rgba(0, 0, 0, 0.5 )";
                  ctx.stroke();
                }
              } else {
                for (var index = 0; index < datax / (rectW / 10); index++) {
                  ctx.beginPath();
                  if (index < resChi.daysprogressed) {
                    ctx.lineWidth = 1;
                    ctx.fillStyle = "rgba(170, 0, 0, 0.5)";
                    ctx.fillRect(
                      startx + dataStarsx * (rectW / 10) + index * (rectW / 10),
                      res.id * 100 + 125,
                      rectW / 10,
                      5
                    );
                  }
                  ctx.rect(
                    startx + dataStarsx * (rectW / 10) + index * (rectW / 10),
                    res.id * 100 + 125,
                    rectW / 10,
                    5
                  );
                  ctx.strokeStyle = "rgba(0, 0, 0, 0.5 )";
                  ctx.stroke();
                }
              }

              // 绘制单条数据的文本内容
              ctx.beginPath();
              ctx.fillStyle = "#000000";
              ctx.font = "12px Arial";
              let rerChiText = resChi.text;
              if (resChi.dwname) rerChiText = rerChiText + `- ${resChi.dwname}`;
              let textWidth = ctx.measureText(rerChiText).width;

              if (textWidth < datax) {
                if (resChi.drawrowno == 1) {
                  ctx.fillText(
                    rerChiText,
                    startx + dataStarsx * (rectW / 10) + datax / 2 - textWidth / 2,
                    res.id * 100 + 91
                  );
                } else {
                  ctx.fillText(
                    rerChiText,
                    startx + dataStarsx * (rectW / 10) + datax / 2 - textWidth / 2,
                    res.id * 100 + 93 + 25
                  );
                }
              } else {
                let resChiTextArr = rerChiText.split("");

                let textArr = splitArr(resChiTextArr, Math.floor(rerChiText.length / 2) + 1);

                textArr.forEach((resText: any, i: any) => {
                  ctx.fillText(
                    resText.join(""),
                    startx + dataStarsx * (rectW / 10) + datax / 2 - textWidth / 3,
                    res.id * 100 + (93 + i * 20)
                  );
                });
              }
            } else {
              let datax = dateTime * (rectW / 10);
              ctx.rect(startx + dataStarsx * (rectW / 10), res.id * 100 + 75, datax, 45);
              if (resChi.planeclass === 11) {
                ctx.fillStyle = "#FFF2CC";
              } else if (resChi.planeclass === 12) {
                ctx.fillStyle = "#F2DCDA";
              } else if (resChi.planeclass === 13) {
                ctx.fillStyle = "#99FFCC";
              } else {
                ctx.fillStyle = "#00ffff";
              }
              ctx.strokeStyle = "rgba(0, 0, 0,1)";
              ctx.stroke();
              ctx.fill();
              // 绘制进度方框
              // 需要一个进度参数
              for (var index2 = 0; index2 < datax / (rectW / 10); index2++) {
                ctx.beginPath();
                if (index2 < resChi.daysprogressed) {
                  ctx.lineWidth = 1;
                  ctx.fillStyle = "rgba(170, 0, 0, 0.5)";
                  ctx.fillRect(
                    startx + dataStarsx * (rectW / 10) + index2 * (rectW / 10),
                    res.id * 100 + 120,
                    rectW / 10,
                    10
                  );
                }
                ctx.rect(
                  startx + dataStarsx * (rectW / 10) + index2 * (rectW / 10),
                  res.id * 100 + 120,
                  rectW / 10,
                  10
                );
                ctx.strokeStyle = "rgba(0, 0, 0, 0.5 )";
                ctx.stroke();
              }
              // 绘制单条数据的文本内容
              ctx.beginPath();
              ctx.fillStyle = "#000000";
              ctx.font = "12px Arial";
              let rerChiText = resChi.text;
              if (resChi.dwname) rerChiText = rerChiText + `- ${resChi.dwname}`;
              let textWidth = ctx.measureText(rerChiText).width;

              if (textWidth < datax) {
                ctx.fillText(
                  rerChiText,
                  startx + dataStarsx * (rectW / 10) + datax / 2 - textWidth / 2,
                  res.id * 100 + 105
                );
              } else {
                let resChiTextArr = rerChiText.split("");

                let textArr = splitArr(resChiTextArr, Math.floor(rerChiText.length / 2) + 1);

                textArr.forEach((resText: any, i: any) => {
                  ctx.fillText(
                    resText.join(""),
                    startx + dataStarsx * (rectW / 10) + datax / 2 - textWidth / 3,
                    res.id * 100 + (93 + i * 20)
                  );
                });
              }
            }
          });

          const paData = tranListToTreeData(parentlist.value, -1);
          // 基数
          let index = 1;
          const x = (item: any, height: any, startDot: any = 0, endDot: any = 0) => {
            item.map((item: any, i: any) => {
              // console.log(item);
              // 第一步绘制方框
              ctx.beginPath();
              ctx.rect(15 + (item.PLANECLASS - 1) * 200, height, 170, 25);
              // 第二步绘制填充
              if (item.PLANECLASS == 1) {
                ctx.fillStyle = "#B7DDE8";
              } else if (item.PLANECLASS == 2) {
                ctx.fillStyle = "#D7E3BF";
              } else if (item.PLANECLASS == 3) {
                ctx.fillStyle = "#99FFCC";
              }
              // 第三部绘制文字
              ctx.stroke();
              ctx.fill();
              ctx.fillStyle = "#000";
              let textWidth = ctx.measureText(item.NAME).width;
              ctx.fillText(item.NAME, 100 - textWidth / 2 + (item.PLANECLASS - 1) * 200, height + 15);
              // 绘制连接线
              if (item.PLANECLASS !== 1) {
                ctx.lineWidth = 0.9;
                ctx.beginPath();
                ctx.moveTo(startDot, endDot + 12.5);
                ctx.lineTo(startDot + 15, endDot + 12.5);
                ctx.lineTo(startDot + 15, height + 12.5);
                ctx.lineTo(startDot + 30, height + 12.5);
                ctx.stroke();
              }

              if (item.PLANECLASS == 2 || item.PLANECLASS == 3) {
                if (!item.children) height += 100;
              }
              if (item.children) {
                x(item.children, height, 15 + (item.PLANECLASS - 1) * 200 + 170, height);
                index++;
                if (item.PLANECLASS == 1) height += index * 100;
                if (item.PLANECLASS == 2) height += item.children.length * 100;
              }
              // height += item?.children?.length * 100 ?? 100;
            });
          };
          x(paData, 87.5, -2);

          ctx.stroke();
        });
      };

      watch(
        () => timeaxis.value,
        (val) => {
          cavesSave();
        }
      );
      watch(
        () => width.value,
        (val) => {
          console.log(val);
          console.log(313123);
          setTimeout(() => {
            cavesSave();
          }, 1);
        }
      );
    });
    return { canvas, width, height };
  }
});
</script>

<style lang="scss" scoped>
:deep() .el-scrollbar__bar {
  // height: 10px;
  // width: 10px;
}
</style>
weixin_45184807
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2021-11-09 WPF上位机 80-智能停车场项目专题-openvc机器视觉环境的配置
时光隧道
11-09 4万+
openvc环境的配置 1.下载opencv：https://opencv.org/ 2.解压opencv，配置opencv程序集目录到window环境变量中 3.vs中包含目录的配置 4.vs中库目录的配置 5.vs活动解决方案配置 6.vs附加依赖项的配置 7.
2021-11-04
m0_53575762的博客
11-20 6295
一、Linux命令和windows区别？ 1、Linux命令全部严格区分大小写；而windows命令大小写都识别。 2、Linux所有的文件都是没有扩展名的，而windows是文件是有扩展名的。 创建一个新用户 [root@localhost mxh]# useradd mxh2 # 创建一个user [root@localhost mxh]# password mxh2 #12345678 [root@localhost xxx]# gr...
2021-09-11
weixin_61000083的博客
09-11 5224
元宇宙、IPFS、HTTP、区块链、比特币…数字世界…
2021-01-18
weixin_54641072的博客
01-18 1754
找程序猿哥哥！！！！编制App或者小程序
2021-05-05
樊金良的博客
05-05 662
你需要努力，fighting！
2021-01-06
qq_40504996的博客
01-06 843
运行机某个js文件访问不了。做了过滤器，没有被过滤的。其他js文件都可以。就单独一个403。考虑是否是防火墙做了一些敏感词的判断过滤。 将js文件名修改试一下，或者从防火墙那方面做文章 ...
go每日新闻(2021-11-09)——Go并发编程一年回顾
韩亚军的博客
11-10 1635
每日一谚：Interfaces—by design and convention—encourage us to write composable code. go中文网每日资讯--2021-11-09 一、Go语言中文网 Go 中常用的四大重构技术 Go Gio 实战：煮蛋计时器的实现 04— 布局 二、网管叨bi叨 这几个常用的 Go 官方库，性能居然还不如三方开源库 三、k8s技术圈 Gitlab CI 在 Kubernetes 中的 Docker 缓存 四、Golang梦工厂 为什么.
2021-09-22
weixin_46482214的博客
09-22 4206
Centos7扫描漏洞及离线处理方法漏洞处理方法nginx 安 全 漏 洞 (CVE-2021-23017)下载需要安装的离线包pcre安装openssl安装zlib安装nginx升级安装上述完成以后，会在当前我解压缩nginx的objs下面产生一个nginx二进制文件Apache Druid未授权访问【 原理扫 描 】处理方法OpenSSH CBC模式信息泄露漏洞(CVE-2008-5161)【 原理扫 描 】ICMP timestamp请求响应漏洞允许Traceroute探测SSH版本信息可被获取探测到
2021-07-09
u011385544的博客
07-09 2236
标题 doris FE安装部署后启动报错wait catalog to be ready. FE type: UNKNOWN. is ready: false 2021-07-09 11:41:53,586 INFO (main|1) [Catalog.loadImage():1468] image does not exist: /data/lib/doris/doris-meta/image/image.0 2021-07-09 11:41:54,055 INFO (UNKNOWN 172.17.0.1
2021-11-09 09-06-42.mp4
03-25
2021-11-09 09-06-42.mp4
金融时报-2021-11-09.pdf
11-16
金融时报-2021-11-09.pdf
2021-11-09 16-27-56.mp4
03-25
2021-11-09 16-27-56.mp4
2021-11-09 13-38-20.mp4
03-25
2021-11-09 13-38-20.mp4
2021-11-11 09-09-50.mp4
03-25
2021-11-11 09-09-50.mp4
App_Privacy_Report_v4_2021-11-09T22_46_33.ndjson
11-09
App_Privacy_Report_v4_2021-11-09T22_46_33.ndjson
2021-11-10 09-10-59.mp4
03-25
2021-11-10 09-10-59.mp4
tampermonkey-backup-chrome-2021-11-27T01-27-17-766Z.zip
11-27
配置过的油猴插件
2021-2022收藏资料面向对象程序设计最终作业.doc
09-26
2021年09月16日
id uid exam_id start_time submit_time score 1 1001 9001 2021-09-01 09:01:01 2021-09-01 09:51:01 78 2 1001 9002 2021-09-01 09:01:01 2021-09-01 09:31:00 81 3 1002 9002 2021-09-01 12:01:01 2021-09-01 12:31:01 81 4 1003 9001 2021-09-01 19:01:01 2021-09-01 19:59:01 86 5 1003 9002 2021-09-01 12:01:01 2021-09-01 12:31:51 89 6 1004 9002 2021-09-01 19:01:01 2021-09-01 19:30:01 85 7 1005 9001 2021-09-01 12:01:01 2021-09-01 12:31:02 85 8 1006 9001 2021-09-07 10:01:01 2021-09-07 10:21:01 84 9 1003 9001 2021-09-08 12:01:01 2021-09-08 12:11:01 40 10 1003 9002 2021-09-01 14:01:01 (NULL) (NULL) 11 1005 9001 2021-09-01 14:01:01 (NULL) (NULL) 12 1003 9003 2021-09-08 15:01:01 (NULL) (NULL) sql求时间差
最新发布
07-25
您可以使用 SQL 中的函数来计算时间差。假设您想要计算 start_time 和 submit_time 之间的时间差，可以使用以下语句： ```sql SELECT id, uid, exam_id, start_time, submit_time, score, EXTRACT(EPOCH FROM ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值