City-Lifeline-Cockpit/DesignAssets/城市生命线/src/views/lanhu_desktop10/index.vue

<template>
  <div class="page flex-col">
    <div class="group_1 flex-col">
      <div class="box_1 flex-row">
        <div class="box_2 flex-col">
          <div class="box_3 flex-row">
            <span class="text_1">当前范围</span>
            <div class="text-wrapper_1 flex-col"><span class="text_2">全域</span></div>
            <div class="text-wrapper_2 flex-col"><span class="text_3">城区</span></div>
          </div>
          <img
            class="image_1"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNG056fa4240dc1537297e8c04b72872f6d.png"
          />
        </div>
        <div class="text-wrapper_3 flex-col"><span class="text_4">重点区域</span></div>
        <img
          class="thumbnail_1"
          referrerpolicy="no-referrer"
          src="./assets/img/FigmaDDSSlicePNG9bfbfe55125c2ee586365057c8a293e2.png"
        />
        <span class="text_5">行业</span>
        <div class="text-wrapper_4 flex-col"><span class="text_6">全部</span></div>
        <div class="text-wrapper_5 flex-col"><span class="text_7">燃气</span></div>
        <div class="text-wrapper_6 flex-col"><span class="text_8">供水</span></div>
        <div class="text-wrapper_7 flex-col"><span class="text_9">排水</span></div>
        <div class="text-wrapper_8 flex-col"><span class="text_10">井盖</span></div>
        <div class="text-wrapper_9">
          <span class="text_11">数据时间：</span>
          <span class="text_12">15:39:48</span>
        </div>
        <img
          class="thumbnail_2"
          referrerpolicy="no-referrer"
          src="./assets/img/FigmaDDSSlicePNG9bfbfe55125c2ee586365057c8a293e2.png"
        />
        <span class="text_13">自动刷新时间：&nbsp;5&nbsp;分钟</span>
        <div class="box_4 flex-row justify-between">
          <div class="section_1 flex-col"></div>
          <span class="text_14">刷新</span>
        </div>
      </div>
      <div class="box_5 flex-row justify-between">
        <div class="section_2 flex-col">
          <div class="box_6 flex-row justify-between">
            <div class="text-wrapper_10 flex-col">
              <span class="text_15">40</span>
              <span class="text_16">30</span>
              <span class="text_17">20</span>
              <span class="text_18">10</span>
            </div>
            <img
              class="image_2"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG1a344828dc64039146f5936593f5e722.png"
            />
          </div>
          <div class="text-wrapper_11 flex-row">
            <span class="text_19">0</span>
            <span class="text_20">03.10</span>
            <span class="text_21">03.11</span>
            <span class="text_22">03.12</span>
            <span class="text_23">03.13</span>
            <span class="text_24">03.14</span>
            <span class="text_25">03.15</span>
            <span class="text_26">03.16</span>
          </div>
          <div class="box_7 flex-row justify-between">
            <div class="image-text_1 flex-row justify-between">
              <img
                class="label_1"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNG98ba8252e20be28cf7f6d83f1c669df5.png"
              />
              <div class="text-group_1 flex-col justify-between">
                <span class="text_27">已处置&nbsp;/&nbsp;已解除</span>
                <span class="text_28">历史事件进入历史分析</span>
              </div>
            </div>
            <span class="text_29">31</span>
          </div>
          <div class="box_8 flex-row justify-between">
            <div class="image-text_2 flex-row justify-between">
              <img
                class="label_2"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNG07b1efa0c3e89c4a6372fb74c42a2a57.png"
              />
              <div class="text-group_2 flex-col justify-between">
                <span class="text_30">平均响应时长</span>
                <span class="text_31">由工单时间线计算</span>
              </div>
            </div>
            <span class="text_32">--</span>
          </div>
          <div class="image-wrapper_1 flex-row justify-between">
            <img
              class="thumbnail_3"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGb03333073dad61a4e94aee3f59a1a428.png"
            />
            <img
              class="thumbnail_4"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG04ec14a8255d70db86f5450bc838bfab.png"
            />
          </div>
          <div class="box_9 flex-row">
            <img
              class="thumbnail_5"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG699ba0d674678803adc4115ef0186b48.png"
            />
            <img
              class="image_3"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG19284058893c8260892b0189d48c9288.png"
            />
            <img
              class="thumbnail_6"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG94f6659826dfb81e6eec7914fe58bf06.png"
            />
            <div class="box_10 flex-row">
              <img
                class="thumbnail_7"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNGdc71d348e99634f18683d9c731e88f44.png"
              />
              <span class="text_33">历史分析</span>
              <span class="text_34">已处置&nbsp;/&nbsp;已解除事件</span>
            </div>
          </div>
        </div>
        <div class="section_3 flex-col justify-end">
          <div class="group_2 flex-row">
            <div class="group_3 flex-row">
              <div class="image-text_3 flex-row justify-between">
                <img
                  class="thumbnail_8"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNG41088933ee3045a4d35eaec6ce940d58.png"
                />
                <span class="text-group_3">燃气</span>
              </div>
            </div>
            <div class="group_4 flex-row">
              <div class="image-text_4 flex-row justify-between">
                <img
                  class="thumbnail_9"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNGf827547c245e44d69325c13ff6cb357e.png"
                />
                <span class="text-group_4">供水</span>
              </div>
            </div>
            <div class="group_5 flex-row">
              <div class="image-text_5 flex-row justify-between">
                <img
                  class="thumbnail_10"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNGed023f81d1834069dd850c3dcb71f65f.png"
                />
                <span class="text-group_5">排水</span>
              </div>
            </div>
            <div class="group_6 flex-row">
              <div class="image-text_6 flex-row justify-between">
                <img
                  class="thumbnail_11"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNG93e81d90e4c421f9e289ffdb0e59759f.png"
                />
                <span class="text-group_6">井盖</span>
              </div>
            </div>
          </div>
          <div class="group_7 flex-row justify-between">
            <div class="image-text_7 flex-row justify-between">
              <img
                class="thumbnail_12"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNG7a2a5f3c36863597ff7802c267feff3c.png"
              />
              <div class="text-group_7 flex-col justify-between">
                <span class="text_35">参数达到报警阈值</span>
                <span class="text_36">事件类型：报警</span>
              </div>
            </div>
            <span class="text_37">08</span>
          </div>
          <div class="group_8 flex-row justify-between">
            <div class="image-text_8 flex-row justify-between">
              <img
                class="thumbnail_13"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNGb58aa1cb4097706018cd29bfa2f5d150.png"
              />
              <div class="text-group_8 flex-col justify-between">
                <span class="text_38">参数达到预警阈值</span>
                <span class="text_39">事件类型：预警</span>
              </div>
            </div>
            <span class="text_40">14</span>
          </div>
          <div class="group_9 flex-row justify-between">
            <div class="image-text_9 flex-row justify-between">
              <img
                class="thumbnail_14"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNG30eb52de717d65f698d975a20ce3f9ce.png"
              />
              <div class="text-group_9 flex-col justify-between">
                <span class="text_41">事件来源设备</span>
                <span class="text_42">位置由设备档案坐标提供</span>
              </div>
            </div>
            <span class="text_43">22</span>
          </div>
          <div class="group_10 flex-row">
            <img
              class="thumbnail_15"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGb03333073dad61a4e94aee3f59a1a428.png"
            />
            <span class="text_44">不判断预警真伪或误报，历史状态以后端事件工单结果为准。</span>
            <img
              class="thumbnail_16"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG04ec14a8255d70db86f5450bc838bfab.png"
            />
          </div>
          <div class="group_11 flex-row">
            <img
              class="thumbnail_17"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG699ba0d674678803adc4115ef0186b48.png"
            />
            <img
              class="image_4"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG19284058893c8260892b0189d48c9288.png"
            />
            <img
              class="thumbnail_18"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG94f6659826dfb81e6eec7914fe58bf06.png"
            />
            <div class="group_12 flex-row">
              <img
                class="thumbnail_19"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNGdc71d348e99634f18683d9c731e88f44.png"
              />
              <span class="text_45">预警分析</span>
              <span class="text_46">类型与成因分布</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box_11 flex-col">
        <div class="box_12 flex-row">
          <img
            class="thumbnail_20"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNG699ba0d674678803adc4115ef0186b48.png"
          />
          <img
            class="image_5"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNG19284058893c8260892b0189d48c9288.png"
          />
          <img
            class="thumbnail_21"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNG94f6659826dfb81e6eec7914fe58bf06.png"
          />
          <div class="group_13 flex-row">
            <img
              class="thumbnail_22"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGdc71d348e99634f18683d9c731e88f44.png"
            />
            <span class="text_47">当前预警</span>
            <span class="text_48">当前事件与设备定位</span>
          </div>
        </div>
        <div class="box_13 flex-row">
          <div class="text-wrapper_12 flex-col"><span class="text_49">预警</span></div>
          <div class="text-wrapper_13 flex-col"><span class="text_50">报警</span></div>
          <div class="text-wrapper_14 flex-col"><span class="text_51">刷新</span></div>
        </div>
        <div class="box_14 flex-row">
          <div class="group_14 flex-col">
            <span class="text_52">当前预警</span>
            <div class="text-group_10 flex-col justify-between">
              <span class="text_53">14</span>
              <span class="text_54">未关闭事件</span>
            </div>
          </div>
          <div class="group_15 flex-col">
            <span class="text_55">今日新增</span>
            <div class="text-group_11 flex-col justify-between">
              <span class="text_56">04</span>
              <span class="text_57">按设备编码关联</span>
            </div>
          </div>
          <div class="group_16 flex-col">
            <span class="text_58">处置效率</span>
            <div class="text-group_12 flex-col justify-between">
              <span class="text_59">82%</span>
              <span class="text_60">只读统计</span>
            </div>
          </div>
        </div>
        <div class="box_15 flex-row">
          <div class="image-text_10 flex-row justify-between">
            <img
              class="thumbnail_23"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG36b7cb8230555f88248cef034820e3b4.png"
            />
            <div class="text-group_13 flex-col justify-between">
              <span class="text_61">供水水位监测点&nbsp;01</span>
              <span class="text_62">预警&nbsp;·&nbsp;WARN-WATER-LEVEL</span>
            </div>
          </div>
          <span class="text_63">处置中</span>
        </div>
        <div class="box_16 flex-row">
          <img
            class="thumbnail_24"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNG8d03bc198fb2d48ab09c1989689257c8.png"
          />
          <div class="text-wrapper_15 flex-col justify-between">
            <span class="text_64">污水环境监测点&nbsp;03</span>
            <span class="text_65">预警&nbsp;·&nbsp;WARN-COD-003</span>
          </div>
          <span class="text_66">已发布</span>
        </div>
        <div class="image-wrapper_2 flex-row justify-between">
          <img
            class="thumbnail_25"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNGb03333073dad61a4e94aee3f59a1a428.png"
          />
          <img
            class="thumbnail_26"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNG04ec14a8255d70db86f5450bc838bfab.png"
          />
        </div>
        <div class="box_17 flex-row">
          <div class="image-text_11 flex-row justify-between">
            <img
              class="thumbnail_27"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG02b78309055c82908976376de6774601.png"
            />
            <div class="text-group_14 flex-col justify-between">
              <span class="text_67">雨水管线液位点&nbsp;08</span>
              <span class="text_68">预警&nbsp;·&nbsp;WARN-RAIN-008</span>
            </div>
          </div>
          <span class="text_69">已处置</span>
        </div>
      </div>
      <div class="box_18 flex-col justify-end">
        <div class="group_17 flex-row">
          <div class="block_1 flex-row">
            <img
              class="thumbnail_28"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG699ba0d674678803adc4115ef0186b48.png"
            />
            <img
              class="image_6"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG19284058893c8260892b0189d48c9288.png"
            />
            <img
              class="thumbnail_29"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG94f6659826dfb81e6eec7914fe58bf06.png"
            />
            <div class="group_18 flex-row">
              <img
                class="thumbnail_30"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNGdc71d348e99634f18683d9c731e88f44.png"
              />
              <span class="text_70">预警效率</span>
              <span class="text_71">处置率与工单九态</span>
            </div>
          </div>
          <div class="image-text_12 flex-col justify-between">
            <div class="group_19 flex-row">
              <div class="text-group_15 flex-col justify-between">
                <span class="text_72">82%</span>
                <span class="text_73">已关闭&nbsp;/&nbsp;总工单</span>
              </div>
              <div class="text-group_16 flex-col justify-between">
                <span class="text_72">82%</span>
                <span class="text_73">已关闭&nbsp;/&nbsp;总工单</span>
              </div>
            </div>
            <span class="text-group_17">工单九态完整展示</span>
          </div>
          <div class="block_2 flex-col">
            <span class="text_74">平均响应</span>
            <div class="text-group_18 flex-col justify-between">
              <span class="text_75">--</span>
              <span class="text_76">待接单&nbsp;0&nbsp;返回</span>
            </div>
          </div>
          <div class="block_3 flex-col">
            <span class="text_77">平均关闭</span>
            <div class="text-group_19 flex-col justify-between">
              <span class="text_78">--</span>
              <span class="text_79">待接单&nbsp;0&nbsp;返回</span>
            </div>
          </div>
        </div>
        <div class="group_20 flex-row">
          <div class="block_4 flex-row">
            <div class="text-group_20 flex-col justify-between">
              <span class="text_80">2</span>
              <span class="text_81">待派单</span>
            </div>
          </div>
          <div class="block_5 flex-row">
            <div class="text-group_21 flex-col justify-between">
              <span class="text_82">3</span>
              <span class="text_83">待接单</span>
            </div>
          </div>
          <div class="block_6 flex-row">
            <div class="text-group_22 flex-col justify-between">
              <span class="text_84">1</span>
              <span class="text_85">已接单</span>
            </div>
          </div>
        </div>
        <div class="group_21 flex-row">
          <div class="section_4 flex-row">
            <div class="text-group_23 flex-col justify-between">
              <span class="text_86">2</span>
              <span class="text_87">待验收</span>
            </div>
          </div>
          <div class="section_5 flex-row">
            <div class="text-group_24 flex-col justify-between">
              <span class="text_88">31</span>
              <span class="text_89">已处置</span>
            </div>
          </div>
          <div class="section_6 flex-row">
            <div class="text-group_25 flex-col justify-between">
              <span class="text_90">5</span>
              <span class="text_91">处理中</span>
            </div>
          </div>
        </div>
        <div class="group_22 flex-row justify-between">
          <img
            class="thumbnail_31"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNGb03333073dad61a4e94aee3f59a1a428.png"
          />
          <div class="block_7 flex-row">
            <div class="text-group_26 flex-col justify-between">
              <span class="text_92">1</span>
              <span class="text_93">延期审核</span>
            </div>
          </div>
          <img
            class="thumbnail_32"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNG04ec14a8255d70db86f5450bc838bfab.png"
          />
        </div>
        <div class="group_23 flex-row">
          <div class="text-group_27 flex-col justify-between">
            <span class="text_94">1</span>
            <span class="text_95">已驳回</span>
          </div>
        </div>
        <div class="group_24 flex-row">
          <div class="text-group_28 flex-col justify-between">
            <span class="text_96">2</span>
            <span class="text_97">已逾期</span>
          </div>
        </div>
      </div>
      <div class="box_19 flex-col justify-end">
        <div class="box_20 flex-col">
          <div class="box_21 flex-row justify-between">
            <img
              class="thumbnail_33"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGdc71d348e99634f18683d9c731e88f44.png"
            />
            <span class="text_98">中央&nbsp;“一张图”</span>
          </div>
          <span class="text_99">
            预警处置&nbsp;/&nbsp;当前预警&nbsp;·&nbsp;重点区域&nbsp;·&nbsp;排水&nbsp;·&nbsp;设备与管线运行态势
          </span>
          <div class="box_22 flex-row">
            <div class="text-wrapper_16 flex-col"><span class="text_100">管线图层</span></div>
            <div class="text-wrapper_17 flex-col"><span class="text_101">事件定位</span></div>
            <div class="text-wrapper_18 flex-col"><span class="text_102">应急资源</span></div>
          </div>
        </div>
        <div class="box_23 flex-col"></div>
        <div class="box_24 flex-col">
          <div class="box_25 flex-row">
            <span class="text_103">燃气管线压力点&nbsp;07</span>
            <div class="group_25 flex-row">
              <div class="image-text_13 flex-row justify-between">
                <img
                  class="thumbnail_34"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNG29fe339763c3ddbbd60f25cfe7c32c4e.png"
                />
                <span class="text-group_29">在线</span>
              </div>
            </div>
            <img
              class="label_3"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGe1cfe70b02cb9446359e70b26dc3d850.png"
            />
          </div>
          <span class="paragraph_1">
            类型：
            <br />
            所属管网/行业：
            <br />
            状态原因：
            <br />
            设备总数：
          </span>
          <div class="box_26 flex-row justify-between">
            <div class="block_8 flex-col">
              <div class="box_27 flex-row justify-between">
                <div class="image-wrapper_3 flex-col">
                  <img
                    class="thumbnail_35"
                    referrerpolicy="no-referrer"
                    src="./assets/img/FigmaDDSSlicePNGca791a72356680b80ee986535430e0ba.png"
                  />
                </div>
                <div class="text-group_30 flex-col justify-between">
                  <span class="text_104">定位</span>
                  <span class="text_105">滨海大道与科技二路交叉口向东100米主管道</span>
                </div>
              </div>
              <div class="image-wrapper_4 flex-row">
                <img
                  class="image_7"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNG9e8b3ca554a80b361e9eee02543be6bb.png"
                />
              </div>
            </div>
            <div class="block_9 flex-col">
              <div class="block_10 flex-row justify-between">
                <div class="image-text_14 flex-col justify-between">
                  <img
                    class="thumbnail_36"
                    referrerpolicy="no-referrer"
                    src="./assets/img/FigmaDDSSlicePNG4baa51d120d85727744eae8c709742f3.png"
                  />
                  <span class="text-group_31">&nbsp;WGS84</span>
                </div>
                <div class="image-wrapper_5 flex-col">
                  <img
                    class="thumbnail_37"
                    referrerpolicy="no-referrer"
                    src="./assets/img/FigmaDDSSlicePNG5655c595157249fd73ccb5c607a2fa39.png"
                  />
                </div>
              </div>
              <div class="block_11 flex-row justify-between">
                <div class="box_28 flex-row">
                  <div class="text-group_32 flex-col justify-between">
                    <span class="text_106">LON</span>
                    <span class="text_107">121.487899</span>
                  </div>
                </div>
                <div class="box_29 flex-row">
                  <div class="text-group_33 flex-col justify-between">
                    <span class="text_108">LAT</span>
                    <span class="text_109">31.249162</span>
                  </div>
                </div>
              </div>
              <div class="image-wrapper_6 flex-row">
                <img
                  class="image_8"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNG9e8b3ca554a80b361e9eee02543be6bb.png"
                />
              </div>
            </div>
          </div>
          <div class="box_30 flex-col">
            <div class="block_12 flex-row">
              <div class="image-wrapper_7 flex-col">
                <img
                  class="thumbnail_38"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNG10c471d2af72a494e1bb5d2cd720df43.png"
                />
              </div>
              <div class="box_31 flex-col justify-between">
                <span class="text_110">实时态势</span>
                <div class="text-wrapper_19 flex-row justify-between">
                  <span class="text_111">报警</span>
                  <span class="text_112">0.68&nbsp;/&nbsp;0.40&nbsp;MPa</span>
                </div>
              </div>
              <span class="text_113">1级</span>
            </div>
            <div class="image-wrapper_8 flex-row">
              <img
                class="image_9"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNGa7f59461590d71df83695804b4e088d7.png"
              />
            </div>
          </div>
          <div class="box_32 flex-row justify-between">
            <div class="text-wrapper_20 flex-col"><span class="text_114">待接单</span></div>
            <div class="image-text_15 flex-row justify-between">
              <img
                class="thumbnail_39"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNGa73770a13ab1c64436cc0375b4a4f7ba.png"
              />
              <span class="text-group_34">更新:&nbsp;2026-09-23&nbsp;14:23:01</span>
            </div>
          </div>
          <span class="text_115">ALARM-GAS-PRESSURE</span>
        </div>
        <div class="box_33 flex-col">
          <div class="group_26 flex-row">
            <div class="image-wrapper_9 flex-col">
              <img
                class="thumbnail_40"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNG699ba0d674678803adc4115ef0186b48.png"
              />
            </div>
            <img
              class="image_10"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG19284058893c8260892b0189d48c9288.png"
            />
            <img
              class="thumbnail_41"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG94f6659826dfb81e6eec7914fe58bf06.png"
            />
          </div>
          <div class="group_27 flex-row justify-between">
            <div class="section_7 flex-col">
              <div class="group_28 flex-row">
                <img
                  class="image_11"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNGd282b60e742377ed43701fe6be8d6f49.png"
                />
                <div class="box_34 flex-col">
                  <div class="text-group_35 flex-col justify-between">
                    <span class="text_116">设备名称</span>
                    <span class="text_117">SEN-GAS-01</span>
                  </div>
                  <div class="text-wrapper_21 flex-col"><span class="text_118">设备类型：</span></div>
                  <div class="image-text_16 flex-row justify-between">
                    <img
                      class="thumbnail_42"
                      referrerpolicy="no-referrer"
                      src="./assets/img/FigmaDDSSlicePNG34cbea6c55d138a654c6d36105998dec.png"
                    />
                    <span class="text-group_36">当前指标</span>
                  </div>
                </div>
                <div class="box_35 flex-col justify-between">
                  <div class="text-wrapper_22 flex-col"><span class="text_119">在线</span></div>
                  <div class="text-wrapper_23 flex-col"><span class="text_120">待接单</span></div>
                </div>
              </div>
              <div class="group_29 flex-row">
                <div class="image-text_17 flex-row justify-between">
                  <img
                    class="thumbnail_43"
                    referrerpolicy="no-referrer"
                    src="./assets/img/FigmaDDSSlicePNGa73770a13ab1c64436cc0375b4a4f7ba.png"
                  />
                  <span class="text-group_37">14:23:00</span>
                </div>
                <span class="text_121">正常</span>
                <span class="text_122">新鲜</span>
              </div>
            </div>
            <div class="section_8 flex-col">
              <div class="group_30 flex-row">
                <img
                  class="image_12"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNGd282b60e742377ed43701fe6be8d6f49.png"
                />
                <div class="section_9 flex-col">
                  <div class="text-group_38 flex-col justify-between">
                    <span class="text_123">设备名称</span>
                    <span class="text_124">SEN-GAS-01</span>
                  </div>
                  <div class="text-wrapper_24 flex-col"><span class="text_125">设备类型：</span></div>
                  <div class="image-text_18 flex-row justify-between">
                    <img
                      class="thumbnail_44"
                      referrerpolicy="no-referrer"
                      src="./assets/img/FigmaDDSSlicePNG34cbea6c55d138a654c6d36105998dec.png"
                    />
                    <span class="text-group_39">当前指标</span>
                  </div>
                </div>
                <div class="section_10 flex-col justify-between">
                  <div class="text-wrapper_25 flex-col"><span class="text_126">在线</span></div>
                  <div class="text-wrapper_26 flex-col"><span class="text_127">待接单</span></div>
                </div>
              </div>
              <div class="group_31 flex-row">
                <div class="image-text_19 flex-row justify-between">
                  <img
                    class="thumbnail_45"
                    referrerpolicy="no-referrer"
                    src="./assets/img/FigmaDDSSlicePNGa73770a13ab1c64436cc0375b4a4f7ba.png"
                  />
                  <span class="text-group_40">14:23:00</span>
                </div>
                <span class="text_128">正常</span>
                <span class="text_129">新鲜</span>
              </div>
            </div>
            <div class="section_11 flex-col">
              <div class="group_32 flex-row">
                <img
                  class="image_13"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNGd282b60e742377ed43701fe6be8d6f49.png"
                />
                <div class="box_36 flex-col">
                  <div class="text-group_41 flex-col justify-between">
                    <span class="text_130">设备名称</span>
                    <span class="text_131">SEN-GAS-01</span>
                  </div>
                  <div class="text-wrapper_27 flex-col"><span class="text_132">设备类型：</span></div>
                  <div class="image-text_20 flex-row justify-between">
                    <img
                      class="thumbnail_46"
                      referrerpolicy="no-referrer"
                      src="./assets/img/FigmaDDSSlicePNG34cbea6c55d138a654c6d36105998dec.png"
                    />
                    <span class="text-group_42">当前指标</span>
                  </div>
                </div>
                <div class="box_37 flex-col justify-between">
                  <div class="text-wrapper_28 flex-col"><span class="text_133">在线</span></div>
                  <div class="text-wrapper_29 flex-col"><span class="text_134">待接单</span></div>
                </div>
              </div>
              <div class="group_33 flex-row">
                <div class="image-text_21 flex-row justify-between">
                  <img
                    class="thumbnail_47"
                    referrerpolicy="no-referrer"
                    src="./assets/img/FigmaDDSSlicePNGa73770a13ab1c64436cc0375b4a4f7ba.png"
                  />
                  <span class="text-group_43">14:23:00</span>
                </div>
                <span class="text_135">正常</span>
                <span class="text_136">新鲜</span>
              </div>
            </div>
          </div>
          <div class="group_34 flex-row">
            <img
              class="thumbnail_48"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGdc71d348e99634f18683d9c731e88f44.png"
            />
            <span class="text_137">关联设备（8）</span>
            <div class="text-wrapper_30 flex-col"><span class="text_138">‹</span></div>
            <div class="text-wrapper_31 flex-col"><span class="text_139">›</span></div>
          </div>
        </div>
        <div class="box_38 flex-col">
          <div class="group_35 flex-col"><div class="group_36 flex-col"></div></div>
        </div>
        <img
          class="label_4"
          referrerpolicy="no-referrer"
          src="./assets/img/FigmaDDSSlicePNG6d899d8e8f871cac56ae585b3045472e.png"
        />
      </div>
      <div class="box_39 flex-col">
        <div class="group_37 flex-row">
          <img
            class="image_14"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNGd282b60e742377ed43701fe6be8d6f49.png"
          />
          <div class="box_40 flex-col">
            <div class="text-group_44 flex-col justify-between">
              <span class="text_140">设备名称</span>
              <span class="text_141">SEN-GAS-01</span>
            </div>
            <div class="text-wrapper_32 flex-col"><span class="text_142">设备类型：</span></div>
            <div class="image-text_22 flex-row justify-between">
              <img
                class="thumbnail_49"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNG34cbea6c55d138a654c6d36105998dec.png"
              />
              <span class="text-group_45">当前指标</span>
            </div>
          </div>
          <div class="box_41 flex-col justify-between">
            <div class="text-wrapper_33 flex-col"><span class="text_143">在线</span></div>
            <div class="text-wrapper_34 flex-col"><span class="text_144">待接单</span></div>
          </div>
        </div>
        <div class="group_38 flex-row">
          <div class="image-text_23 flex-row justify-between">
            <img
              class="thumbnail_50"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGa73770a13ab1c64436cc0375b4a4f7ba.png"
            />
            <span class="text-group_46">14:23:00</span>
          </div>
          <span class="text_145">正常</span>
          <span class="text_146">新鲜</span>
        </div>
      </div>
    </div>
    <div class="group_39 flex-row">
      <span class="text_147">总体概览</span>
      <span class="text_148">基础设施</span>
      <span class="text_149">运行监测</span>
      <div class="box_42 flex-col">
        <div class="group_40 flex-col"></div>
        <span class="text_150">预警处置</span>
      </div>
      <div class="box_43 flex-col"></div>
      <span class="text_151">数据在线</span>
      <span class="text_152">2025.03.23&nbsp;&nbsp;15:23:16</span>
      <div class="box_44 flex-col"></div>
      <div class="box_45 flex-col"><div class="group_41 flex-col"></div></div>
      <div class="box_46 flex-col"></div>
      <img
        class="image_15"
        referrerpolicy="no-referrer"
        src="./assets/img/FigmaDDSSlicePNG073e0fae893835da9b19ab0775382b9c.png"
      />
    </div>
    <div class="group_42 flex-col">
      <div class="block_13 flex-col">
        <div class="box_47 flex-row">
          <span class="text_153">‹</span>
          <span class="text_154">返回设备列表</span>
          <span class="text_155">设备详情&nbsp;·&nbsp;管网激光甲烷仪</span>
          <img
            class="thumbnail_51"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNG343e41e366d85d67c4d6355715a26c3d.png"
          />
        </div>
        <div class="box_48 flex-row">
          <div class="box_49 flex-col">
            <span class="text_156">LATEST&nbsp;DEVICE&nbsp;IMAGE</span>
            <div class="box_50 flex-col">
              <img
                class="image_16"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNGe60c648cdf120f617823bd88fab0fa8c.png"
              />
              <span class="text_157">现场影像&nbsp;·&nbsp;2026-09-23</span>
            </div>
            <div class="box_51 flex-row justify-between">
              <div class="text-wrapper_35 flex-col"><span class="text_158">整体</span></div>
              <div class="text-wrapper_36 flex-col"><span class="text_159">细节</span></div>
            </div>
          </div>
          <div class="box_52 flex-col">
            <span class="text_160">SEN-GAS-01&nbsp;·&nbsp;UID&nbsp;/&nbsp;9F3A-7C21</span>
            <span class="text_161">管网激光甲烷仪</span>
            <span class="text_162">气体监测仪&nbsp;·&nbsp;T-PRS-8000</span>
            <div class="group_43 flex-row justify-between">
              <div class="image-text_24 flex-row justify-between">
                <img
                  class="thumbnail_52"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNG995892c7e656a565744d839fc046c21b.png"
                />
                <span class="text-group_47">在线</span>
              </div>
              <div class="text-wrapper_37 flex-col"><span class="text_163">数据新鲜度&nbsp;01s</span></div>
              <div class="text-wrapper_38 flex-col"><span class="text_164">更新&nbsp;14:18:30</span></div>
            </div>
            <div class="group_44 flex-row justify-between">
              <div class="box_53 flex-row">
                <div class="text-group_48 flex-col justify-between">
                  <span class="text_165">制造商</span>
                  <span class="text_166">华城智控设备有限公司</span>
                </div>
              </div>
              <div class="box_54 flex-row">
                <div class="text-group_49 flex-col justify-between">
                  <span class="text_167">资产价值</span>
                  <span class="text_168">¥&nbsp;28,600</span>
                </div>
              </div>
            </div>
          </div>
          <div class="box_55 flex-row">
            <div class="text-group_50 flex-col justify-between">
              <span class="text_169">预计寿命</span>
              <span class="text_170">10&nbsp;年</span>
            </div>
          </div>
        </div>
        <div class="box_56 flex-row justify-between">
          <div class="block_14 flex-col">
            <span class="text_171">设备档案</span>
            <div class="group_45 flex-row justify-between">
              <div class="box_57 flex-row">
                <div class="text-group_51 flex-col justify-between">
                  <span class="text_172">设备编码</span>
                  <span class="text_173">SEN-GAS-01</span>
                </div>
              </div>
              <div class="box_58 flex-row">
                <div class="text-group_52 flex-col justify-between">
                  <span class="text_174">设备名称</span>
                  <span class="text_175">管网激光甲烷仪</span>
                </div>
              </div>
            </div>
            <div class="group_46 flex-row justify-between">
              <div class="section_12 flex-row">
                <div class="text-group_53 flex-col justify-between">
                  <span class="text_176">设备型号</span>
                  <span class="text_177">T-PRS-8000</span>
                </div>
              </div>
              <div class="section_13 flex-row">
                <div class="text-group_54 flex-col justify-between">
                  <span class="text_178">规格参数</span>
                  <span class="text_179">0–1.6&nbsp;MPa&nbsp;·&nbsp;4–20mA</span>
                </div>
              </div>
            </div>
            <div class="group_47 flex-row justify-between">
              <div class="group_48 flex-row">
                <div class="text-group_55 flex-col justify-between">
                  <span class="text_180">设备类别</span>
                  <span class="text_181">气体监测仪</span>
                </div>
              </div>
              <div class="group_49 flex-row">
                <div class="text-group_56 flex-col justify-between">
                  <span class="text_182">equipment_type</span>
                  <span class="text_183">pressure_transmitter</span>
                </div>
              </div>
            </div>
            <div class="group_50 flex-row justify-between">
              <div class="group_51 flex-row">
                <div class="text-group_57 flex-col justify-between">
                  <span class="text_184">生产日期</span>
                  <span class="text_185">2024-04-18</span>
                </div>
              </div>
              <div class="group_52 flex-row">
                <div class="text-group_58 flex-col justify-between">
                  <span class="text_186">安装时间</span>
                  <span class="text_187">2024-05-09&nbsp;10:24</span>
                </div>
              </div>
            </div>
            <div class="group_53 flex-row justify-between">
              <div class="group_54 flex-row">
                <div class="text-group_59 flex-col justify-between">
                  <span class="text_188">经度&nbsp;/&nbsp;纬度</span>
                  <span class="text_189">121.487899&nbsp;/&nbsp;31.249162</span>
                </div>
              </div>
              <div class="group_55 flex-row">
                <div class="text-group_60 flex-col justify-between">
                  <span class="text_190">坐标校验</span>
                  <span class="text_191">RTK&nbsp;已校准&nbsp;·&nbsp;±2cm</span>
                </div>
              </div>
            </div>
            <div class="group_56 flex-row">
              <div class="text-group_61 flex-col justify-between">
                <span class="text_192">设备位置</span>
                <span class="text_193">高新园区江滨南路污水第二深度处理中心</span>
              </div>
            </div>
            <div class="group_57 flex-row justify-between">
              <div class="box_59 flex-row">
                <div class="text-group_62 flex-col justify-between">
                  <span class="text_194">维护人员</span>
                  <span class="text_195">李海峰&nbsp;·&nbsp;机电运维组</span>
                </div>
              </div>
              <div class="box_60 flex-row">
                <div class="text-group_63 flex-col justify-between">
                  <span class="text_196">联系方式</span>
                  <span class="text_197">138&nbsp;0216&nbsp;9074</span>
                </div>
              </div>
            </div>
            <div class="group_58 flex-row justify-between">
              <div class="group_59 flex-row">
                <div class="text-group_64 flex-col justify-between">
                  <span class="text_198">权属单位</span>
                  <span class="text_199">城市燃气集团&nbsp;·&nbsp;管网运行部</span>
                </div>
              </div>
              <div class="text-wrapper_39 flex-col">
                <span class="text_200">备注</span>
                <span class="text_201">一级管网重点设备，季检</span>
              </div>
            </div>
          </div>
          <div class="block_15 flex-col justify-between">
            <div class="box_61 flex-col">
              <div class="section_14 flex-row justify-between">
                <div class="text-group_65 flex-col justify-between">
                  <span class="text_202">当前监测数据</span>
                  <span class="text_203">CH₄&nbsp;0.02%&nbsp;LEL</span>
                </div>
                <div class="section_15 flex-col justify-between">
                  <div class="box_62 flex-row justify-between">
                    <img
                      class="thumbnail_53"
                      referrerpolicy="no-referrer"
                      src="./assets/img/FigmaDDSSlicePNG406f298adcc31ecd9a03c4cef311e8c5.png"
                    />
                    <span class="text_204">实时</span>
                  </div>
                  <span class="text_205">
                    工作温度&nbsp;24.6℃&nbsp;·&nbsp;电池&nbsp;86%&nbsp;·&nbsp;信号&nbsp;-62dBm
                  </span>
                </div>
              </div>
              <div class="section_16 flex-col">
                <div class="text-wrapper_40 flex-row justify-between">
                  <span class="text_206">指标历史趋势&nbsp;/&nbsp;24H</span>
                  <span class="text_207">峰值&nbsp;0.68&nbsp;MPa</span>
                </div>
                <img
                  class="image_17"
                  referrerpolicy="no-referrer"
                  src="./assets/img/FigmaDDSSlicePNG0e588f88eaeda05cc173aec6c41a093c.png"
                />
              </div>
            </div>
            <div class="box_63 flex-col">
              <span class="text_208">预警&nbsp;/&nbsp;报警事件</span>
              <div class="block_16 flex-row justify-between">
                <div class="image-text_25 flex-row justify-between">
                  <img
                    class="thumbnail_54"
                    referrerpolicy="no-referrer"
                    src="./assets/img/FigmaDDSSlicePNG8295ea8f6e01c101d3999cbefdf32f28.png"
                  />
                  <div class="text-group_66 flex-col justify-between">
                    <span class="text_209">瞬时压力超一级阈值</span>
                    <span class="text_210">0.68&nbsp;MPa&nbsp;&gt;&nbsp;0.40&nbsp;MPa&nbsp;·&nbsp;14:22:58</span>
                  </div>
                </div>
                <div class="text-wrapper_41 flex-col"><span class="text_211">报警</span></div>
              </div>
              <div class="block_17 flex-row justify-between">
                <div class="image-text_26 flex-row justify-between">
                  <img
                    class="thumbnail_55"
                    referrerpolicy="no-referrer"
                    src="./assets/img/FigmaDDSSlicePNGa8c0649b86f26131a689516aaea45c0e.png"
                  />
                  <div class="text-group_67 flex-col justify-between">
                    <span class="text_212">通信延迟短时波动</span>
                    <span class="text_213">数据延迟&nbsp;12s&nbsp;·&nbsp;13:51:10</span>
                  </div>
                </div>
                <div class="text-wrapper_42 flex-col"><span class="text_214">预警</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="box_64 flex-col">
          <div class="section_17 flex-row justify-between">
            <span class="text_215">工单状态</span>
            <div class="text-wrapper_43 flex-col"><span class="text_216">待派单</span></div>
          </div>
          <div class="image-wrapper_10 flex-col">
            <img
              class="thumbnail_56"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGcb020a91abd8343870f2186dc58525c5.png"
            />
            <img
              class="thumbnail_57"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGcb020a91abd8343870f2186dc58525c5.png"
            />
          </div>
          <div class="section_18 flex-row justify-between">
            <div class="text-group_68 flex-col justify-between">
              <span class="text_217">待派单</span>
              <span class="text_218">已完成</span>
            </div>
            <div class="text-group_69 flex-col justify-between">
              <span class="text_219">待接单</span>
              <span class="text_220">已完成</span>
            </div>
            <div class="text-group_70 flex-col justify-between">
              <span class="text_221">处理中</span>
              <span class="text_222">等待</span>
            </div>
            <div class="text-group_71 flex-col justify-between">
              <span class="text_223">待验收</span>
              <span class="text_224">等待</span>
            </div>
            <div class="text-group_72 flex-col justify-between">
              <span class="text_225">已结案</span>
              <span class="text_226">等待</span>
            </div>
          </div>
          <img
            class="thumbnail_58"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNGcb020a91abd8343870f2186dc58525c5.png"
          />
          <img
            class="thumbnail_59"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNG7ee380ee9db4cda4350313a9f4f299ae.png"
          />
          <img
            class="thumbnail_60"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNGcb020a91abd8343870f2186dc58525c5.png"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      constants: {}
    };
  },
  methods: {}
};
</script>
<style scoped lang="css" src="./assets/index.css" />