| | |
| | | <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 |
| | | 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> |
| | | |
| | | <!-- <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"> |
| | | <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" |
| | | /> |
| | | <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 ? "男" : "女" }} |
| | | <!-- <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" |
| | | /> |
| | | <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"> |
| | |
| | | </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> |
| | | </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 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"> |
| | |
| | | </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="请输入内容" |
| | |
| | | <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> |
| | | |
| | | <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="60%" |
| | | > |
| | | <div> |
| | | <div style="margin-top:20px;width:50%"> |
| | | <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: 150px" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="单位工种" prop="name"> |
| | | <el-input |
| | | v-model="queryParams.name" |
| | | placeholder="请输入单位工种" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | style="width: 150px" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="姓名" prop="name"> |
| | | <el-input |
| | | v-model="queryParams.name" |
| | | placeholder="请输入姓名" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | style="width: 150px" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="性别" prop="name"> |
| | | <el-input |
| | | v-model="queryParams.name" |
| | | placeholder="请输入性别" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | style="width: 150px" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="年龄" prop="name"> |
| | | <el-input |
| | | v-model="queryParams.name" |
| | | placeholder="请输入年龄" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | style="width: 150px" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="身份证号" prop="name"> |
| | | <el-input |
| | | v-model="queryParams.name" |
| | | placeholder="请输入身份证号" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | style="width: 150px" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="体检日期" prop="name"> |
| | | <el-input |
| | | v-model="queryParams.name" |
| | | placeholder="请输入体检日期" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | style="width: 150px" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="体检类型" prop="name"> |
| | | <el-input |
| | | v-model="queryParams.name" |
| | | placeholder="请输入体检类型" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | style="width: 150px" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="工龄" prop="name"> |
| | | <el-input |
| | | v-model="queryParams.name" |
| | | placeholder="请输入工龄" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | style="width: 150px" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div style="width:50%"></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 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", |
| | | ], |
| | | name: "Picture", |
| | | components: { Public }, |
| | | data() { |
| | | return { |
| | | 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: {}, |
| | | }; |
| | | }, |
| | | created() { |
| | | this.getList(); |
| | | }, |
| | | methods: { |
| | | // 鼠标进入原图空间函数 |
| | | enterHandler() { |
| | | // 层罩及放大空间的显示 |
| | | this.topShow = true; |
| | | this.rShow = true; |
| | | }, |
| | | created() { |
| | | this.getList(); |
| | | // 鼠标移动函数 |
| | | 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)`; |
| | | }, |
| | | 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 |
| | | }, |
| | | |
| | | 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() { |
| | | |
| | | // 鼠标移出函数 |
| | | 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> |