修改

liuyg

2021-04-09 fb279cb2adcc1c2918e8bf117eb1124fe4efddee

修改

 src/api/dataL/axiosL.js

@@ -9,3 +9,23 @@
    }
  })
}

export const getGalarm = (dataG) => {
  return request({
    url: '/api/blade-jfpts/alarm/alarm/page',
    method: 'get',
    params: {
      ...dataG
    }
  })
}

export const getnum = (dataM) => {
  return request({
    url: '/api/blade-jfpts/alarm/alarm/queryYearAlarm',
    method: 'get',
    params: {
      ...dataM
    }
  })
}

 src/router/views/index.js

@@ -339,9 +339,9 @@
}, {
    path: '/dataL',
    component: Layout,
    redirect: '/dataL/index',
    redirect: '/dataL/dataL',
    children: [{
        path: 'index',
        path: 'dataL',
        name: '详情页',
        meta: {
            i18n: 'dataL'

 src/views/dataL/dataL.vue

@@ -1,79 +1,162 @@
<template>
    <div id="Lour">
        <div class="left">
            <div class="top">
                <div class="top-l">
                <div class="left-top" >
                    <p style="font-size: 24px;font-weight: 100;">{{name}}</p>
                    <p>{{state}}</p>
                    <p>{{evaluate}}</p>
                </div>
                <div class="left-bot">
                    <p>{{machineCode}}</p>
                    <p>{{smoke}}</p>
                    <p>{{proportion}}</p>
                </div>
                </div>
                <div class="top-r">
                    <p>{{ReportTime}}</p>
                </div>
  <div id="Lour">
    <div class="left">
      <div class="top">
        <div class="top-l">
          <div class="left-top">
            <p style="font-size: 24px; font-weight: 100">
              {{ name.length > 14 ? name.substr(0, 14) + "···" : name }}
            </p>
            <div class="l-t-state">
              <span
                :class="{
                  'l-t-s-grey': state == '掉线',
                  'l-t-s-green': state == '测试',
                  'l-t-s-red': state == '报警',
                  'l-t-s-yuan': true,
                }"
              ></span>
              <span>{{ state }}</span>
            </div>
            <div class="l-main">
                <div style="padding: 20px">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="预警历史" name="first">
                <!-- <el-tab-pane label="预警历史" name="second"> -->
                    <div class="frist-left">
                        <div id="echart01" style="width: 100%;height:260px;">
                        </div>
                        
                        <div class="l-main-2">
                <div class="l-m-2-heard">

            <!-- <p>{{evaluate}}</p> -->
          </div>
          <div class="left-bot">
            <p>{{ machineCode }}</p>
            <!-- <p>{{smoke}}</p> -->
            <!-- <p>{{proportion}}</p> -->
          </div>
        </div>
        <div class="top-r">
          <p>{{ ReportTime }}</p>
        </div>
      </div>
      <div class="l-main">
        <div style="padding: 20px">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="预警历史" name="first">
              <!-- <el-tab-pane label="预警历史" name="second"> -->
              <div class="frist-left">
                <div id="echart01" style="width: 100%; height: 260px"></div>

                <div class="l-main-2">
                  <div class="l-m-2-heard">
                    <span style="font-size: 14px">历史事件</span>
                    <span style="font-size: 12px">全部事件类型</span>
                    <span style="padding-left: 1px;">
                        
                        <el-popover
                    <span style="padding-left: 1px">
                      <el-popover
                        placement="bottom"
                        width="160"
                        v-model="screens">
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                            <div style="margin: 15px 0;"></div>
                            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                            </el-checkbox-group>
                                <div style="text-align: right; margin: 0; back">
                                    <el-button size="mini" type="text" @click="resetl">重置</el-button>
                                    <el-button type="primary" size="mini" @click="determine">确定</el-button>
                                </div>
                            <el-button 
                            slot="reference" 
                            style="border: transparent;background: transparent;width: 1px;position: relative;left: -60px;"
                            >
                                <svg 
                                class="icon-shaixuan" 
                                viewBox="0 0 1024 1024" 
                                width="100%" 
                                height="100%"
                                fill ="#29c093"
                                style="width: 13px;position: relative;top: 2px;"
                                >
                                    <path 
                                    d="M870.52 63.32H153.19c-25.61 0-40.84 28.57-26.57 49.83l295.73 440.58V927a32 32 0 0 0 47.06 28.24l116-61.87a32 32 0 0 0 16.94-28.23v-312.9l294.74-439.09c14.27-21.26-0.96-49.83-26.57-49.83z">
                                    </path>
                                </svg>
                            </el-button>
                        </el-popover>
                        v-model="screens"
                      >
                        <el-checkbox
                          :indeterminate="isIndeterminate"
                          v-model="checkAll"
                          @change="handleCheckAllChange"
                          >全选</el-checkbox
                        >
                        <div style="margin: 15px 0"></div>
                        <el-checkbox-group
                          v-model="checkedCities"
                          @change="handleCheckedCitiesChange"
                        >
                          <el-checkbox
                            v-for="city in cities"
                            :label="city"
                            :key="city"
                            >{{ city }}</el-checkbox
                          >
                        </el-checkbox-group>
                        <div style="text-align: right; margin: 0; back">
                          <el-button size="mini" type="text" @click="resetl"
                            >重置</el-button
                          >
                          <el-button
                            type="primary"
                            size="mini"
                            @click="determine"
                            >确定</el-button
                          >
                        </div>
                        <el-button
                          slot="reference"
                          style="
                            border: transparent;
                            background: transparent;
                            width: 1px;
                            position: relative;
                            left: -60px;
                          "
                        >
                          <svg
                            class="icon-shaixuan"
                            viewBox="0 0 1024 1024"
                            width="100%"
                            height="100%"
                            fill="#29c093"
                            style="width: 13px; position: relative; top: 2px"
                          >
                            <path
                              d="M870.52 63.32H153.19c-25.61 0-40.84 28.57-26.57 49.83l295.73 440.58V927a32 32 0 0 0 47.06 28.24l116-61.87a32 32 0 0 0 16.94-28.23v-312.9l294.74-439.09c14.27-21.26-0.96-49.83-26.57-49.83z"
                            ></path>
                          </svg>
                        </el-button>
                      </el-popover>
                    </span>
                </div>
                <div class="l-m-2-main">
                  </div>
                  <div class="l-m-2-main">
                    <div class="l-m-2-m-not" v-show="eventDetails.length == 0">
                        <img src="https://city.sensoro.com/assets/img/no-history.png" alt="">
                        <div>无事件记录</div>
                      <img
                        src="https://city.sensoro.com/assets/img/no-history.png"
                        alt=""
                      />
                      <div>无事件记录</div>
                    </div>

                    <!-- 普通表格
                        舍弃eventDetaill的childs
                         -->
                    <div
                      v-for="(value, index) in eventDetails"
                      :key="index"
                      v-show="eventDetails.length != 0"
                      class="l-m-2-m-table"
                    >
                      <p class="l-m-2-m-tableheard">{{ value.year }}年</p>
                      <div class="l-m-2-m-tablemain">
                        <el-table :data="value.data" style="width: 100%">
                          <el-table-column type="index"> </el-table-column>
                          <el-table-column label="日期" prop="day">
                          </el-table-column>
                          <el-table-column label="时间" prop="time">
                          </el-table-column>
                          <el-table-column label="负责人" prop="oneContacts">
                          </el-table-column>
                          <el-table-column
                            label="负责人电话"
                            prop="onePhone"
                            min-width="100px"
                          >
                          </el-table-column>
                          <el-table-column label="类型" prop="events">
                          </el-table-column>
                          <el-table-column label="接警人" prop="alarmPeople">
                          </el-table-column>
                          <el-table-column label="报警人" prop="galarmPeople">
                          </el-table-column>
                          <el-table-column label="警情状态" prop="state">
                            <template slot-scope="props">
                              <el-tag>{{ props.row.state }}</el-tag>
                            </template>
                          </el-table-column>
                          <el-table-column label="跳转实时" prop="">
                          </el-table-column>
                        </el-table>
                      </div>
                    </div>

                    <div v-for="(value,index) in eventDetails" :key="index" v-show="eventDetails.length != 0" class="l-m-2-m-table">
                    <!-- 展开--待定  -->
                    <!-- <div v-for="(value,index) in eventDetails" :key="index" v-show="eventDetails.length != 0" class="l-m-2-m-table">
                        <p class="l-m-2-m-tableheard">{{value.year}}年</p>
                        <div class="l-m-2-m-tablemain">
                            <el-table
@@ -87,13 +170,6 @@
                                                style="width: 100%;"
                                                class="l-m-2-m-tm-int"
                                                >
                                                <!-- <el-table-column type="expand">
                                                <template slot-scope="propss">
                                                        <el-form label-position="top" inline class="demo-table-expand">
                                                        {{propss.row.open}}
                                                        </el-form>  
                                                </template>
                                                </el-table-column> -->
                                                <el-table-column
                                                label="时间"
                                                prop="time"
@@ -134,7 +210,7 @@
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    </div> -->

                    <!-- 时间轴历史记录 待选-->

@@ -179,231 +255,218 @@
                        </div>
                        <div class="l-m-2-m-d-bot">无更多记录</div>
                    </div> -->

                    
                  </div>
                </div>
            </div>

                    </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="数据详情" name="first"> -->
                <el-tab-pane label="数据详情" name="second">
                    <div class="l-main-3">
                        <div class="l-m-3-heard">
                            <h2>{{name}}</h2>
                            <div>设备数据详情</div>
                        </div>
                        <el-divider content-position="left"><i class="el-icon-mobile-phone"></i></el-divider>
                        <div class="l-m-3-main">
                            <el-row>
                                <el-form
                                :model="detailsData"
                                label-position="right"
                                size="mini"
                                class="l-m-3-m-form"
                                label-width="100px"
                                style="
                                background: #fff;
                                margin-top: 20px;
                                margin-left: 10px;
                                margin-right: 10px;
                                height: calc(100% - 40px);
                                width: calc(100% - 20px);
                                ">
                                    <el-row>
                                        <el-col span="12">
                                            <el-form-item label="设备名称">
                                            <el-input
                                                disabled="true"
                                                v-model="detailsData.machineName"
                                                autocomplete="off"
                                            ></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col span="12">
                                            <el-form-item label="设备编号">
                                            <el-input
                                                disabled="true"
                                                v-model="detailsData.machineNumber"
                                                autocomplete="off"
                                            ></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col span="12">
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="数据详情" name="first"> -->
            <el-tab-pane label="设备详情" name="second">
              <div class="l-main-3">
                <div class="l-m-3-heard">
                  <h2>
                    {{ name.length > 16 ? name.substr(0, 16) + "···" : name }}
                  </h2>
                  <div>设备数据详情</div>
                </div>
                <el-divider content-position="left"
                  ><i class="el-icon-mobile-phone"></i
                ></el-divider>
                <div class="l-m-3-main">
                  <el-row>
                    <el-form
                      :model="detailsData"
                      label-position="right"
                      size="mini"
                      class="l-m-3-m-form"
                      label-width="100px"
                      style="
                        background: #fff;
                        margin-top: 20px;
                        margin-left: 10px;
                        margin-right: 10px;
                        height: calc(100% - 40px);
                        width: calc(100% - 20px);
                      "
                    >
                      <el-row>
                        <el-col span="12">
                          <el-form-item label="设备名称">
                            <el-input
                              disabled="true"
                              v-model="detailsData.machineName"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col span="12">
                          <el-form-item label="设备编号">
                            <el-input
                              disabled="true"
                              v-model="detailsData.machineNumber"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col span="12">
                          <el-form-item label="负责人">
                            <el-input
                              disabled="true"
                              v-model="detailsData.person"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col span="12">
                          <el-form-item label="负责人电话">
                            <el-input
                              disabled="true"
                              v-model="detailsData.call"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <!-- <el-col span="12">
                                            <el-form-item label="使用方">
                                            <el-input
                                                disabled="true"
                                                v-model="detailsData.user"
                                                autocomplete="off"
                                            ></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col span="12">
                                            <el-form-item label="序列号">
                                            <el-input
                                                disabled="true"
                                                v-model="detailsData.serialNumber"
                                                autocomplete="off"
                                            ></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col span="12">
                                            <el-form-item label="通道号">
                                            <el-input
                                                disabled="true"
                                                v-model="detailsData.channel"
                                                autocomplete="off"
                                            ></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col span="12">
                                            <el-form-item label="布撤防状态">
                                            <el-input
                                                disabled="true"
                                                v-model="detailsData.deployment"
                                                autocomplete="off"
                                            ></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col span="12">
                                            <el-form-item label="设备类型">
                                            <el-input
                                                disabled="true"
                                                v-model="detailsData.machineType"
                                                autocomplete="off"
                                            ></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col span="12">
                                            <el-form-item label="省份">
                                                <div 
                                                v-for="(val,index) in detailsData.province"
                                                :key="index"
                                                >
                                                    <el-input
                                                    disabled="true"
                                                    class="l-m-3-m-f-pro"
                                                    v-model="detailsData.province[index]"
                                                    autocomplete="off"
                                                    ></el-input>
                                                </div>
                                            </el-form-item>
                                        </el-col>
                                        <el-row>
                                            <el-col span="12">
                                                <el-form-item label="负责人">
                                                <el-input
                                                    disabled="true"
                                                    v-model="detailsData.person"
                                                    autocomplete="off"
                                                ></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col span="12">
                                                <el-form-item label="街道">
                                                <el-input
                                                    disabled="true"
                                                    v-model="detailsData.street"
                                                    autocomplete="off"
                                                ></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col span="12">
                                                <el-form-item label="负责人电话">
                                                <el-input
                                                    disabled="true"
                                                    v-model="detailsData.call"
                                                    autocomplete="off"
                                                ></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col span="12">
                                                <el-form-item label="到期时间">
                                                <el-input
                                                    disabled="true"
                                                    v-model="detailsData.dueDate"
                                                    autocomplete="off"
                                                ></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col span="12">
                                                <el-form-item label="缴费信息">
                                                <el-input
                                                    disabled="true"
                                                    v-model="detailsData.payment"
                                                    autocomplete="off"
                                                ></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col span="12">
                                                <el-form-item label="安装时间">
                                                <el-input
                                                    disabled="true"
                                                    v-model="detailsData.installation"
                                                    autocomplete="off"
                                                ></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col span="12">
                                                <el-form-item label="心跳时间">
                                                <el-input
                                                    disabled="true"
                                                    v-model="detailsData.heartbeat"
                                                    autocomplete="off"
                                                ></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-row>
                                </el-form>
                            </el-row>
                            
                            <!-- <div 
                            v-for="(value,keys,index) in detailsData" 
                            :key="index"
                            :class="[{'l-m-3-m-ones': true}, (index % 2) == 1? 'l-m-3-m-o-r':'l-m-3-m-o-l']" 
                            >
                                <div class="l-m-3-m-o-keys">{{keys}}</div>
                                &nbsp:&nbsp
                                <div class="l-m-3-m-o-value">{{value}}</div>
                            </div>
                            <div style="clear: float"></div> -->
                        </div>
                    </div>
                </el-tab-pane>
                </el-tabs>
                                            </el-form-item> 
                                        </el-col> -->
                        <el-col span="12">
                          <el-form-item label="序列号">
                            <el-input
                              disabled="true"
                              v-model="detailsData.serialNumber"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col span="12">
                          <el-form-item label="通道号">
                            <el-input
                              disabled="true"
                              v-model="detailsData.channel"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col span="12">
                          <el-form-item label="设备类型">
                            <el-input
                              disabled="true"
                              v-model="detailsData.machineType"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col span="12">
                          <el-form-item label="布撤防状态">
                            <el-input
                              disabled="true"
                              v-model="detailsData.deployment"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-row>
                          <el-col span="12">
                            <el-form-item label="省份" class="cityClassParams">
                              <avue-form
                                :option="itemOption"
                                v-model="form"
                              ></avue-form>
                            </el-form-item>
                          </el-col>
                          <el-col span="12">
                            <el-form-item label="街道">
                              <el-input
                                disabled="true"
                                v-model="detailsData.street"
                                autocomplete="off"
                              ></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col span="12">
                            <el-form-item label="安装时间">
                              <el-input
                                disabled="true"
                                v-model="detailsData.installation"
                                autocomplete="off"
                              ></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col span="12">
                            <el-form-item label="到期时间">
                              <el-input
                                disabled="true"
                                v-model="detailsData.dueDate"
                                autocomplete="off"
                              ></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col span="12">
                            <el-form-item label="缴费信息">
                              <el-input
                                disabled="true"
                                v-model="detailsData.payment"
                                autocomplete="off"
                              ></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col span="12">
                            <el-form-item label="心跳时间">
                              <el-input
                                disabled="true"
                                v-model="detailsData.heartbeat"
                                autocomplete="off"
                              ></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-row>
                    </el-form>
                  </el-row>
                </div>
            </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="right">
            <div class="r-one">
                <div class="r-heard">
                    <div class="r-heard-top">部署信息</div>
                    <button @click="modifyl" class="r-but-top">修改</button>
                </div>
                <div class="r-body">
                    <div class="r-b-top">
                            <div class="r-b-t-main">
                                <span class="r-b-t-left">传感器名称</span>
                                <span class="r-b-t-right">{{name}}</span>
                            </div>
                            <div class="r-b-t-main">
                                <span class="r-b-t-left">设备联系人</span>
                                <span class="r-b-t-right">{{contacts}}: {{calls}}</span>
                            </div>
                            <div class="r-b-t-main">
      </div>
    </div>
    <div class="right">
      <div class="r-one">
        <div class="r-heard">
          <div class="r-heard-top">部署信息</div>
          <button @click="modifyl" class="r-but-top">修改</button>
        </div>
        <div class="r-body">
          <div class="r-b-top">
            <div class="r-b-t-main">
              <span class="r-b-t-left">设备名称</span>
              <span class="r-b-t-right">{{ name }}</span>
            </div>
            <div class="r-b-t-main">
              <span class="r-b-t-left">设备联系人</span>
              <span class="r-b-t-right">{{ contacts }}: {{ calls }}</span>
            </div>
            <!-- 设备标签待定 -->
            <!-- <div class="r-b-t-main">
                                <span class="r-b-t-left">设备标签</span>
                                <span class="r-b-t-right">
                                    <div 
@@ -414,8 +477,9 @@
                                         {{value}} 
                                    </div>
                                </span>
                            </div>
                            <div class="r-b-t-main">
                            </div> -->
            <!-- 图暂时没有 -->
            <!-- <div class="r-b-t-main">
                                <span class="r-b-t-left" style="position:relative;top: -27px;">部署图片</span>
                                <span class="r-b-t-right">
                                    <div
@@ -423,631 +487,899 @@
                                    v-for="(value,index) in imgsl"
                                    :key="index"
                                    >
                                        <!-- <img :src="value" alt=""> -->
                                        <el-image 
                                            style="width: 68px; height: 68px"
                                            :src="value" 
                                            :preview-src-list="imgsl">
                                            :preview-src-list="imgsl"
                                            v-show="value != 'no'"
                                        >
                                        </el-image>
                                        <div 
                                        v-show="value == 'no'"
                                        style="width: 68px; height: 68px;text-algin: center;color: rgba(0,0,0,.5)"
                                        >
                                            无图片
                                        </div>
                                    </div>
                                </span>
                            </div>
                            <div class="r-b-t-main">
                                <span class="r-b-t-left">部署时间</span>
                                <span class="r-b-t-right">{{deploymentTime}}</span>
                            </div>
                    </div>
                    <div class="r-b-map">
                        <el-row>
                            <iframe
                            id="supervisoryMap"
                            ref="supervisoryMap"
                            :src="baseUrl"
                            frameborder="0"
                            width="100%"
                            height="100%"
                            ></iframe>
                        </el-row>
                    </div>
                </div>
                            </div> -->
            <div class="r-b-t-main">
              <span class="r-b-t-left">部署时间</span>
              <span class="r-b-t-right">{{ deploymentTime }}</span>
            </div>
          </div>
          <div class="r-b-map">
            <el-row>
              <iframe
                id="supervisoryMap"
                ref="supervisoryMap"
                :src="baseUrl"
                frameborder="0"
                width="100%"
                height="100%"
              ></iframe>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getdataL } from '../../api/dataL/axiosL'
import axios from 'axios'
import echarts from 'echarts'
import { Form } from 'element-ui';
const cityOptions = ['未确认', '真实火警', '非真实火警', '测试/巡检', '安全隐患'];
import { Loading } from "element-ui";
import { getdataL, getGalarm, getnum } from "../../api/dataL/axiosL";
import axios from "axios";
import echarts from "echarts";
import { Form } from "element-ui";
const cityOptions = ["未处理", "处理中", "已处理"];
export default {
    data(){
        return{
            myDeviceNumber: '',
            name: '婴滋诚红谷滩凤凰花园东区',
            state: '故障',
            evaluate: '优',
            machineCode: '03430017C76447DB',
            smoke: '烟雾(SM-5)',
            proportion: '100.0%',
            ReportTime: '最近上报: 2021-04-06 14:34:2',
            contacts: '陈小兵',
            calls: '18079118423',
            labels: ['店面','楼房'],
            imgsl: [
                'https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57',
                'https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE',
                'https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433'
            ],
            deploymentTime: '2019-08-28 11:16:14',
            
            
            activeName: 'first',
            isRecord: true,
            screens: false,
           //复选框
            checkAll: false,
            checkedCities: [], //选择的
            cities: cityOptions,
            isIndeterminate: true,
  data() {
    return {
      myDeviceNumber: "",

            //列表数据：
            obj: [],//选中
            option2:{//抬头
                menuType:'text',
                page:false,
                align:'center',
                dateBtn:true,
                dateDefault:true,
                menuAlign:'center',
                column: {}
      //折线图
      myChart: "",
      numdatalist: [120, 132, 101, 134, 90, 230, 210, 120, 132, 0, 134, 0],

      name: "",
      state: "",
      evaluate: "",
      machineCode: "",
      smoke: "",
      proportion: "",
      ReportTime: "",
      contacts: "",
      calls: "",
      labels: ["店面", "楼房"],
      imgsl: [
        "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
        "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
        "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433",
      ],
      deploymentTime: "2019-08-28 11:16:14",

      activeName: "first",
      // activeName: 'second',
      isRecord: true,
      screens: false,
      //复选框
      checkAll: false,
      checkedCities: [], //选择的
      cities: cityOptions,
      isIndeterminate: true,

      //列表数据：
      obj: [], //选中
      option2: {
        //抬头
        menuType: "text",
        page: false,
        align: "center",
        dateBtn: true,
        dateDefault: true,
        menuAlign: "center",
        column: {},
      },
      eventDetails: [], //真实数据
      eventDetaill: [
        //原始数据
        // {
        //     year: '2020',
        //     data: [
        //         {
        //             day: '00月00日',
        //             time: '00:00:00:',
        //             events: '报警类型',
        //             galarmPeople: '报警人',
        //             state: '未处理',
        //             oneContacts: '主要负责人',
        //             alarmPeople: '接警人',
        //             onePhone: '负责人电话',
        //             childs: [
        //                 {
        //                     time: '07:30:46',
        //                     events: '系统发送恢复短信至：刘仁花 ',
        //                     open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
        //                 },
        //                 {
        //                     time: '07:30:46',
        //                     events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
        //                     open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
        //                 }
        //             ],
        //         },
        //     ]
        // },
        // {
        //     year: '2019',
        //     data: [
        //         {
        //             day: '06月3日',
        //             time: '02:22:06',
        //             events: '烟雾 监测到烟雾',
        //             type: '安全隐患',
        //             childs: [
        //                 {
        //                     time: '07:30:46',
        //                     events: '系统发送恢复短信至：刘仁花 ',
        //                     open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
        //                 },
        //                 {
        //                     time: '07:30:46',
        //                     events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
        //                     open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
        //                 }
        //             ],
        //         },
        //     ],
        // }
      ],

      //详情数据
      detailsData: {
        machineName: "", // 设备名称
        machineNumber: "", //
        user: "", //     使用方
        serialNumber: "", //     序列号
        channel: "", //     通道号
        deployment: "", //     布撤防状态:
        machineType: "", //     设备类型
        province: "", //     省份
        street: "", //     街道
        person: "", //     负责人
        call: "", //     负责人电话
        dueDate: "", //     到期时间
        payment: "", //     缴费信息
        installation: "", //     安装时间
        heartbeat: "", //     心跳时间
      },
      // detailsData: {
      //     machineName: '测试设备8',// 设备名称
      //     machineNumber: '000000000008',  //
      //     user: '南昌大学第一附属医院',  //     使用方
      //     serialNumber: '001241945990', //     序列号
      //     channel : '1',//     通道号
      //     deployment : '布防', //     布撤防状态:
      //     machineType: '一键求助', //     设备类型
      //     province: ['江西省','南昌市','红谷滩区'], //     省份
      //     street: '请输入 街道',//     街道
      //     person : '金同涛', //     负责人
      //     call: '13237568082', //     负责人电话
      //     dueDate: '请选择 到期时间', //     到期时间
      //     payment: '请输入 缴费信息', //     缴费信息
      //     installation : '请选择 安装时间', //     安装时间
      //     heartbeat: '2021-04-07', //     心跳时间
      // },
      baseUrl: "", //mapurl\

      //省份
      form: {},
      itemOption: {
        menuBtn: false,
        column: [
          {
            disabled: true,
            row: false,
            prop: "province",
            type: "select",
            placeholder: "省份",
            props: {
              label: "name",
              value: "code",
            },
            eventDetails: [],//真实数据
            eventDetaill: [//原始数据
                {
                    year: '2020',
                    data: [
                        {
                            day: '06月17日',
                            time: '02:22:06',
                            events: '烟雾 监测到烟雾',
                            type: '测试/巡检',
                            childs: [
                                {
                                    time: '07:30:46',
                                    events: '系统发送恢复短信至：刘仁花 ',
                                    open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
                                },
                                {
                                    time: '07:30:46',
                                    events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
                                    open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
                                }
                            ],
                        },
                    ]
                },
                {
                    year: '2019',
                    data: [
                        {
                            day: '06月3日',
                            time: '02:22:06',
                            events: '烟雾 监测到烟雾',
                            type: '安全隐患',
                            childs: [
                                {
                                    time: '07:30:46',
                                    events: '系统发送恢复短信至：刘仁花 ',
                                    open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
                                },
                                {
                                    time: '07:30:46',
                                    events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
                                    open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
                                }
                            ],
                        },
                    ],
                }
            ],


            //详情数据
            detailsData: {
                machineName: '测试设备8',// 设备名称
                machineNumber: '000000000008',  //     
                user: '南昌大学第一附属医院',  //     使用方
                serialNumber: '001241945990', //     序列号
                channel : '1',//     通道号
                deployment : '布防', //     布撤防状态:
                machineType: '一键求助', //     设备类型
                province: ['江西省','南昌市','红谷滩区'], //     省份
                street: '请输入 街道',//     街道
                person : '金同涛', //     负责人
                call: '13237568082', //     负责人电话
                dueDate: '请选择 到期时间', //     到期时间
                payment: '请输入 缴费信息', //     缴费信息
                installation : '请选择 安装时间', //     安装时间
                heartbeat: '2021-04-07', //     心跳时间
            cascaderItem: ["city", "district"],
            dicUrl: "/api/blade-system/region/select",
            span: 1,
            labelWidth: "0",
            className: "cityClassSelect",
          },
          {
            disabled: true,
            row: false,
            prop: "city",
            type: "select",
            placeholder: "地市",
            props: {
              label: "name",
              value: "code",
            },
            baseUrl: '',//mapurl
        }
            dicUrl: "/api/blade-system/region/select?code={{key}}",
            span: 1,
            labelWidth: "0",
            className: "cityClassSelect",
          },
          {
            disabled: true,
            row: false,
            prop: "district",
            type: "select",
            placeholder: "区县",
            props: {
              label: "name",
              value: "code",
            },
            dicUrl: "/api/blade-system/region/select?code={{key}}",
            span: 1,
            labelWidth: "0",
            className: "cityClassSelect",
          },
        ],
      },
    };
  },
  methods: {
    loginEcharts01() {
      let echarts = require("echarts");
      this.myChart = echarts.init(document.getElementById("echart01"));
      this.myChart.showLoading();
    },
    methods:{
        startEcharts01(){
            let echarts = require('echarts');
            let myChart = echarts.init(document.getElementById('echart01'));
            let option = {
                            title: {
                                text: '时间分布'
                            },
                            tooltip: {
                                trigger: 'axis',
                                formatter: function(params,ticket,callback) {
                                    var res = params[0];
                                    // console.log(res)
                                    // console.log(params[0])
                                    return `${res.name}:00-${res.name}:59` + '<br />' + `${res.marker}总预警次数：${res.value}`;
                                }
                            },
                            legend: {
                                data: ['总预警次数']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            // toolbox: {
                            //     feature: {
                            //         saveAsImage: {}
                            //     }
                            // },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: ['0', '1' ,'2', '3','4','5' ,'6','7', '8', '9','10', '11','12', '13','14','15' ,'16','17' ,'18','19' ,'20', '21','22','23']
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name: '总预警次数',
                                    type: 'line',
                                    stack: '总量',
                                    data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210]
                                },
                            ]
            };
            myChart.setOption(option);
    
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize',function() {myChart.resize()});
        },
        modifyl(){//right 修改按钮
            console.log(`top --修改`)
        },
        handleCheckAllChange(val) {//事件类型全选
            this.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {//事件类型
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        resetl(){//事件类型重置
            this.screens = false;
            this.checkedCities = ['未确认', '真实火警', '非真实火警', '测试/巡检', '安全隐患'];
            // console.log(`按钮重置`);
            this.doEvents(this.checkedCities);
        },
        determine(){//事件类型确定
            this.screens = false;
            console.log(this.checkedCities);
            if(this.checkedCities.length == 0){
                // console.log(`未选择`);
                this.eventDetails = [];
            }else{
                this.doEvents(this.checkedCities);//筛选数据
            }
            
        },
        doEvents(ends){//事件类型数据、
            var uA = this.eventDetaill;//输入数据
            var useD = [];//创建缓存
            for(var key in uA){     //循环数据{year ， data}
                var uB = uA[key].data,
                    udd = [];
                // console.log(uB);
                for(var val in uB){    //循环data 
                    var i = 0;
                    // console.log('uB--type:--' + uB[val].type,val);
                    for(var uE in ends){  //循环选中
                        // console.log('uE' + ends[uE])
                        if(uB[val].type == ends[uE]){ //判断数据是否选中
                            i ++;
                        }
                    }
                    // console.log(i);
                    if(i == 1){  //选中推入
                        udd.push(uB[val]);
                    }
                }
                // console.log(udd);
                if(udd.length != 0){//若data中没有符合的选项，则整个过滤
                    useD.push({
                        year: uA[key].year,
                        data: udd
                    })
                } 
            }
            // console.log(useD)
            this.eventDetails = useD;
        },
        getdata(){
            // const url = `/api/blade-jfpts/equipment/equipment/pageDept?deviceName=${this.myDeviceNumber}&current=1&size=10&pid=`
            // axios.get(url)
            var data = {
                deviceName: this.myDeviceNumber,
                current: '1',
                size: '10'
            };
            getdataL(data)
            .then((res)=>{
                var data = res.data.data.records[0];
                this.stetDetails(data);
                console.log(data);
            })
        },
        stetDetails(d){
            this.name = '无数据' && d.deviceName;
            this.state = '无数据' && d.state;
            this.evaluate = '无数据';
            this.machineCode = '无数据' && d.deviceNumber;
            this.smoke = '无数据';
            this.proportion = '无数据';
            this.ReportTime = '无数据';
            this.contacts = '无数据' && d.oneContacts;
            this.calls = '无数据' && d.onePhone;
            this.labels = '无数据';
            this.imgsl = '无数据' && [];
            this.deploymentTime = '无数据' && d.expireTime;
    startEcharts01() {
      // let echarts = require('echarts');
      // let myChart = echarts.init(document.getElementById('echart01'));

            this.detailsData =  {
                machineName: d.deviceName,// 设备名称
                machineNumber: d.deviceNumber,  //     
                user: d.ownership,  //     使用方
                serialNumber: d.serialNumber, //     序列号
                channel : d.channelNumber,//     通道号
                deployment : d.devicestate == 1?'布防':'撤防', //     布撤防状态:
                machineType: d.deviceType, //     设备类型
                province: ['邮编：', d.district,''], //     省份
                street: d.street,//     街道
                person : d.oneContacts, //     负责人
                call: d.onePhone, //     负责人电话
                dueDate: d.expireTime, //     到期时间
                payment: d.pay, //     缴费信息
                installation : '请选择 安装时间', //     安装时间
                heartbeat: d.heartbeat, //     心跳时间
      let option = {
        title: {
          text: "警情月分布",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params, ticket, callback) {
            var res = params[0];
            // console.log(res)
            // console.log(params[0])
            var Num = res.value == null ? "无" : res.value;
            return (
              `${res.name}月份` + "<br />" + `${res.marker}总预警次数：${Num}`
            );
          },
        },
        legend: {
          data: ["总预警次数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "",
          ],
          // , '13','14','15' ,'16','17' ,'18','19' ,'20', '21','22','23']
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "总预警次数",
            type: "line",
            stack: "总量",
            data: this.numdatalist,
            // , 230, 210,120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210]
          },
        ],
      };
      this.myChart.setOption(option);
      this.myChart.hideLoading();
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    modifyl() {
      //right 修改按钮
      console.log(`top --修改`);
    },
    handleCheckAllChange(val) {
      //事件类型全选
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      //事件类型
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    resetl() {
      //事件类型重置
      this.screens = false;
      this.checkedCities = ["未处理", "处理中", "已处理"];
      // console.log(`按钮重置`);
      this.doEvents(this.checkedCities);
      // this.eventDetails = this.eventDetaill;
    },
    determine() {
      //事件类型确定
      this.screens = false;
      // console.log(this.checkedCities);
      if (this.checkedCities.length == 0) {
        // console.log(`未选择`);
        this.eventDetails = [];
      } else {
        this.doEvents(this.checkedCities); //筛选数据
      }
    },
    doEvents(ends) {
      //事件类型数据、
      var uA = this.eventDetaill; //输入数据
      var useD = []; //创建缓存
      for (var key in uA) {
        //循环数据{year ， data}
        var uB = uA[key].data,
          udd = [];
        // console.log(uB);
        for (var val in uB) {
          //循环data
          var i = 0;
          // console.log('uB--type:--' + uB[val].type,val);
          for (var uE in ends) {
            //循环选中
            // console.log('uE' + ends[uE])
            if (uB[val].state == ends[uE]) {
              //判断数据是否选中
              i++;
            }

          }
          // console.log(i);
          if (i == 1) {
            //选中推入
            udd.push(uB[val]);
          }
        }
        // console.log(udd);
        if (udd.length != 0) {
          //若data中没有符合的选项，则整个过滤
          useD.push({
            year: uA[key].year,
            data: udd,
          });
        }
      }
      // console.log(useD)
      this.eventDetails = useD;
    },
    created() {
        this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
        this.myDeviceNumber = this.$route.query.deviceNumber;
        // console.log(this.myDeviceNumber);
        this.getdata();
    getdata() {
      // const url = `/api/blade-jfpts/equipment/equipment/pageDept?deviceName=${this.myDeviceNumber}&current=1&size=10&pid=`
      // axios.get(url)
      var data = {
        deviceName: this.myDeviceNumber,
        current: "1",
        size: "10",
      };
      getdataL(data).then((res) => {
        var data = res.data.data.records[0];
        this.stetDetails(data);
        // console.log(data);
      });
    },
    mounted(){
        this.startEcharts01();//载入折线图
        this.eventDetails = this.eventDetaill;//载入历史事件数据
        // this.doEvents();//cc
    }
}
    stetDetails(d) {
      this.name = "无数据" && d.deviceName;
      this.state =
        "无数据" && d.dtype == 0 ? "掉线" : d.dtype == 1 ? "测试" : "报警";
      this.evaluate = "空气质量";
      this.machineCode = "无数据" && d.deviceNumber;
      this.smoke = "烟雾";
      this.proportion = "电量";
      this.ReportTime = "最近上报：" + d.heartbeat;
      this.contacts = "无数据" && d.oneContacts;
      this.calls = "无数据" && d.onePhone;
      this.labels = ["无数据"] && [d.deviceType];
      this.imgsl = ["no"];
      this.deploymentTime = "无数据" && d.stime;

      this.detailsData = {
        machineName: d.deviceName, // 设备名称
        machineNumber: d.deviceNumber, //
        user: d.ownership, //     使用方
        serialNumber: d.serialNumber, //     序列号
        channel: d.channelNumber, //     通道号
        deployment: d.devicestate == 1 ? "布防" : "撤防", //     布撤防状态:
        machineType: d.deviceType, //     设备类型
        province: ["邮编：", d.district, ""], //     省份
        street: d.street, //     街道
        person: d.oneContacts, //     负责人
        call: d.onePhone, //     负责人电话
        dueDate: d.expireTime, //     到期时间
        payment: d.pay, //     缴费信息
        installation: d.stime, //     安装时间
        heartbeat: d.heartbeat, //     心跳时间
      };
      this.form = d;
    },
    getdataG() {
      var dataG = {
        deviceNumber: this.myDeviceNumber,
        // deviceNumber: '000000000008',
        current: "1",
        size: "100",
      };
      getGalarm(dataG).then((res) => {
        var ds = res.data.data.records;
        // console.log(ds)
        this.setdataG(ds);
      });
    },
    setdataG(d) {
      this.eventDetaill = [];
      var Num = [];
      var creates = function (yearnum, datas) {
        Num.push({
          year: yearnum,
          data: datas,
        });
      };
      //按年份划分；
      for (var i = 2023; i > 2019; i--) {
        //循环可能的年份
        var tData = [],
          useNum = {}; //判断年份是否存在

        for (var key in d) {
          // 循环原数据
          var times = d[key].alarmTime, //写入时间
            y = times.substr(0, 4),
            da = `${times.substr(5, 2)}月${times.substr(8, 2)}日`,
            hms = times.substr(11, 9);
          if (y == i) {
            useNum[i] = true;
            tData.push({
              day: da,
              time: hms,
              events: d[key].content,
              state:
                d[key].jtype == 0
                  ? "未处理"
                  : d[key].jtype == 1
                  ? "处理中"
                  : "已处理",
              galarmPeople: d[key].galarmPeople,
              oneContacts: d[key].oneContacts,
              alarmPeople: d[key].alarmPeople,
              onePhone: d[key].onePhone,
              childs: [],
            });
          }
        }
        if (useNum[i] == true) {
          // console.log(tData);
          tData.sort((a, b) => {
            var aa = a.day.substr(0, 2) + a.day.substr(3, 2),
              bb = b.day.substr(0, 2) + b.day.substr(3, 2);
            if (+aa < +bb) {
              return 1;
            } else {
              return -1;
            }
          });
          creates(i, tData);
        }
      }
      // console.log(Num);
      this.eventDetaill = Num;
      this.eventDetails = this.eventDetaill; //载入历史事件数据
    },
    getdataM() {
      var dataM = {
        deviceNumber: this.myDeviceNumber,
        // deviceNumber: '000000000008',
      };
      getnum(dataM).then((res) => {
        var nums = res.data;
        this.setdataM(nums);
        // console.log(nums)
      });
    },
    setdataM(ns) {
      var dataM = [];
      for (var key in ns) {
        dataM.push(ns[key].count);
      }
      // console.log(dataM);
      this.numdatalist = dataM;
      this.startEcharts01();
    },
  },
  created() {
    // let loadingInstance1  = Loading.service({ fullscreen: true });
    this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
    this.myDeviceNumber = this.$route.query.deviceNumber;

    var a = this.$route.query;
    console.log(a);

    // console.log(this.myDeviceNumber);
    this.getdata();
    this.getdataG();
    this.getdataM();
  },
  mounted() {
    this.loginEcharts01(); //载入折线图等待数据
    // this.eventDetails = this.eventDetaill;//载入历史事件数据
    // this.doEvents();//cc
  },
};
</script>
<style lang="scss" >
#Lour{
    width: 100%;
#Lour {
  width: 100%;
  height: 100%;
  // font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
  // font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
  // font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  // border: 1px solid #000;
  display: flex;
  // align-items: center;
  justify-content: space-around;
  position: relative;
  font-size: 13px;
  line-height: 20px;
  font-weight: normal;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  .left {
    width: 67%;
    height: 100%;
    // font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
    // font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
    font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
    // border: 1px solid #000;
    // border: 1px solid rgb(236, 24, 24);
    background-color: #fff;
    display: flex;
    // align-items: center;
    justify-content: space-around;
    .left{
        width: 67%;
        height: 100%;
        // border: 1px solid rgb(236, 24, 24);
        background-color: #fff;
        display: flex;
        justify-content: center;
        flex-direction: column;
        .top{
            width:98%;
            height: 150px;
            // border: 1px solid rgb(21, 18, 204);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .top-l{
                width:400px;
                // border: 1px solid rgb(24, 207, 48);
                div{
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    font-size: 14px;
                    // border: 1px solid rgb(24, 207, 48);
                }
                .left-top{
                     padding-left: 15px;
                    // border: 1px solid rgb(24, 207, 48);
                }
                
            }
            .left-bot,.top-r{
                    font-weight: 900;
                    color: rgba($color: #00000075, $alpha: 0.25);
                }
            .top-r{
                width:250px;
                // border: 1px solid rgb(24, 207, 48);     
            }
            // border-bottom:1px solid #000;
    justify-content: center;
    flex-direction: column;
    .top {
      width: 98%;
      height: 150px;
      // border: 1px solid rgb(21, 18, 204);
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      .top-l {
        position: relative;
        top: 40px;
        width: 500px;
        // border: 1px solid rgb(24, 207, 48);
        div {
          display: flex;
          align-items: center;
          justify-content: space-around;
          font-size: 14px;
          // border: 1px solid rgb(24, 207, 48);
        }
        .l-main{
            width:98%;
            height: aotu;
            // border: 1px solid rgb(21, 18, 204);
            
        .left-top {
          p {
            width: 356px;
            // border: 1px solid rgb(37, 37, 37);
          }
          padding-left: 15px;
          // border: 1px solid rgb(24, 207, 48);
          .l-t-state {
            // border: 1px solid rgb(24, 207, 48);
            position: relative;
            top: 5px;
            left: 10px;
            width: 55px;
            .l-t-s-yuan {
              display: block;
              width: 10px;
              height: 10px;
              border-radius: 5px;
              border: 1px solid transparent;
            }
            .l-t-s-grey {
              background-color: rgb(187, 187, 187);
            }
            .l-t-s-green {
              background-color: rgb(41, 202, 135);
            }
            .l-t-s-red {
              background-color: rgb(243, 75, 75);
            }
          }
        }
        .l-main-3{
            border: 1px solid rgba(14, 14, 14,0);
            width: 99%;
            height: 654px;
            padding: 2px;
            .l-m-3-heard{
                margin-left: 20px;
                padding: 10px;
                display: flex;
                align-items: center;
                h2{
                    font-weight: 300;
                    width: 30%;
                }
                div{
                    font-size: 12px;
                    color: rgba($color: #000000, $alpha: .6);
                    width: 60%;
                    position: relative;
                    top: 8px;
                    left: -20px;
                }
            }
            .l-m-3-main{
                margin: 30px;
                // border: 1px solid rgba(212, 25, 25, 0.829);
                .l-m-3-m-f-pro{
                    float: left;
                    width: 85px;
                    margin-right: 10px;
                }
                // .l-m-3-m-ones{
                //     display: flex;
                //     align-items: center;
                //     justify-content: center;
                //     .l-m-3-m-o-keys{
                //         width: 80px;
                //         height: 25px;
                //     }
                //     .l-m-3-m-o-value{
                //         font-size: 14px;
                //         padding-left: 10px;
                //         // background-color: rgba($color: #747474, $alpha: .1);
                //         width: 300px;
                //         height: 25px;
                //         line-height: 25px;
                //         border: 1px solid rgba(70, 63, 63, 0.829);
                //         border-radius: 10px;
                //         color: rgba($color: #7a7979, $alpha: .9);
                //     }
                // }
                // .l-m-3-m-o-r{
                //     float: right;
                // }
                // .l-m-3-m-o-l{
                //     float: left;
                // }
            }
            
      }
      .left-bot,
      .top-r {
        font-weight: 900;
        color: rgba($color: #00000075, $alpha: 0.25);
        // border: 1px solid rgb(24, 207, 48);
      }
      .left-bot {
        position: relative;
        left: -68px;
        p {
          width: 295px;
          // border: 1px solid rgb(37, 37, 37);
        }
        .l-main-2{
            width: 98%;
            height: 400px;
            // border: 1px solid rgb(21, 18, 204);
            .l-m-2-heard{
                width: 100%;
                height: 25px;
                // border: 1px solid rgb(24, 204, 18);
                display: flex;
                align-items: center;
                span{
                    padding-left: 20px;
                    // border: 1px solid rgb(23, 66, 209);
                }
            }
            .l-m-2-main{
                width: 100%;
                height: 370px;
                overflow: scroll;
                // border: 1px solid rg b(23, 66, 209);
                .l-m-2-m-not{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    position: relative;
                    top: 25px;
                    img{
                        width: 180px;
                        height: 180px;
                    }
                    div{
                        font-size: 12px;
                        color: rgba($color: #000000, $alpha: .3);
                    }
                }
                .l-m-2-m-table{
                    .l-m-2-m-tablemain{
                        .l-m-2-m-tm-int{
                            position: relative;
                            top: -10px;
                        }
                    }
                }
                .l-m-2-m-dat{
                    width: 100%;
                    height: 300px;
                    overflow: scroll;
                    // border: 1px solid rgb(23, 66, 209);
                    .l-m-2-m-d-data{
                        width: 100%;
                        
                        
                        // position: absolute;
                    }
                    .l-m-2-m-d-bot{
                        // border: 1px solid rgb(23, 66, 209);
                        // width: 63%;
                        height: 25px;
                        text-align: center;
                        
                        // position: fixed;
                        // bottom: 0;
                        font-weight: 800;
                        color: rgba($color: #000000, $alpha: .4);
                        background-color: rgba($color: #ffffff, $alpha: 1.0);
                        z-index: 100;
                    }
                }
            }
        }
      }
      .top-r {
        width: 250px;
        // border: 1px solid rgb(24, 207, 48);
        float: right;
        position: relative;
        top: -50px;
      }
      // border-bottom:1px solid #000;
    }
    .right{
        width: 30%;
        height: 88.5%;
        // border: 1px solid rgb(23, 201, 62);
        background-color: #fff;
        display: flex;
        // justify-content: center;
        flex-direction: column;
        // margin-top: -5px;
        padding: 20px;
        padding-top: 60px;
        .r-heard{
            font-size: 14px;
            height: 35px;
            border-bottom:1px solid rgba($color: #000000, $alpha: .3) ;
            display: flex;
            justify-content: space-between;
            .r-but-top{
                border: transparent;
                background: transparent;
                color: #29c093;
                position: relative;
                top: -7px;
                font-size: 14px;
            }
        }
        .r-body{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 700px;
            // border: 1px solid rgb(23, 201, 62);
            font-weight: normal;
            font-size: 14px;
            .r-b-top{
                height: 270px;
                display: flex;
                // border: 1px solid rgb(23, 201, 62);
                display: flex;
                flex-direction: column;
                .r-b-t-main{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 10px 0 10px 0;
                }
                .r-b-t-left{
                    display: block;
                    width: 27%;
                    // position:absolute;
                    // top: -20px;
                    // border: 1px solid rgb(148, 199, 159);
                }
                .r-b-t-right{
                    display: block;
                    width: 70%;
                    // border: 1px solid rgb(49, 74, 184);
                    .r-b-t-r-label{
                        float: left;
                        margin-right: 10px;
                        padding: 0 10px 0 10px;
                        border: 1px solid rgba($color: #000000, $alpha: .5);
                        border-radius: 5px;
                    }
                    .r-b-t-r-imgsl{
                        // width: 68px;
                        // height: 68px;
                        // border: 1px solid rgb(213, 37, 219);
                        float: left;
                        padding: 0 3px 0 3px;
                        
                    }
                }
            }
            .r-b-map{
                    height: 400px;
                    border: 1px solid rgba(109, 109, 109,0.2);
                    #supervisoryMap{
                        width: 100%;
                        height: 400px;
                    }
            }
        }
    .l-main {
      width: 98%;
      height: aotu;
      // border: 1px solid rgb(21, 18, 204);
    }
}
    .l-main-3 {
      border: 1px solid rgba(14, 14, 14, 0);
      width: 99%;
      height: 654px;
      padding: 2px;
      .l-m-3-heard {
        margin-left: 20px;
        padding: 10px;
        display: flex;
        align-items: center;
        h2 {
          font-weight: 300;
          width: 30%;
        }
        div {
          font-size: 12px;
          color: rgba($color: #000000, $alpha: 0.6);
          width: 60%;
          position: relative;
          top: 8px;
        }
      }
      .l-m-3-main {
        margin: 30px;
        // border: 1px solid rgba(212, 25, 25, 0.829);
        .l-m-3-m-f-pro {
          float: left;
          width: 85px;
          margin-right: 10px;
        }
        // .l-m-3-m-ones{
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     .l-m-3-m-o-keys{
        //         width: 80px;
        //         height: 25px;
        //     }
        //     .l-m-3-m-o-value{
        //         font-size: 14px;
        //         padding-left: 10px;
        //         // background-color: rgba($color: #747474, $alpha: .1);
        //         width: 300px;
        //         height: 25px;
        //         line-height: 25px;
        //         border: 1px solid rgba(70, 63, 63, 0.829);
        //         border-radius: 10px;
        //         color: rgba($color: #7a7979, $alpha: .9);
        //     }
        // }
        // .l-m-3-m-o-r{
        //     float: right;
        // }
        // .l-m-3-m-o-l{
        //     float: left;
        // }
      }
    }
    .l-main-2 {
      width: 98%;
      height: 400px;
      // border: 1px solid rgb(21, 18, 204);
      .l-m-2-heard {
        width: 100%;
        height: 25px;
        // border: 1px solid rgb(24, 204, 18);
        display: flex;
        align-items: center;
        span {
          padding-left: 20px;
          // border: 1px solid rgb(23, 66, 209);
        }
      }
      .l-m-2-main {
        width: 100%;
        height: 370px;
        overflow: scroll;
        // border: 1px solid rg b(23, 66, 209);
        .l-m-2-m-not {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          position: relative;
          top: 25px;
          img {
            width: 180px;
            height: 180px;
          }
          div {
            font-size: 12px;
            color: rgba($color: #000000, $alpha: 0.3);
          }
        }
        .l-m-2-m-table {
          .l-m-2-m-tablemain {
            .l-m-2-m-tm-int {
              position: relative;
              top: -10px;
            }
          }
        }
        .l-m-2-m-dat {
          width: 100%;
          height: 300px;
          overflow: scroll;
          // border: 1px solid rgb(23, 66, 209);
          .l-m-2-m-d-data {
            width: 100%;

.backc{
    background-color: #29c093;
}
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
            // position: absolute;
          }
          .l-m-2-m-d-bot {
            // border: 1px solid rgb(23, 66, 209);
            // width: 63%;
            height: 25px;
            text-align: center;

            // position: fixed;
            // bottom: 0;
            font-weight: 800;
            color: rgba($color: #000000, $alpha: 0.4);
            background-color: rgba($color: #ffffff, $alpha: 1);
            z-index: 100;
          }
        }
      }
    }
  }
  .right {
    width: 30%;
    height: 88.5%;
    // border: 1px solid rgb(23, 201, 62);
    background-color: #fff;
    display: flex;
    // justify-content: center;
    flex-direction: column;
    // margin-top: -5px;
    padding: 20px;
    padding-top: 60px;
    .r-heard {
      font-size: 14px;
      height: 35px;
      border-bottom: 1px solid rgba($color: #000000, $alpha: 0.3);
      display: flex;
      justify-content: space-between;
      .r-but-top {
        border: transparent;
        background: transparent;
        color: #29c093;
        position: relative;
        top: -7px;
        font-size: 14px;
      }
    }
    .r-body {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 700px;
      // border: 1px solid rgb(23, 201, 62);
      font-weight: normal;
      font-size: 14px;
      .r-b-top {
        height: 200px;
        display: flex;
        // border: 1px solid rgb(23, 201, 62);
        display: flex;
        flex-direction: column;
        .r-b-t-main {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 0 10px 0;
        }
        .r-b-t-left {
          display: block;
          width: 27%;
          // position:absolute;
          // top: -20px;
          // border: 1px solid rgb(148, 199, 159);
        }
        .r-b-t-right {
          display: block;
          width: 70%;
          // border: 1px solid rgb(49, 74, 184);
          .r-b-t-r-label {
            float: left;
            margin-right: 10px;
            padding: 0 10px 0 10px;
            border: 1px solid rgba($color: #000000, $alpha: 0.5);
            border-radius: 5px;
          }
          .r-b-t-r-imgsl {
            // width: 68px;
            // height: 68px;
            // border: 1px solid rgb(213, 37, 219);
            float: left;
            padding: 0 3px 0 3px;
          }
        }
      }
      .r-b-map {
        height: 550px;
        border: 1px solid rgba(109, 109, 109, 0.2);
        #supervisoryMap {
          width: 100%;
          height: 550px;
        }
      }
    }
  }
}



.backc {
  background-color: #29c093;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

//表格cc
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

 src/views/supervisoryConsole/card.vue

@@ -29,8 +29,7 @@
        v-for="(item, index) in option"
        :key="index"
      >
       <!-- @click.stop="goToDetails(item.deviceNumber)" -->
        <a :href="'/#/dataL/index?deviceNumber=' + item.deviceNumber">
        <a href="javascript:void(0);" @click.stop="goToDetails(item)">
          <el-card
            :style="
              item.state == ''
@@ -143,7 +142,7 @@
      console.log(this.radio, value);
    },
    goToDetails(data) {
      this.$router.push({ path: "/dataL ", query: data });
      this.$router.push({ path: "/dataL/dataL", query: data });
    },
  },
};