sagacloud-new-daping/src/components/TemChart.vue

<template>
    <div
        class="temChart"
        :class="[screenType === 'hor' ? 'horiCompClass' : 'verCompClass ']"
    >
        <div class="temChartCont">
            <div
                class="subhead-title"
                v-show="screenType === 'ver'"
            >
                <span>实时温度</span>
            </div>
            <div
                id="tempChartBox"
                class="tempChartBox"
                ref="tempChartRef"
            ></div>
        </div>
    </div>
</template>
<script lang="ts">
import {
    ref,
    defineComponent,
    reactive,
    toRefs,
    onMounted,
    nextTick,
} from "vue";
import { queryIndoorTempList } from "@/api";
import { Chart, registerShape } from "@antv/g2";
import moment from "moment";

export default defineComponent({
    props: {
        screenType: {
            type: String,
        },
    },
    setup(props, contx) {
        //console.log("props", props, contx);
        const { screenType } = props;
        const allData = reactive({});
        const tempChartRef = ref();
        const cInitChart = (cdata, minTemp, maxTemp) => {
            registerShape("point", "breath-point", {
                draw(cfg, container) {
                    const data = cfg.data;
                    const point = { x: cfg.x, y: cfg.y };
                    const group = container.addGroup();
                    if (
                        data.time === cdata[cdata.length - 1].time &&
                        data.temp === cdata[cdata.length - 1].temp
                    ) {
                        const decorator1 = group.addShape("circle", {
                            attrs: {
                                x: point.x,
                                y: point.y,
                                r: 8,
                                fill: "#F2E2CC",
                                // opacity: 0.8,
                            },
                        });
                        // decorator1.animate(
                        //     {
                        //         r: 20,
                        //         opacity: 0,
                        //     },
                        //     {
                        //         duration: 1800,
                        //         easing: "easeLinear",
                        //         repeat: true,
                        //     }
                        // );
                        group.addShape("circle", {
                            attrs: {
                                x: point.x,
                                y: point.y,
                                r: 4,
                                fill: "#ffffff",
                                filter: "blur(2px)",
                                opacity: 0.5,
                            },
                        });
                        // group.addShape("circle", {
                        //     attrs: {
                        //         x: point.x,
                        //         y: point.y,
                        //         r: 1.5,
                        //         fill: "#1890ff",
                        //     },
                        // });
                    }

                    return group;
                },
            });

            var chartWidth =
                (tempChartRef.value && tempChartRef.value.offsetWidth) || 0;
            var chartHeight =
                (tempChartRef.value && tempChartRef.value.offsetHeight) || 0;
            // if (this.tempChart) {
            //     this.tempChart.clear();
            //     var chart = this.tempChart;
            // } else {
            var chart = new Chart({
                container: "tempChartBox",
                autoFit: true,
                // width: chartWidth,
                // height: chartHeight,
                padding: [70, 50, 46, 60],
            });
            // }

            chart.data(cdata);

            chart.scale("time", {
                //range: [0, 1],
                //tickCount: 2,
                //tickInterval
                // type: 'timeCat'
            });
            chart.scale("temp", {
                type: "linear",
                minTickInterval: 1,
                min: minTemp,
                max: maxTemp,
                //ticks:[22,23,24,25,26,27]
            });
            chart.axis("time", {
                line: {
                    style: {
                        lineWidth: 1, // 设置线的宽度
                        stroke: "rgba(224,194,155,0.2)", // 设置线的颜色
                        lineDash: [3, 3], // 设置虚线样式
                    },
                },
                label: {
                    style: {
                        fill: "#E0C29B",
                        fontSize: 12,
                    },
                },
                tickLine: null,
            });
            chart.axis("temp", {
                tickLine: null,
                grid: {
                    line: {
                        style: {
                            lineWidth: 1, // 设置线的宽度
                            stroke: "rgba(224,194,155,0.2)", // 设置线的颜色
                            lineDash: [3, 3], // 设置虚线样式
                        },
                    },
                },
                label: {
                    style: {
                        fill: "#E0C29B",
                        fontSize: 12,
                    },
                    // formatter: function formatter(text) {
                    //     return text；
                    // }
                },
            });
            chart.legend(false);

            chart
                .line()
                .animate({
                    appear: {
                        //animation: "fade-in", // 动画名称
                        easing: "easeQuadIn", // 动画缓动效果
                        delay: 100, // 动画延迟执行时间
                        duration: 1500, // 动画执行时间
                    },
                })
                .position("time*temp")
                .color("#F2E3CD")
                .shape("smooth")
                .tooltip(false)
                .style({
                    lineWidth: 3,
                });

            chart
                .area()
                .animate({
                    appear: {
                        //animation: "fade-in", // 动画名称
                        easing: "easeQuadIn", // 动画缓动效果
                        delay: 100, // 动画延迟执行时间
                        duration: 1500, // 动画执行时间
                    },
                })
                .position("time*temp")
                .color(
                    "l(90) 0:rgba(237,217,190,0.8) 0.6:rgb(149, 162, 194, 0.01)"
                )
                .tooltip(false)
                .shape("smooth");

            chart
                .point()
                .tooltip(false)
                .position("time*temp")
                .shape("breath-point");

            var lastpoint = cdata[cdata.length - 1];
            var nowtime = moment();
            var timestr = nowtime.format("YYYY.MM.DD");
            const tooltipHtml = `<div style='line-height:22px;color:#321D0A;background: linear-gradient(105.46deg, #F2E3CD 8.6%, #D9B991 62.71%);padding:16px 17px;border-radius:5px;white-space:nowrap;'>
                <div style='font-size:12px;font-weight:600;'><span style='margin-right:5px;line-height:17px;'>${timestr}</span>${lastpoint &&
                lastpoint.time}</div>
                <div style='font-size:16px;font-weight:600;margin-top:4px;'>室内温度：${lastpoint &&
                    lastpoint.temp &&
                    Number(lastpoint.temp).toFixed(1)}℃</div></div>`;
            chart.annotation().html({
                position: lastpoint,
                html: tooltipHtml,
                alignX: "right",
                alignY: "bottom",
                offsetX: 60,
                offsetY: -15,
            });

            chart.annotation().text({
                // position: ['min', 'max'], // 文本的起始位置，值为原始数据值，支持 callback
                position: function(xScale, yScale) {
                    //console.log("position", xScale, yScale);
                    return ["0%", "0%"];
                },
                content: "温度/℃", // 显示的文本内容
                style: {
                    fill: "#E0C29B", // 文本颜色
                    fontSize: "12", // 文本大小
                    // fontWeight: 'bold' // 文本粗细
                    // rotate: Math.PI / 4 // 文本旋转，以弧度为单位
                }, // 文本的图形样式属性
                offsetX: -40, // x 方向的偏移量
                offsetY: -46, // y 方向偏移量
            });

            chart.render();
            return chart;
        };
        onMounted(() => {
            queryIndoorTempList()
                .then((res) => {
                    var cdata = res.data.data || [];
                    var tempArr = [];
                    cdata.forEach((element) => {
                        var timestr = element.time || "";
                        var hour = timestr.substr(8, 2);
                        var minute = timestr.substr(10, 2);
                        element.time = hour + ":" + minute;
                        element.temp =
                            element && element.temp
                                ? Number(element.temp).toFixed(1)
                                : element.temp;
                        element.temp && tempArr.push(element.temp);
                    });
                    var minTemp = Math.floor(Math.min(...tempArr));
                    var maxTemp = Math.ceil(Math.max(...tempArr));
                    // debugger;
                    nextTick(() => {
                        cInitChart(cdata, minTemp, maxTemp);
                    });
                })
                .catch((err) => {});
        });
        return { ...toRefs(allData), tempChartRef };
    },
});
</script>

<style scoped lang="scss">
.temChart {
    .temChartCont {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        font-size: 0;
    }
    .tempChartBox {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        // height: 330px;
    }
}
.horiCompClass {
    height: 100%;
    box-sizing: border-box;
    padding: 50px 20px 20px;
}
.verCompClass {
    // margin: 22px 0;
    //height: 410px;
    height: 31%;
    padding: 28px 0;
    box-sizing: border-box;
    .temChartCont {
        padding: 0 36px;
        background: rgba(149, 162, 194, 0.1);
        backdrop-filter: blur(40px);
        border-radius: 20px;
    }
    .tempChartBox {
        height: calc(100% - 60px);
        padding-top: 30px;
        box-sizing: border-box;
    }
}
</style>