From fb279cb2adcc1c2918e8bf117eb1124fe4efddee Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 09 Apr 2021 17:09:36 +0800
Subject: [PATCH] 修改
---
src/views/dataL/dataL.vue | 2098 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 1,215 insertions(+), 883 deletions(-)
diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index dd3e7b3..6559625 100644
--- a/src/views/dataL/dataL.vue
+++ b/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>
-  : 
- <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}¤t=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}¤t=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>
\ No newline at end of file
--
Gitblit v1.9.3