zhaowei
2025-03-06 ddd818f74d59c1fdeeed29714d660d7e49200c04
src/views/eam/EquipmentCalibrationOrder.vue
@@ -1,24 +1,24 @@
<template>
  <a-card
    :bordered="false"
    title="设备检定工单"
    :bordered='false'
    title=''
  >
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
    <div class='table-page-search-wrapper'>
      <a-form
        layout="inline"
        @keyup.enter.native="searchQuery"
        layout='inline'
        @keyup.enter.native='searchQuery'
      >
        <a-row :gutter="24">
        <a-row :gutter='24'>
          <a-col
            :md="6"
            :sm="8"
            :md='6'
            :sm='8'
          >
            <a-form-item label="工单编码">
              <a-input
                placeholder="请输入工单编码"
                v-model="queryParam.num"
              ></a-input>
            <a-form-item label='工单编码'>
              <j-input
                placeholder='请输入工单编码'
                v-model='queryParam.num'
              ></j-input>
            </a-form-item>
          </a-col>
          <!-- <a-col
@@ -33,23 +33,23 @@
            </a-form-item>
          </a-col> -->
          <a-col
            :md="6"
            :sm="8"
            :md='6'
            :sm='8'
          >
            <span
              style="float: left;overflow: hidden;"
              class="table-page-search-submitButtons"
              style='float: left;overflow: hidden;'
              class='table-page-search-submitButtons'
            >
              <a-button
                type="primary"
                @click="searchQuery"
                icon="search"
                type='primary'
                @click='searchQuery'
                icon='search'
              >查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
                type='info'
                @click='searchReset'
                icon='reload'
                style='margin-left: 8px'
              >重置</a-button>
            </span>
          </a-col>
@@ -59,204 +59,275 @@
    <!-- 查询区域-END -->
    <!-- 操作按钮区域 -->
    <div class="table-operator">
    <div class='table-operator'>
      <a-button
        @click="handleAdd"
        type="primary"
        icon="plus"
      >新增</a-button>
        @click='handleAdd'
        type='primary'
        icon='plus'
        v-has="'calibrationOrder:add'"
      >新增
      </a-button>
    </div>
    <!-- table区域-begin -->
    <div>
      <div
        class="ant-alert ant-alert-info"
        style="margin-bottom: 16px;"
        class='ant-alert ant-alert-info'
        style='margin-bottom: 16px;'
      >
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <i class='anticon anticon-info-circle ant-alert-icon'></i> 已选择 <a style='font-weight: 600'>{{ selectedRowKeys.length }}</a>项
        <a
          style="margin-left: 24px"
          @click="onClearSelected"
          style='margin-left: 24px'
          @click='onClearSelected'
        >清空</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: 'calc(2000px + 50%)', y: 900 }"
        ref='table'
        size='middle'
        :scroll="{ x: 'calc(1000px + 50%)', y: 900 }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        :rowSelection="rowSelection"
        :customRow="clickThenSelect"
        rowKey='id'
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :loading='loading'
        class='j-table-force-nowrap'
        @change='handleTableChange'
        :customRow='clickThenSelect'
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio'}"
      >
        <!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" -->
        <span
          slot="action"
          slot-scope="text, record"
        >
          <a-popconfirm
            title="确定下发工单吗?"
            @confirm="() => handleOrderIssue(record)"
          >
            <a v-if="record.status === '1'">下发</a>
          </a-popconfirm>
          <a-divider
            v-if="record.status === '1'"
            type="vertical"
          />
          <a
            v-if="record.status === '1'"
            @click="handleEdit(record)"
          >编辑</a>
          <a-divider
            v-if="record.status === '1'"
            type="vertical"
          />
          <a
            v-if="record.status === '2' "
            @click="handleOrderExe(record)"
          >执行</a>
          <a-divider
            v-if="record.status === '2'"
            type="vertical"
          />
          <a
            v-if="record.status === '4'"
            @click="handleOrderExe(record)"
          >查看</a>
          <a-divider
            v-if="record.status === '4'"
            type="vertical"
          />
          <a-popconfirm
            title="确定撤回工单吗?"
            @confirm="() => handleOrderReset(record,'1')"
          >
            <a v-if="record.status === '2'">撤回</a>
          </a-popconfirm>
          <a-divider
            v-if="record.status === '2'"
            type="vertical"
          />
          <a-popconfirm
            title="确定撤回工单吗?"
            @confirm="() => handleOrderReset(record,'2')"
          >
            <a v-if="record.status === '4'">撤回</a>
          </a-popconfirm>
          <a-divider
            v-if="record.status === '4'"
            type="vertical"
          />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  title="确定删除吗?"
                  @confirm="() => handleDelete(record.id)"
                >
                  <a v-if="record.status === '1'">删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        <span
          slot="num"
          slot-scope="text, record"
          slot='action'
          slot-scope='text, record'
        >
          <a
            v-show="record.status === '1' || record.status === '3'"
            @click='handleAddOrderReport(record)'
            v-has="'calibrationOrder:write'"
          >结果录入</a>
          <a-divider
            v-show="record.status === '1' || record.status === '3'"
            type='vertical'
          />
          <a
            v-show="record.status === '2' && record.equipmentImportance != 'D'"
            @click='handleTechnologyStatus(record)'
            v-has="'calibrationOrder:audit'"
          >结果审核</a>
          <a-divider
            v-show="record.status === '2' && record.equipmentImportance != 'D'"
            type='vertical'
          />
          <a
            v-show="record.status === '2' && record.equipmentImportance == 'D'"
            @click='handleTechnologyStatusAuthenticate(record)'
            v-has="'calibrationOrder:authenticate'"
          >D类技术状态鉴定</a>
          <a-divider
            v-show="record.status === '2' && record.equipmentImportance == 'D'"
            type='vertical'
          />
          <a @click='handleDetail(record)'>详情</a>
          <!--          <a-popconfirm-->
          <!--            title='确定下发工单吗?'-->
          <!--            @confirm='() => handleOrderIssue(record)'-->
          <!--          >-->
          <!--            <a v-if="record.status === '1'">下发</a>-->
          <!--          </a-popconfirm>-->
          <!--          <a-divider-->
          <!--            v-if="record.status === '1'"-->
          <!--            type='vertical'-->
          <!--          />-->
          <!--          <a-->
          <!--            v-if="record.status === '1'"-->
          <!--            @click='handleEdit(record)'-->
          <!--          >编辑</a>-->
          <!--          <a-divider-->
          <!--            v-if="record.status === '1'"-->
          <!--            type='vertical'-->
          <!--          />-->
          <!--          <a-->
          <!--            v-if="record.status === '2' "-->
          <!--            @click='handleOrderExe(record)'-->
          <!--          >执行</a>-->
          <!--          <a-divider-->
          <!--            v-if="record.status === '2'"-->
          <!--            type='vertical'-->
          <!--          />-->
          <!--          <a-->
          <!--            v-if="record.status === '4'"-->
          <!--            @click='handleOrderExe(record)'-->
          <!--          >查看</a>-->
          <!--          <a-divider-->
          <!--            v-if="record.status === '4'"-->
          <!--            type='vertical'-->
          <!--          />-->
          <!--          <a-popconfirm-->
          <!--            title='确定撤回工单吗?'-->
          <!--            @confirm="() => handleOrderReset(record,'1')"-->
          <!--          >-->
          <!--            <a v-if="record.status === '2'">撤回</a>-->
          <!--          </a-popconfirm>-->
          <!--          <a-divider-->
          <!--            v-if="record.status === '2'"-->
          <!--            type='vertical'-->
          <!--          />-->
          <!--          <a-popconfirm-->
          <!--            title='确定撤回工单吗?'-->
          <!--            @confirm="() => handleOrderReset(record,'2')"-->
          <!--          >-->
          <!--            <a v-if="record.status === '4'">撤回</a>-->
          <!--          </a-popconfirm>-->
          <!--          <a-divider-->
          <!--            v-if="record.status === '4'"-->
          <!--            type='vertical'-->
          <!--          />-->
          <!--          <a-->
          <!--            v-if="record.status === '4'"-->
          <!--            @click='handleFinal(record)'-->
          <!--          >录入结果</a>-->
          <!--          &lt;!&ndash; v-if="record.status === '5'" &ndash;&gt;-->
          <!--           <a-divider-->
          <!--             v-if="record.status === '4'"-->
          <!--             type='vertical'-->
          <!--           />-->
          <!--          -->
          <!--          <a-dropdown>-->
          <!--             <a @click='handleDetail(record)'>详情</a>-->
          <!--            <a class='ant-dropdown-link'>更多 <a-icon type='down' /></a>-->
          <!--            <a-menu slot='overlay'>-->
          <!--              <a-menu-item>-->
          <!--                <a @click='handleDetail(record)'>详情</a>-->
          <!--              </a-menu-item>-->
          <!--              <a-menu-item>-->
          <!--                <a-popconfirm-->
          <!--                  title='确定删除吗?'-->
          <!--                  @confirm='() => handleDelete(record.id)'-->
          <!--                >-->
          <!--                  <a v-if="record.status === '1'">删除</a>-->
          <!--                </a-popconfirm>-->
          <!--              </a-menu-item>-->
          <!--            </a-menu>-->
          <!--          </a-dropdown>-->
        </span>
        <!-- <span
          slot='num'
          slot-scope='text, record'
        >
          <a
            v-if="record.status === '3' || record.status === '2' "
            class="lot"
            @click="handleOrderExe(record)"
          >{{record.num}}</a>
            class='lot'
            @click='handleOrderExe(record)'
          >{{ record.num }}</a>
          <span v-else>{{record.num}}</span>
        </span>
          <span v-else>{{ record.num }}</span>
        </span> -->
      </a-table>
      <a-tabs
        type="card"
        defaultActiveKey="1"
      >
        <a-tab-pane
          key="1"
          forceRender
        >
          <span slot="tab">
            <a-badge>精度参数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a-badge>
          </span>
          <div
            class="table-operator"
            style="margin:10px"
          >
            <equipment-precision-parameters-list ref="PrecisionParametersList"></equipment-precision-parameters-list>
          </div>
        </a-tab-pane>
      <a-tabs defaultActiveKey='2'>
        <!--        <a-tab-pane  -->
        <!--          key="1"-->
        <!--          tab="检验项"-->
        <!--        >-->
        <!--            <equipment-precision-parameters-list ref="PrecisionParametersList" :calibrationOrderId="mainId"></equipment-precision-parameters-list>-->
        <!--        </a-tab-pane>-->
        <a-tab-pane
          key="2"
          forceRender
          key='2'
          tab='鉴定报告'
        >
          <span slot="tab">
            <a-badge>检定报告&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a-badge>
          </span>
          <div
            class="table-operator"
            style="margin:10px"
          >
            <equipment-calibration-order-report-list ref="EquipmentCalibrationOrderReportList"></equipment-calibration-order-report-list>
          </div>
          <equipment-calibration-order-report-list
            ref='EquipmentCalibrationOrderReportList'
            :calibrationOrderId='mainId'
          ></equipment-calibration-order-report-list>
        </a-tab-pane>
      </a-tabs>
    </div>
    <equipment-calibration-order-modal
      ref="modalForm"
      @ok="modalFormOk"
      ref='modalForm'
      @ok='modalFormOk'
    ></equipment-calibration-order-modal>
    <equipment-calibration-order-exe-drawer
      ref="EquipmentCalibrationOrderExeDrawer"
      @ok="modalFormOk"
      ref='EquipmentCalibrationOrderExeDrawer'
      @ok='modalFormOk'
    ></equipment-calibration-order-exe-drawer>
    <final-modal
      ref='finalModal'
      @ok='modalFormOk'
    ></final-modal>
    <equipment-calibration-order-report-modal
      ref='equipmentCalibrationOrderReportModal'
      @ok='modalFormOk'
    ></equipment-calibration-order-report-modal>
    <equipment-technology-status-modal
      ref="EquipmentTechnologyStatusModal"
      @ok="modalFormOk"
    ></equipment-technology-status-modal>
    <technology-status-authenticate-modal
      ref="TechnologyStatusAuthenticateModal"
      @ok="modalFormOk"
    ></technology-status-authenticate-modal>
  </a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import EquipmentCalibrationOrderModal from './modules/equipmentCalibrationOrder/EquipmentCalibrationOrderModal'
import EquipmentCalibrationOrderExeDrawer from './modules/equipmentCalibrationOrder/EquipmentCalibrationOrderExeDrawer'
import { getAction, postAction, requestPut } from '@/api/manage'
import EquipmentPrecisionParametersList from './modules/equipmentCalibrationOrder/EquipmentPrecisionParametersList'
import EquipmentCalibrationOrderReportList from './modules/equipmentCalibrationOrder/EquipmentCalibrationOrderReportList'
import EquipmentCalibrationOrderReportList
  from './modules/equipmentCalibrationOrder/EquipmentCalibrationOrderReportList'
import FinalModal from './modules/equipmentCalibrationOrder/FinalModal.vue'
import EquipmentCalibrationOrderReportModal
  from './modules/equipmentCalibrationOrder/EquipmentCalibrationOrderReportModal'
import EquipmentTechnologyStatusModal from './modules/equipmentCalibrationOrder/EquipmentTechnologyStatusModal'
import TechnologyStatusAuthenticateModal from './modules/equipmentCalibrationOrder/TechnologyStatusAuthenticateModal'
import { interceptorFunc } from 'vxe-table'
export default {
  name: 'EquipmentCalibrationOrder',
  mixins: [JeecgListMixin, mixinDevice],
  mixins: [JeecgListMixin],
  components: {
    EquipmentCalibrationOrderModal,
    EquipmentCalibrationOrderExeDrawer,
    EquipmentPrecisionParametersList,
    EquipmentCalibrationOrderReportList,
    EquipmentCalibrationOrderReportModal,
    FinalModal,
    EquipmentTechnologyStatusModal,
    TechnologyStatusAuthenticateModal
  },
  data() {
    return {
      description: '设备检定工单',
      description: '技术状态鉴定管理',
      disableMixinCreated: true,
      ipagination: {
        current: 1,
        pageSize: 20,
        pageSizeOptions: ['5', '10', '20', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      dictOptions: {},
      /* 分页参数 */
      // 表头
      columns: [
        {
@@ -264,147 +335,152 @@
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
            return parseInt(index) + 1
          }
        },
        {
          title: '状态',
          align: "center",
          dataIndex: 'status_dictText'
        },
        {
          title: '工单号',
          align: "center",
          dataIndex: 'num',
          // scopedSlots: { customRender: 'num' }
        },
        {
          title: '检定方式',
          align: "center",
          dataIndex: 'calibrationType_dictText',
        },
        {
          title: '设备编码',
          align: "center",
          dataIndex: 'equipmentNum',
        },
        {
          title: '设备名称',
          align: "center",
          dataIndex: 'equipmentName',
        },
        {
          title: '型号',
          align: "center",
          dataIndex: 'equipmentModel',
        },
        {
          title: '规格',
          align: "center",
          dataIndex: 'equipmentSpecification',
        },
        {
          title: '判定依据',
          align: "center",
          dataIndex: 'managementMode_dictText',
        },
        {
          title: '判定结果',
          align: "center",
          dataIndex: 'calibrationResult'
          title: '工单号',
          align: 'center',
          dataIndex: 'num'
          // scopedSlots: { customRender: 'num' }
        },
        {
          title: '创建人',
          align: "center",
          dataIndex: 'createBy'
          title: '状态',
          align: 'center',
          dataIndex: 'status_dictText'
        },
        {
          title: '判定结果',
          align: 'center',
          dataIndex: 'calibrationResult_dictText'
        },
        // {
        //   title: '检定方式',
        //   align: 'center',
        //   dataIndex: 'calibrationType_dictText'
        // },
        {
          title: '统一编码',
          align: 'center',
          dataIndex: 'equipmentNum'
        },
        {
          title: '设备名称',
          align: 'center',
          dataIndex: 'equipmentName'
        },
        {
          title: '型号',
          align: 'center',
          dataIndex: 'equipmentModel'
        },
        {
          title: '规格',
          align: 'center',
          dataIndex: 'equipmentSpecification'
        },
        // {
        //   title: '判定依据',
        //   align: 'center',
        //   dataIndex: 'managementMode_dictText'
        // },
        // {
        //   title: '创建人',
        //   align: 'center',
        //   dataIndex: 'createBy'
        // },
        {
          title: '创建日期',
          align: "center",
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '检定人',
          align: "center",
          dataIndex: 'calibrationUserId_dictText'
        },
        // {
        //   title: '检定人',
        //   align: 'center',
        //   dataIndex: 'calibrationUserId_dictText'
        // },
        {
          title: '完成时间',
          align: "center",
          align: 'center',
          dataIndex: 'calibrationTime'
        },
        {
          title: '下发时间',
          align: "center",
          dataIndex: 'issueTime'
          title: '审核意见',
          align: 'center',
          dataIndex: 'remark'
        },
        // {
        //   title: '下发时间',
        //   align: 'center',
        //   dataIndex: 'issueTime'
        // },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 300,
          align: 'center',
          width: 200,
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: "/eam/calibrationOrder/listNew",
        delete: "/eam/calibrationOrder/delete",
        edit: "/eam/calibrationOrder/editStatus",
        list: '/eam/calibrationOrder/listNew',
        delete: '/eam/calibrationOrder/delete',
        edit: '/eam/calibrationOrder/editStatus'
      },
      mainId: ''
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
    rowSelection() {
      return {
        type: 'checkbox',
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys;
          this.onSelectChange(selectedRowKeys, selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.distable
          },
        }),
        selectedRowKeys: this.selectedRowKeys,
      };
    },
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created() {
    //从路由中获取查询条件
    if (this.$route.query) {
      this.queryParam.equipmentId = this.$route.query.equipmentId;
      //查询条件按时间倒序
      this.queryParam.sort = 'createTime';
      this.queryParam.order = 'desc';
    }
    this.loadData()
    this.initDictConfig();
  },
  methods: {
    clickThenSelect(record) {
      return {
        on: {
          click: () => {
            this.onSelectChange(record.id.split(","), [record]);
          }
        }
      }
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      if (selectedRowKeys.length == 1) {
        this.$refs.EquipmentCalibrationOrderReportList.calibrationOrderId = selectedRowKeys[0]
        this.$refs.PrecisionParametersList.calibrationOrderId = selectedRowKeys[0]
        this.mainId = selectedRowKeys[0]
      } else {
        this.$refs.PrecisionParametersList.calibrationOrderId = '-1'
        this.$refs.EquipmentCalibrationOrderReportList.calibrationOrderId = '-1'
        this.mainId = '-1'
      }
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    handleTechnologyStatus(record) {
      this.$refs.EquipmentTechnologyStatusModal.edit(record);
      this.$refs.EquipmentTechnologyStatusModal.title = "审核";
      this.$refs.EquipmentTechnologyStatusModal.disableSubmit = false;
    },
    handleTechnologyStatusAuthenticate: function (record) {
      this.$refs.TechnologyStatusAuthenticateModal.edit(record);
      this.$refs.TechnologyStatusAuthenticateModal.title = "技术状态编辑";
      this.$refs.TechnologyStatusAuthenticateModal.disableSubmit = false;
    },
    handleOrderExe(record) {
      this.$refs.EquipmentCalibrationOrderExeDrawer.visible = true
      this.$refs.EquipmentCalibrationOrderExeDrawer.title = '检定工单执行'
      this.$refs.EquipmentCalibrationOrderExeDrawer.title = '鉴定工单执行'
      this.$refs.EquipmentCalibrationOrderExeDrawer.handleShow(record)
      if (record.status === '4') {
        this.$refs.EquipmentCalibrationOrderExeDrawer.buttonDistable = true//保存、暂存、报工
@@ -419,52 +495,52 @@
    },
    handleOrderIssue(record) {
      const that = this;
      const that = this
      requestPut(that.url.edit, { id: record.id, status: '2' }).then((res) => {
        if (res.success) {
          that.$message.success("工单下发成功!")
          that.$message.success('工单下发成功!')
          that.loadData()
        } else {
          that.$message.warning("工单下发失败!")
          that.$message.warning('工单下发失败!')
        }
      })
    },
    //撤回
    handleOrderReset(record, status) {
      const that = this;
      const that = this
      requestPut(that.url.edit, { id: record.id, status: status }).then((res) => {
        if (res.success) {
          that.$message.success("工单撤回成功!")
          that.$message.success('工单撤回成功!')
          that.loadData()
        } else {
          that.$message.warning("工单撤回失败!")
          that.$message.warning('工单撤回失败!')
        }
      })
    },
    searchQuery() {
      this.$refs.PrecisionParametersList.calibrationOrderId = '-1'
      this.$refs.EquipmentCalibrationOrderReportList.calibrationOrderId = '-1'
      this.loadData(1);
    },
    searchReset() {
      this.queryParam = {};
    onClearSelected() {
      this.selectedRowKeys = []
      this.selectionRows = []
      this.$refs.PrecisionParametersList.calibrationOrderId = '-1'
      this.$refs.EquipmentCalibrationOrderReportList.calibrationOrderId = '-1'
      this.loadData(1);
      this.mainId = ''
    },
    modalFormOk() {
      // 新增/修改 成功时,重载列表
      this.loadData()
      //清空列表选中
      this.onClearSelected()
      this.$refs.PrecisionParametersList.calibrationOrderId = '-1'
      this.$refs.EquipmentCalibrationOrderReportList.calibrationOrderId = '-1'
    clickThenSelect(record) {
      return {
        on: {
          click: () => {
            this.onSelectChange(record.id.split(','), [record])
          }
        }
      }
    },
    // 直接上传鉴定报告
    handleAddOrderReport: function (record) {
      this.$refs.equipmentCalibrationOrderReportModal.add(record.id)
      this.$refs.equipmentCalibrationOrderReportModal.title = '上传鉴定报告'
      this.$refs.equipmentCalibrationOrderReportModal.disableSubmit = false
    },
    handleFinal(record) {
      this.$refs.finalModal.edit(record)
    },
  }
}
</script>