测试完成

WXL (wul)

20 小时以前 bb0a72311792bb57e1e90668c00f1c077d9f1761

 src/views/patient/patient/hospital.vue

@@ -11,7 +11,7 @@
          v-show="showSearch"
          label-width="98px"
        >
          <el-form-item label="姓名" prop="name">
          <el-form-item label="患者姓名" prop="name">
            <el-input
              v-model="queryParams.patname"
              placeholder="请输入姓名"
@@ -20,47 +20,60 @@
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="患者编号" prop="patid">
          <el-form-item label="主治医生" prop="name">
            <el-input
              v-model="queryParams.patid"
              v-model="queryParams.drname"
              placeholder="请输入姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="责任护士" prop="name">
            <el-input
              v-model="queryParams.nurseName"
              placeholder="请输入姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="住院号" prop="inhospno">
            <el-input
              v-model="queryParams.inhospno"
              placeholder="请输入患者编号"
              clearable
              style="width: 250px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="护理等级" prop="tagId">
            <el-select v-model="queryParams.Patientid" placeholder="请选择">
              <el-option
                v-for="dict in dict.type.nursinggrade"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="患者范围" prop="tagId">
            <el-select v-model="queryParams.Patientid" placeholder="请选择">
              <el-option
                v-for="item in Patientrange"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=" 入院日期 " prop="createTime">
            <el-date-picker
          <el-form-item label="科室名称" prop="inhospno">
            <el-input
              v-model="queryParams.deptname"
              placeholder="请输入科室名称"
              clearable
              v-model="queryParams.createTime"
              type="date"
              style="width: 250px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="患者范围" prop="status">
            <el-cascader
              v-model="queryParams.scopetype"
              placeholder="默认全部科室"
              :options="sourcetype"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label=" 出院日期 " prop="createTime">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              placeholder="请选择 就诊日期 "
            >
            </el-date-picker>
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>

          <el-row>
@@ -83,7 +96,7 @@
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
          <!-- <el-col :span="1.5">
            <el-button
              type="primary"
              plain
@@ -93,8 +106,8 @@
              v-hasPermi="['system:user:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
          </el-col> -->
          <!-- <el-col :span="1.5">
            <el-button
              type="success"
              plain
@@ -105,6 +118,18 @@
              v-hasPermi="['system:user:edit']"
              >修改</el-button
            >
          </el-col> -->
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-plus"
              size="medium"
              :disabled="multiple"
              @click="handleBatchAddTask"
            >
              添加延续护理任务
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
@@ -118,37 +143,13 @@
              >删除</el-button
            >
          </el-col>
          <el-col :span="19">
            <div class="documentf">
              <div class="document">
                <el-button
                  type="info"
                  plain
                  icon="el-icon-upload2"
                  size="medium"
                  @click="handleImport"
                  v-hasPermi="['system:user:import']"
                  >导入</el-button
                >
              </div>
              <div class="document">
                <el-button
                  type="warning"
                  plain
                  icon="el-icon-download"
                  size="medium"
                  @click="handleExport"
                  v-hasPermi="['system:user:export']"
                  >导出</el-button
                >
              </div>
            </div>
          </el-col>

          <!-- <el-col :span="1.5"> </el-col> -->
        </el-row>
        <el-table
          v-loading="loading"
          :data="userList"
          height="808"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center" />
@@ -167,23 +168,56 @@
            width="160"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.endtime) }}</span>
              <span>{{ formatTime(scope.row.endtime) }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="住院号"
            align="center"
            key="patid"
            prop="patid"
            key="inhospno"
            prop="inhospno"
            width="120"
          />
          <el-table-column
          <!-- <el-table-column
            label="姓名"
          width="100"
            align="center"
            key="patname"
            prop="patname"
          />
          <el-table-column label="性别" align="center" key="sex" prop="sex">
          /> -->
          <el-table-column
            fixed
            label="姓名"
            width="100"
            align="center"
            key="patname"
            prop="patname"
          >
            <template slot-scope="scope">
              <el-button
                size="medium"
                type="text"
                @click="
                  gettoken360(
                    scope.row.idcardno,
                    scope.row.drcode,
                    scope.row.drname
                  )
                "
                ><span class="button-textsc">{{
                  scope.row.patname
                }}</span></el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            label="性别"
            width="100"
            align="center"
            key="sex"
            prop="sex"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.sex == 1 ? "男" : "女" }}</span>
            </template>
@@ -193,7 +227,7 @@
            align="center"
            key="age"
            prop="age"
            width="120"
            width="80"
          />
          <el-table-column
            label="联系电话"
@@ -225,10 +259,17 @@
            width="120"
          /> -->
          <el-table-column
            label="病区"
            label="科室"
            align="center"
            key="deptname"
            prop="deptname"
            width="120"
          />
          <el-table-column
            label="病区"
            align="center"
            key="leavehospitaldistrictname"
            prop="leavehospitaldistrictname"
            width="120"
          />
          <el-table-column
@@ -236,6 +277,13 @@
            align="center"
            key="bedNo"
            prop="bedNo"
            width="120"
          />
          <el-table-column
            label="经管医生"
            align="center"
            key="managementDoctor"
            prop="managementDoctor"
            width="120"
          />
          <el-table-column
@@ -248,8 +296,8 @@
          <el-table-column
            label="责任护士"
            align="center"
            key="Sister"
            prop="Sister"
            key="nurseName"
            prop="nurseName"
            width="120"
          />

@@ -270,7 +318,6 @@
                    query: { id: scope.row.patid },
                  })
                "
                v-hasPermi="['system:user:edit']"
                ><span class="button-textsc"
                  ><i class="el-icon-zoom-in"></i>查看</span
                ></el-button
@@ -288,7 +335,114 @@
        />
      </el-col>
    </el-row>
    <!-- 批量添加任务弹窗 -->
    <el-dialog
      title="批量添加延续护理"
      :visible.sync="batchTaskVisible"
      width="90%"
      append-to-body
    >
      <el-row :gutter="20">
        <!-- 左侧：选中患者列表 -->
        <el-col :span="12">
          <div class="batch-patient-section">
            <h4>选中患者（{{ selectedPatients.length }}人）</h4>
            <el-table
              :data="selectedPatients"
              border
              style="width: 100%"
              size="small"
            >
              <el-table-column prop="patname" label="姓名" width="100" />
              <el-table-column prop="sex" label="性别" width="80">
                <template slot-scope="scope">
                  {{ scope.row.sex === 1 ? "男" : "女" }}
                </template>
              </el-table-column>
              <el-table-column
                label="出院时间"
                align="center"
                key="endtime"
                prop="endtime"
              >
                <template slot-scope="scope">
                  <span>{{ formatTime(scope.row.endtime) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="inhospno" label="住院号" />
              <el-table-column prop="deptname" label="科室" />
            </el-table>
          </div>
        </el-col>

        <!-- 右侧：任务列表 -->
        <el-col :span="12">
          <div class="batch-task-section">
            <h4>任务列表（请选择1个任务）</h4>
            <el-table
              :data="taskList"
              border
              style="width: 100%"
              size="small"
              @current-change="handleTaskSelectionChange"
              highlight-current-row
            >
              <el-table-column
                label="任务名称"
                fixed
                align="center"
                key="taskName"
                prop="taskName"
                :show-overflow-tooltip="true"
              />

              <el-table-column
                label="服务项目"
                align="center"
                key="templatename"
                prop="templatename"
                :show-overflow-tooltip="true"
              />

              <el-table-column
                label="创建人"
                align="center"
                key="createBy"
                prop="createBy"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="创建时间"
                sortable
                align="center"
                prop="createTime"
              >
                <template slot-scope="scope">
                  <span>{{ formatTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column>
              <template #empty>
                <div class="empty-message">
                  <i class="el-icon-warning"></i>
                  <span>患者科室无匹配服务</span>
                </div>
              </template>
            </el-table>
          </div>
        </el-col>
      </el-row>

      <!-- 底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="batchTaskVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="batchLoading"
          @click="submitBatchTask"
          >创建任务</el-button
        >
      </div>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
@@ -338,8 +492,10 @@
      <div class="uploading" v-else-if="dractive == 2">
        <el-table :data="uploadingData" style="width: 100%">
          <el-table-column prop="serial" label="序号"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="sex" label="性别"> </el-table-column>
          <el-table-column prop="name" label="姓名" width="100">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="100">
          </el-table-column>
          <el-table-column prop="certificate" label="证件类型">
          </el-table-column>
          <el-table-column prop="certificatenum" label="证件号码">
@@ -383,19 +539,24 @@
<script>
import { delUser } from "@/api/system/user";

import { listpatient } from "@/api/patient/record";
import {
  listpatient,
  particularpatient,
  messagelistpatient,
  alterpatient,
  addpatient,
  particularpatient,
  deletepatient,
  Exporterrorpatient,
  toleadpatient,
} from "@/api/patient/record";
} from "@/api/patient/homepage";
import { listtag } from "@/api/system/label";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import { listDept } from "@/api/system/dept";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { query360PatInfo, getTasklist, addSubtask } from "@/api/AiCentre/index";

import store from "@/store";

export default {
  name: "behospitalized",
@@ -428,8 +589,61 @@
      // 默认密码
      initPassword: undefined,
      amendtag: false, //是否修改
      // 批量任务相关数据
      batchTaskVisible: false, // 弹窗可见性
      selectedPatients: [], // 选中的患者列表
      taskList: [], // 任务列表
      selectedTask: null, // 选中的任务
      batchLoading: false, // 批量提交加载状态
      // 日期范围
      dateRange: [],
      source: [
        {
          value: 0,
          label: "所属患者",
        },
        {
          value: 1,
          label: "科室患者",
        },
        {
          value: 2,
          label: "病区患者",
        },
      ],
      postData: {
        XiaoXiTou: {
          FaSongFCSJC: "ZJHES",
          FaSongJGID: localStorage.getItem("orgid"),
          FaSongJGMC: localStorage.getItem("orgname"),
          FaSongSJ: "2025-01-09 17:29:36",
          FaSongXTJC: "SUIFANGXT",
          FaSongXTMC: "随访系统",
          XiaoXiID: "5FA92AFB-9833-4608-87C7-F56A654AC171",
          XiaoXiLX: "SC_LC_360STCX",
          XiaoXiMC: "360 视图查询",
          ZuHuID: localStorage.getItem("ZuHuID"),
          ZuHuMC: localStorage.getItem("orgname"),
        },
        YeWuXX: {
          BingRenXX: {
            ZhengJianHM: "",
            ZhengJianLXDM: "01",
            ZhengJianLXMC: "居民身份证",
            ZuZhiJGID: localStorage.getItem("orgid"),
            ZuZhiJGMC: localStorage.getItem("orgname"),
          },
          YongHuXX: {
            XiTongID: "SUIFANGXT",
            XiTongMC: "随访系统",
            YongHuID: localStorage.getItem("YongHuID"),
            YongHuXM: localStorage.getItem("YongHuXM"),
            ZuZhiJGID: localStorage.getItem("orgid"),
            ZuZhiJGMC: localStorage.getItem("orgname"),
            idp: "lyra",
          },
        },
      },
      paperstypes: [
        { papersname: "身份证" },
        { papersname: "护照" },
@@ -447,6 +661,26 @@
        idcardtype: "",
        relativetelcode: "",
      },
      sourcetype: [
        {
          value: 1,
          label: "科室",
          children: [],
        },
        {
          value: 2,
          label: "病区",
          children: [],
        },
        {
          value: 3,
          label: "全部科室",
        },
        {
          value: 4,
          label: "全部病区",
        },
      ],
      //导入进度
      dractive: 1,
      // 导入展示表单
@@ -489,58 +723,14 @@
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        idcardno: undefined,
        name: undefined,
        status: undefined,
        tagIds: undefined,
        telcode: undefined,
        cry: 1,
        searchscope: 3,
        scopetype: [],
        leaveldeptcodes: [],
        leavehospitaldistrictcodes: [],
      },
      // 表单校验
      rules: {
        // userName: [
        //   { required: true, message: "用户名称不能为空", trigger: "blur" },
        //   {
        //     min: 2,
        //     max: 20,
        //     message: "用户名称长度必须介于 2 和 20 之间",
        //     trigger: "blur",
        //   },
        // ],
        // nickName: [
        //   { required: true, message: "用户昵称不能为空", trigger: "blur" },
        // ],
        // password: [
        //   { required: true, message: "用户密码不能为空", trigger: "blur" },
        //   {
        //     min: 5,
        //     max: 20,
        //     message: "用户密码长度必须介于 5 和 20 之间",
        //     trigger: "blur",
        //   },
        // ],
        // email: [
        //   {
        //     type: "email",
        //     message: "请输入正确的邮箱地址",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        // phonenumber: [
        //   {
        //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        //     message: "请输入正确的手机号码",
        //     trigger: "blur",
        //   },
        // ],
        // IDnumber: [
        //   {
        //     pattern:
        //       /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
        //     message: "请输入正确的身份证号码",
        //     trigger: "blur",
        //   },
        // ],
      },
      rules: {},
    };
  },
  watch: {
@@ -550,8 +740,26 @@
    },
  },
  created() {
    this.sourcetype[0].children = store.getters.belongDepts.map((dept) => {
      return {
        label: dept.deptName,
        value: dept.deptCode,
      };
    });
    this.sourcetype[1].children = store.getters.belongWards.map((dept) => {
      return {
        label: dept.districtName,
        value: dept.districtCode,
      };
    });
    this.queryParams.leaveldeptcodes = store.getters.belongDepts.map(
      (obj) => obj.deptCode
    );
    this.queryParams.leavehospitaldistrictcodes = store.getters.belongWards.map(
      (obj) => obj.districtCode
    );
    this.getList();
    this.listDept();
    // this.listDept();
    this.gettabList();
  },
  methods: {
@@ -571,6 +779,159 @@
        console.log(this.deptList, "this.deptList");
      });
    },
    //患者360跳转
    gettoken360(sfzh, drcode, drname) {
      // this.$modal.msgWarning('360功能暂未开通');

      this.postData.YeWuXX.BingRenXX.ZhengJianHM = sfzh;

      query360PatInfo(this.postData).then((res) => {
        if (res.data.url) {
          window.open(res.data.url, "_blank");
          // this.linkUrl = res.data.url;
        } else {
          this.$modal.msgWarning("360查询无结果");
        }
      });
    },
    /** 批量添加任务按钮点击 */
    handleBatchAddTask() {
      // 校验是否选中患者
      if (this.ids.length === 0) {
        this.$modal.msgWarning("请至少选中1名患者");
        return;
      }

      // 获取选中患者的科室信息
      const patientDepts = new Set();
      let deptcode = "";
      this.ids.forEach((patId) => {
        const patient = this.userList.find((item) => item.patid === patId);
        if (patient) {
          patientDepts.add(patient.deptname);
          deptcode = patient.deptcode;
        }
      });

      // 获取选中患者列表
      this.selectedPatients = this.userList.filter((item) =>
        this.ids.includes(item.patid)
      );

      // 显示弹窗
      this.batchTaskVisible = true;

      // 获取任务列表
      this.loadTaskList(deptcode);
    },

    /** 加载任务列表 */
    loadTaskList(deptcode) {
      this.batchLoading = true;
      let topqueryParams = {
        pageNum: 1,
        pageSize: 100, // 设置较大的分页获取更多任务
        type: 2, // 根据实际情况调整
      };

      getTasklist(topqueryParams)
        .then((response) => {
          this.taskList = response.rows;
          this.batchLoading = false;

          if (this.taskList.length === 0) {
            this.$modal.msgWarning("当前科室无可用任务");
          }
        })
        .catch((error) => {
          this.$modal.msgError("获取任务列表失败：" + error.message);
          this.batchLoading = false;
        });
    },

    /** 处理任务选择变化 */
    handleTaskSelectionChange(currentRow) {
      this.selectedTask = currentRow;
    },

    /** 批量提交任务 */
    async submitBatchTask() {
      // 校验是否选中任务
      if (!this.selectedTask) {
        this.$modal.msgWarning("请选择1个任务");
        return;
      }

      this.batchLoading = true;
      const successPatients = [];
      const failedPatients = [];
      const errorMessages = [];

      try {
        // 遍历选中的患者，逐个调用接口
        for (const patient of this.selectedPatients) {
          const params = {
            taskid: this.selectedTask.taskid,
            type: this.selectedTask.type,
            taskName: this.selectedTask.taskName,
            serviceType: this.selectedTask.serviceType,
            preachform: this.selectedTask.preachform,
            templateid: this.selectedTask.templateid,
            libtemplateid: this.selectedTask.libtemplateid,
            sendstate: 2,
            ...patient,
            sendname: patient.patname,
            endtime: patient.endtime ? patient.endtime + " 00:00:00" : "",
            leavediagname: patient.leavediagname || patient.diagname || "",
            age: patient.age || "",
          };

          try {
            const response = await addSubtask(params);
            if (response.code === 200) {
              successPatients.push(patient.patname);
            } else {
              failedPatients.push(patient.patname);
              errorMessages.push(
                `${patient.patname}: ${response.msg || "添加失败"}`
              );
            }
          } catch (error) {
            failedPatients.push(patient.patname);
            errorMessages.push(
              `${patient.patname}: ${error.message || "网络错误"}`
            );
          }
        }

        // 显示处理结果
        if (failedPatients.length === 0) {
          this.$modal.msgSuccess(
            `成功为 ${successPatients.length} 名患者添加任务`
          );
        } else {
          this.$modal.msgWarning(
            `成功添加 ${successPatients.length} 人，失败 ${failedPatients.length} 人。` +
              (errorMessages.length > 0
                ? `失败原因：${errorMessages.join("; ")}`
                : "")
          );
        }

        this.batchTaskVisible = false;
        this.getList(); // 刷新患者列表
      } catch (error) {
        this.$modal.msgError("批量添加任务过程中出错：" + error.message);
      } finally {
        this.batchLoading = false;
      }
    },

    /** 格式化时间 */
    formatTime(time) {
      if (!time) return "";
      return time;
    },
    /** 查询标签列表 */
    gettabList() {
      const tagqueryParams = {
@@ -584,6 +945,34 @@
        console.log(response);
        this.optionstag = response.rows;
      });
    },
    // 患者范围处理
    handleChange(value) {
      let type = value[0];
      let code = value.slice(-1)[0];
      this.queryParams.leavehospitaldistrictcodes = [];
      this.queryParams.leaveldeptcodes = [];

      if (type == 1) {
        this.queryParams.leaveldeptcodes.push(code);
        this.queryParams.leavehospitaldistrictcodes = [];
        this.queryParams.searchscope = 1;
      } else if (type == 2) {
        this.queryParams.leavehospitaldistrictcodes.push(code);
        this.queryParams.leaveldeptcodes = [];
        this.queryParams.searchscope = 2;
      } else if (type == 3) {
        this.queryParams.leaveldeptcodes = store.getters.belongDepts.map(
          (obj) => obj.deptCode
        );
        this.queryParams.searchscope = 3;
        this.queryParams.leavehospitaldistrictcodes = [];
      } else if (type == 4) {
        this.queryParams.leaveldeptcodes = [];
        this.queryParams.leavehospitaldistrictcodes =
          store.getters.belongWards.map((obj) => obj.districtCode);
        this.queryParams.searchscope = 4;
      }
    },
    // 查询导入展示列表
    geterryList() {
@@ -627,6 +1016,13 @@
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.dateRange) {
        this.queryParams.startOutHospTime = this.dateRange[0];
        this.queryParams.endOutHospTime = this.dateRange[1];
      } else {
        this.queryParams.startOutHospTime = "";
        this.queryParams.endOutHospTime = "";
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
@@ -634,7 +1030,18 @@
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.$refs.tree.setCurrentKey(null);
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        cry: 1,
        searchscope: 3,
        scopetype: [],
        leaveldeptcodes: [],
        leavehospitaldistrictcodes: [],
      };
      this.queryParams.leaveldeptcodes = store.getters.belongDepts.map(
        (obj) => obj.deptCode
      );
      this.handleQuery();
    },
    // 多选框选中数据
@@ -720,7 +1127,7 @@
    /** 下载模板操作 */
    importTemplate() {
      this.download(
        "system/user/importTemplate",
        "smartor/import/getImportPatTemplate",
        {},
        `user_template_${new Date().getTime()}.xlsx`
      );
@@ -805,6 +1212,43 @@
  }
}
.button-textsc {
  color: #28cfe6;
  color: #3664d9;
}
// 批量任务弹窗样式
.batch-patient-section,
.batch-task-section {
  h4 {
    margin: 0 0 10px 0;
    color: #606266;
    font-size: 16px;
  }
}

.empty-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  color: #909399;

  i {
    font-size: 24px;
    margin-bottom: 8px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

// 响应式调整
@media screen and (max-width: 1200px) {
  .batch-patient-section,
  .batch-task-section {
    margin-bottom: 20px;
  }
}
</style>