4.8

liuyg

2021-04-08 514437f7ac0136c7cdcc2f81e3909123a716bccb

4.8

 public/img/liu/no-history.png

 src/router/views/index.js

@@ -336,7 +336,21 @@
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/parcel/parcelKind')
    }]
  }
  },
  {
    path: '/dataL',
    component: Layout,
    redirect: '/dataL/index',
    children: [{
      path: 'index',
      name: '详情页',
      meta: {
        i18n: 'dataL'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/dataL/dataL')
    }]
  },


]

 src/views/alarmManagement/alarmAnalysis.vue

@@ -232,7 +232,7 @@
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    type: 'line', 
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },

 src/views/dataL/dataL.vue

New file
@@ -0,0 +1,849 @@
<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>
            <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
                        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>
                    </span>
                </div>
                <div class="l-m-2-main">

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

                    <!-- <div class="l-m-2-m-not" v-show="!isRecord">
                        <img src="https://city.sensoro.com/assets/img/no-history.png" alt="">
                        <div>无事件记录</div>
                    </div>
                    <div class="l-m-2-m-dat" v-show="isRecord">
                        <div class="l-m-2-m-d-data">
                            <el-timeline style="position: relative;left: -20px;"
                            v-for="(value,index) in eventDetails"
                            :key = 'index'
                            >
                            <div>{{value.year}}</div>
                                <el-timeline-item
                                v-for="(val,keys,idx) in value"
                                :key = "idx"
                                v-show="keys != 'year'"
                                :timestamp="keys"
                                placement="top"
                                >
                                <el-tag class="l-m-2-m-d-data-crad"
                                style="position: absolute;top: -10px;left: 400px;"
                                >{{val.type}}</el-tag>
                                <el-collapse v-model="activeNames" @change="handleChange">
                                <el-collapse-item :title="`${val.time} : ${val.events}`" name="1"
                                v-show="val.showl"
                                >
                                    <el-collapse v-model="activeNames" @change="handleChange"
                                    v-for="(vals,idxs) in val.childs"
                                    :key="idxs"
                                    style="position: relative;left: 20px;"
                                    >
                                    <el-collapse-item :title="`${vals.time} : ${vals.events}`" name="1">
                                        <div style="position: relative;left: 20px;">{{vals.open}}</div>
                                    </el-collapse-item>
                                    </el-collapse>
                                </el-collapse-item>
                                </el-collapse>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                        <div class="l-m-2-m-d-bot">无更多记录</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">
                                            <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>
                </div>
            </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 
                                    class="r-b-t-r-label" 
                                    v-for="(value,index) in labels" 
                                    :key="index"
                                    >
                                         {{value}} 
                                    </div>
                                </span>
                            </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
                                    class="r-b-t-r-imgsl"
                                    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">
                                        </el-image>
                                    </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">
                        <iframe
                            id="mapDiv"
                            ref="mapDiv"
                            :src="baseUrl"
                            frameborder="0"
                            width="100%"
                            height="100%"
                        ></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts'
const cityOptions = ['未确认', '真实火警', '非真实火警', '测试/巡检', '安全隐患'];
export default {
    data(){
        return{
            name: '婴滋诚红谷滩凤凰花园东区',
            state: '故障',
            evaluate: '优',
            machineCode: '03430017C76447DB',
            smoke: '烟雾(SM-5)',
            proportion: '100.0%',
            ReportTime: '最近上报: 2021-04-06 14:34:2',
            activeName: 'first',
            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',
            isRecord: true,
            screens: false,
           //复选框
            checkAll: false,
            checkedCities: [], //选择的
            cities: cityOptions,
            isIndeterminate: true,
            eventDetails: [
                {
                    year: '2020',
                    '06月13日': {
                        time: '02:22:06',
                        events: '烟雾 监测到烟雾',
                        type: '测试/巡检',
                        showl: true,
                        childs: [
                            {
                                time: '07:30:46',
                                events: '系统发送恢复短信至：刘仁花 ',
                                open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
                            },
                            {
                                time: '07:30:46',
                                events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
                                open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
                            }
                        ],
                    },
                    '06月12日': {
                        time: '02:22:06',
                        events: '烟雾 监测到烟雾',
                        type: '真实火警',
                        showl: true,
                        childs: [
                            {
                                time: '07:30:46',
                                events: '系统发送恢复短信至：刘仁花 ',
                                open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
                            },
                            {
                                time: '07:30:46',
                                events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
                                open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
                            }
                        ],
                    },
                },
                {
                    year: '2019',
                    '06月13日': {
                        time: '02:22:06',
                        events: '烟雾 监测到烟雾',
                        type: '安全隐患',
                        showl: true,
                        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', //     心跳时间
            },
            baseUrl: '',//mapurl
        }
    },
    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(){
            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(`按钮重置`);
        },
        determine(){
            this.screens = false;
            console.log(this.checkedCities);
        }
    },
    mounted(){
        this.startEcharts01();
    }
}
</script>
<style lang="scss" >
#Lour{
    width: 100%;
    height: 100%;
    // border: 1px solid #000;
    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;
        }
        .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: 653px;
            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;
                // }
            }
            
        }
        .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: 300px;
                overflow: scroll;
                border: 1px solid rgb(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-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;
                    }
                }
            }
        }
    }
    .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 rgb(23, 201, 62);
            }
        }
    }
}

.backc{
    background-color: #29c093;
}


  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>