4.18更新v2.1.5

fei.wang

2025-04-18 11f6acee504c77a8919a4e0ddfe3e70a746e3522

 src/views/dpdv/map.vue

@@ -1,827 +1,1338 @@
<template>
            <div class="center">
                <div id="map" style="width:100%;height:100%;"></div>
                <!-- <Dialog v-model="DialogVisible" :DialogVisible="DialogVisible" :tagid="tagid"/> -->
                <el-dialog :modal="false" :visible.sync="centerdialogVisible" title="设备信息" width="60%" align-center
                    @close="handelClose" draggable>
                    <el-descriptions :column="2" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">
                                    <svg t="1725344883243" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="3262" width="16" height="16">
                                        <path
                                            d="M93.149 564.65h639.198l-293.404 293.4 73.35 73.351 419.147-419.149-419.149-419.143-73.35 73.351 293.404 293.401h-639.198l0.001 104.79zM93.149 564.65z"
                                            fill="#272636" p-id="3263"></path>
                                    </svg>
                                    <!-- <arrow-right-outlined /> -->
                                    东位移
                                </div>
                            </template>
                            {{ edm }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">
                                    <svg t="1671784088964" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="2978" style="margin-top: 3px"
                                        width="16" height="16">
                                        <path
                                            d="M719.8 115c-6.5 0-13 0.3-19.4 1-16.2 1.6-28.4 15.4-28.4 31.7 0 18.9 16.2 33.9 35 32 4-0.4 8.1-0.6 12.2-0.6 32.9-0.2 64.4 12.1 88.3 34.6 26.1 24.5 40.4 57.8 40.4 93.4 0 3.6-0.1 7.1-0.4 10.6-1.5 18.5 13.2 34.4 31.8 34.4h0.2c16.5 0 30.4-12.6 31.8-29 0.5-6.2 0.7-12.5 0.6-18.9-1.5-105.5-86.7-189.3-192.1-189.2z"
                                            p-id="2979"></path>
                                        <path
                                            d="M717 0c-5 0-9.9 0.1-14.8 0.3-16.9 0.9-30.2 14.9-30.2 31.9v0.3c0 18.2 15.3 32.6 33.5 31.8 3.8-0.2 7.6-0.3 11.5-0.3 32.8 0 64.7 6.4 94.6 19.1 28.9 12.2 54.9 29.8 77.3 52.1 22.3 22.3 39.9 48.3 52.1 77.3 12.7 29.9 19.1 61.7 19.1 94.6 0 3.8-0.1 7.6-0.3 11.4-0.8 18.3 13.6 33.6 31.9 33.6h0.2c17 0 31.1-13.3 31.9-30.3 0.2-4.9 0.3-9.8 0.3-14.7C1024 137.2 886.8 0 717 0zM293.5 368.9L249 413.5 93.4 257.9c-1.6-1.6-1.6-4.1 0-5.7l38.9-38.9c1.6-1.6 4.1-1.6 5.7 0l155.5 155.6m90.5 0L146.4 131.4c-6.2-6.2-16.4-6.2-22.6 0L11.4 243.8c-6.2 6.2-6.2 16.4 0 22.6L249 504l135-135.1zM814 889.4l-41.7 41.7c-1.6 1.6-4.1 1.6-5.7 0L611 775.5l44.5-44.5L814 889.4M655.6 640.5l-135.1 135 237.6 237.6c6.2 6.2 16.4 6.2 22.6 0l112.4-112.4c6.2-6.2 6.2-16.4 0-22.6L655.6 640.5zM780.4 244.9c-12.4-12.9-33.5-12.6-46.2 0.1l-89.3 89.3c-12.5 12.5-32.8 12.5-45.3 0l-33.9-33.9c-18.7-18.7-49.1-18.7-67.9 0L128.3 669.9c-62.5 62.5-62.5 163.8 0 226.3 31.2 31.2 72.2 46.9 113.1 46.9 40.9 0 81.9-15.6 113.1-46.9L724 526.7c18.7-18.7 18.7-49.1 0-67.9l-33.9-33.9c-12.5-12.5-12.5-32.8 0-45.3l89.8-89.8c12.5-12.4 12.6-32.3 0.5-44.9z m-471.1 606c-37.5 37.5-98.3 37.5-135.8 0-18.7-18.7-28.1-43.3-28.1-67.9s9.4-49.1 28.1-67.9l352.6-352.6c3.1-3.1 8.2-3.1 11.3 0L661.9 487c3.1 3.1 3.1 8.2 0 11.3L309.3 850.9z"
                                            p-id="2980"></path>
                                    </svg>
                                    卫星数量
                                </div>
                            </template>
                            {{ gpsnum }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">
                                    <svg t="1725345044683" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="5299" width="16" height="16">
                                        <path
                                            d="M512.00988746 141.21142578c10.45623779 0 19.24145531 3.50024414 26.37542748 10.71331811l259.5421145 259.55200196C805.03668189 418.58105492 808.63085938 427.33660865 808.63085938 437.84228516c0 10.60949731-3.53485132 19.46887183-10.56994606 26.46936011-7.02026391 7.00543237-15.88952661 10.60949731-26.50891137 10.60949731-10.44140625 0-19.22167969-3.60900903-26.35565185-10.71331811L549.09863305 267.79370094V845.7097168c0 10.19915748-3.62384057 18.94976782-10.89624071 26.16284179-7.23284888 7.31195068-15.97357177 10.91601563-26.2122798 10.91601563-10.23376465 0-18.959656-3.60900903-26.22216796-10.91601563-7.24273705-7.21307397-10.87646508-15.96862769-10.87646508-26.16284179V267.79370094l-196.10760522 196.41906761C271.65484619 471.31213355 262.87951684 474.92114258 252.41833496 474.92114258c-10.61938477 0-19.45898438-3.60900903-26.4990232-10.60949731C218.86444068 457.31115699 215.36914062 448.45178247 215.36914062 437.84228516c0-10.50567651 3.55462623-19.26123023 10.69354248-26.36553931l259.53717042-259.55200196C492.7288816 144.71166992 501.52398658 141.21142578 511.97033691 141.21142578h0.03955055z"
                                            p-id="5300"></path>
                                    </svg>
                                    北位移
                                </div>
                            </template>
                            {{ ndm }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">
                                    <svg t="1725345147550" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="6533" width="16" height="16">
                                        <path d="M0 0h1024v1024H0z" fill="#FFFFFF" opacity=".005" p-id="6534"></path>
                                        <path
                                            d="M743.509333 303.36a55.466667 55.466667 0 0 1 55.466667 55.466667v55.466666h27.818667a55.466667 55.466667 0 0 1 55.466666 55.466667v111.317333a55.466667 55.466667 0 0 1-55.466666 55.466667h-27.818667v55.466667a55.466667 55.466667 0 0 1-55.466667 55.466666h-584.533333a55.466667 55.466667 0 0 1-55.466667-55.466666V358.826667a55.466667 55.466667 0 0 1 55.466667-55.466667z m83.498667 278.314667v-111.317334h-83.498667V358.826667h-584.533333v333.952h584.533333v-111.317334z"
                                            p-id="6535"></path>
                                        <path
                                            d="M205.696 390.314667h350.336q15.232 0 15.232 20.864v229.589333q0 20.864-15.232 20.864H205.696q-15.232 0-15.232-20.864V411.178667q0-20.864 15.232-20.864z"
                                            p-id="6536"></path>
                                    </svg>
                                    设备电量
                                </div>
                            </template>
                            {{ power }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">
                                    <svg t="1725345066520" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="5457" width="16" height="16">
                                        <path
                                            d="M904 692c0 8.189-3.124 16.379-9.372 22.628-12.497 12.496-32.759 12.496-45.256 0L512 377.255 174.628 714.628c-12.497 12.496-32.758 12.496-45.255 0-12.497-12.498-12.497-32.758 0-45.256l360-360c12.497-12.496 32.758-12.496 45.255 0l360 360C900.876 675.621 904 683.811 904 692z"
                                            fill="" p-id="5458"></path>
                                    </svg>
                                    天位移
                                </div>
                            </template>
                            {{ hdm }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">
                                    <svg t="1725345253428" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="7693" width="16" height="16">
                                        <path
                                            d="M139.884 420.157a33.142 33.142 0 0 1-10.635-1.756 34.642 34.642 0 0 1-21.432-43.576C164.71 199.629 324.495 81.92 505.421 81.92c179.968 0 339.481 116.895 396.938 290.877a34.657 34.657 0 0 1-21.217 43.69 33.613 33.613 0 0 1-42.793-21.663c-48.185-145.92-181.98-243.948-332.928-243.948-151.752 0-285.773 98.719-333.486 245.642a33.859 33.859 0 0 1-32.051 23.64zM505.42 936.96c-185.61 0-346.624-121.667-400.67-302.756a34.606 34.606 0 0 1 22.46-43.008 33.674 33.674 0 0 1 42.148 22.938c45.328 151.859 180.378 253.89 336.062 253.89 155.008 0 293.652-105.938 337.147-257.623a33.684 33.684 0 0 1 41.907-23.408 34.601 34.601 0 0 1 22.922 42.767c-51.845 180.874-217.17 307.2-401.976 307.2z m-44.826-250.568a33.556 33.556 0 0 1-31.744-22.738l-67.584-190.52-48.046 57.969a33.48 33.48 0 0 1-25.784 12.21H59.392a34.483 34.483 0 0 1 0-68.955h212.357l75.612-91.223a33.413 33.413 0 0 1 31.744-11.669 33.976 33.976 0 0 1 25.795 22.2l64.799 182.677 60.6-91.924a33.485 33.485 0 0 1 31.744-15.023 33.905 33.905 0 0 1 27.75 21.766l16.19 42.465 34.17-51.118a33.587 33.587 0 0 1 27.9-15.043h286.315a34.483 34.483 0 0 1 0 68.956H685.875l-60.242 90.112a33.475 33.475 0 0 1-59.392-6.927l-16.005-41.984-61.63 93.537a33.577 33.577 0 0 1-28.01 15.232z"
                                            p-id="7694"></path>
                                    </svg>
                                    设备状态
                                </div>
                            </template>
                            {{ gpsstate }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-dialog>
  <div class="center">
    <div id="map" style="width: 100%; height: 100%"></div>
    <!-- <Dialog v-model="DialogVisible" :DialogVisible="DialogVisible" :tagid="tagid"/> -->
    <el-dialog
      :modal="false"
      :visible.sync="centerdialogVisible"
      title="设备信息"
      width="60%"
      align-center
      @close="handelClose"
      draggable
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <div class="cell-item">
              <svg
                t="1725344883243"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3262"
                width="16"
                height="16"
              >
                <path
                  d="M93.149 564.65h639.198l-293.404 293.4 73.35 73.351 419.147-419.149-419.149-419.143-73.35 73.351 293.404 293.401h-639.198l0.001 104.79zM93.149 564.65z"
                  fill="#272636"
                  p-id="3263"
                ></path>
              </svg>
              <!-- <arrow-right-outlined /> -->
              东位移
            </div>
          </template>
          {{ edm }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div class="cell-item">
              <svg
                t="1671784088964"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2978"
                style="margin-top: 3px"
                width="16"
                height="16"
              >
                <path
                  d="M719.8 115c-6.5 0-13 0.3-19.4 1-16.2 1.6-28.4 15.4-28.4 31.7 0 18.9 16.2 33.9 35 32 4-0.4 8.1-0.6 12.2-0.6 32.9-0.2 64.4 12.1 88.3 34.6 26.1 24.5 40.4 57.8 40.4 93.4 0 3.6-0.1 7.1-0.4 10.6-1.5 18.5 13.2 34.4 31.8 34.4h0.2c16.5 0 30.4-12.6 31.8-29 0.5-6.2 0.7-12.5 0.6-18.9-1.5-105.5-86.7-189.3-192.1-189.2z"
                  p-id="2979"
                ></path>
                <path
                  d="M717 0c-5 0-9.9 0.1-14.8 0.3-16.9 0.9-30.2 14.9-30.2 31.9v0.3c0 18.2 15.3 32.6 33.5 31.8 3.8-0.2 7.6-0.3 11.5-0.3 32.8 0 64.7 6.4 94.6 19.1 28.9 12.2 54.9 29.8 77.3 52.1 22.3 22.3 39.9 48.3 52.1 77.3 12.7 29.9 19.1 61.7 19.1 94.6 0 3.8-0.1 7.6-0.3 11.4-0.8 18.3 13.6 33.6 31.9 33.6h0.2c17 0 31.1-13.3 31.9-30.3 0.2-4.9 0.3-9.8 0.3-14.7C1024 137.2 886.8 0 717 0zM293.5 368.9L249 413.5 93.4 257.9c-1.6-1.6-1.6-4.1 0-5.7l38.9-38.9c1.6-1.6 4.1-1.6 5.7 0l155.5 155.6m90.5 0L146.4 131.4c-6.2-6.2-16.4-6.2-22.6 0L11.4 243.8c-6.2 6.2-6.2 16.4 0 22.6L249 504l135-135.1zM814 889.4l-41.7 41.7c-1.6 1.6-4.1 1.6-5.7 0L611 775.5l44.5-44.5L814 889.4M655.6 640.5l-135.1 135 237.6 237.6c6.2 6.2 16.4 6.2 22.6 0l112.4-112.4c6.2-6.2 6.2-16.4 0-22.6L655.6 640.5zM780.4 244.9c-12.4-12.9-33.5-12.6-46.2 0.1l-89.3 89.3c-12.5 12.5-32.8 12.5-45.3 0l-33.9-33.9c-18.7-18.7-49.1-18.7-67.9 0L128.3 669.9c-62.5 62.5-62.5 163.8 0 226.3 31.2 31.2 72.2 46.9 113.1 46.9 40.9 0 81.9-15.6 113.1-46.9L724 526.7c18.7-18.7 18.7-49.1 0-67.9l-33.9-33.9c-12.5-12.5-12.5-32.8 0-45.3l89.8-89.8c12.5-12.4 12.6-32.3 0.5-44.9z m-471.1 606c-37.5 37.5-98.3 37.5-135.8 0-18.7-18.7-28.1-43.3-28.1-67.9s9.4-49.1 28.1-67.9l352.6-352.6c3.1-3.1 8.2-3.1 11.3 0L661.9 487c3.1 3.1 3.1 8.2 0 11.3L309.3 850.9z"
                  p-id="2980"
                ></path>
              </svg>
              卫星数量
            </div>
          </template>
          {{ gpsnum }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div class="cell-item">
              <svg
                t="1725345044683"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5299"
                width="16"
                height="16"
              >
                <path
                  d="M512.00988746 141.21142578c10.45623779 0 19.24145531 3.50024414 26.37542748 10.71331811l259.5421145 259.55200196C805.03668189 418.58105492 808.63085938 427.33660865 808.63085938 437.84228516c0 10.60949731-3.53485132 19.46887183-10.56994606 26.46936011-7.02026391 7.00543237-15.88952661 10.60949731-26.50891137 10.60949731-10.44140625 0-19.22167969-3.60900903-26.35565185-10.71331811L549.09863305 267.79370094V845.7097168c0 10.19915748-3.62384057 18.94976782-10.89624071 26.16284179-7.23284888 7.31195068-15.97357177 10.91601563-26.2122798 10.91601563-10.23376465 0-18.959656-3.60900903-26.22216796-10.91601563-7.24273705-7.21307397-10.87646508-15.96862769-10.87646508-26.16284179V267.79370094l-196.10760522 196.41906761C271.65484619 471.31213355 262.87951684 474.92114258 252.41833496 474.92114258c-10.61938477 0-19.45898438-3.60900903-26.4990232-10.60949731C218.86444068 457.31115699 215.36914062 448.45178247 215.36914062 437.84228516c0-10.50567651 3.55462623-19.26123023 10.69354248-26.36553931l259.53717042-259.55200196C492.7288816 144.71166992 501.52398658 141.21142578 511.97033691 141.21142578h0.03955055z"
                  p-id="5300"
                ></path>
              </svg>
              北位移
            </div>
          </template>
          {{ ndm }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div class="cell-item">
              <svg
                t="1725345147550"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6533"
                width="16"
                height="16"
              >
                <path
                  d="M0 0h1024v1024H0z"
                  fill="#FFFFFF"
                  opacity=".005"
                  p-id="6534"
                ></path>
                <path
                  d="M743.509333 303.36a55.466667 55.466667 0 0 1 55.466667 55.466667v55.466666h27.818667a55.466667 55.466667 0 0 1 55.466666 55.466667v111.317333a55.466667 55.466667 0 0 1-55.466666 55.466667h-27.818667v55.466667a55.466667 55.466667 0 0 1-55.466667 55.466666h-584.533333a55.466667 55.466667 0 0 1-55.466667-55.466666V358.826667a55.466667 55.466667 0 0 1 55.466667-55.466667z m83.498667 278.314667v-111.317334h-83.498667V358.826667h-584.533333v333.952h584.533333v-111.317334z"
                  p-id="6535"
                ></path>
                <path
                  d="M205.696 390.314667h350.336q15.232 0 15.232 20.864v229.589333q0 20.864-15.232 20.864H205.696q-15.232 0-15.232-20.864V411.178667q0-20.864 15.232-20.864z"
                  p-id="6536"
                ></path>
              </svg>
              设备电量
            </div>
          </template>
          {{ power }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div class="cell-item">
              <svg
                t="1725345066520"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5457"
                width="16"
                height="16"
              >
                <path
                  d="M904 692c0 8.189-3.124 16.379-9.372 22.628-12.497 12.496-32.759 12.496-45.256 0L512 377.255 174.628 714.628c-12.497 12.496-32.758 12.496-45.255 0-12.497-12.498-12.497-32.758 0-45.256l360-360c12.497-12.496 32.758-12.496 45.255 0l360 360C900.876 675.621 904 683.811 904 692z"
                  fill=""
                  p-id="5458"
                ></path>
              </svg>
              天位移
            </div>
          </template>
          {{ hdm }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div class="cell-item">
              <svg
                t="1725345253428"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7693"
                width="16"
                height="16"
              >
                <path
                  d="M139.884 420.157a33.142 33.142 0 0 1-10.635-1.756 34.642 34.642 0 0 1-21.432-43.576C164.71 199.629 324.495 81.92 505.421 81.92c179.968 0 339.481 116.895 396.938 290.877a34.657 34.657 0 0 1-21.217 43.69 33.613 33.613 0 0 1-42.793-21.663c-48.185-145.92-181.98-243.948-332.928-243.948-151.752 0-285.773 98.719-333.486 245.642a33.859 33.859 0 0 1-32.051 23.64zM505.42 936.96c-185.61 0-346.624-121.667-400.67-302.756a34.606 34.606 0 0 1 22.46-43.008 33.674 33.674 0 0 1 42.148 22.938c45.328 151.859 180.378 253.89 336.062 253.89 155.008 0 293.652-105.938 337.147-257.623a33.684 33.684 0 0 1 41.907-23.408 34.601 34.601 0 0 1 22.922 42.767c-51.845 180.874-217.17 307.2-401.976 307.2z m-44.826-250.568a33.556 33.556 0 0 1-31.744-22.738l-67.584-190.52-48.046 57.969a33.48 33.48 0 0 1-25.784 12.21H59.392a34.483 34.483 0 0 1 0-68.955h212.357l75.612-91.223a33.413 33.413 0 0 1 31.744-11.669 33.976 33.976 0 0 1 25.795 22.2l64.799 182.677 60.6-91.924a33.485 33.485 0 0 1 31.744-15.023 33.905 33.905 0 0 1 27.75 21.766l16.19 42.465 34.17-51.118a33.587 33.587 0 0 1 27.9-15.043h286.315a34.483 34.483 0 0 1 0 68.956H685.875l-60.242 90.112a33.475 33.475 0 0 1-59.392-6.927l-16.005-41.984-61.63 93.537a33.577 33.577 0 0 1-28.01 15.232z"
                  p-id="7694"
                ></path>
              </svg>
              设备状态
            </div>
          </template>
          {{ gpsstate }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog
      :modal="false"
      :visible.sync="centerdialogVisiblegb"
      title="设备信息"
      width="60%"
      align-center
      @close="handelClose"
      draggable
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <div class="cell-item">
              <svg
                t="1744275935891"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2364"
                width="16"
                height="16"
              >
                <path
                  d="M921.088 102.4c-84.992-84.992-383.488 2.048-383.488 2.048l-3.072 3.072-464.896 464.896c-7.168 7.168-7.168 19.456 0 26.624l354.304 354.304c7.168 7.168 19.456 7.168 26.624 0l464.896-464.896 3.072-3.072c0 0.512 87.04-298.496 2.56-382.976z m-118.784 280.576c-45.056 45.056-117.76 45.056-162.304 0-45.056-45.056-45.056-117.76 0-162.304 45.056-45.056 117.76-45.056 162.304 0 45.056 44.544 45.056 117.248 0 162.304z"
                  fill="#333333"
                  p-id="2365"
                ></path>
              </svg>
              <!-- <arrow-right-outlined /> -->
              编号
            </div>
          </template>
          {{ tagid }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div class="cell-item">
              <svg
                t="1744276028377"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3386"
                width="16"
                height="16"
              >
                <path
                  d="M478.144 947.328c-120.448 0-176.96 0.128-297.408-0.064-104.384-0.128-146.432-42.56-146.496-147.264 0-195.008-0.128-389.952 0-584.96 0.064-92.224 44.48-137.792 137.152-137.984 247.04-0.576 430.144-0.64 677.184 0.064 95.104 0.256 140.992 47.36 141.056 141.696 0.128 196.032 0.128 392 0 588.032-0.064 95.872-44.16 140.096-140.992 140.416-123.456 0.384-246.976 0.064-370.496 0.064z m375.296-51.52c62.016-0.128 84.224-22.72 84.288-85.248v-596.992c0-62.528-22.208-85.312-84.16-85.312-248.96-0.128-433.984-0.128-682.944 0-62.016 0.064-84.224 22.72-84.288 85.248v596.992c0 62.592 22.208 85.248 84.16 85.312 123.456 0.192 182.976 0.064 306.432 0.064 125.44 0 251.008 0.128 376.512-0.064z"
                  fill="#101317"
                  p-id="3387"
                ></path>
                <path
                  d="M594.176 358.912c0.576-26.24-2.432-50.88 8.768-74.048 27.264-56.576 77.952-56.896 130.624-57.024 49.024-0.128 94.272 7.232 114.304 57.6 19.776 49.664 20.864 103.296-0.576 152.256-25.984 59.456-82.368 58.048-136.64 57.28-46.912-0.704-86.464-13.632-108.224-59.584-11.968-25.216-6.912-52.032-8.256-76.48z m51.84 1.024c-0.384 76.544 6.144 82.944 83.328 82.944 7.104 0 14.208 0.128 21.312-0.064 32.832-1.024 53.44-14.656 56.128-44.096 5.12-56.512 6.208-99.84-26.752-114.048a58.112 58.112 0 0 0-20.736-3.84 1113.856 1113.856 0 0 0-67.008 0c-29.184 1.152-44.16 16.32-46.144 45.632-0.768 11.136-0.128 22.336-0.128 33.472z m-319.232 416.768c-58.176 0-52.288 0.064-110.464-0.064-9.152 0-18.496 0.256-27.456-1.28-13.12-2.24-23.488-9.6-23.872-23.808-0.384-15.744 10.24-25.6 24.896-25.664 135.68-0.576 207.296-0.576 342.976 0 13.312 0.064 23.104 8.768 23.424 23.488 0.384 16.32-10.112 24.832-24.576 25.92-23.36 1.664-46.848 1.28-70.336 1.344-44.8 0.192-89.728 0.064-134.592 0.064z m-121.792-109.376c-19.2 0-40.256-1.216-39.552-26.496 0.576-22.976 21.376-24.512 38.976-24.576 125.248-0.32 186.56-0.32 311.808-0.128 18.88 0.064 39.872 1.728 39.232 27.328-0.64 24.064-20.928 23.808-38.656 23.808-63.168 0.128-126.272 0.064-189.44 0.064h-122.368z"
                  fill="#101317"
                  p-id="3388"
                ></path>
              </svg>
              名称
            </div>
          </template>
          {{ name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div class="cell-item">
              <svg
                t="1744276104323"
                class="icon"
                viewBox="0 0 1099 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4375"
                width="16"
                height="16"
              >
                <path
                  d="M805.56 253c-28.7 0-52 23.3-52 52 0 9.6 2.6 18.6 7.1 26.2L613.16 538.7c-3.3-0.7-6.7-1-10.1-1-10.4 0-20.2 3.1-28.3 8.4l-103.1-66.3c0-0.4 0-0.9 0-1.3 0-28.7-23.3-52-52-52-28.7 0-52 23.3-52 52 0 8.1 1.8 15.8 5.2 22.7L270.46 657c-2.7-0.4-5.5-0.7-8.3-0.7-28.7 0-52 23.3-52 52 0 28.7 23.3 52 52 52s52-23.3 52-52c0-10.3-3-19.8-8.1-27.9l100-151.9c4.4 1.2 9 1.8 13.8 1.8 12.6 0 24.2-4.5 33.2-12l98.8 63.5c-0.4 2.5-0.6 5.1-0.6 7.7 0 28.7 23.3 52 52 52s52-23.3 52-52c0-9.6-2.6-18.6-7.1-26.2l147.6-207.5c3.3 0.7 6.7 1 10.1 1 28.7 0 52-23.3 52-52S834.26 253 805.56 253z"
                  p-id="4376"
                ></path>
              </svg>
              状态
            </div>
          </template>
          {{ state == "0" ? "离线" : "在线" }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <div class="cell-item">
              <svg
                t="1744276127620"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5459"
                width="16"
                height="16"
              >
                <path
                  d="M384 196.266667v93.866666c-76.8 42.666667-128 128-128 221.866667 0 140.8 115.2 256 256 256s256-115.2 256-256c0-93.866667-51.2-179.2-128-221.866667V196.266667c123.733333 51.2 213.333333 174.933333 213.333333 315.733333 0 187.733333-153.6 341.333333-341.333333 341.333333s-341.333333-153.6-341.333333-341.333333c0-145.066667 89.6-264.533333 213.333333-315.733333z m85.333333-25.6h85.333334v213.333333h-85.333334V170.666667z"
                  fill="#444444"
                  p-id="5460"
                ></path>
              </svg>
              开关
            </div>
          </template>
          <el-switch
            v-model="relayone"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="change"
          >
          </el-switch>
          <!-- {{  }} -->
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <div class="cell-item">
              <svg
                t="1744276145529"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6544"
                width="16"
                height="16"
              >
                <path
                  d="M878.08 731.274667a32 32 0 0 1-54.88-32.938667A360.789333 360.789333 0 0 0 874.666667 512c0-200.298667-162.368-362.666667-362.666667-362.666667S149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667a360.789333 360.789333 0 0 0 186.314667-51.445334 32 32 0 0 1 32.928 54.88A424.778667 424.778667 0 0 1 512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667c0 78.293333-21.152 153.568-60.586667 219.274667z m-548.704-81.898667L480 498.741333V320a32 32 0 0 1 64 0v192a32 32 0 0 1-9.376 22.624l-160 160a32 32 0 1 1-45.248-45.248z"
                  fill="#000000"
                  p-id="6545"
                ></path>
              </svg>
              时间
            </div>
          </template>
          {{ addtime }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
const ToDigital = (strDu, strFen, strMiao, len) => {
    len = (len > 6 || typeof (len) == "undefined") ? 6 : len;//精确到小数点后最多六位
    strDu = (typeof (strDu) == "undefined" || strDu == "") ? 0 : parseFloat(strDu);
    strFen = (typeof (strFen) == "undefined" || strFen == "") ? 0 : parseFloat(strFen) / 60;
    strMiao = (typeof (strMiao) == "undefined" || strMiao == "") ? 0 : parseFloat(strMiao) / 60; //秒为分的格式
    var digital = strDu + strFen + strMiao;
    if (digital == 0) {
        return "";
    } else {
        return digital.toFixed(len);
    }
}
  len = len > 6 || typeof len == "undefined" ? 6 : len; //精确到小数点后最多六位
  strDu = typeof strDu == "undefined" || strDu == "" ? 0 : parseFloat(strDu);
  strFen = typeof strFen == "undefined" || strFen == "" ? 0 : parseFloat(strFen) / 60;
  strMiao = typeof strMiao == "undefined" || strMiao == "" ? 0 : parseFloat(strMiao) / 60; //秒为分的格式
  var digital = strDu + strFen + strMiao;
  if (digital == 0) {
    return "";
  } else {
    return digital.toFixed(len);
  }
};
class Convertor {
    constructor(ak) {
        this.stepCount = 100;
        this.pointCount = [];
        this.Result = [];
        this.NoisIndex = [];
        this.Time = new Date();
        this.AK = ak;
        this.M_PI = 3.14159265358979324;
        this.A = 6378245.0;
        this.EE = 0.00669342162296594323;
        this.X_PI = this.M_PI * 3000.0 / 180.0;
  constructor(ak) {
    this.stepCount = 100;
    this.pointCount = [];
    this.Result = [];
    this.NoisIndex = [];
    this.Time = new Date();
    this.AK = ak;
    this.M_PI = 3.14159265358979324;
    this.A = 6378245.0;
    this.EE = 0.00669342162296594323;
    this.X_PI = (this.M_PI * 3000.0) / 180.0;
  }
  /**
   * WGS->百度坐标系
   */
  WGS2BD09(poi) {
    var poi2 = this.WGS2GCJ(poi);
    if (typeof poi2 === "undefined") {
      return;
    }
    /**
     * WGS->百度坐标系
     */
    WGS2BD09(poi) {
        var poi2 = this.WGS2GCJ(poi);
        if (typeof poi2 === "undefined") {
            return;
        }
        //GCJ->百度坐标系
        return this.GCJ2BD09(poi2);
    }
    //GCJ->百度坐标系
    return this.GCJ2BD09(poi2);
  }

    GCJ2BD09(poi) {
        var poi2 = {};
        var x = poi.lng
            , y = poi.lat;
        var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.X_PI);
        var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.X_PI);
        poi2.lng = z * Math.cos(theta) + 0.0065;
        poi2.lat = z * Math.sin(theta) + 0.006;
        return poi2;
  GCJ2BD09(poi) {
    var poi2 = {};
    var x = poi.lng,
      y = poi.lat;
    var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.X_PI);
    var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.X_PI);
    poi2.lng = z * Math.cos(theta) + 0.0065;
    poi2.lat = z * Math.sin(theta) + 0.006;
    return poi2;
  }
  WGS2GCJ(poi) {
    if (this.outofChine(poi)) {
      return;
    }
    WGS2GCJ(poi) {
        if (this.outofChine(poi)) {
            return;
        }
        var poi2 = {};
        var dLat = this.WGS2GCJ_lat(poi.lng - 105.0, poi.lat - 35.0);
        var dLon = this.WGS2GCJ_lng(poi.lng - 105.0, poi.lat - 35.0);
        var radLat = poi.lat / 180.0 * this.M_PI;
        var magic = Math.sin(radLat);
        magic = 1 - this.EE * magic * magic;
        var sqrtMagic = Math.sqrt(magic);
        dLat = (dLat * 180.0) / ((this.A * (1 - this.EE)) / (magic * sqrtMagic) * this.M_PI);
        dLon = (dLon * 180.0) / (this.A / sqrtMagic * Math.cos(radLat) * this.M_PI);
        poi2.lat = poi.lat + dLat;
        poi2.lng = poi.lng + dLon;
        return poi2;
    var poi2 = {};
    var dLat = this.WGS2GCJ_lat(poi.lng - 105.0, poi.lat - 35.0);
    var dLon = this.WGS2GCJ_lng(poi.lng - 105.0, poi.lat - 35.0);
    var radLat = (poi.lat / 180.0) * this.M_PI;
    var magic = Math.sin(radLat);
    magic = 1 - this.EE * magic * magic;
    var sqrtMagic = Math.sqrt(magic);
    dLat =
      (dLat * 180.0) / (((this.A * (1 - this.EE)) / (magic * sqrtMagic)) * this.M_PI);
    dLon = (dLon * 180.0) / ((this.A / sqrtMagic) * Math.cos(radLat) * this.M_PI);
    poi2.lat = poi.lat + dLat;
    poi2.lng = poi.lng + dLon;
    return poi2;
  }
  WGS2GCJ_lat(x, y) {
    var ret1 =
      -100.0 +
      2.0 * x +
      3.0 * y +
      0.2 * y * y +
      0.1 * x * y +
      0.2 * Math.sqrt(Math.abs(x));
    ret1 +=
      ((20.0 * Math.sin(6.0 * x * this.M_PI) + 20.0 * Math.sin(2.0 * x * this.M_PI)) *
        2.0) /
      3.0;
    ret1 +=
      ((20.0 * Math.sin(y * this.M_PI) + 40.0 * Math.sin((y / 3.0) * this.M_PI)) * 2.0) /
      3.0;
    ret1 +=
      ((160.0 * Math.sin((y / 12.0) * this.M_PI) +
        320 * Math.sin((y * this.M_PI) / 30.0)) *
        2.0) /
      3.0;
    return ret1;
  }
  WGS2GCJ_lng(x, y) {
    var ret2 =
      300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
    ret2 +=
      ((20.0 * Math.sin(6.0 * x * this.M_PI) + 20.0 * Math.sin(2.0 * x * this.M_PI)) *
        2.0) /
      3.0;
    ret2 +=
      ((20.0 * Math.sin(x * this.M_PI) + 40.0 * Math.sin((x / 3.0) * this.M_PI)) * 2.0) /
      3.0;
    ret2 +=
      ((150.0 * Math.sin((x / 12.0) * this.M_PI) +
        300.0 * Math.sin((x / 30.0) * this.M_PI)) *
        2.0) /
      3.0;
    return ret2;
  }
  outofChine(p) {
    if (p.lng < 72.004 || p.lng > 137.8347) {
      return true;
    }
    WGS2GCJ_lat(x, y) {
        var ret1 = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
        ret1 += (20.0 * Math.sin(6.0 * x * this.M_PI) + 20.0 * Math.sin(2.0 * x * this.M_PI)) * 2.0 / 3.0;
        ret1 += (20.0 * Math.sin(y * this.M_PI) + 40.0 * Math.sin(y / 3.0 * this.M_PI)) * 2.0 / 3.0;
        ret1 += (160.0 * Math.sin(y / 12.0 * this.M_PI) + 320 * Math.sin(y * this.M_PI / 30.0)) * 2.0 / 3.0;
        return ret1;
    if (p.lat < 0.8293 || p.lat > 55.8271) {
      return true;
    }
    ;
    WGS2GCJ_lng(x, y) {
        var ret2 = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
        ret2 += (20.0 * Math.sin(6.0 * x * this.M_PI) + 20.0 * Math.sin(2.0 * x * this.M_PI)) * 2.0 / 3.0;
        ret2 += (20.0 * Math.sin(x * this.M_PI) + 40.0 * Math.sin(x / 3.0 * this.M_PI)) * 2.0 / 3.0;
        ret2 += (150.0 * Math.sin(x / 12.0 * this.M_PI) + 300.0 * Math.sin(x / 30.0 * this.M_PI)) * 2.0 / 3.0;
        return ret2;
    }
    outofChine(p) {
        if (p.lng < 72.004 || p.lng > 137.8347) {
            return true;
        }
        if (p.lat < 0.8293 || p.lat > 55.8271) {
            return true;
        }
        return false;
    }
    return false;
  }
}
import jizhun from "@/assets/images/ceju.png"
import jiance from "@/assets/images/lingjin.png"
import onlie from "@/assets/images/onile.png"
import jizhun from "@/assets/images/ceju.png";
import jiance from "@/assets/images/lingjin.png";
import onlie from "@/assets/images/onile.png";

import zguangbo from "@/assets/images/onguangbo.png";
import lguangbo from "@/assets/images/offguangbo.png";
import gjimage from "@/assets/images/gaoj.png";
// import lguangbo from "@/assets/images/offguangbo.png"

import processBar from "@/components/processPar";
import Pagination from '@/components/Pagination'
import Pagination from "@/components/Pagination";
import drawMixin from "@/utils/drawMixin"; //自适应缩放
import { formatTime1 } from "@/utils/index.js"; //日期格式转换
import { getList, getEquipment, alldevice, getdevicestate } from '@/api/user'
import { deepClone } from '@/utils'
const _temp = {//表单数据对象
    tagid: '',
    anchorname: '',
    edmm: '',
    ndmm: [],
    tdmm: '管理员',
    gpsnum: '',
}
import {
  getList,
  getEquipment,
  alldevice,
  getdevicestate,
  startorstop,
} from "@/api/user";
import { deepClone } from "@/utils";
const _temp = {
  //表单数据对象
  tagid: "",
  anchorname: "",
  edmm: "",
  ndmm: [],
  tdmm: "管理员",
  gpsnum: "",
};
let markers = [];
let addedCarIds = new Set();
let gaddedCarIds = new Set();
var map;
var markerg;
var labelg;
var marker;
var label;
var c = new Convertor();
export default {
    mixins: [drawMixin],
    name: 'Home',
    components: {
        processBar,
        Pagination
  mixins: [drawMixin],
  name: "Home",
  components: {
    processBar,
    Pagination,
  },
  data() {
    return {
      tagid: "",
      name: "",
      state: "",
      addtime: "",
      relayone: "",
      gpsnum: "",
      edm: "",
      hdm: "",
      ndm: "",
      power: "",
      gpsstate: "",
      centerdialogVisiblegb: false,
      centerdialogVisible: false,
      DialogVisible: false,
      tagid: "",
      temp: Object.assign({}, _temp),
      count: null, //百分比总和
      zongdmm: null, //总位移
      pagerCount: "3",
      processBarModel: [],
      list: [],
      listLoading: true,
      listQuery: {
        current: 1,
        size: 20,
        created_at: undefined,
        status: undefined,
        keyword: undefined,
      },
      role: "超级管理员", //右上角当前登陆人权限
      timing: null,
      //时分秒
      dateDay: null,
      //年月日
      dateYear: null,
      //周几
      dateWeek: null,
      //周几
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      monitorNum: 0, //监测站
      standardNum: 0, //基准站
      offlineNum: 0, //离线设备
      alarmNum: 0, //报警条数
      messageNum: 0, //报文条数
      total: 0,
      dialogVisible: false,
      dialogType: "view",
    };
  },
  computed: {},
  created() {},
  mounted() {
    const params = {
      username: localStorage.getItem("username"),
      phone: localStorage.getItem("phone"),
    };
    alldevice(params).then((response) => {
      this.initMap(
        response.data.gbList,
        response.data.dataList,
        response.data.view,
        response.data.shijiao
      );
    });
  },
  methods: {
    change(e) {
      var state = "";
      if (e == true) {
        state = "ON";
      } else {
        state = "OFF";
      }

      const params = { status: state, tagid: this.tagid };

      startorstop(params).then((response) => {
        // this.initMap(response.data.gbList, response.data.dataList, response.data.view, response.data.shijiao)
      });
    },
    data() {
        return {
            gpsnum: '',
            edm: '',
            hdm: '',
            ndm: '',
            power: '',
            gpsstate: '',
            centerdialogVisible: false,
            DialogVisible: false,
            tagid: '',
            temp: Object.assign({}, _temp),
            count: null,//百分比总和
            zongdmm: null,//总位移
            pagerCount: '3',
            processBarModel: [],
            list: [],
            listLoading: true,
            listQuery: {
                current: 1,
                size: 20,
                created_at: undefined,
                status: undefined,
                keyword: undefined
            },
            role: '超级管理员',//右上角当前登陆人权限
            timing: null,
            //时分秒
            dateDay: null,
            //年月日
            dateYear: null,
            //周几
            dateWeek: null,
            //周几
            weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            monitorNum: 0,//监测站
            standardNum: 0,//基准站
            offlineNum: 0,//离线设备
            alarmNum: 0,//报警条数
            messageNum: 0,//报文条数
            total: 0,
            dialogVisible: false,
            dialogType: 'view',
    handelClose() {
      this.edm = "";
      this.ndm = "";
      this.hdm = "";
      this.power = "";
      this.gpsnum = "";
      this.gpsstate = "";
    },

    guangbopoint(gaungbo) {
      let zxguangbo = new BMapGL.Icon(zguangbo, new BMapGL.Size(30, 30));
      let lxguangbo = new BMapGL.Icon(lguangbo, new BMapGL.Size(30, 30));
      this.removePreviousMarkers();
      for (let i = 0; i < gaungbo.length; i++) {
        if (gaungbo[i].center != null && gaungbo[i].center != "") {
    
            if (
              gaungbo[i].center.split(";")[0].toString().length > 5 &&
              gaungbo[i].center.split(";")[0].toString().length > 4
            ) {
              markerg;
              labelg = new BMapGL.Label(gaungbo[i].name + "  " + gaungbo[i].tagid, {
                offset: new BMapGL.Size(0, -40),
              });
              if (gaungbo[i].state == 1) {
                // var rr = c.WGS2BD09({
                //     lng: new Number(ToDigital(gaungbo[i].center.split(";")[0].substring(0, 3), gaungbo[i].center.split(";")[0].substring(3, 5), gaungbo[i].center.split(";")[0].substring(5))),
                //     lat: new Number(ToDigital(gaungbo[i].center.split(";")[1].substring(0, 2),gaungbo[i].center.split(";")[1].substring(2, 4),gaungbo[i].center.split(";")[1].substring(4)))
                // });
                var rr = c.WGS2BD09({
                  lng: new Number(),
                  lat: new Number(gaungbo[i].center.split(";")[1]),
                });
                var pt = new BMapGL.Point(
                  gaungbo[i].center.split(";")[0],
                  gaungbo[i].center.split(";")[1]
                );
                markerg = new BMapGL.Marker(pt, {
                  icon: zxguangbo,
                });
                labelg.setStyle({
                  color: "#fff",
                  fontSize: "14px",
                  borderRadius: "5px",
                  padding: "5px 5px",
                  border: "0",
                  backgroundColor: "#fa770b",
                  transform: "translateX(-50%)",
                });
              } else {
                // var rr = c.WGS2BD09({
                //     lng: new Number(ToDigital(gaungbo[i].center.split(";")[0].substring(0, 3), gaungbo[i].center.split(";")[0].substring(3, 5),gaungbo[i].center.split(";")[0].substring(5))),
                //     lat: new Number(ToDigital(gaungbo[i].center.split(";")[1].substring(0, 2), gaungbo[i].center.split(";")[1].substring(2, 4), gaungbo[i].center.split(";")[1].substring(4)))
                // });

                // var rr = c.WGS2BD09({
                //     lng: new Number(gaungbo[i].center.split(";")[0]),
                //     lat: new Number(gaungbo[i].center.split(";")[1])
                // });
                var pt = new BMapGL.Point(
                  gaungbo[i].center.split(";")[0],
                  gaungbo[i].center.split(";")[1]
                );
                // var pt = new BMapGL.Point(rr.lng, rr.lat)
                markerg = new BMapGL.Marker(pt, {
                  icon: lxguangbo,
                });
                labelg.setStyle({
                  color: "#fff",
                  fontSize: "14px",
                  borderRadius: "5px",
                  padding: "5px 5px",
                  border: "0",
                  backgroundColor: "#474747",
                  transform: "translateX(-50%)",
                });
              }

              markerg.addEventListener("click", () => {
                this.tagid = gaungbo[i].tagid;
                // var params = { tagid: gaungbo[i].tagid }
                // getdevicestate(params).then(response => {
                // this.tagid = response.data.dataList.tagid
                this.name = gaungbo[i].name;
                this.state = gaungbo[i].state;
                this.addtime = gaungbo[i].addtime;
                this.relayone = gaungbo[i].relayone == 0 ? false : true;
                // })

                // tagid.value = tags[i].tagid
                this.centerdialogVisiblegb = true;
              });
              markerg.setLabel(labelg);
              map.addOverlay(markerg);
              gaddedCarIds.add(gaungbo[i].id);
              markers.push(markerg);
            }
         
        }
      }

      setTimeout(() => {
        const params = {
          username: localStorage.getItem("username"),
          phone: localStorage.getItem("phone"),
        };
        alldevice(params).then((response) => {
          this.guangbopoint(response.data.gbList);
          // this.initMap(response.data.gbList, response.data.dataList, response.data.view, response.data.shijiao)
        });
      }, 5000);
    },
    computed: {

        // 存储所有添加到地图上的标记物
       

// 删除上一次添加的所有标记物
 removePreviousMarkers() {
    markers.forEach(marker => {
        map.removeOverlay(marker);
        map.removeOverlay(markerg);
    });
    markers = [];
},
    pointdata(tags) {
      let jizhunzhan = new BMapGL.Icon(jizhun, new BMapGL.Size(30, 30));
      let jiancezhan = new BMapGL.Icon(jiance, new BMapGL.Size(30, 30));
      let onliezhan = new BMapGL.Icon(onlie, new BMapGL.Size(30, 30));
      let gjimg = new BMapGL.Icon(gjimage, new BMapGL.Size(30, 30));
      this.removePreviousMarkers();
      for (let i = 0; i < tags.length; i++) {
        if (
          tags[i].lon != null &&
          tags[i].lon != "" &&
          tags[i].lat != null &&
          tags[i].lat != ""
        ) {
          if (tags[i].lon.toString().length > 5 && tags[i].lat.toString().length > 4) {
              marker;
              
              label = new BMapGL.Label(tags[i].anchorname + "  " + tags[i].tagid, {
                offset: new BMapGL.Size(0, -40),
              });

              if (tags[i].type == 0) {
                if (tags[i].onlie == 1 || tags[i].onlie == 4) {
                  var rr = c.WGS2BD09({
                    lng: new Number(
                      ToDigital(
                        tags[i].lon.substring(0, 3),
                        tags[i].lon.substring(3, 5),
                        tags[i].lon.substring(5)
                      )
                    ),
                    lat: new Number(
                      ToDigital(
                        tags[i].lat.substring(0, 2),
                        tags[i].lat.substring(2, 4),
                        tags[i].lat.substring(4)
                      )
                    ),
                  });
                  var pt = new BMapGL.Point(rr.lng, rr.lat);
                  marker = new BMapGL.Marker(pt, {
                    icon: jizhunzhan,
                  });
                  label.setStyle({
                    color: "#fff",
                    fontSize: "14px",
                    borderRadius: "5px",
                    padding: "5px 5px",
                    border: "0",
                    backgroundColor: "#fa770b",
                    transform: "translateX(-50%)",
                  });
                } else if (tags[i].onlie == 6 || tags[i].onlie == 7) {
                  var rr = c.WGS2BD09({
                    lng: new Number(
                      ToDigital(
                        tags[i].lon.substring(0, 3),
                        tags[i].lon.substring(3, 5),
                        tags[i].lon.substring(5)
                      )
                    ),
                    lat: new Number(
                      ToDigital(
                        tags[i].lat.substring(0, 2),
                        tags[i].lat.substring(2, 4),
                        tags[i].lat.substring(4)
                      )
                    ),
                  });
                  var pt = new BMapGL.Point(rr.lng, rr.lat);
                  marker = new BMapGL.Marker(pt, {
                    icon: gjimg,
                  });
                  label.setStyle({
                    color: "#fff",
                    fontSize: "14px",
                    borderRadius: "5px",
                    padding: "5px 5px",
                    border: "0",
                    backgroundColor: "#fa770b",
                    transform: "translateX(-50%)",
                  });
                } else {
                  var rr = c.WGS2BD09({
                    lng: new Number(
                      ToDigital(
                        tags[i].lon.substring(0, 3),
                        tags[i].lon.substring(3, 5),
                        tags[i].lon.substring(5)
                      )
                    ),
                    lat: new Number(
                      ToDigital(
                        tags[i].lat.substring(0, 2),
                        tags[i].lat.substring(2, 4),
                        tags[i].lat.substring(4)
                      )
                    ),
                  });
                  var pt = new BMapGL.Point(rr.lng, rr.lat);
                  marker = new BMapGL.Marker(pt, {
                    icon: onliezhan,
                  });
                  label.setStyle({
                    color: "#fff",
                    fontSize: "14px",
                    borderRadius: "5px",
                    padding: "5px 5px",
                    border: "0",
                    backgroundColor: "#474747",
                    transform: "translateX(-50%)",
                  });
                }
              } else {
                if (tags[i].onlie == 1 || tags[i].onlie == 4) {
                  var rr = c.WGS2BD09({
                    lng: new Number(
                      ToDigital(
                        tags[i].lon.substring(0, 3),
                        tags[i].lon.substring(3, 5),
                        tags[i].lon.substring(5)
                      )
                    ),
                    lat: new Number(
                      ToDigital(
                        tags[i].lat.substring(0, 2),
                        tags[i].lat.substring(2, 4),
                        tags[i].lat.substring(4)
                      )
                    ),
                  });
                  var pt = new BMapGL.Point(rr.lng, rr.lat);
                  marker = new BMapGL.Marker(pt, {
                    icon: jiancezhan,
                  });
                  label.setStyle({
                    color: "#fff",
                    fontSize: "14px",
                    borderRadius: "5px",
                    padding: "5px 5px",
                    border: "0",
                    backgroundColor: "#32CD32",
                    transform: "translateX(-50%)",
                  });
                } else if (tags[i].onlie == 6 || tags[i].onlie == 7) {
                  var rr = c.WGS2BD09({
                    lng: new Number(
                      ToDigital(
                        tags[i].lon.substring(0, 3),
                        tags[i].lon.substring(3, 5),
                        tags[i].lon.substring(5)
                      )
                    ),
                    lat: new Number(
                      ToDigital(
                        tags[i].lat.substring(0, 2),
                        tags[i].lat.substring(2, 4),
                        tags[i].lat.substring(4)
                      )
                    ),
                  });
                  var pt = new BMapGL.Point(rr.lng, rr.lat);
                  marker = new BMapGL.Marker(pt, {
                    icon: gjimg,
                  });
                  label.setStyle({
                    color: "#fff",
                    fontSize: "14px",
                    borderRadius: "5px",
                    padding: "5px 5px",
                    border: "0",
                    backgroundColor: "#fa770b",
                    transform: "translateX(-50%)",
                  });
                } else {
                  var rr = c.WGS2BD09({
                    lng: new Number(
                      ToDigital(
                        tags[i].lon.substring(0, 3),
                        tags[i].lon.substring(3, 5),
                        tags[i].lon.substring(5)
                      )
                    ),
                    lat: new Number(
                      ToDigital(
                        tags[i].lat.substring(0, 2),
                        tags[i].lat.substring(2, 4),
                        tags[i].lat.substring(4)
                      )
                    ),
                  });
                  var pt = new BMapGL.Point(rr.lng, rr.lat);
                  marker = new BMapGL.Marker(pt, {
                    icon: onliezhan,
                  });
                  label.setStyle({
                    color: "#fff",
                    fontSize: "14px",
                    borderRadius: "5px",
                    padding: "5px 5px",
                    border: "0",
                    backgroundColor: "#474747",
                    transform: "translateX(-50%)",
                  });
                }
              }
              marker.addEventListener("click", () => {
                this.tagid = tags[i].tagid;
                var params = { tagid: tags[i].tagid };
                getdevicestate(params).then((response) => {
                  this.edm = response.data.dataList.edmm + "mm";
                  this.ndm = response.data.dataList.ndmm + "mm";
                  this.hdm = response.data.dataList.tdmm + "mm";
                  this.power = response.data.dataList2.electricity;
                  this.gpsnum = response.data.dataList2.gpsnum;
                  this.gpsstate = response.data.dataList2.gpsstate;
                });

                // tagid.value = tags[i].tagid
                this.centerdialogVisible = true;
              });
              marker.setLabel(label);
              map.addOverlay(marker);
              addedCarIds.add(tags[i].id);
              markers.push(marker);
          }
        }
      }

      setTimeout(() => {
        const params = {
          username: localStorage.getItem("username"),
          phone: localStorage.getItem("phone"),
        };
        alldevice(params).then((response) => {
          this.pointdata(response.data.dataList);
          // this.initMap(response.data.gbList, response.data.dataList, response.data.view, response.data.shijiao)
        });
      }, 5000);
    },
    created() {
    },
    mounted() {
        const params = { username: localStorage.getItem('username'), phone: localStorage.getItem('phone') };
        alldevice(params).then(response => {
            console.log(111111111);
            
            console.log(response);
            
            this.initMap(response.data.dataList, response.data.view,response.data.shijiao)
        })


    },
    methods: {
        handelClose() {
            this.edm = ''
            this.ndm = ''
            this.hdm = ''
            this.power = ''
            this.gpsnum = ''
            this.gpsstate = ''
        },
        initMap(tags, view,shijiao) {

            // $(window).scrollTop(0);
            // window.scroll(0, 0);
            var c = new Convertor();
            var map = new BMapGL.Map("map");
            // var point = new BMapGL.Point(116.404, 39.915); // 地图中心点坐标  
            // map.centerAndZoom(point, 15);
            const views = view.split(";");
            map.centerAndZoom(new BMapGL.Point(views[0], views[1]), 19);
            map.enableScrollWheelZoom(true);
            map.setHeading(shijiao); // 设置地图旋转角度
            map.setTilt(shijiao); // 设置地图倾斜角度

            map.addEventListener("rightclick", function(e) {
                console.log(e);
                
    initMap(gaungbo, tags, view, shijiao) {
      // $(window).scrollTop(0);
      // window.scroll(0, 0);
      var c = new Convertor();
      map = new BMapGL.Map("map");
      // var point = new BMapGL.Point(116.404, 39.915); // 地图中心点坐标
      // map.centerAndZoom(point, 15);
      const views = view.split(";");
      map.centerAndZoom(new BMapGL.Point(views[0], views[1]), 19);
      map.enableScrollWheelZoom(true);
      map.setHeading(shijiao); // 设置地图旋转角度
      map.setTilt(shijiao); // 设置地图倾斜角度
      map.addEventListener("rightclick", function (e) {
        // e.point 是点击位置的像素坐标
        // e.pixel 是点击位置的地理坐标（经纬度）
        console.log(e.point);
        console.log(e.pixel);
        
        
        var lat = e.latlng.lat; // 纬度
        var lng = e.latlng.lng; // 经度
        

        // 在控制台打印经纬度
        console.log("右键点击的经纬度：", `纬度: ${lat}, 经度: ${lng}`);

        // 你也可以将经纬度显示在页面上
        alert(`右键点击的经纬度： ${lng}; ${lat}`);
    });
            var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
            map.addControl(zoomCtrl);
            //绿色监测，橙色基准
            let jizhunzhan = new BMapGL.Icon(jizhun, new BMapGL.Size(30, 30))
            let jiancezhan = new BMapGL.Icon(jiance, new BMapGL.Size(30, 30))
            let onliezhan = new BMapGL.Icon(onlie, new BMapGL.Size(30, 30))
            for (let i = 0; i < tags.length; i++) {
                if (tags[i].lon != null && tags[i].lon != "" && tags[i].lat != null && tags[i].lat != "") {
                    if (tags[i].lon.toString().length > 5 && tags[i].lat.toString().length > 4) {
                        var marker;
                        var label = new BMapGL.Label(tags[i].anchorname + "  " + tags[i].tagid, { offset: new BMapGL.Size(0, -40) });
                        console.log(tags[i]);
                        
                        if (tags[i].type == 0) {

                            if(tags[i].onlie==1){
                                var rr = c.WGS2BD09({
                                lng: new Number(ToDigital(tags[i].lon.substring(0, 3), tags[i].lon.substring(3, 5), tags[i].lon.substring(5))),
                                lat: new Number(ToDigital(tags[i].lat.substring(0, 2), tags[i].lat.substring(2, 4), tags[i].lat.substring(4)))
                            });
                            var pt = new BMapGL.Point(rr.lng, rr.lat)
                            marker = new BMapGL.Marker(pt, {
                                icon: jizhunzhan
                            });
                            label.setStyle({
                                color: "#fff",
                                fontSize: "14px",
                                borderRadius: "5px",
                                padding: "5px 5px",
                                border: "0",
                                backgroundColor: "#fa770b",
                                transform: 'translateX(-50%)',
                            })
                            }else{
                                var rr = c.WGS2BD09({
                                lng: new Number(ToDigital(tags[i].lon.substring(0, 3), tags[i].lon.substring(3, 5), tags[i].lon.substring(5))),
                                lat: new Number(ToDigital(tags[i].lat.substring(0, 2), tags[i].lat.substring(2, 4), tags[i].lat.substring(4)))
                            });
                            var pt = new BMapGL.Point(rr.lng, rr.lat)
                            marker = new BMapGL.Marker(pt, {
                                icon: onliezhan
                            });
                            label.setStyle({
                                color: "#fff",
                                fontSize: "14px",
                                borderRadius: "5px",
                                padding: "5px 5px",
                                border: "0",
                                backgroundColor: "#474747",
                                transform: 'translateX(-50%)',
                            })
                            }
                          

                        } else {

                            if(tags[i].onlie==1){
                                var rr = c.WGS2BD09({
                                lng: new Number(ToDigital(tags[i].lon.substring(0, 3), tags[i].lon.substring(3, 5), tags[i].lon.substring(5))),
                                lat: new Number(ToDigital(tags[i].lat.substring(0, 2), tags[i].lat.substring(2, 4), tags[i].lat.substring(4)))
                            });
                            var pt = new BMapGL.Point(rr.lng, rr.lat)
                            marker = new BMapGL.Marker(pt, {
                                icon: jiancezhan
                            });
                            label.setStyle({
                                color: "#fff",
                                fontSize: "14px",
                                borderRadius: "5px",
                                padding: "5px 5px",
                                border: "0",
                                backgroundColor: "#32CD32",
                                transform: 'translateX(-50%)',
                            })
                            }else{
                                var rr = c.WGS2BD09({
                                lng: new Number(ToDigital(tags[i].lon.substring(0, 3), tags[i].lon.substring(3, 5), tags[i].lon.substring(5))),
                                lat: new Number(ToDigital(tags[i].lat.substring(0, 2), tags[i].lat.substring(2, 4), tags[i].lat.substring(4)))
                            });
                            var pt = new BMapGL.Point(rr.lng, rr.lat)
                            marker = new BMapGL.Marker(pt, {
                                icon: onliezhan
                            });
                            label.setStyle({
                                color: "#fff",
                                fontSize: "14px",
                                borderRadius: "5px",
                                padding: "5px 5px",
                                border: "0",
                                backgroundColor: "#474747",
                                transform: 'translateX(-50%)',
                            })
                            }
                           
                        }
                        marker.addEventListener("click", () => {
                            this.tagid = tags[i].tagid
                            var params = { tagid: tags[i].tagid }
                            getdevicestate(params).then(response => {
                                this.edm = response.data.dataList.edmm + "mm"
                                this.ndm = response.data.dataList.ndmm + "mm"
                                this.hdm = response.data.dataList.tdmm + "mm"
                                this.power = response.data.dataList2.electricity
                                this.gpsnum = response.data.dataList2.gpsnum
                                this.gpsstate = response.data.dataList2.gpsstate
                            })

                            // tagid.value = tags[i].tagid
                            this.centerdialogVisible = true
                        })
                        marker.setLabel(label)
                        map.addOverlay(marker)
                    }
                }
            }
        },

    }
}
      });
      var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      map.addControl(scaleCtrl);
      var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
      map.addControl(zoomCtrl);
      //绿色监测，橙色基准
      this.pointdata(tags);
      this.guangbopoint(gaungbo);
      // setTimeout(() => {
      //     // this.monitordata()
      // }, 5000);
    },
  },
};
</script>

<style lang="scss" scoped>
.center {
        // position: fixed;
        position: absolute;
        // left: 50%;
        // top: 90px;
        width: 100%;
        height: 100%;
        // transform: translate(-50%, -50%);
    // transform-origin: left top;
        // background: url(../../assets/images/center.png) no-repeat;
        z-index: 20;
        overflow: hidden;
    }
    .el-dialog__wrapper {
    position: fixed;
    top: 42%;
    right: 0;
    bottom: 0;
    left: 34%;
    overflow: auto;
    margin: 0;
  // position: fixed;
  position: absolute;
  // left: 50%;
  // top: 90px;
  width: 100%;
  height: 100%;
  // transform: translate(-50%, -50%);
  // transform-origin: left top;
  // background: url(../../assets/images/center.png) no-repeat;
  z-index: 20;
  overflow: hidden;
}

.el-dialog__wrapper {
  position: fixed;
  top: 42%;
  right: 0;
  bottom: 0;
  left: 34%;
  overflow: auto;
  margin: 0;
}

#index {
    color: #d3d6dd;
    // width: 118%;
    // height: 115%;
    width: 2270px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
  color: #d3d6dd;
  // width: 118%;
  // height: 115%;
  width: 2270px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;

  .bg {
    position: fixed;
    //整体页面背景
    width: 100%;
    height: 100%;
    padding: 16px 16px 0 16px;
    background-image: url("../../assets/images/bj.png"); //背景图
    background-size: cover; //背景尺寸
    background-position: center center; //背景位置
    z-index: 1;
    overflow: hidden;
  }

    .bg {
  .top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80px;
    background-color: transparent;
    background: url(../../assets/images/top.png) no-repeat;
    background-position: 50% 0;
  }

        position: fixed;
        //整体页面背景
        width: 100%;
        height: 100%;
        padding: 16px 16px 0 16px;
        background-image: url("../../assets/images/bj.png"); //背景图
        background-size: cover; //背景尺寸
        background-position: center center; //背景位置
        z-index: 1;
        overflow: hidden;
    }
  .title_right {
    top: 10px;
    width: 100%;
    height: 80px;
    background: url(../../assets/images/topright.png) no-repeat;
  }

    .top {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 80px;
        background-color: transparent;
        background: url(../../assets/images/top.png) no-repeat;
        background-position: 50% 0;
    }
  .right {
    position: absolute;
    top: 100px;
    width: 23%;
    height: 60%;
    background: url(../../assets/images/right.png) no-repeat;
    z-index: 20;
  }

    .title_right {
        top: 10px;
        width: 100%;
        height: 80px;
        background: url(../../assets/images/topright.png) no-repeat;
    }
  .title_left {
    position: absolute;
    top: 16px;
    width: 98.5%;
    height: 80px;
    background: url(../../assets/images/topleft.png) no-repeat;
    background-position: 100% 0;
  }

    .right {
        position: absolute;
        top: 100px;
        width: 23%;
        height: 60%;
        background: url(../../assets/images/right.png) no-repeat;
        z-index: 20;
    }
  .center {
    position: fixed;
    // position: absolute;
    left: 24%;
    top: 105px;
    width: 51.5%;
    height: 60%;
    // background: url(../../assets/images/center.png) no-repeat;
    z-index: 20;
    overflow: hidden;
  }

    .title_left {
        position: absolute;
        top: 16px;
        width: 98.5%;
        height: 80px;
        background: url(../../assets/images/topleft.png) no-repeat;
        background-position: 100% 0;
    }
  .left {
    position: absolute;
    left: 76%;
    top: 100px;
    width: 30%;
    height: 100%;
    background: url(../../assets/images/left.png) no-repeat;
    z-index: 20;
  }

    .center {
        position: fixed;
        // position: absolute;
        left: 24%;
        top: 105px;
        width: 51.5%;
        height: 60%;
        // background: url(../../assets/images/center.png) no-repeat;
        z-index: 20;
        overflow: hidden;
    }
  .title_left_tdmm {
    font-size: 14px;
    position: absolute;
    margin-top: 78px;
    margin-left: 380px;
  }

    .left {
        position: absolute;
        left: 76%;
        top: 100px;
        width: 30%;
        height: 100%;
        background: url(../../assets/images/left.png) no-repeat;
        z-index: 20;
    }
  .title_left_ndmm {
    font-size: 14px;
    position: absolute;
    margin-top: 78px;
    margin-left: 250px;
  }

    .title_left_tdmm {
        font-size: 14px;
        position: absolute;
        margin-top: 78px;
        margin-left: 380px;
    }
  .title_left_edmm {
    font-size: 14px;
    position: absolute;
    margin-top: 78px;
    margin-left: 95px;
  }

    .title_left_ndmm {
        font-size: 14px;
        position: absolute;
        margin-top: 78px;
        margin-left: 250px;
    }
  .bottom {
    position: absolute;
    bottom: -15px;
    width: 75%;
    height: 30%;
    z-index: 20;
  }

    .title_left_edmm {
        font-size: 14px;
        position: absolute;
        margin-top: 78px;
        margin-left: 95px;
    }
  /*最外层透明*/
  .bottom ::v-deep .el-table,
  .bottom ::v-deep .el-table__expanded-cell {
    position: absolute;
    z-index: 20;
    background-color: transparent;
    width: 98%;
    left: 1%;
    //   background: url(../../assets/images/bottom.png) no-repeat;
  }

    .bottom {
        position: absolute;
        bottom: -15px;
        width: 75%;
        height: 30%;
        z-index: 20;
    }
  // 头部样式
  .bottom ::v-deep .el-table th {
    background-color: rgb(8, 17, 56);
    color: #fff;
  }

    /*最外层透明*/
    .bottom ::v-deep .el-table,
    .bottom ::v-deep .el-table__expanded-cell {
        position: absolute;
        z-index: 20;
        background-color: transparent;
        width: 98%;
        left: 1%;
        //   background: url(../../assets/images/bottom.png) no-repeat;
  // 表头边框
  ::v-deep .el-table tr {
    background-color: transparent !important;
  }

    }
  // 内容行样色
  .bottom::v-deep .el-table__row {
    background-color: rgb(14, 27, 71) !important;
    color: #b2c9ee;
  }

  //自定义斑马线和鼠标移入样式
  // .bottom ::v-deep .el-table__body tr.hover-row>td {
  //     background-color: rgb(14, 27, 71) !important;
  // }
  ::v-deep.el-table__body tr.current-row > td {
    background-color: transparent;
  }

    // 头部样式
    .bottom ::v-deep .el-table th {
        background-color: rgb(8, 17, 56);
        color: #fff;
    }
  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd) > td {
    background-color: rgb(14, 27, 71) !important;
  }

    // 表头边框
    ::v-deep .el-table tr {
        background-color: transparent !important;
    }
  //斑马纹颜色
  .bottom::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: rgb(8, 17, 56);
  }

    // 内容行样色
    .bottom::v-deep .el-table__row {
        background-color: rgb(14, 27, 71) !important;
        color: #B2C9EE;
    }
  //去掉表头下边框线
  ::v-deep .is-leaf {
    border-bottom: none !important;
  }

    //自定义斑马线和鼠标移入样式
    // .bottom ::v-deep .el-table__body tr.hover-row>td {
    //     background-color: rgb(14, 27, 71) !important;
    // }
    ::v-deep.el-table__body tr.current-row>td {
        background-color: transparent;
    }
  //去掉表格内容下边框线
  ::v-deep .el-table td,
  .el-table th.is-leaf {
    border-bottom: none;
  }

    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td {
        background-color: rgb(14, 27, 71) !important;
    }
  /* // 去掉最下面的那一条线  */
  ::v-deep .el-table::before {
    height: 0px;
  }

    //斑马纹颜色
    .bottom::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: rgb(8, 17, 56);
    }
  /* 定义滚动容器的滚动条样式 */
  ::v-deep.el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    /* 定义滚动条的宽度 */
    height: 10px;
    /* 定义滚动条的高度 */
  }

    //去掉表头下边框线
    ::v-deep .is-leaf {
        border-bottom: none !important;
    }
  /* 定义滚动条滑块的样式 */
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #0d9eec;
    /* 定义滑块的颜色 */
    border-radius: 5px;
    /* 定义滑块的圆角 */
  }

    //去掉表格内容下边框线
    ::v-deep .el-table td,
    .el-table th.is-leaf {
        border-bottom: none;
    }
  //去除表头轨道
  ::v-deep .el-table th.gutter {
    display: none !important;
    //   width: 100px !important;
  }

    /* // 去掉最下面的那一条线  */
    ::v-deep .el-table::before {
        height: 0px;
    }
  .title_left_text {
    left: 86%;
    position: absolute;
    top: 30px;
  }

    /* 定义滚动容器的滚动条样式 */
    ::v-deep.el-table__body-wrapper::-webkit-scrollbar {
  .title_right_img {
    position: absolute;
    margin-top: 20px;
    margin-left: 20px;
  }

        width: 10px;
        /* 定义滚动条的宽度 */
        height: 10px;
        /* 定义滚动条的高度 */
    }
  .title_right_time {
    font-size: 16px;
    position: absolute;
    margin-top: 20px;
    margin-left: 42px;
  }

    /* 定义滚动条滑块的样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #0d9eec;
        /* 定义滑块的颜色 */
        border-radius: 5px;
        /* 定义滑块的圆角 */
    }
  .title_right_day {
    font-size: 14px;
    position: absolute;
    margin-top: 40px;
    margin-left: 42px;
  }

    //去除表头轨道
    ::v-deep .el-table th.gutter {
        display: none !important;
        //   width: 100px !important;
    }
  .title_right_week {
    font-size: 14px;
    position: absolute;
    margin-top: 40px;
    margin-left: 120px;
  }

    .title_left_text {
        left: 86%;
        position: absolute;
        top: 30px;
    }
  /* 鼠标未悬浮时效果设置 */
  .title_left_bnt {
    font-size: 16px;
    color: rgb(43, 150, 226);
    left: 94%;
    position: absolute;
    top: 20px;
  }

    .title_right_img {
        position: absolute;
        margin-top: 20px;
        margin-left: 20px;
  /* 鼠标悬浮后的设置 */
  .title_left_bnt:hover {
    color: #ffffff;
    text-decoration: underline;
  }

    }
  .title_right_monitor {
    font-size: 30px;
    // left: 94%;
    position: absolute;
    margin-top: 100px;
    margin-left: 160px;
  }

    .title_right_time {
        font-size: 16px;
        position: absolute;
        margin-top: 20px;
        margin-left: 42px;
    }
  .title_right_standard {
    font-size: 30px;
    // left: 94%;
    position: absolute;
    margin-top: 100px;
    margin-left: 410px;
  }

    .title_right_day {
        font-size: 14px;
        position: absolute;
        margin-top: 40px;
        margin-left: 42px;
    }
  .title_right_offline {
    font-size: 30px;
    // left: 94%;
    position: absolute;
    margin-top: 260px;
    margin-left: 160px;
  }

    .title_right_week {
        font-size: 14px;
        position: absolute;
        margin-top: 40px;
        margin-left: 120px;
    }
  .title_right_alarm {
    font-size: 30px;
    // left: 94%;
    position: absolute;
    margin-top: 260px;
    margin-left: 410px;
  }

    /* 鼠标未悬浮时效果设置 */
    .title_left_bnt {
        font-size: 16px;
        color: rgb(43, 150, 226);
        left: 94%;
        position: absolute;
        top: 20px;
    }
  .title_right_message {
    font-size: 50px;
    // left: 94%;
    position: absolute;
    margin-top: 500px;
    margin-left: 130px;
  }

    /* 鼠标悬浮后的设置 */
    .title_left_bnt:hover {
        color: #ffffff;
        text-decoration: underline;
    }
  .custom-table .el-table__row .el-table_1_column_1 {
    color: #ffffff;
    background: url(../../assets/images/bottom.png) no-repeat;

    .title_right_monitor {
        font-size: 30px;
        // left: 94%;
        position: absolute;
        margin-top: 100px;
        margin-left: 160px;
    }
    /* 设置文本颜色 */
  }

    .title_right_standard {
        font-size: 30px;
        // left: 94%;
        position: absolute;
        margin-top: 100px;
        margin-left: 410px;
    }
  .cell-bg-color {
    background-color: #2167a0;
    /* 你想要的背景颜色 */
  }

  .page {
    width: 100%;
    height: 20%;
    position: absolute;
    z-index: 20;
    top: 250px;
    left: 30%;
  }

    .title_right_offline {
        font-size: 30px;
        // left: 94%;
        position: absolute;
        margin-top: 260px;
        margin-left: 160px;
    }
  .pageleft {
    width: 30%;
    height: 20%;
    position: absolute;
    z-index: 20;
    top: 85%;
    left: 4%;
  }

  .pagination-container[data-v-72233bcd] {
    background: transparent !important;
    padding: 0;
  }

    .title_right_alarm {
        font-size: 30px;
        // left: 94%;
        position: absolute;
        margin-top: 260px;
        margin-left: 410px;
    }
  .pagination-container {
    margin-top: 0;
  }

  .process {
    position: relative;
    top: 100px;
    z-index: 30;
    width: 70%;
    height: 75%;
    left: 30px;
  }

    .title_right_message {
        font-size: 50px;
        // left: 94%;
        position: absolute;
        margin-top: 500px;
        margin-left: 130px;
    }
  .process_left_tagid {
    font-size: 14px;
    position: absolute;
    margin-top: 22px;
    margin-left: 8px;
  }

    .custom-table .el-table__row .el-table_1_column_1 {
        color: #ffffff;
        background: url(../../assets/images/bottom.png) no-repeat;

        /* 设置文本颜色 */
    }

    .cell-bg-color {
        background-color: #2167a0;
        /* 你想要的背景颜色 */


    }

    .page {
        width: 100%;
        height: 20%;
        position: absolute;
        z-index: 20;
        top: 250px;
        left: 30%;
    }

    .pageleft {
        width: 30%;
        height: 20%;
        position: absolute;
        z-index: 20;
        top: 85%;
        left: 4%;
    }

    .pagination-container[data-v-72233bcd] {
        background: transparent !important;
        padding: 0;
    }

    .pagination-container {
        margin-top: 0;
    }

    .process {
        position: relative;
        top: 100px;
        z-index: 30;
        width: 70%;
        height: 75%;
        left: 30px;
    }

    .process_left_tagid {
        font-size: 14px;
        position: absolute;
        margin-top: 22px;
        margin-left: 8px;
    }

    .process_left_zong {
        font-size: 14px;
        position: absolute;
        margin-top: 22px;
        margin-left: 8px;
    }
  .process_left_zong {
    font-size: 14px;
    position: absolute;
    margin-top: 22px;
    margin-left: 8px;
  }
}
</style>
</style>