<template>
  <div class="project-tower-crane">
    <div class="screen-content">
      <el-row>
        <el-col :span="6" style="position: relative;">
          <module-one-3-1 label="设备概况">
            <el-row>
              <el-col :span="12">
                <div class="equipment-list-min quality-target-index-min">
                  <div class="czz-number-img czz-number-img-blue">
                    <svg class="my-svg-icon-blue" style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                      viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3054">
                      <path
                        d="M929.84 550.848a29.155 29.155 0 0 0 29.153-29.154V347.16a29.282 29.282 0 0 0-17.9-27.291c-0.028-0.012-0.055-0.019-0.082-0.029L358.4 67.362a0.324 0.324 0 0 0-0.038-0.014 29.452 29.452 0 0 0-25.538 1.186L80.374 204.472A29.229 29.229 0 0 0 65 230.2v291.5a29.155 29.155 0 0 0 29.157 29.15h111.9a87.872 87.872 0 0 0 53.29 53.293V900.69h-87.453a29.155 29.155 0 0 0 0 58.309h408.125a29.155 29.155 0 0 0 0-58.309h-87.456V609.154h29.153a87.594 87.594 0 0 0 82.441-58.306h238.228v145.767a29.154 29.154 0 0 0 29.152 29.154 29.155 29.155 0 1 1-20.612 49.77 29.152 29.152 0 0 0-41.225 41.228 87.471 87.471 0 1 0 90.99-144.342V550.85h29.15zM375.957 317.62h29.152c70.392 0 129.283 50.159 142.826 116.613H405.109a29.187 29.187 0 0 1-29.152-29.154V317.62z m-174.91 174.922h-77.739V375.929h77.739v116.613z m5.013-174.922h-82.752v-70.047l194.346-104.654v116.4H288.5a87.6 87.6 0 0 0-82.44 58.301z m111.594 583.069v-75.384l75.379 75.384h-75.379zM434.26 859.46L329.728 754.922 434.26 650.383V859.46zM317.654 684.539v-75.385h75.379z m233.214-162.845a29.187 29.187 0 0 1-29.152 29.154H288.5a29.187 29.187 0 0 1-29.152-29.154v-174.92A29.187 29.187 0 0 1 288.5 317.62h29.153v87.461a87.557 87.557 0 0 0 87.455 87.461h145.76v29.152z m-3.1-204.074a203.383 203.383 0 0 0-142.659-58.306h-29.154v-120.8l413.3 179.1H547.766z m61.406 174.922v-29.155a203.612 203.612 0 0 0-7.079-53.31l82.458 82.463h-75.381zM650.4 375.927h209.063L754.931 480.465z m174.91 116.615l75.38-75.383v75.383h-75.38z"
                        fill="" p-id="3341"></path>
                    </svg>
                  </div>
                  <div class="equipment-list-data">
                    <p style="font-size: 16px;">塔机总数</p>
                    <div><span>3</span><span style="font-size: 12px;">台</span></div>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="equipment-list-min quality-target-index-min">
                  <div class="czz-number-img czz-number-img-green">
                    <svg class="my-svg-icon-green" style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                      viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7849">
                      <path
                        d="M128 128c-23.552 0-42.496 18.944-42.496 42.496v512c0 23.552 18.944 42.496 42.496 42.496h768c23.552 0 42.496-18.944 42.496-42.496v-512c0-23.552-18.944-42.496-42.496-42.496H128z m0-42.496h768c47.104 0 85.504 38.4 85.504 85.504v512c0 47.104-38.4 85.504-85.504 85.504H128c-47.104 0-85.504-38.4-85.504-85.504v-512c0-47.616 38.4-85.504 85.504-85.504zM846.336 487.424l-150.528-215.04c-2.56-4.096-4.608-6.656-7.168-9.728-4.608-4.608-9.216-6.656-14.336-6.656-5.12 0-10.24 2.048-14.336 6.656-3.584 4.096-3.584 5.12-7.168 9.728l-177.152 252.928-128-163.84c-8.192-10.24-19.968-10.752-28.16-5.632-4.608 3.072-6.656 5.632-9.728 9.728L167.936 573.44c-8.192 11.776-6.144 21.504 5.632 29.696 11.776 8.192 21.504 6.144 29.696-5.632L330.24 409.6l128.512 164.864c8.704 11.264 21.504 11.264 29.696 3.584 3.072-2.56 7.168-8.704 10.752-13.824l174.08-248.832 137.216 196.096c8.192 11.776 17.92 13.312 29.696 5.12 12.288-7.68 14.336-17.408 6.144-29.184zM149.504 896h725.504c14.336 0 21.504 7.168 21.504 21.504 0 14.336-7.168 21.504-21.504 21.504H149.504c-14.336 0-21.504-7.168-21.504-21.504 0-14.336 7.168-21.504 21.504-21.504zM362.496 725.504c14.336 0 21.504 7.168 21.504 21.504v170.496c0 14.336-7.168 21.504-21.504 21.504-14.336 0-21.504-7.168-21.504-21.504v-170.496c0.512-14.336 7.68-21.504 21.504-21.504zM661.504 725.504c14.336 0 21.504 7.168 21.504 21.504v170.496c0 14.336-7.168 21.504-21.504 21.504-14.336 0-21.504-7.168-21.504-21.504v-170.496c0-14.336 7.168-21.504 21.504-21.504z"
                        p-id="4373"></path>
                    </svg>
                  </div>
                  <div class="equipment-list-data">
                    <p style="font-size: 16px;">监控总数</p>
                    <div><span class="fgreen">3</span><span style="font-size: 12px;">台</span></div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row style="height:160px;overflow: hidden;">
              <staff-survey-chart :height="200" :unit="'个'" :data="data1" :width="140"></staff-survey-chart>
            </el-row>
            <el-row>
              <div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
                <div :class="'active'">监控列表</div>
              </div>
              <div class="drv-list scroll">
                <div v-for="(it, idx) in devList" :key="idx" class="drv-item">
                  <div class="item-content">
                    <div class="dev-row1">
                      <div class="survey_content">
                        <div class="survey_content_img labour-education_bgd">
                          <svg class="my-svg-icon-blue"
                            style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7849">
                            <path
                              d="M929.84 550.848a29.155 29.155 0 0 0 29.153-29.154V347.16a29.282 29.282 0 0 0-17.9-27.291c-0.028-0.012-0.055-0.019-0.082-0.029L358.4 67.362a0.324 0.324 0 0 0-0.038-0.014 29.452 29.452 0 0 0-25.538 1.186L80.374 204.472A29.229 29.229 0 0 0 65 230.2v291.5a29.155 29.155 0 0 0 29.157 29.15h111.9a87.872 87.872 0 0 0 53.29 53.293V900.69h-87.453a29.155 29.155 0 0 0 0 58.309h408.125a29.155 29.155 0 0 0 0-58.309h-87.456V609.154h29.153a87.594 87.594 0 0 0 82.441-58.306h238.228v145.767a29.154 29.154 0 0 0 29.152 29.154 29.155 29.155 0 1 1-20.612 49.77 29.152 29.152 0 0 0-41.225 41.228 87.471 87.471 0 1 0 90.99-144.342V550.85h29.15zM375.957 317.62h29.152c70.392 0 129.283 50.159 142.826 116.613H405.109a29.187 29.187 0 0 1-29.152-29.154V317.62z m-174.91 174.922h-77.739V375.929h77.739v116.613z m5.013-174.922h-82.752v-70.047l194.346-104.654v116.4H288.5a87.6 87.6 0 0 0-82.44 58.301z m111.594 583.069v-75.384l75.379 75.384h-75.379zM434.26 859.46L329.728 754.922 434.26 650.383V859.46zM317.654 684.539v-75.385h75.379z m233.214-162.845a29.187 29.187 0 0 1-29.152 29.154H288.5a29.187 29.187 0 0 1-29.152-29.154v-174.92A29.187 29.187 0 0 1 288.5 317.62h29.153v87.461a87.557 87.557 0 0 0 87.455 87.461h145.76v29.152z m-3.1-204.074a203.383 203.383 0 0 0-142.659-58.306h-29.154v-120.8l413.3 179.1H547.766z m61.406 174.922v-29.155a203.612 203.612 0 0 0-7.079-53.31l82.458 82.463h-75.381zM650.4 375.927h209.063L754.931 480.465z m174.91 116.615l75.38-75.383v75.383h-75.38z"
                              fill="#1195db" p-id="5289"></path>
                          </svg>
                        </div>
                      </div>

                      <div class="dev-row1-col2">
                        <div class="data-row">
                          <span>设备名称:</span>
                          <span>{{ it.name }}</span>
                        </div>
                        <div class="data-row">
                          <span>设备状态:</span>
                          <span :class="it.state == 0 ? 'is-offline' : 'is-online'">{{ it.state == 0 ? '离线' : '在线' }}</span>
                        </div>
                      </div>
                    </div>

                    <div class="dev-row2">
                      <div class="dev-row2-col">
                        <div class="data-row">
                          <span>司机:</span>
                          <span>{{ it.driver }}</span>
                        </div>
                      </div>
                      <div class="dev-row2-col">
                        <div class="data-row">
                          <span>电话:</span>
                          <span class="sp-tel">{{ it.driverTel }}</span>
                        </div>
                      </div>
                    </div>

                    <div class="dev-row2">
                      <div class="dev-row2-col">
                        <div class="data-row">
                          <span>安全员:</span>
                          <span>{{ it.safer }}</span>
                        </div>
                      </div>
                      <div class="dev-row2-col">
                        <div class="data-row">
                          <span>电话:</span>
                          <span class="sp-tel">{{ it.saferTel }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-row>
          </module-one-3-1>
        </el-col>
        <el-col :span="18">
          <module-one-3-1 cls="no-lable no-border" style="position: relative;">
            <el-row>
                <el-col :span="16">
            <el-row>
              <el-col :span="6">
                <div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
                  <div :class="'active'">吊重次数(10次)</div>
                  <div class="title-bg"></div>
                </div>
                <div class="data-row2">
                  <div class="data-row2-col">
                    <div class="s-text">本月</div>
                    <div class="s-number">5</div>
                  </div>
                  <div class="data-row2-col">
                    <div class="s-text">累计</div>
                    <div class="s-number">500</div>
                  </div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
                  <div :class="'active'">超载次数(10次)</div>
                  <div class="title-bg"></div>
                </div>
                <div class="data-row2">
                  <div class="data-row2-col">
                    <div class="s-text">本月</div>
                    <div class="s-number">5</div>
                  </div>
                  <div class="data-row2-col">
                    <div class="s-text">累计</div>
                    <div class="s-number">500</div>
                  </div>
                </div>
              </el-col>


              <el-col :span="6">
                <div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
                  <div :class="'active'">超载率(10%)</div>
                  <div class="title-bg"></div>
                </div>
                <div class="data-row2">
                  <div class="data-row2-col">
                    <div class="s-text">本月</div>
                    <div class="s-number">10%</div>
                  </div>
                  <div class="data-row2-col">
                    <div class="s-text">累计</div>
                    <div class="s-number">12%</div>
                  </div>
                </div>
              </el-col>


              <el-col :span="6">
                <div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
                  <div :class="'active'">告警次数(10次)</div>
                  <div class="title-bg"></div>
                </div>
                <div class="data-row2">
                  <div class="data-row2-col">
                    <div class="s-text">本月</div>
                    <div class="s-number">5</div>
                  </div>
                  <div class="data-row2-col">
                    <div class="s-text">累计</div>
                    <div class="s-number">500</div>
                  </div>
                </div>
              </el-col>

            </el-row>

            <div class="dev-info">

            </div>
          </el-col>
              <el-col :span="8">
              222222222
              </el-col>
            </el-row>

            <el-row class="dev-info-list">
              <el-col :span="4" class="dev-info-item" v-for="(it,idx) in devBottomInfo" :key="idx">
                <div class="info-item-content">
                  <div  class="row-1">
                  <span class="sp-title">{{ it.title }}</span>
                  <svg v-if="idx==0" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11357"><path d="M511.362506 77.130254A435.935081 435.935081 0 0 0 75.427425 511.360799 435.935081 435.935081 0 0 0 511.362506 948.574282a435.935081 435.935081 0 0 0 434.656679-437.213483A435.935081 435.935081 0 0 0 511.362506 77.130254zM511.362506 1.278402a511.360799 511.360799 0 0 1 511.360799 511.360799 511.360799 511.360799 0 0 1-511.360799 511.360799A511.360799 511.360799 0 0 1 0.001707 512.639201 511.360799 511.360799 0 0 1 511.362506 0zM322.585144 283.379109a37.499792 37.499792 0 0 0-53.26675 0 37.925926 37.925926 0 0 0 0 53.692884l131.675406 131.675406a121.022056 121.022056 0 0 0-13.636288 56.675822A124.004994 124.004994 0 0 0 511.362506 649.428215a124.004994 124.004994 0 0 0 124.004993-124.004994A124.004994 124.004994 0 0 0 511.362506 401.418227a124.857262 124.857262 0 0 0-56.675822 13.636288zM511.362506 477.270079a48.579276 48.579276 0 0 1 48.153142 48.153142A48.153142 48.153142 0 0 1 511.362506 573.576363a48.153142 48.153142 0 0 1-48.579276-48.153142A48.579276 48.579276 0 0 1 511.362506 477.270079z m-281.24844-51.13608a302.981273 302.981273 0 0 0-14.91469 98.01082 37.925926 37.925926 0 0 0 37.925926 37.925926 37.499792 37.499792 0 0 0 37.499792-37.925926 235.652102 235.652102 0 0 1 11.079484-74.147316 37.499792 37.499792 0 0 0-23.863504-47.727008 37.073658 37.073658 0 0 0-47.727008 23.863504zM511.362506 227.98169a317.895963 317.895963 0 0 0-98.436954 14.91469 38.35206 38.35206 0 0 0-23.863504 47.727007 38.35206 38.35206 0 0 0 48.153142 24.289638A235.652102 235.652102 0 0 1 511.362506 303.833541a221.163546 221.163546 0 0 1 221.589679 221.58968 37.925926 37.925926 0 0 0 37.925926 37.925926 37.925926 37.925926 0 0 0 37.925926-37.925926A298.293799 298.293799 0 0 0 511.362506 229.260092z" fill="#363636" p-id="11358"></path></svg>
                  <svg v-if="idx==1" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6961"><path d="M174.5 394.1h331.2c91 0 166-73.2 166.3-164.2 0.3-91-73.7-165.1-164.7-165.1-43.2 0-84 16.6-114.9 46.7-15.5 15.1-27.7 32.9-36.2 52.2-12.7 29.1 8.4 61.7 40.1 62.6 18.5 0.5 35.2-10.4 42.6-27.3 11.6-26.2 37.7-44.2 68.3-44.2 41.4 0 75.1 33.9 74.7 75.4-0.4 41.1-34.5 73.9-75.6 73.9H174.5c-24.9 0-45 20.1-45 45s20.2 45 45 45zM189.3 634.2l0.6 45-0.6-45zM682 626.9c-0.6 0-0.8 0-427.3 6.3-7.3 0.1-14.2 0.2-20.5 0.3-24.8 0.4-44.7 20.8-44.3 45.6 0.3 24.9 20.8 44.8 45.7 44.4 6.3-0.1 13.2-0.2 20.5-0.3 124.9-1.9 415.3-6.2 426.2-6.3 42.8 0.2 77.2 36.5 74.2 80-2.8 39.8-35.9 70-75.7 69.3-30.2-0.5-55.9-18.5-67.2-44.5-7.3-16.8-24.1-27.5-42.5-27-31.7 0.9-52.8 33.5-40.1 62.6 8.4 19.4 20.6 37.1 36.2 52.2 30.9 30.1 71.8 46.7 115 46.7 91.8-0.1 166.8-77 164.5-168.8-2.3-88.9-75.3-160.5-164.7-160.5zM856.6 240.3c-29-11.5-60.5 10.1-60.5 41.4v1.3c0 18 10.9 34.4 27.6 41.1 27.5 11 47 38 47 69.4 0 41.2-33.5 74.7-74.7 74.7H112.6c-24.9 0-45 20.1-45 45s20.1 45 45 45h683.5c90.8 0 164.7-73.9 164.7-164.7-0.1-69.5-43.3-129-104.2-153.2z" p-id="6962"></path></svg>
                  <svg v-if="idx==2" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7867"><path d="M675.84 102.4c36.7616 0 66.56 29.7984 66.56 66.56v148.48h122.88c36.23424 0 65.70496 28.9536 66.53952 64.98816L931.84 384v481.28c0 36.7616-29.7984 66.56-66.56 66.56H158.72c-36.7616 0-66.56-29.7984-66.56-66.56V384c0-36.7616 29.7984-66.56 66.56-66.56h122.88V168.96c0-36.23424 28.9536-65.70496 64.98816-66.53952L348.16 102.4z m184.32 286.72H163.84v471.04h696.32V389.12z m-209.92 107.52a10.24 10.24 0 0 1 10.24 10.24v51.2a10.24 10.24 0 0 1-10.24 10.24h-102.40512l0.00512 194.56a10.24 10.24 0 0 1-10.24 10.24H486.4a10.24 10.24 0 0 1-10.24-10.24l-0.00512-194.56H373.76a10.24 10.24 0 0 1-10.24-10.24V506.88a10.24 10.24 0 0 1 10.24-10.24h276.48z m20.48-322.56H353.28v143.36h317.44V174.08z" fill="#666666" p-id="7868"></path></svg>
                  <svg v-if="idx==3" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1042 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8742"><path d="M760.685714 376.685714l27.428572-56.685714c9.142857-18.285714 16.457143-36.571429 25.6-53.028571h1.828571c9.142857 16.457143 20.114286 34.742857 29.257143 53.028571l32.914286 56.685714h85.942857l-95.085714-149.942857 89.6-155.428571h-82.285715l-25.6 53.028571c-7.314286 18.285714-14.628571 34.742857-21.942857 51.2h-1.828571c-9.142857-16.457143-18.285714-34.742857-27.428572-51.2L768 71.314286h-85.942857l89.6 146.285714-95.085714 159.085714h84.114285zM213.942857 877.714286H162.742857V73.142857h-73.142857v841.142857c0 20.114286 16.457143 36.571429 36.571429 36.571429h841.142857v-73.142857H213.942857zM522.624 464.512l-51.712 51.730286 51.712 51.712 51.730286-51.712-51.730286-51.730286zM315.757714 671.049143l-51.730285 51.712 51.730285 51.712 51.712-51.712-51.712-51.712zM421.705143 570.916571l-51.748572 51.712 51.730286 51.730286 51.730286-51.712-51.712-51.730286zM212.315429 773.010286l-51.712 51.712 51.712 51.730285 51.730285-51.730285-51.730285-51.712zM307.2 398.628571l51.2-51.2-64-64c109.714286 9.142857 210.285714 53.028571 288.914286 120.685715l-9.142857 9.142857 51.2 51.2 9.142857-9.142857c67.657143 74.971429 113.371429 170.057143 128 276.114285l-60.342857-60.342857-51.2 51.2 128 128c7.314286 7.314286 16.457143 10.971429 25.6 10.971429 9.142857 0 18.285714-3.657143 25.6-10.971429l128-128-51.2-51.2-69.485715 69.485715C808.228571 457.142857 576 232.228571 290.742857 212.114286l67.657143-67.657143-51.2-51.2-128 128c-14.628571 14.628571-14.628571 36.571429 0 51.2l128 126.171428z" p-id="8743"></path></svg>
                  <svg v-if="idx==4" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9822"><path d="M894.56 268.64l31.68 59.52-391.2 208.32-31.68-59.52 391.2-208.32z" fill="#666666" p-id="9823"></path><path d="M512 33.44C247.52 33.44 33.44 247.52 33.44 512s214.08 478.56 478.56 478.56 478.56-214.08 478.56-478.56S776.48 33.44 512 33.44z m0 852c-202.08 0-366.24-167.52-366.24-374.88S309.92 135.68 512 135.68s366.24 167.52 366.24 374.88-163.68 374.88-366.24 374.88z" fill="#666666" p-id="9824"></path></svg>
                  <svg v-if="idx==5" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10417"><path d="M819.198 910.218 204.799 910.218c-50.267 0-91.022-40.75-91.022-91.02L113.777 204.822c0-50.29 40.755-91.045 91.022-91.045l614.398 0c50.27 0 91.02 40.755 91.02 91.045l0 614.376C910.218 869.468 869.468 910.218 819.198 910.218zM841.953 227.554c0-25.122-20.385-45.51-45.51-45.51L227.554 182.044c-25.122 0-45.51 20.387-45.51 45.51l0 568.889c0 25.125 20.387 45.535 45.51 45.535l568.889 0c25.125 0 45.51-20.39 45.51-45.535L841.953 227.554zM603.268 400.952l-57.14-57.115 0 335.802 55.505-55.5c13.335-13.31 34.93-13.335 48.265 0 13.33 13.335 13.33 34.95 0 48.29l-105.77 105.765c-1.615 3.415-3.525 6.78-6.37 9.625-7.1 7.08-16.475 10.1-25.76 9.67-9.262 0.46-18.66-2.59-25.76-9.69-2.842-2.85-4.8-6.15-6.347-9.58l-105.79-105.79c-13.335-13.34-13.335-34.955 0-48.29 13.332-13.31 34.927-13.335 48.262 0l55.502 55.5L477.865 343.837l-57.117 57.115c-13.335 13.357-34.952 13.335-48.287 0s-13.335-34.93 0-48.265l115.395-115.37c13.332-13.335 34.927-13.357 48.262 0l115.395 115.37c13.335 13.335 13.335 34.952 0 48.265C638.198 414.286 616.583 414.286 603.268 400.952z" fill="#272636" p-id="10418"></path></svg>
                  </div>
                  <div class="row-scale">
                    <div class="row-scale-ctx">
                      <div v-for="i in 10" :key="i" class="scale-item"></div>
                    </div>
                    <span class="sp-data1 sp-data sp-sc">报警:{{ it.data1}}</span>
                    <span class="sp-data2 sp-data sp-sc" v-if="it.data2>=5" :style="calcTop(it)">报警:{{ it.data2}}</span>                    
                    <span class="sp-sc1 sp-sc">{{ it.scale1 }}</span>
                    <span class="sp-sc2 sp-sc">{{ it.scale2 }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </module-one-3-1>
        </el-col>
       
      </el-row>
    </div>

  </div>
</template>

<script>
import '@/components/module/module-one-2-1'
import '@/components/module/module-one-3-1'
import '@/components/staff-survey-chart'
export default {
  //塔吊
  name: 'JhbigscreenTowerCrane',

  data() {
    return {
      data1: [],
      devList: [],
      selDev: {},
      devBottomInfo:[]
    };
  },

  mounted() {
    this.devBottomInfo=[{title:"幅度",data1:59,data2:58,scale1:'0',scale2:'0m'},
    {title:"风速",data1:59,data2:58,scale1:'0',scale2:'0m'},
    {title:"吊重",data1:13.8,data2:10.8,scale1:'0',scale2:'0m'},
    {title:"倾角",data1:59,data2:5,scale1:'0',scale2:'0m'},
    {title:"转角",data1:59,data2:58,scale1:'0',scale2:'0m'},
    {title:"高度",data1:59,data2:58,scale1:'0',scale2:'0m'},
  ];
    this.data1 = [
      { text: "在线数量", value: 1 },
      { text: "离线数量", value: 2 },
    ];
    this.devList = [{
      name: "xxxxxx1#塔机",
      state: 0,
      driver: "张大三，张小山",
      driverTel: "1338899090,133889902",
      safer: "张九",
      saferTel: "13388664433",
      selected: true,
    }, {
      name: "xxxxxx2#塔机",
      state: 0,
      driver: "张大三，张小山",
      driverTel: "1338899090,133889902",
      safer: "张九",
      saferTel: "13388664433",
      selected: false,
    }, {
      name: "xxxxxx3#塔机",
      state: 1,
      driver: "张大三，张小山",
      driverTel: "1338899090,133889902",
      safer: "张九",
      saferTel: "13388664433",
      selected: false,
    }];
    this.selDev = this.devList[0];
  },

  methods: {
    calcTop(d){
      let tmp=100-(d.data2*100.0/d.data1);
      return `top:calc(20px + ${tmp>78?78:tmp}%)`;
    }
  },
};
</script>
<style lang="less">
.project-tower-crane {

  .my-svg-icon-blue,
  .my-svg-icon-green {
    width: 28px;
    height: 28px;
    position: relative;
    top: -10px;
  }

  .my-svg-icon-green * {
    fill: #63F8BC;
  }

  .my-svg-icon-blue {
    fill: #002d8d;
  }

  .drv-list {
    padding: 0px 12px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;

    .drv-item {
      border-bottom: dotted 1px #429fff;

      &:first-child {
        .item-content {
          margin-top: 0px;
        }
      }

      .item-content {
        background-color: #429fff25;
        margin: 10px;
        padding: 10px;
      }

      .dev-row1 {
        display: flex;
        align-items: center;
      }

      .dev-row2 {
        display: grid;
        grid-template-columns: 50% 50%;

        .sp-tel {
          display: inline-block;
          width: 107px;
          word-wrap: break-word;
          vertical-align: middle;
        }

        .dev-row2-col {
          display: flex;
          align-items: center;
        }
      }

      .data-row {
        padding-left: 12px;
        line-height: 30px;
        color: rgba(255, 255, 255, 0.5);

        span {
          &:last-child {
            display: inline-block;
            margin-left: 4px;
            color: #79bbe3;
          }
        }
      }
    }
  }

  .title-bg {
    background: rgb(2, 0, 36);
    background: linear-gradient(185deg, rgba(2, 0, 36, 0.2) 0%, rgba(9, 9, 121, 0.06) 48%, rgba(0, 212, 255, 0.5) 100%);
    position: absolute;
    width: 60%;
    height: 20px;
    left: 30px;
  }

  .data-row2 {
    display: grid;
    grid-template-columns: 50% 50%;

    .data-row2-col {
      text-align: center;
      line-height: 30px;

      .s-text {
        color: #497deb;
      }

      .s-number {
        color: #429fff;
        font-weight: bold;
      }
    }
  }
  .dev-info{
    height: calc(100vh - 323px);
  }
  .dev-info-list {
    height: 280px;

    .dev-info-item {
      .info-item-content {
        border: 1px solid transparent;
        border-image: linear-gradient(to bottom, #f7f1f100, #3473c3d4);
        border-image-slice: 1;
        height: 100%;
        .row-1{
          position: relative;
          .sp-title{
            position: relative;
            left:12px;
            color:#ccd7e5d4;
            font-size:12px;
          }
          svg.icon{
            position:absolute;
            right: 12px;
            fill:#9c1ef1 !important;
            width:20px !important;
            height: 20px !important;
            *{
              fill:#9c1ef1 !important;
            }
          }
        }
        .row-scale{
          height: calc(100% - 24px);
          position: relative;
          text-align: center;
          .row-scale-ctx{
            height: 100%;
            display: inline-block;
            width: 30%;
            .scale-item{              
              margin: 22% 0px;
              height: 4%;
              background: #002d8d94;
              border-radius: 5%;
            }
          }
          .sp-sc{
            position: absolute;
            bottom:2px;
            left:50%;
            font-size: 12px;
            color: #72b5f9;
          }
          .sp-sc1{            
            margin-left:calc(-15% - 20px);
          }
          .sp-sc2{
            margin-left:calc(15% + 10px);
          }
          .sp-data{
            text-align: right;
            margin-left:calc(-15% - 50px);
          }
          .sp-data1{
            top:10px;            
          }
          
        }
      }
      padding:12px;
      height: 100%;
    }
  }
}
</style>
