From 514437f7ac0136c7cdcc2f81e3909123a716bccb Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 08 Apr 2021 10:14:05 +0800
Subject: [PATCH] 4.8
---
src/router/views/index.js | 16 +
src/views/dataL/dataL.vue | 849 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
public/img/liu/no-history.png | 0
src/views/alarmManagement/alarmAnalysis.vue | 2
4 files changed, 865 insertions(+), 2 deletions(-)
diff --git a/public/img/liu/no-history.png b/public/img/liu/no-history.png
new file mode 100644
index 0000000..1b1f461
--- /dev/null
+++ b/public/img/liu/no-history.png
Binary files differ
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 22fe348..a08cc4c 100644
--- a/src/router/views/index.js
+++ b/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')
+ }]
+ },
]
diff --git a/src/views/alarmManagement/alarmAnalysis.vue b/src/views/alarmManagement/alarmAnalysis.vue
index 775572b..4f42371 100644
--- a/src/views/alarmManagement/alarmAnalysis.vue
+++ b/src/views/alarmManagement/alarmAnalysis.vue
@@ -232,7 +232,7 @@
},
{
name: '联盟广告',
- type: 'line',
+ type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
new file mode 100644
index 0000000..8ec013e
--- /dev/null
+++ b/src/views/dataL/dataL.vue
@@ -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>
+  : 
+ <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>
\ No newline at end of file
--
Gitblit v1.9.3