su

su1124

2024-01-08 02dd7d431d0a414bafef4602350d24c72a41de3f

 src/views/picture/music/index.vue

@@ -1,104 +1,114 @@
<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="体检号" prop="tjNum">
                <el-input v-model="queryParams.tjNum" placeholder="请输入体检号" clearable @keyup.enter.native="handleQuery"
                    style="width: 160px;" />
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery"
                    style="width: 110px;" />
            </el-form-item>
            <!-- <el-form-item label="项目" prop="proId">
                            <el-input
                                    v-model="queryParams.proId"
                                    placeholder="请输入项目"
                                    clearable
                                    @keyup.enter.native="handleQuery"
                            />
                        </el-form-item> -->
            <!-- <el-form-item label="项目名" prop="proName">
                            <el-input
                                    v-model="queryParams.proName"
                                    placeholder="请输入项目名"
                                    clearable
                                    @keyup.enter.native="handleQuery"
                                    style="width: 150px;"
                            />
                        </el-form-item> -->
            <!-- <el-form-item label="项目结果" prop="proResult">
                            <el-input
                                    v-model="queryParams.proResult"
                                    placeholder="请输入项目结果"
                                    clearable
                                    @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                        <el-form-item label="结论" prop="conclusion">
                            <el-input
                                    v-model="queryParams.conclusion"
                                    placeholder="请输入结论"
                                    clearable
                                    @keyup.enter.native="handleQuery"
                            />
                        </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-form-item>
        </el-form>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="体检号" prop="tjNum">
        <el-input
          ref="inputName"
          v-model="queryParams.tjNum"
          placeholder="请输入体检号"
          clearable
          @keyup.enter.native="handleQuery"
          @blur="handleQuery"
          style="width: 160px"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 110px"
        />
      </el-form-item>
      <!-- <el-form-item label="项目" prop="proId">
            <el-input v-model="queryParams.proId" placeholder="请输入项目" clearable @keyup.enter.native="handleQuery"/></el-form-item> -->
      <!-- <el-form-item label="项目名" prop="proName">
            <el-input v-model="queryParams.proName" placeholder="请输入项目名" clearable  @keyup.enter.native="handleQuery" style="width: 150px;"/></el-form-item> -->
      <!-- <el-form-item label="项目结果" prop="proResult">
             <el-input v-model="queryParams.proResult" placeholder="请输入项目结果" clearable @keyup.enter.native="handleQuery"/></el-form-item>
            <el-form-item label="结论" prop="conclusion">
             <el-input v-model="queryParams.conclusion" placeholder="请输入结论" clearable @keyup.enter.native="handleQuery"/></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-form-item>
    </el-form>

        <!-- <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['picture:picture:add']">新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['picture:picture:edit']">修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['picture:picture:remove']">删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['picture:picture:export']">导出
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row> -->
        <div style="width: 100%; margin-left: 10px;display: flex;">
            <div style="width: 39%; margin-right: 30px;">
                <el-table id="table" v-loading="loading" ref="tb" :data="pictureList"
                    @selection-change="handleSelectionChange" border height="630px">
                    <el-table-column type="selection" width="40" align="center" />
                    <el-table-column label="体检号" align="center" prop="customer.tjNumber" width="160px" />
                    <el-table-column label="姓名" align="center" prop="customer.cusName" width="90px" />
                    <!-- <el-table-column label="身份证" align="center" prop="customer.cusIdcard" width="170px" /> -->
                    <el-table-column label="性别" align="center" prop="customer.cusSex" width="60px">
                        <template slot-scope="scope">
                            {{ scope.row.customer.cusSex === 0 ? "男" : "女" }}
                            <!-- <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.cusSex " /> -->
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="生日" align="center" prop="customer.cusBrithday" width="110px" /> -->
                    <el-table-column label="手机号" align="center" prop="customer.cusPhone" width="120px" />
                    <el-table-column label="婚姻" align="center" prop="cusMarryStatus" width="90px">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.dict_user_marry" :value="scope.row.customer.cusMarryStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column label="民族" align="center" prop="cusNational" width="90px">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.dict_user_national" :value="scope.row.customer.cusNational" />
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="心电图" align="center" prop="xdt" /> -->
                    <!-- <el-table-column label="项目名" align="center" prop="proName" />
    <div style="width: 100%; margin-left: 10px; display: flex">
      <div style="width: 97%; margin-right: 30px">
        <!-- @selection-change="handleSelectionChange" -->
        <el-table
          id="table"
          v-loading="loading"
          ref="tb"
          :data="pictureList"
          @row-click="handleRowClick"
          border
          height="630px"
        >
          <!-- <el-table-column type="selection" width="40" align="center" /> -->
          <el-table-column
            label="体检号"
            align="center"
            prop="customer.tjNumber"
          />
          <el-table-column
            label="姓名"
            align="center"
            prop="customer.cusName"
          />
          <!-- <el-table-column label="身份证" align="center" prop="customer.cusIdcard" width="170px" /> -->
          <el-table-column label="性别" align="center" prop="customer.cusSex">
            <!-- <template slot-scope="scope">
              {{ scope.row.customer.cusSex === 0 ? "男" : "女" }}
            </template> -->
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.sys_user_sex"
                :value="scope.row.customer.cusSex"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column label="生日" align="center" prop="customer.cusBrithday" width="110px" /> -->
          <el-table-column
            label="手机号"
            align="center"
            prop="customer.cusPhone"
          />
          <el-table-column label="婚姻" align="center" prop="cusMarryStatus">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.dict_user_marry"
                :value="scope.row.customer.cusMarryStatus"
              />
            </template>
          </el-table-column>
          <el-table-column label="民族" align="center" prop="cusNational">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.dict_user_national"
                :value="scope.row.customer.cusNational"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column label="心电图" align="center" prop="xdt" /> -->
          <!-- <el-table-column label="项目名" align="center" prop="proName" />
                    <el-table-column label="项目结果" align="center" prop="proResult" />
                    <el-table-column label="结论" align="center" prop="conclusion" />
                 <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -121,29 +131,39 @@
                    </el-button>
                </template>
            </el-table-column> -->
                </el-table>
            </div>
            <div style="width: 44%;height: 610px;">
                <el-table v-loading="loading" ref="mu" :data="tableList" @selection-change="handleChange" border>
                    <el-table-column type="selection" width="40" align="center" />
                    <el-table-column label="收费项目" align="center" prop="proName" />
                    <el-table-column label="项目名称" align="center" prop="proName" />
                    <el-table-column label="项目结果" align="center" prop="fixedValue" />
                    <!-- <el-table-column label="结论" align="center" prop="measuredValue" /> -->
                </el-table>

                <div style=" height:390px;margin-top: 10px;">
                    <el-image v-loading="loading" style='height: 390px;width: 100%;' :src="imgsrc + tjNumber + '.png'"
                        :preview-src-list="[imgsrc + tjNumber + '.png']"></el-image>
                </div>
                <!-- <div style=" height:390px;margin-top: 10px;">
        </el-table>
      </div>
      <!-- <div style="width: 44%; height: 610px">
        <el-table
          v-loading="loading"
          ref="mu"
          :data="tableList"
          @selection-change="handleChange"
          border
        >
          <el-table-column type="selection" width="40" align="center" />
          <el-table-column label="收费项目" align="center" prop="proName" />
          <el-table-column label="项目名称" align="center" prop="proName" />
          <el-table-column label="项目结果" align="center" prop="fixedValue" /> -->
      <!-- <el-table-column label="结论" align="center" prop="measuredValue" /> -->
      <!-- </el-table>
 
        <div style="height: 390px; margin-top: 10px">
          <el-image
            v-loading="loading"
            style="height: 390px; width: 100%"
            :src="imgsrc + tjNumber + '.png'"
            :preview-src-list="[imgsrc + tjNumber + '.png']"
          ></el-image>
        </div> -->
      <!-- <div style=" height:390px;margin-top: 10px;">
                    <div class="left"> -->
                <!-- style='height: 390px;width: 100%;' -->
                <!-- <el-image v-loading="loading" class="leftImg" :src="imgsrc"></el-image> -->
                <!-- 鼠标层罩 -->
                <!-- <div v-show="topShow" class="top" :style="topStyle"></div> -->
                <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
                <!-- <div class="maskTop" @mouseenter="enterHandler" @mousemove="moveHandler" @mouseout="outHandler">
      <!-- style='height: 390px;width: 100%;' -->
      <!-- <el-image v-loading="loading" class="leftImg" :src="imgsrc"></el-image> -->
      <!-- 鼠标层罩 -->
      <!-- <div v-show="topShow" class="top" :style="topStyle"></div> -->
      <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
      <!-- <div class="maskTop" @mouseenter="enterHandler" @mousemove="moveHandler" @mouseout="outHandler">
                        </div>
                    </div>
                    <div v-show="rShow" class="right">
@@ -151,24 +171,37 @@
                    </div>
                </div> -->

      <!-- <div style="margin-top: 20px">
          <el-form
            :model="form"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="68px"
          >
            <el-form-item label="项目结果" prop="fixedValue">
              <el-input v-model="form.fixedValue" clearable />
            </el-form-item>
            <el-form-item label="结果结论" prop="measuredValue">
              <el-input
                v-model="form.measuredValue"
                clearable
                @focus="submiepilog"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="submito"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </div> -->


                <div style="margin-top: 20px;">
                    <el-form :model="form" ref="queryForm" size="small" :inline="true" label-width="68px">
                        <el-form-item label="项目结果" prop="fixedValue">
                            <el-input v-model="form.fixedValue" clearable />
                        </el-form-item>
                        <el-form-item label="结果结论" prop="measuredValue">
                            <el-input v-model="form.measuredValue" clearable @focus="submiepilog" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="submito">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>


                <!-- <div style="display:flex">
      <!-- <div style="display:flex">
                    <el-tabs v-model="activeName" type="card" style="margin: 10px;width: 100%;">
                        <el-tab-pane label="项目结果" name="first">
                            <el-input type="textarea"  :rows="3" placeholder="请输入内容"
@@ -185,342 +218,1163 @@
                        <el-button type="primary" icon="el-icon-s-claim" size="mini" @click="submito">提交</el-button>
                    </div>
                </div> -->
            </div>
        </div>


        <div style="margin-right: 70%;">
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>

        <Public ref="aaa" @add="handleChanges" />
      <!-- </div> -->
    </div>
</template>

    <div style="margin-right: 70%">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      size="85%"
    >
      <div class="tanchuangbox">
        <div class="tanchuangbox_left">
          <el-form
            :model="row"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="68px"
          >
            <el-form-item label="单位名称" prop="tjNum">
              <el-input
                v-model="queryParams.tjNum"
                placeholder="请输入单位名称"
                style="width: 150px"
                disabled
              />
            </el-form-item>
            <el-form-item label="单位工种" prop="name">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入单位工种"
                disabled
                style="width: 150px"
              />
            </el-form-item>
            <el-form-item label="姓名" prop="cusName">
              <el-input
                v-model="row.cusName"
                placeholder="请输入姓名"
                disabled
                style="width: 150px"
              />
            </el-form-item>
            <el-form-item label="性别" prop="cusSex">
              <el-select
                disabled
                v-model="row.cusSex"
                placeholder="请选择性别"
                style="width: 150px"
              >
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input
                v-model="row.age"
                placeholder="请输入年龄"
                disabled
                style="width: 150px"
              />
            </el-form-item>
            <el-form-item label="身份证号" prop="cusIdcard">
              <el-input
                v-model="row.cusIdcard"
                placeholder="请输入身份证号"
                disabled
                style="width: 150px"
              />
            </el-form-item>
            <el-form-item label="体检日期" prop="tjTime">
              <el-input
                v-model="row.tjTime"
                placeholder="请输入体检日期"
                disabled
                style="width: 150px"
              />
            </el-form-item>
            <el-form-item label="体检类型" prop="tjType">
              <el-select
                disabled
                v-model="row.tjType"
                placeholder="请选择体检类型"
                style="width: 150px"
              >
                <el-option
                  v-for="dict in dict.type.dict_tjtype"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="工龄" prop="name">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入工龄"
                disabled
                style="width: 150px"
              />
            </el-form-item> -->
          </el-form>
          <div class="data-view">
            <div id="main" style="width: 40%; height: 300px"></div>
            <div id="main1" style="width: 40%; height: 300px"></div>
            <div id="main2" style="width: 40%; height: 300px"></div>
            <div id="main3" style="width: 40%; height: 300px"></div>
          </div>
          <div class="tanchuangbox_left1">
            <div>
              <div class="nums">
                <span
                  class="nums_txt"
                  v-for="(item, index) in yList"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
              <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
                v-show="showSearch"
                label-width="90px"
              >
                <el-form-item label="实测气导值:">
                  <el-input
                    v-model="yqdwb"
                    style="width: 50px"
                    @input="ysels"
                  />
                  <el-input
                    v-model="yqdyq"
                    style="width: 50px"
                    @input="ysels1"
                  />
                  <el-input
                    v-model="yqdlq"
                    style="width: 50px"
                    @input="ysels2"
                  />
                  <el-input
                    v-model="yqdsq"
                    style="width: 50px"
                    @input="ysels3"
                  />
                  <el-input
                    v-model="yqdsiq"
                    style="width: 50px"
                    @input="ysels4"
                  />
                  <el-input
                    v-model="yqdliuq"
                    style="width: 50px"
                    @input="ysels5"
                  />
                </el-form-item>
                <el-form-item label="实测骨导值:">
                  <el-input
                    v-model="ygdwb"
                    style="width: 50px"
                    @input="ygsels"
                  />
                  <el-input
                    v-model="ygdyq"
                    style="width: 50px"
                    @input="ygsels1"
                  />
                  <el-input
                    v-model="ygdlq"
                    style="width: 50px"
                    @input="ygsels2"
                  />
                  <el-input
                    v-model="ygdsq"
                    style="width: 50px"
                    @input="ygsels3"
                  />
                  <el-input
                    v-model="ygdsiq"
                    style="width: 50px"
                    @input="ygsels4"
                  />
                  <el-input
                    v-model="ygdliuq"
                    style="width: 50px"
                    @input="ygsels5"
                  />
                </el-form-item>
              </el-form>
            </div>

            <div>
              <div class="nums">
                <span
                  class="nums_txt"
                  v-for="(item, index) in yList"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
              <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
                v-show="showSearch"
                label-width="90px"
              >
                <el-form-item label="实测气导值:">
                  <el-input
                    v-model="zqdwb"
                    style="width: 50px"
                    @input="zsels"
                  />
                  <el-input
                    v-model="zqdyq"
                    style="width: 50px"
                    @input="zsels1"
                  />
                  <el-input
                    v-model="zqdlq"
                    style="width: 50px"
                    @input="zsels2"
                  />
                  <el-input
                    v-model="zqdsq"
                    style="width: 50px"
                    @input="zsels3"
                  />
                  <el-input
                    v-model="zqdsiq"
                    style="width: 50px"
                    @input="zsels4"
                  />
                  <el-input
                    v-model="zqdliuq"
                    style="width: 50px"
                    @input="zsels5"
                  />
                </el-form-item>
                <el-form-item label="实测骨导值:">
                  <el-input
                    v-model="zgdwb"
                    style="width: 50px"
                    @input="zgsels"
                  />
                  <el-input
                    v-model="zgdyq"
                    style="width: 50px"
                    @input="zgsels1"
                  />
                  <el-input
                    v-model="zgdlq"
                    style="width: 50px"
                    @input="zgsels2"
                  />
                  <el-input
                    v-model="zgdsq"
                    style="width: 50px"
                    @input="zgsels3"
                  />
                  <el-input
                    v-model="zgdsiq"
                    style="width: 50px"
                    @input="zgsels4"
                  />
                  <el-input
                    v-model="zgdliuq"
                    style="width: 50px"
                    @input="zgsels5"
                  />
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="tanchuangbox_right">
          <div>
            <span>职业史</span>
            <div style="width: 100%; min-height: 300px"></div>
          </div>
          <div style="display: flex; margin-top: 20px">
            <div
              style="
                width: 50px;
                display: flex;
                flex-direction: column;
                margin-top: 46px;
              "
            >
              <span style="margin-bottom: 16px">右耳：</span>
              <span style="margin-bottom: 17px">左耳：</span>
              <span>双耳：</span>
            </div>
            <div class="ss">
              <span class="ss_txt">语频平均</span>
              <el-input v-model="input" style="width: 60px"></el-input>
              <el-input v-model="input" style="width: 60px"></el-input>
              <el-input v-model="input" style="width: 60px"></el-input>
            </div>
            <div class="ss">
              <span class="ss_txt">500语频矫正</span>
              <el-input v-model="input" style="width: 60px"></el-input>
              <el-input v-model="input" style="width: 60px"></el-input>
            </div>
            <div class="ss">
              <span class="ss_txt">1000语频矫正</span>
              <el-input v-model="input" style="width: 60px"></el-input>
              <el-input v-model="input" style="width: 60px"></el-input>
            </div>
            <div class="ss">
              <span class="ss_txt">2000语频矫正</span>
              <el-input v-model="input" style="width: 60px"></el-input>
              <el-input v-model="input" style="width: 60px"></el-input>
            </div>
            <div class="ss">
              <span class="ss_txt">高频气导平均</span>
              <el-input v-model="input" style="width: 60px"></el-input>
              <el-input v-model="input" style="width: 60px"></el-input>
              <el-input v-model="input" style="width: 60px"></el-input>
            </div>
            <div class="ss">
              <span class="ss_txt">高频骨导平均</span>
              <el-input v-model="input" style="width: 60px"></el-input>
              <el-input v-model="input" style="width: 60px"></el-input>
            </div>
          </div>

          <div style="margin-top: 20px">
            <span>电测听小结：</span>
            <el-input
              style="margin-top: 10px"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea"
            >
            </el-input>
          </div>
          <div>
            <span>常见起检列表</span>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="name" label="所见项类型" width="180">
              </el-table-column>
              <el-table-column prop="address" label="所见项结果值">
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 20px">
            <span>检查医生：</span>
            <el-input
              v-model="input"
              style="width: 160px; margin-right: 10px"
            ></el-input>
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
          <div style="margin-top: 20px">
            <el-button type="primary">生成小结</el-button>
            <el-button type="primary">保存</el-button>
          </div>
        </div>
      </div>
    </el-drawer>

    <Public ref="aaa" @add="handleChanges" />
  </div>
</template>
 
<script>
import {
    getList,
    getPicture,
    delPicture,
    addPicture,
    updatePureToneTest
  getList,
  getPicture,
  delPicture,
  addPicture,
  updatePureToneTest,
} from "@/api/picture/pureToneTest";
import {
  getCustomer,
  getOrder,
  getReportToday,
  getTobeToday,
  getPieChart,
  getChart,
} from "@/api/home";
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/title");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/chart/pie");

import Public from "@/components/public";
export default {
    dicts: [
        "sys_user_sex", "sampling_type", "sys_dict_specimen", "dict_user_marry", "dict_user_national"
    ],
    name: "Picture",
    components: { Public },
    data() {
        return {
            topStyle: { transform: '' },
            r_img: {},
            topShow: false,
            rShow: false,
            // 遮罩层
            loading: true,
            result: true,
            epilog: false,
            // 选中数组
            ids: [],
            activeName: 'first',
            textarea2: '',
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 体检心电图管理表格数据
            pictureList: [],
            tableList: [],
            imgsrc: "",
            tjNumber: "",
            measuredValue: "",
            fixedValue: "",
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                tjNum: null,
                name: null,
                xdt: null,
                proId: null,
                proName: null,
                proResult: null,
                conclusion: null,
            },
            // 表单参数
            form: {
                measuredValue: "",
                fixedValue: "",
            },
            dataobj: {},
            // 表单校验
            rules: {
            }
        };
  dicts: [
    "sys_user_sex",
    "sampling_type",
    "sys_dict_specimen",
    "dict_user_marry",
    "dict_user_national",
    "dict_tjtype",
  ],
  name: "Picture",
  components: { Public },
  data() {
    return {
      res: [],
      teamYYNums: [],
      LineCharts: [],
      row: {},
      value1: "",
      yList: [500, 1000, 2000, 3000, 4000, 6000],
      tableData: [
        {
          date: "1",
          name: "参考值",
          address: "双耳正常听力曲线正常参考值1",
        },
        {
          date: "2",
          name: "参考值",
          address: "双耳正常听力曲线正常参考值2",
        },
        {
          date: "3",
          name: "异常值",
          address: "双耳正常听力曲线异常值1",
        },
        {
          date: "4",
          name: "异常值",
          address: "双耳正常听力曲线异常值2",
        },
      ],
      textarea: "",
      input: "",
      min: "",
      max: "",
      Order: "",
      ReportToday: "",
      TobeToday: "",
      youeryuanshi: [],
      personYYNum: [],
      reportNum: [],
      youeryuanshi1: [0, 0, 0, 0, 0, 0], //y动态数值
      youerjiaozheng1: [0, 0, 0, 0, 0, 0], //y动态数值
      zuoeryuanshi1: [0, 0, 0, 0, 0, 0], //y动态数值
      zuoerjiaozheng1: [0, 0, 0, 0, 0, 0], //y动态数值
      PieChart: [],
      PieChart2: [],
      drawer: false,
      topStyle: { transform: "" },
      r_img: {},
      topShow: false,
      rShow: false,
      // 遮罩层
      loading: true,
      result: true,
      epilog: false,
      // 选中数组
      ids: [],
      activeName: "first",
      textarea2: "",
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 体检心电图管理表格数据
      pictureList: [],
      tableList: [],
      imgsrc: "",
      tjNumber: "",
      measuredValue: "",
      fixedValue: "",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tjNum: null,
        name: null,
        xdt: null,
        proId: null,
        proName: null,
        proResult: null,
        conclusion: null,
      },
      // 表单参数
      form: {
        measuredValue: "",
        fixedValue: "",
      },
      dataobj: {},
      // 表单校验
      rules: {},
      yqdwb: "",
      yqdyq: "",
      yqdlq: "",
      yqdsq: "",
      yqdsiq: "",
      yqdliuq: "",
      ygdwb: "",
      ygdyq: "",
      ygdlq: "",
      ygdsq: "",
      ygdsiq: "",
      ygdliuq: "",
      zqdwb: "",
      zqdyq: "",
      zqdlq: "",
      zqdsq: "",
      zqdsiq: "",
      zqdliuq: "",
      zgdwb: "",
      zgdyq: "",
      zgdlq: "",
      zgdsq: "",
      zgdsiq: "",
      zgdliuq: "",
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.inputName.focus();
    });
  },
  methods: {
    ysels(val) {
      this.youeryuanshi1[0] = val;
      this.getech();
    },
    created() {
        this.getList();
    ysels1(val) {
      this.youeryuanshi1[1] = val;
      this.getech();
    },
    methods: {
        // 鼠标进入原图空间函数
        enterHandler() {
            // 层罩及放大空间的显示
            this.topShow = true
            this.rShow = true
        },
        // 鼠标移动函数
        moveHandler(event) {
            // 鼠标的坐标位置
            let x = event.offsetX
            let y = event.offsetY
            // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
            let topX = (x - 100) < 0 ? 0 : (x - 100)
            let topY = (y - 100) < 0 ? 0 : (y - 100)
            // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
            if (topX > 200) {
                topX = 200
            }
            if (topY > 200) {
                topY = 200
            }
            // 通过 transform 进行移动控制
            this.topStyle.transform = `translate(${topX}px,${topY}px)`
            this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`
        },
        // 鼠标移出函数
        outHandler() {
            // 控制层罩与放大空间的隐藏
            this.topShow = false
            this.rShow = false
        },
        /** 查询体检心电图管理列表 */
        getList() {
            this.loading = true;
            getList(this.queryParams).then(response => {
                if (response.data.list) {
                    this.pictureList = response.data.list;
                } else {
                    this.$message.warning("查无此人");
                }
                if (this.pictureList.length != 0) {
                    this.$nextTick(() => {
                        this.$refs.tb.toggleRowSelection(this.pictureList[0], true);
                    })
                } else {
                    this.$refs.tb.clearSelection();
                }
                this.total = response.data.total;
                this.loading = false;
            });
            this.loading = false;
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                tjNum: null,
                cusId: null,
                xdt: null,
                proId: null,
                proName: null,
                proResult: null,
                conclusion: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                deleted: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.imgsrc = selection[0].picturePath
            this.tjNumber = selection[0].customer.tjNumber
            this.ids = selection.map(item => item.id)
            selection.forEach(element => {
                this.tableList = element.list
                if (this.tableList.length != 0) {
                    this.tableList.forEach(item => {
                        this.form.fixedValue = item.fixedValue
                        this.form.measuredValue = item.measuredValue
                    })
                    this.$nextTick(() => {
                        this.$refs.mu.toggleRowSelection(this.tableList[0], true);
                    })
                } else {
                    this.$refs.mu.clearSelection();
                }
            });
            // this.tableList.forEach(item => {
            //     this.imgsrc = item.dctt
            // })
            if (selection.length > 1) {
                let del_row = selection.shift();
                this.$refs.tb.toggleRowSelection(del_row, false); //设置这一行取消选中
            }
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        // /** 新增按钮操作 */
        // handleAdd() {
        //     this.reset();
        //     this.open = true;
        //     this.title = "添加体检心电图管理";
        // },
        // /** 修改按钮操作 */
        // handleUpdate(row) {
        //     this.reset();
        //     const id = row.id || this.ids
        //     getPicture(id).then(response => {
        //         this.form = response.data;
        //         this.open = true;
        //         this.title = "修改体检心电图管理";
        //     });
        // },
        submiepilog() {
            this.$refs.aaa.open = true;
            let proId = "1633660948860522546"
            this.$refs.aaa.getList(proId);
        },
        handleChanges(value) {
            this.form.measuredValue = value
        },
    ysels2(val) {
      this.youeryuanshi1[2] = val;
      this.getech();
    },
    ysels3(val) {
      this.youeryuanshi1[3] = val;
      this.getech();
    },
    ysels4(val) {
      this.youeryuanshi1[4] = val;
      this.getech();
    },
    ysels5(val) {
      this.youeryuanshi1[5] = val;
      this.getech();
    },
    ygsels(val) {
      this.youerjiaozheng1[0] = val;
      this.getech1();
    },
    ygsels1(val) {
      this.youerjiaozheng1[1] = val;
      this.getech1();
    },
    ygsels2(val) {
      this.youerjiaozheng1[2] = val;
      this.getech1();
    },
    ygsels3(val) {
      this.youerjiaozheng1[3] = val;
      this.getech1();
    },
    ygsels4(val) {
      this.youerjiaozheng1[4] = val;
      this.getech1();
    },
    ygsels5(val) {
      this.youerjiaozheng1[5] = val;
      this.getech1();
    },

        handleChange(selection) {
            selection.forEach(element => {
                this.dataobj = element
            });
    zsels(val) {
      this.zuoeryuanshi1[0] = val;
      this.getech2();
    },
    zsels1(val) {
      this.zuoeryuanshi1[1] = val;
      this.getech2();
    },
    zsels2(val) {
      this.zuoeryuanshi1[2] = val;
      this.getech2();
    },
    zsels3(val) {
      this.zuoeryuanshi1[3] = val;
      this.getech2();
    },
    zsels4(val) {
      this.zuoeryuanshi1[4] = val;
      this.getech2();
    },
    zsels5(val) {
      this.zuoeryuanshi1[5] = val;
      this.getech2();
    },
    zgsels(val) {
      this.zuoerjiaozheng1[0] = val;
      this.getech3();
    },
    zgsels1(val) {
      this.zuoerjiaozheng1[1] = val;
      this.getech3();
    },
    zgsels2(val) {
      this.zuoerjiaozheng1[2] = val;
      this.getech3();
    },
    zgsels3(val) {
      this.zuoerjiaozheng1[3] = val;
      this.getech3();
    },
    zgsels4(val) {
      this.zuoerjiaozheng1[4] = val;
      this.getech3();
    },
    zgsels5(val) {
      this.zuoerjiaozheng1[5] = val;
      this.getech3();
    },
    handleRowClick(selection) {
      this.row = selection.customer;
      this.row.tjType = Number(selection.customer.tjType);
      this.drawer = true;
      // this.getech();
    },
    // 右耳原始听力
    getech() {
      this.loading = true;
      let myChart = this.$echarts.init(document.getElementById("main"));

      myChart.setOption({
        title: {
          text: "右耳原始听力",
        },

        // 确定按钮
        submito() {
            if (this.dataobj) {
                if (this.form.fixedValue) {
                    this.dataobj.fixedValue = this.form.fixedValue
                }
                if (this.form.measuredValue) {
                    this.dataobj.measuredValue = this.form.measuredValue
                }
                updatePureToneTest(this.dataobj).then(res => {
                    this.$modal.msgSuccess("提交成功");
                    this.getList()
                    this.form.fixedValue = ""
                    this.form.measuredValue = ""
                })
            } else {
                this.$modal.msgSuccess("选择修改项目");
            }

        tooltip: {
          trigger: "axis",
        },

        //删除按钮
        handleDelete() {

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          data: [500, 1000, 2000, 3000, 4000, 6000],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.youeryuanshi1,
            name: "右耳原始听力",
            type: "line",
            symbol: "circle", //拐点的形状
            symbolSize: 10, //拐点大小
            lineStyle: {
              color: "#1515FF",
              width: 2,
            },

        // 导出
        handleExport() {
            itemStyle: {
              borderWidth: 1,
              borderColor: "black",
              color: "#fff",
            },
          },
        ],
      });
      let sizeFun = function () {
        myChart.resize();
      };
      window.addEventListener("resize", sizeFun);

      this.loading = false;
    },
    // 右耳矫正听力
    getech1() {
      this.loading = true;
      let myChart2 = this.$echarts.init(document.getElementById("main2"));

      myChart2.setOption({
        title: {
          text: "右耳校正听力",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          data: [500, 1000, 2000, 3000, 4000, 6000],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.youerjiaozheng1,
            name: "右耳校正听力",
            type: "line",
            symbol: "none", //拐点的形状
            symbolSize: 10, //拐点大小
            lineStyle: {
              color: "#1515FF",
              width: 2,
            },

            itemStyle: {
              borderWidth: 1,
              borderColor: "black",
              color: "#fff",
            },
          },
        ],
      });
      let sizeFun = function () {
        myChart.resize();
      };
      window.addEventListener("resize", sizeFun);

      this.loading = false;
    },
    // 左耳原始听力
    getech2() {
      this.loading = true;
      let myChart2 = this.$echarts.init(document.getElementById("main1"));

      myChart2.setOption({
        title: {
          text: "左耳原始听力",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          data: [500, 1000, 2000, 3000, 4000, 6000],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.zuoeryuanshi1,
            name: "左耳原始听力",
            type: "line",
            symbol: "triangle", //拐点的形状
            symbolSize: 10, //拐点大小
            lineStyle: {
              color: "#1515FF",
              width: 2,
            },

            itemStyle: {
              borderWidth: 1,
              borderColor: "black",
              color: "#fff",
            },
          },
        ],
      });
      let sizeFun = function () {
        myChart.resize();
      };
      window.addEventListener("resize", sizeFun);

      this.loading = false;
    },
    // 左耳矫正听力
    getech3() {
      this.loading = true;
      let myChart2 = this.$echarts.init(document.getElementById("main3"));

      myChart2.setOption({
        title: {
          text: "左耳校正听力",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          data: [500, 1000, 2000, 3000, 4000, 6000],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.zuoerjiaozheng1,
            name: "左耳校正听力",
            type: "line",
            symbol: "none", //拐点的形状
            symbolSize: 10, //拐点大小
            lineStyle: {
              color: "#1515FF",
              width: 2,
            },

            itemStyle: {
              borderWidth: 1,
              borderColor: "black",
              color: "#fff",
            },
          },
        ],
      });
      let sizeFun = function () {
        myChart.resize();
      };
      window.addEventListener("resize", sizeFun);

      this.loading = false;
    },
    // 鼠标进入原图空间函数
    enterHandler() {
      // 层罩及放大空间的显示
      this.topShow = true;
      this.rShow = true;
    },
    // 鼠标移动函数
    moveHandler(event) {
      // 鼠标的坐标位置
      let x = event.offsetX;
      let y = event.offsetY;
      // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
      let topX = x - 100 < 0 ? 0 : x - 100;
      let topY = y - 100 < 0 ? 0 : y - 100;
      // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
      if (topX > 200) {
        topX = 200;
      }
      if (topY > 200) {
        topY = 200;
      }
      // 通过 transform 进行移动控制
      this.topStyle.transform = `translate(${topX}px,${topY}px)`;
      this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`;
    },
    // 鼠标移出函数
    outHandler() {
      // 控制层罩与放大空间的隐藏
      this.topShow = false;
      this.rShow = false;
    },
    /** 查询体检心电图管理列表 */
    getList() {
      this.loading = true;
      getList(this.queryParams).then((response) => {
        if (response.data.list) {
          this.pictureList = response.data.list;
        } else {
          this.$message.warning("查无此人");
        }
        if (this.pictureList.length != 0) {
          this.$nextTick(() => {
            this.$refs.tb.toggleRowSelection(this.pictureList[0], true);
          });
        } else {
          this.$refs.tb.clearSelection();
        }
        this.total = response.data.total;
        this.loading = false;
      });
      this.loading = false;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        tjNum: null,
        cusId: null,
        xdt: null,
        proId: null,
        proName: null,
        proResult: null,
        conclusion: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        deleted: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    // handleSelectionChange(selection) {
    //   this.drawer = true;
    //   this.imgsrc = selection[0].picturePath;
    //   this.tjNumber = selection[0].customer.tjNumber;
    //   this.ids = selection.map((item) => item.id);
    //   selection.forEach((element) => {
    //     this.tableList = element.list;
    //     if (this.tableList.length != 0) {
    //       this.tableList.forEach((item) => {
    //         this.form.fixedValue = item.fixedValue;
    //         this.form.measuredValue = item.measuredValue;
    //       });
    //       this.$nextTick(() => {
    //         this.$refs.mu.toggleRowSelection(this.tableList[0], true);
    //       });
    //     } else {
    //       this.$refs.mu.clearSelection();
    //     }
    //   });
    //   // this.tableList.forEach(item => {
    //   //     this.imgsrc = item.dctt
    //   // })
    //   if (selection.length > 1) {
    //     let del_row = selection.shift();
    //     this.$refs.tb.toggleRowSelection(del_row, false); //设置这一行取消选中
    //   }
    //   this.single = selection.length !== 1;
    //   this.multiple = !selection.length;
    // },
    // /** 新增按钮操作 */
    // handleAdd() {
    //     this.reset();
    //     this.open = true;
    //     this.title = "添加体检心电图管理";
    // },
    // /** 修改按钮操作 */
    // handleUpdate(row) {
    //     this.reset();
    //     const id = row.id || this.ids
    //     getPicture(id).then(response => {
    //         this.form = response.data;
    //         this.open = true;
    //         this.title = "修改体检心电图管理";
    //     });
    // },
    submiepilog() {
      this.$refs.aaa.open = true;
      let proId = "1633660948860522546";
      this.$refs.aaa.getList(proId);
    },
    handleChanges(value) {
      this.form.measuredValue = value;
    },

    }
}
    ;
    handleChange(selection) {
      selection.forEach((element) => {
        this.dataobj = element;
      });
    },

    // 确定按钮
    submito() {
      if (this.dataobj) {
        if (this.form.fixedValue) {
          this.dataobj.fixedValue = this.form.fixedValue;
        }
        if (this.form.measuredValue) {
          this.dataobj.measuredValue = this.form.measuredValue;
        }
        updatePureToneTest(this.dataobj).then((res) => {
          this.$modal.msgSuccess("提交成功");
          this.getList();
          this.form.fixedValue = "";
          this.form.measuredValue = "";
        });
      } else {
        this.$modal.msgSuccess("选择修改项目");
      }
    },

    //删除按钮
    handleDelete() {},

    // 导出
    handleExport() {},
  },
};
</script>

 
<style>
#table .el-table__header-wrapper .el-checkbox {
    display: none;
  display: none;
}

.default-button-style :hover {
    width: 80px;
    border-bottom: none;
  width: 80px;
  border-bottom: none;
}


.rightImg {
    display: inline-block;
    width: 740px;
    height: 800px;
    position: absolute;
    top: 0;
    left: 0;
    /* border: 1px solid red; */
  display: inline-block;
  width: 740px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
  /* border: 1px solid red; */
}

/* 右边的区域图片放大空间 */
.right {
    margin-left: 412px;
    width: 340px;
    height: 400px;
    border: 1px solid black;
    position: relative;
    overflow: hidden;
  margin-left: 412px;
  width: 340px;
  height: 400px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

/* 一个最高层层罩 */
.maskTop {
    width: 400px;
    height: 400px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  width: 400px;
  height: 400px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

/* 层罩，通过定位将左上角定位到(0,0) */
.top {
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
}

/* 原图的显示 */
.leftImg {
    width: 400px;
    height: 400px;
    display: inline-block;
  width: 400px;
  height: 400px;
  display: inline-block;
}

/* 原图的容器 */
.left {
    width: 400px;
    height: 400px;
    /* border: 1px solid teal; */
    float: left;
    position: relative;
  width: 400px;
  height: 400px;
  /* border: 1px solid teal; */
  float: left;
  position: relative;
}
</style>
.tanchuangbox_left {
  margin-top: 20px;
  margin-left: 20px;
  width: 60%;
}
.data-view {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 5px 15px;
}
#main {
  padding: 10px;
}
.nums {
  margin-left: 90px;
  margin-bottom: 10px;
}
.nums_txt {
  margin-right: 18px;
}
.tanchuangbox_left1 {
  display: flex;
}
.tanchuangbox {
  display: flex;
}
.tanchuangbox_right {
  width: 40%;
}
.ss {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}
.ss_txt {
  width: 60px;
}
</style>