<!-- 轨迹测斜数据 -->
<template>
    <div class="jygjStyle" :max-height="jygjStyHeight()">
        <div class="left" style="width: 35%">
            <el-tabs v-model="view" @tab-click="handleClick">
                <el-tab-pane label="二维视图" name="1" style="height: calc(100vh - 250px)">
                    <div class="svgContainer">
                        <div style="display: flex">
                            <div class="svgTitle">垂直投影图</div>
                            <svg class="trackSvg2"></svg>
                        </div>
                        <div style="display: flex">
                            <div class="svgTitle">水平投影图</div>
                            <svg class="trackSvg3"></svg>
                        </div>
                    </div>
                    <div class="svgContainer">
                        <div style="display: flex; width: 100%; justify-content: space-around">
                            <div style="display: flex; margin: 10px 0 0 0">
                                <div class="svgTitle">全角变化率</div>
                                <svg class="trackSvgXs1"></svg>
                            </div>
                            <div style="display: flex; margin: 10px 0 0 0">
                                <div class="svgTitle">井斜</div>
                                <svg class="trackSvgXs3"></svg>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="三维视图" name="2" style="height: calc(100vh - 250px)">
                    <div style="position: relative">
                        <div style="position: absolute; top: 20px; right: 20px; z-index: 999">
                            <div class="legendItem">
                                <div class="colorLump" style="background: rgb(219, 67, 83)"></div>
                                <div class="text">狗腿度(°/30m) >8</div>
                            </div>
                            <div class="legendItem">
                                <div class="colorLump" style="background: rgb(221, 68, 166)"></div>
                                <div class="text">狗腿度(°/30m) 6-8</div>
                            </div>
                            <div class="legendItem">
                                <div class="colorLump" style="background: rgb(89, 95, 246)"></div>
                                <div class="text">狗腿度(°/30m) 4-6</div>
                            </div>
                            <div class="legendItem">
                                <div class="colorLump" style="background: rgb(76, 167, 248)"></div>
                                <div class="text">狗腿度(°/30m) 2-4</div>
                            </div>
                            <div class="legendItem">
                                <div class="colorLump" style="background: rgb(124, 233, 234)"></div>
                                <div class="text">狗腿度(°/30m) &lt;2</div>
                            </div>
                        </div>
                        <div id="main" style="width: 700px; height: calc(100vh - 250px)"></div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="right" style="width: 65%; margin-left: 20px">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                label-width="100px" class="search-form">
                <el-form-item label="区块名称" prop="qk">
                    <el-select v-model="queryParams.qk" placeholder="请选择区块名称" clearable filterable>
                        <el-option v-for="item in filteredBlockOptions" :key="item.qk" :label="item.qk"
                            :value="item.qk" />
                    </el-select>
                </el-form-item>
                <el-form-item label="井号" prop="jh">
                    <el-input v-model="queryParams.jh" placeholder="请输入井号" clearable @keyup.enter.native="handleQuery"
                        disabled />
                </el-form-item>
                <el-form-item label="完井日期">
                    <el-date-picker v-model="queryParams.wjrqks" type="date" value-format="yyyy-MM-dd"
                        placeholder="完井开始年份">
                    </el-date-picker>
                    -
                    <el-date-picker v-model="queryParams.wjrqjs" type="date" value-format="yyyy-MM-dd"
                        placeholder="完井结束年份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                        v-hasPermi="['system:jskd:export']">导出</el-button>
                </el-form-item>
            </el-form>

            <el-table border v-loading="loading" :data="jskdList" @selection-change="handleSelectionChange"
                height="calc(100vh - 240px)" class="table-container">
                <el-table-column label="序号" align="center" prop="xh" min-width="40" />
                <el-table-column label="井号" align="center" prop="jh" min-width="90" show-overflow-tooltip />
                <el-table-column label="斜井深" align="center" prop="xjs" min-width="70" show-overflow-tooltip />
                <el-table-column label="段长" align="center" prop="dc" min-width="70" show-overflow-tooltip />
                <el-table-column label="井斜" align="center" prop="jx" min-width="70" show-overflow-tooltip />
                <el-table-column label="平均井斜" align="center" prop="pjjx" min-width="80" show-overflow-tooltip />
                <el-table-column label="方位" align="center" prop="fw" min-width="80" show-overflow-tooltip />
                <el-table-column label="平均方位" align="center" prop="pjfw" min-width="80" show-overflow-tooltip />
                <el-table-column label="全角变化率" align="center" prop="qjbhl" min-width="85" show-overflow-tooltip />
                <el-table-column label="垂直段长" align="center" prop="czdc" min-width="80" show-overflow-tooltip />
                <el-table-column label="累计垂直井深" align="center" prop="ljczjs" min-width="100" show-overflow-tooltip />
                <el-table-column label="分段水平位移" align="center" prop="fdspwy" min-width="100" show-overflow-tooltip />
                <el-table-column label="操作" width="50px" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view"
                            @click="handleView(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" :page-sizes="[20, 50, 80, 100]" @pagination="getList"
                class="pagination-fixed" />
            <!-- 添加或修改定向井测斜数据计算数据对话框 -->
            <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
                <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="井号" prop="jh">
                                <el-input v-model="form.jh" placeholder="请输入井号" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="序号" prop="xh">
                                <el-input v-model="form.xh" placeholder="请输入序号" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="斜井深" prop="xjs">
                                <el-input v-model="form.xjs" placeholder="请输入斜井深" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="段长" prop="dc">
                                <el-input v-model="form.dc" placeholder="请输入段长" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="井斜" prop="jx">
                                <el-input v-model="form.jx" placeholder="请输入井斜" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="平均井斜" prop="pjjx">
                                <el-input v-model="form.pjjx" placeholder="请输入平均井斜" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="方位" prop="fw">
                                <el-input v-model="form.fw" placeholder="请输入方位" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="平均方位" prop="pjfw">
                                <el-input v-model="form.pjfw" placeholder="请输入平均方位" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="全角变化率" prop="qjbhl">
                                <el-input v-model="form.qjbhl" placeholder="请输入全角变化率" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="垂直段长" prop="czdc">
                                <el-input v-model="form.czdc" placeholder="请输入垂直段长" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="累计垂直井深" prop="ljczjs">
                                <el-input v-model="form.ljczjs" placeholder="请输入累计垂直井深" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="分段水平位移" prop="fdspwy">
                                <el-input v-model="form.fdspwy" placeholder="请输入分段水平位移" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="井底横坐标1" prop="jdhzb1">
                                <el-input v-model="form.jdhzb1" placeholder="请输入井底横坐标1" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="井底横坐标2" prop="jdhzb2">
                                <el-input v-model="form.jdhzb2" placeholder="请输入井底横坐标2" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="井底纵坐标1" prop="jdzzb1">
                                <el-input v-model="form.jdzzb1" placeholder="请输入井底纵坐标1" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="井底纵坐标2" prop="jdzzb2">
                                <el-input v-model="form.jdzzb2" placeholder="请输入井底纵坐标2" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="闭合方位" prop="bhfw">
                                <el-input v-model="form.bhfw" placeholder="请输入闭合方位" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="闭合位移" prop="bhwy">
                                <el-input v-model="form.bhwy" placeholder="请输入闭合位移" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="位移投影度" prop="wytyjd">
                                <el-input v-model="form.wytyjd" placeholder="请输入位移在设计方位线上投影度" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="位移投影米" prop="wytyc">
                                <el-input v-model="form.wytyc" placeholder="请输入位移在设计方位线上投影米" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="测斜方式" prop="cxfs">
                                <el-input v-model="form.cxfs" placeholder="请输入测斜方式" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="备注" prop="bz">
                                <el-input v-model="form.bz" placeholder="请输入备注" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">关 闭</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import 'echarts-gl'
import * as echarts from 'echarts'
import { listJskd, getJskd, delJskd, addJskd, updateJskd } from "@/api/system/jskd";
import { getBlockName, getQkxl } from "@/api/system/jsaa";
import { getTwoViews, getThreeViews, getXsViews } from '@/api/optimization/initialization'
import * as d3 from 'd3'

export default {
    name: "WellboreTrajectory",
    props: {
        jh: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            // 区块下拉选项
            blockOptions: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 定向井测斜数据计算数据表格数据
            jskdList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                qk: null,
                jh: null,
                wjrqks: null,
                wjrqjs: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                // jh: [
                //     { required: true, message: "井号不能为空", trigger: "blur" }
                // ],
                // xh: [
                //     { required: true, message: "序号不能为空", trigger: "blur" }
                // ],
            },
            // 视图相关
            view: '1',
            trackSvg2: {},
            trackSvg3: {},
            curvePath1: {},
            curvePath2: {},
            x1: {},
            y1: {},
            x2: {},
            y2: {},
            svg1Line: {},
            svg2Line: {},
            width: 250,
            svgWidth: 280,
            height: 250,
            marginTop: 5,
            marginRight: 30,
            marginBottom: 20,
            marginLeft: 40,
        };
    },
    computed: {
        // 过滤后的区块选项
        filteredBlockOptions() {
            return this.blockOptions.filter(item => item && item.qk);
        }
    },
    created() {
        // 设置默认井号
        if (this.jh) {
            this.queryParams.jh = this.jh;
        }
        this.getList();
        this.getBlockOptions();
    },
    mounted() {
        this.getJygjEw();
        this.getJygjSw();
        this.getJygjXs();
        window.addEventListener('resize', this.adjustChartSize);
        this.adjustChartSize();
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.adjustChartSize);
    },
    watch: {
        // 监听props变化
        jh: {
            handler(newVal) {
                if (newVal) {
                    this.queryParams.jh = newVal;
                    this.getList();
                    this.getJygjEw();
                    this.getJygjSw();
                    this.getJygjXs();
                }
            },
            immediate: true
        }
    },
    methods: {
        jygjStyHeight() {
            const windowHeight = window.innerHeight
            const topBarHeight = 90
            const componentMargin = 57
            const tabsMargin = 20
            const tableHeight =
                windowHeight - topBarHeight - componentMargin - tabsMargin
            return tableHeight
        },
        getJygjXs() {
            // 获取斜深相关小图（全角变化率/井斜）
            if (this.jh) {
                getXsViews({ jh: this.jh })
                    .then((res) => {
                        if (res && res.code == 200) {
                            if (res.qjbhlmap && Array.isArray(res.qjbhlmap.data)) {
                                this.renderSmallCurve(
                                    '.trackSvgXs1',
                                    res.qjbhlmap.data,
                                    res.qjbhlmap.xmin,
                                    res.qjbhlmap.xmax,
                                    res.qjbhlmap.ymax,
                                    res.qjbhlmap.ymin
                                )
                            } else {
                                d3.select('.trackSvgXs1').selectAll('*').remove()
                            }
                            if (res.jxmap && Array.isArray(res.jxmap.data)) {
                                this.renderSmallCurve(
                                    '.trackSvgXs3',
                                    res.jxmap.data,
                                    res.jxmap.xmin,
                                    res.jxmap.xmax,
                                    res.jxmap.ymax,
                                    res.jxmap.ymin
                                )
                            } else {
                                d3.select('.trackSvgXs3').selectAll('*').remove()
                            }
                        }
                    })
                    .catch((err) => {
                        // 后端数据存在空值等校验失败时，避免未捕获异常
                        this.$modal && this.$modal.msgWarning((err && (err.msg || err.message)) || '小图数据获取失败')
                        d3.select('.trackSvgXs1').selectAll('*').remove()
                        d3.select('.trackSvgXs3').selectAll('*').remove()
                    })
            }
        },
        // 通用小曲线渲染
        renderSmallCurve(selector, curveData, xmin, xmax, ymax, ymin) {
            if (!Array.isArray(curveData) || curveData.length === 0) {
                d3.select(selector).selectAll('*').remove()
                return
            }
            // 过滤掉空值点
            const safeData = curveData
                .filter((d) => d && typeof d.x === 'number' && typeof d.y === 'number' && !isNaN(d.x) && !isNaN(d.y))
            if (safeData.length === 0) {
                d3.select(selector).selectAll('*').remove()
                return
            }
            xmin = typeof xmin === 'number' ? xmin : d3.min(safeData, (d) => d.x)
            xmax = typeof xmax === 'number' ? xmax : d3.max(safeData, (d) => d.x)
            ymin = typeof ymin === 'number' ? ymin : d3.min(safeData, (d) => d.y)
            ymax = typeof ymax === 'number' ? ymax : d3.max(safeData, (d) => d.y)
            const width = this.width
            const height = this.height
            const marginLeft = this.marginLeft
            const marginBottom = this.marginBottom
            const marginTop = this.marginTop

            d3.select(selector).selectAll('*').remove()

            const x = d3.scaleLinear([xmin, xmax], [marginLeft, width])
            const y = d3.scaleLinear([ymax, ymin], [height - marginBottom, marginTop])

            const svg = d3
                .select(selector)
                .attr('viewBox', [0, 0, this.svgWidth, height])
                .attr('width', '100%')
                .attr('height', height)
                .attr('style', 'max-width: 100%; height: auto; height: intrinsic; font: 14px sans-serif;')

            svg
                .append('g')
                .attr('transform', `translate(0,${height - marginBottom})`)
                .call(
                    d3.axisBottom(x)
                        .ticks(25)
                        .tickSizeOuter(0)
                        .tickFormat((d, i) => (i % 5 === 0 || d == 0 ? d : ''))
                )
                .call((g) => g.selectAll('.tick line').clone().attr('y2', -(height - 25)).attr('stroke', (d, i) => (i % 5 === 0 ? '#000' : '#ccc')))

            svg
                .append('g')
                .attr('transform', `translate(${width},0)`)
                .call(d3.axisLeft(y).ticks(6).tickSizeOuter(0))

            svg
                .append('g')
                .attr('transform', `translate(${marginLeft},0)`)
                .call(
                    d3.axisLeft(y)
                        .ticks(25)
                        .tickSizeOuter(0)
                        .tickFormat((d, i) => (i % 5 === 0 || d == 0 ? d : ''))
                )
                .call((g) => g.selectAll('.tick line').clone().attr('x2', width - marginLeft).attr('stroke', (d, i) => (i % 5 === 0 ? '#000' : '#ccc')))

            const line = d3
                .line()
                .x((d) => x(d.x))
                .y((d) => y(d.y))

            const y0Data = [
                { x: 0, y: ymax },
                { x: 0, y: ymin },
            ]
            const x0Data = [
                { x: xmin, y: 0 },
                { x: xmax, y: 0 },
            ]

            svg.append('path').attr('fill', 'none').attr('stroke', '#000').attr('stroke-width', 1).attr('d', line(x0Data))
            svg.append('path').attr('fill', 'none').attr('stroke', '#000').attr('stroke-width', 1).attr('d', line(y0Data))

            svg.append('path').attr('fill', 'none').attr('stroke', 'rgb(239,83,83)').attr('stroke-width', 3).attr('d', line(safeData))
        },
        adjustChartSize() {
            // 调整图表大小的方法
        },
        handleClick(tab, event) {
            // 处理标签页切换
        },
        getJygjEw() {
            // 获取二维视图数据
            if (this.jh) {
                getTwoViews({ jh: this.jh }).then((res) => {
                    console.log('二维视图', res)
                    if (res.code == 200) {
                        // 垂直投影图
                        this.getScalesSvg1(
                            res.cztymap.data,
                            res.cztymap.xmin,
                            res.cztymap.xmax,
                            res.cztymap.ymax,
                            res.cztymap.ymin
                        )
                        // 水平投影图
                        this.getScalesSvg2(
                            res.sptymap.data,
                            res.sptymap.xmin,
                            res.sptymap.xmax,
                            res.sptymap.ymax,
                            res.sptymap.ymin
                        )
                    }
                })
            }
        },
        getJygjSw() {
            // 获取三维视图数据
            if (this.jh) {
                getThreeViews({ jh: this.jh }).then((res) => {
                    if (res.code == 200) {
                        this.drewColorLine(res.swmap)
                    }
                })
            }
        },
        //垂直投影图
        getScalesSvg1(curveData, xmin, xmax, ymax, ymin) {
            d3.select('.trackSvg2').selectAll('*').remove()
            //x轴比例尺
            this.x1 = d3.scaleLinear([xmin, xmax], [this.marginLeft, this.width])
            this.y1 = d3.scaleLinear(
                [ymax, ymin],
                [this.height - this.marginBottom, this.marginTop]
            )
            // 创建svg容器
            this.trackSvg2 = d3
                .select('.trackSvg2')
                .attr('viewBox', [0, 0, this.svgWidth, this.height])
                .attr('width', '100%')
                .attr('height', this.height)
                .attr(
                    'style',
                    'max-width: 100%; height: auto; height: intrinsic; font: 14px sans-serif;'
                )
                .style('-webkit-tap-highlight-color', 'transparent')
                .on('pointerenter pointermove', pointermoved)
                .on('pointerleave', this.pointerleft)
                .on('touchstart', (event) => event.preventDefault())

            // 根据比例尺 创建曲线一x坐标轴
            this.trackSvg2
                .append('g')
                .attr('class', 'curveXcale noPath')
                .attr('transform', `translate(0,${this.height - this.marginBottom})`)
                .call(
                    d3
                        .axisBottom(this.x1)
                        .ticks(25)
                        .tickSizeOuter(0)
                        .tickFormat((d, i, n) => {
                            if (i % 5 === 0 || d == 0) {
                                return d
                            } else {
                                return ''
                            }
                        })
                )
                .call((g) =>
                    g
                        .selectAll('.tick line')
                        .clone()
                        .attr('y2', -(this.height - 25))
                        .attr('stroke', function (d, i) {
                            return i % 5 === 0 ? '#000' : '#ccc'
                        })
                )

            // 根据比例尺 创建y坐标轴
            this.trackSvg2
                .append('g')
                .attr('class', 'Ycale noPath')
                .attr('transform', `translate(${this.width},0)`)
                .call(d3.axisLeft(this.y1).ticks(6).tickSizeOuter(0))

            this.trackSvg2
                .append('g')
                .attr('class', 'curveYcale noPath')
                .attr('transform', `translate(${this.marginLeft},0)`)
                .call(
                    d3
                        .axisLeft(this.y1)
                        .ticks(25)
                        .tickSizeOuter(0)
                        .tickFormat((d, i, n) => {
                            if (i % 5 === 0 || d == 0) {
                                return d
                            } else {
                                return ''
                            }
                        })
                )
                .call(
                    (g) =>
                        g
                            .selectAll('.tick line')
                            .clone()
                            .attr('x2', this.width - this.marginLeft)
                            .attr('stroke', function (d, i) {
                                return i % 5 === 0 ? '#000' : '#ccc'
                            })
                )

            this.trackSvg2.selectAll('.curveXcale text').style('font-size', '8px')
            this.trackSvg2.selectAll('.curveYcale text').style('font-size', '8px')
            this.trackSvg2.selectAll('.Ycale text').style('fill', 'transparent')
            this.trackSvg2.selectAll('.noPath path').style('stroke', '#ccc')

            // 创建折线
            this.svg1Line = d3
                .line()
                .x((d) => this.x1(d.x))
                .y((d) => this.y1(d.y))

            //在0点绘制两条线
            const y0Data = [
                { x: 0, y: ymax },
                { x: 0, y: ymin },
            ]
            const x0Data = [
                { x: xmin, y: 0 },
                { x: xmax, y: 0 },
            ]
            this.trackSvg2
                .append('path')
                .attr('class', 'x0Line')
                .attr('fill', 'none')
                .attr('stroke', '#000')
                .attr('stroke-width', 1)
                .attr('d', this.svg1Line(x0Data))
            this.trackSvg2
                .append('path')
                .attr('class', 'x0Line')
                .attr('fill', 'none')
                .attr('stroke', '#000')
                .attr('stroke-width', 1)
                .attr('d', this.svg1Line(y0Data))

            // 绘制曲线
            this.curvePath1 = this.trackSvg2
                .append('path')
                .attr('class', 'svg1CurveLine')
                .attr('fill', 'none')
                .attr('stroke', 'rgb(239,83,83)')
                .attr('stroke-width', 3)
                .attr('d', this.svg1Line(curveData))

            this.trackSvg2
                .selectAll('.tick > *:first-child')
                .style('color', 'transparent')

            let that = this
            function pointermoved(event) {
                that.followMouse(event, that.trackSvg2)

                d3.selectAll('#tooltip').remove()
                d3.selectAll('#tooltipRect').remove()

                var mouseDateX = that.x1.invert(d3.pointer(event)[0])
                var mouseDateY = that.y1.invert(d3.pointer(event)[1])

                const textGroup1 = that.trackSvg2
                    .append('g')
                    .attr('transform', 'translate(80, 0)')
                const textGroup2 = that.trackSvg2
                    .append('g')
                    .attr('transform', 'translate(0, 0)')

                textGroup1
                    .append('rect')
                    .attr('id', 'tooltipRect')
                    .attr('x', -that.marginLeft - 40)
                    .attr('y', d3.pointer(event)[1] - 5)
                    .attr('width', 40)
                    .attr('height', 15)
                    .attr('fill', '#000')
                    .attr('stroke', '#000')
                    .attr('stroke-width', 2)
                    .attr('rx', 5)
                    .attr('ry', 5)
                    .attr('opacity', 0.8)
                textGroup2
                    .append('rect')
                    .attr('id', 'tooltipRect')
                    .attr('x', d3.pointer(event)[0] - 20)
                    .attr('y', that.height - that.marginBottom)
                    .attr('width', 40)
                    .attr('height', 15)
                    .attr('fill', '#000')
                    .attr('stroke', '#000')
                    .attr('stroke-width', 2)
                    .attr('rx', 5)
                    .attr('ry', 5)
                    .attr('opacity', 0.8)

                textGroup1
                    .append('text')
                    .attr('id', 'tooltip')
                    .attr('x', -that.marginLeft - 37)
                    .attr('y', d3.pointer(event)[1] + 5)
                    .attr('font-size', '9px')
                    .attr('fill', '#fff')
                    .append('tspan')
                    .text(mouseDateY.toFixed(2))
                textGroup2
                    .append('text')
                    .attr('id', 'tooltip')
                    .attr('x', d3.pointer(event)[0] - 15)
                    .attr('y', that.height - 9)
                    .attr('font-size', '9px')
                    .attr('fill', '#fff')
                    .append('tspan')
                    .text(mouseDateX.toFixed(2))
            }
        },
        //水平投影图
        getScalesSvg2(curveData, xmin, xmax, ymax, ymin) {
            d3.select('.trackSvg3').selectAll('*').remove()
            //x轴比例尺
            this.x2 = d3.scaleLinear([xmin, xmax], [this.marginLeft, this.width])
            this.y2 = d3.scaleLinear(
                [ymin, ymax],
                [this.height - this.marginBottom, this.marginTop]
            )
            // 创建svg容器
            this.trackSvg3 = d3
                .select('.trackSvg3')
                .attr('viewBox', [0, 0, this.svgWidth, this.height])
                .attr('width', '100%')
                .attr('height', this.height)
                .attr(
                    'style',
                    'max-width: 100%; height: auto; height: intrinsic; font: 14px sans-serif;'
                )
                .style('-webkit-tap-highlight-color', 'transparent')
                .on('pointerenter pointermove', pointermoved)
                .on('pointerleave', this.pointerleft)
                .on('touchstart', (event) => event.preventDefault())

            // 根据比例尺 创建曲线一x坐标轴
            this.trackSvg3
                .append('g')
                .attr('class', 'Xcale noPath')
                .attr('transform', `translate(0,${this.marginTop})`)
                .call(
                    d3
                        .axisBottom(this.x2)
                        .ticks(5) // 设置小刻度的数量
                        .tickSizeOuter(0)
                )
            this.trackSvg3
                .append('g')
                .attr('class', 'curveXcale noPath')
                .attr('transform', `translate(0,${this.height - this.marginBottom})`)
                .call(
                    d3
                        .axisBottom(this.x2)
                        .ticks(25)
                        .tickSizeOuter(0)
                        .tickFormat((d, i, n) => {
                            // 每隔5个刻度显示值
                            if (i % 5 === 0 || d == 0) {
                                return d //每隔5个刻度显示值
                            } else {
                                return '' // 其他刻度不显示值
                            }
                        })
                )
                .call((g) =>
                    g
                        .selectAll('.tick line')
                        .clone()
                        .attr('y2', -(this.height - 25)) //-(height-marginTop-marginBottom)
                        .attr('stroke', function (d, i) {
                            // 返回不同的颜色值，根据需要自定义逻辑
                            return i % 5 === 0 ? '#000' : '#ccc' // 示例: 交替使用黑色和灰色
                        })
                )

            // 根据比例尺 创建y坐标轴
            this.trackSvg3
                .append('g')
                .attr('class', 'Ycale noPath')
                .attr('transform', `translate(${this.width},0)`)
                .call(d3.axisLeft(this.y2).ticks(6).tickSizeOuter(0))
            this.trackSvg3
                .append('g')
                .attr('class', 'curveYcale noPath')
                .attr('transform', `translate(${this.marginLeft},0)`)
                .call(
                    d3
                        .axisLeft(this.y2)
                        .ticks(25)
                        .tickSizeOuter(0)
                        .tickFormat((d, i, n) => {
                            // 每隔5个刻度显示值
                            if (i % 5 === 0 || d == 0) {
                                return d //奇数刻度显示值
                            } else {
                                return '' // 其他刻度不显示值
                            }
                        })
                )
                .call(
                    (g) =>
                        g
                            .selectAll('.tick line')
                            .clone()
                            .attr('x2', this.width - this.marginLeft) //width - marginLeft
                            .attr('stroke', function (d, i) {
                                // 返回不同的颜色值，根据需要自定义逻辑
                                return i % 5 === 0 ? '#000' : '#ccc' // 示例: 交替使用黑色和灰色
                            })
                )

            this.trackSvg3.selectAll('.curveXcale text').style('font-size', '8px')
            this.trackSvg3.selectAll('.curveYcale text').style('font-size', '8px')
            this.trackSvg3.selectAll('.Xcale text').style('fill', 'transparent')
            this.trackSvg3.selectAll('.Ycale text').style('fill', 'transparent')
            this.trackSvg3.selectAll('.noPath path').style('stroke', '#ccc')

            // 创建折线
            this.svg2Line = d3
                .line()
                .x((d) => this.x2(d.x))
                .y((d) => this.y2(d.y))

            // 绘制曲线
            this.curvePath2 = this.trackSvg3
                .append('path')
                .attr('class', 'svg1CurveLine')
                .attr('fill', 'none') //填充
                .attr('stroke', 'rgb(18,205,23)')
                .attr('stroke-width', 3) //线粗细
                .attr('d', this.svg2Line(curveData))

            //在0点绘制两条线
            const y0Data = [
                {
                    x: 0,
                    y: ymax,
                },
                {
                    x: 0,
                    y: ymin,
                },
            ]
            const x0Data = [
                {
                    x: xmin,
                    y: 0,
                },
                {
                    x: xmax,
                    y: 0,
                },
            ]
            this.trackSvg3
                .append('path')
                .attr('class', 'x0Line')
                .attr('fill', 'none') //填充
                .attr('stroke', '#000')
                .attr('stroke-width', 1) //线粗细
                .attr('d', this.svg2Line(x0Data))
            this.trackSvg3
                .append('path')
                .attr('class', 'x0Line')
                .attr('fill', 'none') //填充
                .attr('stroke', '#000')
                .attr('stroke-width', 1) //线粗细
                .attr('d', this.svg2Line(y0Data))

            // 选择所有的刻度值下的一个子元素：刻度值的标线，并将其设置为透明
            this.trackSvg3
                .selectAll('.tick > *:first-child')
                .style('color', 'transparent')

            let that = this
            function pointermoved(event) {
                // 跟随鼠标的x轴线
                that.followMouse(event, that.trackSvg3)

                // 信息提示框
                //移除已存在的信息提示框，创建新的提示框
                d3.selectAll('#tooltip').remove()
                d3.selectAll('#tooltipRect').remove()

                //(1)取得提示显示的内容
                var mouseDateX = that.x2.invert(d3.pointer(event)[0])
                var mouseDateY = that.y2.invert(d3.pointer(event)[1])

                //(2) 创建一个分组元素来容纳文本和边框
                const textGroup1 = that.trackSvg3
                    .append('g')
                    .attr('transform', 'translate(80, 0)') // 定位分组元素
                const textGroup2 = that.trackSvg3
                    .append('g')
                    .attr('transform', 'translate(0, 0)') // 定位分组元素

                //(3) 添加一个矩形作为边框
                textGroup1
                    .append('rect')
                    .attr('id', 'tooltipRect') //设置id便于移除提示
                    .attr('x', -that.marginLeft - 40) // 边框矩形的x坐标，根据文本大小和位置调整
                    .attr('y', d3.pointer(event)[1] - 5) // 边框矩形的y坐标
                    .attr('width', 40) // 边框矩形的宽度，应大于文本宽度
                    .attr('height', 15) // 边框矩形的高度，应大于文本高度
                    .attr('fill', '#000') // 设置矩形填充为无
                    .attr('stroke', '#000') // 设置边框颜色
                    .attr('stroke-width', 2) // 设置边框宽度
                    .attr('rx', 5) // 设置圆角半径
                    .attr('ry', 5)
                    .attr('opacity', 0.8)
                textGroup2
                    .append('rect')
                    .attr('id', 'tooltipRect') //设置id便于移除提示
                    .attr('x', d3.pointer(event)[0] - 20) // 边框矩形的x坐标，根据文本大小和位置调整
                    .attr('y', that.height - that.marginBottom) // 边框矩形的y坐标
                    .attr('width', 40) // 边框矩形的宽度，应大于文本宽度
                    .attr('height', 15) // 边框矩形的高度，应大于文本高度
                    .attr('fill', '#000') // 设置矩形填充为无
                    .attr('stroke', '#000') // 设置边框颜色
                    .attr('stroke-width', 2) // 设置边框宽度
                    .attr('rx', 5) // 设置圆角半径
                    .attr('ry', 5)
                    .attr('opacity', 0.8)

                // 创建一个text元素，并添加tspan子元素来实现多行文本
                textGroup1
                    .append('text')
                    .attr('id', 'tooltip') //设置id便于移除提示
                    .attr('x', -that.marginLeft - 37) // 设置文本的水平位置
                    .attr('y', d3.pointer(event)[1] + 5) // 设置文本基线的垂直位置
                    .attr('font-size', '9px')
                    .attr('fill', '#fff') // 设置文本填充颜色
                    .append('tspan')
                    .text(mouseDateY.toFixed(2))
                // 创建一个text元素，并添加tspan子元素来实现多行文本
                textGroup2
                    .append('text')
                    .attr('id', 'tooltip') //设置id便于移除提示
                    .attr('x', d3.pointer(event)[0] - 15) // 设置文本的水平位置
                    .attr('y', that.height - 9) // 设置文本基线的垂直位置
                    .attr('font-size', '9px')
                    .attr('fill', '#fff') // 设置文本填充颜色
                    .append('tspan')
                    .text(mouseDateX.toFixed(2))
            }
        },
        //跟随鼠标移动的轴线
        followMouse(event, svg) {
            const mousePositionX = d3.pointer(event)[0]
            const mousePositionY = d3.pointer(event)[1]
            const svgWidth = +svg.attr('width')
            const svgheight = +svg.attr('height')

            svg.selectAll('.x-axis-line').remove()
            svg.selectAll('.y-axis-line').remove()

            svg
                .append('line')
                .attr('class', 'x-axis-line')
                .attr('x1', 0)
                .attr('y1', mousePositionY)
                .attr('x2', this.width)
                .attr('y2', mousePositionY)
                .attr('stroke', '#000')
                .attr('stroke-width', 1)
                .attr('stroke-dasharray', '5, 5')
                .attr('stroke-linecap', 'round')

            svg
                .append('line')
                .attr('class', 'y-axis-line')
                .attr('x1', mousePositionX)
                .attr('y1', this.marginTop)
                .attr('x2', mousePositionX)
                .attr('y2', svgheight - this.marginBottom)
                .attr('stroke', '#000')
                .attr('stroke-width', 1)
                .attr('stroke-dasharray', '5, 5')
                .attr('stroke-linecap', 'round')
        },
        pointerleft() {
            d3.selectAll('#tooltip').remove()
            d3.selectAll('#tooltipRect').remove()
            this.trackSvg2.selectAll('.x-axis-line').remove()
            this.trackSvg2.selectAll('.y-axis-line').remove()
            this.trackSvg3.selectAll('.x-axis-line').remove()
            this.trackSvg3.selectAll('.y-axis-line').remove()
        },
        //三维图
        drewColorLine(data) {
            var chart = echarts.init(document.getElementById('main'))
            // 处理数据，反转Z轴数据以匹配坐标轴显示
            const processedData = data.lineData.map(item => {
                return {
                    ...item,
                    value: [item.value[0], item.value[1], data.zmax - (item.value[2] - data.zmin)]
                }
            })

            let option = {
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        let content = `
                              垂深${(data.zmax - params.value[2]).toFixed(0)}m<br>
                              南北位移${params.value[1]}m<br>
                              东西位移${params.value[0]}m<br>
                              狗腿度${params.data.params}°/30m
                          `
                        return content
                    },
                },
                backgroundColor: '#fff',
                xAxis3D: {
                    type: 'value',
                    name: 'x-东西(m)',
                    min: data.xmin,
                    max: data.xmax,
                    splitNumber: 5,
                },
                yAxis3D: {
                    type: 'value',
                    name: 'y-南北(m)',
                    min: data.ymin,
                    max: data.ymax,
                    splitNumber: 5,
                },
                zAxis3D: {
                    type: 'value',
                    name: '垂深(m)',
                    position: 'right',
                    min: data.zmin.toFixed(0),
                    max: data.zmax.toFixed(0),
                    axisLabel: {
                        formatter: function (value) {
                            return (data.zmin - value).toFixed(0); // 反转显示
                        }
                    },
                    splitNumber: 5,
                },
                grid3D: {
                    viewControl: {
                        alpha: 0,
                    },
                },
                series: [
                    {
                        type: 'line3D',
                        data: processedData,
                        lineStyle: {
                            width: 4,
                            color: (params) => {
                                return params.data.params < 2
                                    ? 'rgb(124,233,234)'
                                    : params.data.params > 2 && params.data.params < 4
                                        ? 'rgb(76,167,248)'
                                        : params.data.params > 4 && params.data.params < 6
                                            ? 'rgb(89,95,246)'
                                            : params.data.params > 6 && params.data.params < 8
                                                ? 'rgb(221,68,166)'
                                                : 'rgb(219,67,83)'
                            },
                        },
                    },
                ],
            }

            option && chart.setOption(option)

            window.addEventListener('resize', function () {
                chart.resize()
            })
        },
        /** 获取区块下拉选项 */
        getBlockOptions() {
            getQkxl().then(response => {
                // 过滤掉无效的选项
                this.blockOptions = response.data.filter(item => item && item.qk);
            });
        },
        /** 查询定向井测斜数据计算数据列表 */
        getList() {
            this.loading = true;
            const params = {
                ...this.queryParams,
                jhe: this.jh
            }
            listJskd(params).then(response => {
                this.jskdList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                jh: null,
                xh: null,
                xjs: null,
                dc: null,
                jx: null,
                pjjx: null,
                fw: null,
                pjfw: null,
                qjbhl: null,
                czdc: null,
                ljczjs: null,
                fdspwy: null,
                jdhzb1: null,
                jdhzb2: null,
                jdzzb1: null,
                jdzzb2: null,
                bhfw: null,
                bhwy: null,
                wytyjd: null,
                wytyc: null,
                cxfs: null,
                bz: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.wjrqks = '';
            this.queryParams.wjrqjs = '';
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.jh)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加定向井测斜数据计算数据";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const jh = row.jh || this.ids
            getJskd(jh).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改定向井测斜数据计算数据";
            });
        },
        /** 查看按钮操作 */
        handleView(row) {
            this.reset();
            this.form = { ...row };
            this.open = true;
            this.title = "查看定向井测斜数据";
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.jh != null) {
                        updateJskd(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addJskd(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const jhs = row.jh || this.ids;
            this.$modal.confirm('是否确认删除定向井测斜数据计算数据编号为"' + jhs + '"的数据项？').then(function () {
                return delJskd(jhs);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/jskd/export', {
                ...this.queryParams
            }, `jskd_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
<style lang="scss" scoped>
.jygjStyle {
    padding: 8px !important;
    display: flex;
}

.svgContainer {
    border: 1px solid #ccc;
    height: 48%;
    display: flex;
    margin: 0 10px;
}

.svgTitle {
    text-align: center;
    margin: 10px 0 0 0;
    writing-mode: vertical-rl;
}

.legendItem {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.colorLump {
    width: 25px;
    height: 15px;
    line-height: 15px;
    border-radius: 5px;
    margin-right: 5px;
}

.text {
    font-size: 12px;
    height: 15px;
    line-height: 15px;
}

::v-deep .el-table__cell>.cell {
    font-weight: normal;
}

::v-deep .el-table--medium .el-table__cell {
    padding: 5px 0 !important;
}

::v-deep.pagination-container {
    padding: 5px !important;
    margin: 0;
}

::v-deep .el-form-item {
    margin-bottom: 10px !important;
}
</style>