|
@@ -38,7 +38,7 @@
|
|
<el-image :class="logisticsFlag ? '' : 'overturn'" style="height: 29px;width: 40px;flex: none;"
|
|
<el-image :class="logisticsFlag ? '' : 'overturn'" style="height: 29px;width: 40px;flex: none;"
|
|
:src="require('@/assets/images/unfold.png')"></el-image>
|
|
:src="require('@/assets/images/unfold.png')"></el-image>
|
|
</div>
|
|
</div>
|
|
- <div style="width: 100%;height: calc(100% - 30px);" v-if="logisticsFlag">
|
|
|
|
|
|
+ <div style="width: 100%;height: calc(100% - 30px);" v-show="logisticsFlag">
|
|
<div class="card_unpack_control">
|
|
<div class="card_unpack_control">
|
|
<div style="display: flex;align-items: center;">
|
|
<div style="display: flex;align-items: center;">
|
|
<div style="width: 260px;margin-right: 10px;">
|
|
<div style="width: 260px;margin-right: 10px;">
|
|
@@ -50,25 +50,43 @@
|
|
</el-date-picker> -->
|
|
</el-date-picker> -->
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- <el-button type="primary" size="small" @click="examine" v-if="currentId == 1">查看实时数据</el-button>
|
|
|
|
|
|
+ <el-button type="primary" size="small" :loading="mapLoading" @click="examine"
|
|
|
|
+ v-if="currentId == 1">查看实时数据</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="history_warp" v-loading="tableLoading">
|
|
<div class="history_warp" v-loading="tableLoading">
|
|
<el-table ref="multipleTable" :data="tableData" :highlight-current-row="currentId == 2 ? true : false"
|
|
<el-table ref="multipleTable" :data="tableData" :highlight-current-row="currentId == 2 ? true : false"
|
|
height="calc(100% - 51px)" border style="width: 100%" @selection-change="handleSelectionChange"
|
|
height="calc(100% - 51px)" border style="width: 100%" @selection-change="handleSelectionChange"
|
|
- @cell-click="selectIncubator" :key="currentId">
|
|
|
|
- <el-table-column type="selection" width="55" v-if="currentId == 1"></el-table-column>
|
|
|
|
|
|
+ @cell-click="selectIncubator" :row-key="(row) => { return row.id }" :key="currentId">
|
|
|
|
+ <el-table-column reserve-selection type="selection" width="55" v-if="currentId == 1"></el-table-column>
|
|
<el-table-column type="index" width="50" v-else></el-table-column>
|
|
<el-table-column type="index" width="50" v-else></el-table-column>
|
|
<el-table-column prop="name" label="名称"></el-table-column>
|
|
<el-table-column prop="name" label="名称"></el-table-column>
|
|
<el-table-column prop="sn" label="SN"></el-table-column>
|
|
<el-table-column prop="sn" label="SN"></el-table-column>
|
|
- <el-table-column prop="status" label="状态"></el-table-column>
|
|
|
|
- <el-table-column prop="T_t" label="当前地址"></el-table-column>
|
|
|
|
- <el-table-column prop="T_t" label="最新温度"></el-table-column>
|
|
|
|
- <el-table-column prop="T_time" label="最新记录时间"></el-table-column>
|
|
|
|
|
|
+ <el-table-column prop="status" label="状态">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <div :style="{color: filterColor(scope.row,startStatus,'status')}">
|
|
|
|
+ {{initDictvalueil(scope.row,startStatus,'status')}}
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="monitorStatus" label="监控状态">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <div :style="{color: filterColor(scope.row,deviceState,'monitorStatus')}">
|
|
|
|
+ {{initDictvalueil(scope.row,deviceState,'monitorStatus')}}
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="deviceData.address" label="当前地址"></el-table-column>
|
|
|
|
+ <el-table-column prop="deviceData.T_t" label="最新温度">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <div>{{scope.row.deviceData.T_t || ''}}</div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="deviceData.T_time" label="最新记录时间"></el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
<div v-if="Total">
|
|
<div v-if="Total">
|
|
- <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
|
|
|
|
- @changeCurrent="changeCurrent">
|
|
|
|
|
|
+ <pagination :total="Total" :currentPage="Pagination.PageIndex" layout="total, prev, pager, next,jumper"
|
|
|
|
+ @changeSize="changeSize" @changeCurrent="changeCurrent">
|
|
</pagination>
|
|
</pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -88,11 +106,12 @@
|
|
<div class="hide_information center_in" v-if="!optionFlag && trackCircle" @click="reelect">
|
|
<div class="hide_information center_in" v-if="!optionFlag && trackCircle" @click="reelect">
|
|
<span class="iconfont icon-guiji"></span>
|
|
<span class="iconfont icon-guiji"></span>
|
|
</div>
|
|
</div>
|
|
- <div class="information_card scale-up-tr" v-if="optionFlag && timeData.length > 0">
|
|
|
|
|
|
+ <div class="information_card scale-up-tr" v-infinite-scroll="scrollLoad"
|
|
|
|
+ v-if="optionFlag && timeData.length > 0">
|
|
<div class="card_time_box" v-for="(item,index) in timeData" :key="index" @click="getTrack(item)">
|
|
<div class="card_time_box" v-for="(item,index) in timeData" :key="index" @click="getTrack(item)">
|
|
<div class="sn_card_box">{{item.sn}}</div>
|
|
<div class="sn_card_box">{{item.sn}}</div>
|
|
- <div class="box_time">{{item.start_time}}</div>
|
|
|
|
- <div class="box_time">{{item.end_time}}</div>
|
|
|
|
|
|
+ <div class="box_time">{{item.coolerBoxUserTime}}</div>
|
|
|
|
+ <div class="box_time">{{item.coolerEndUseTime}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="information_card" v-else-if="optionFlag && timeData.length == 0">
|
|
<div class="information_card" v-else-if="optionFlag && timeData.length == 0">
|
|
@@ -104,12 +123,18 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+ import axios from 'axios'
|
|
import {
|
|
import {
|
|
getCoolerBox,
|
|
getCoolerBox,
|
|
getCoolerBoxLocus,
|
|
getCoolerBoxLocus,
|
|
getHistoryLocus,
|
|
getHistoryLocus,
|
|
- getNewlocus
|
|
|
|
|
|
+ getNewlocus,
|
|
|
|
+ getcoolerboxall
|
|
} from '@/api/incubator'
|
|
} from '@/api/incubator'
|
|
|
|
+ import {
|
|
|
|
+ startStatus,
|
|
|
|
+ deviceState
|
|
|
|
+ } from '@/assets/js/blockSort'
|
|
import pagination from '@/components/pagination'
|
|
import pagination from '@/components/pagination'
|
|
export default {
|
|
export default {
|
|
name: 'centerControl',
|
|
name: 'centerControl',
|
|
@@ -170,6 +195,12 @@
|
|
tableLoading: false,
|
|
tableLoading: false,
|
|
incubatorName: '',
|
|
incubatorName: '',
|
|
timeLoading: false,
|
|
timeLoading: false,
|
|
|
|
+ startStatus: startStatus(),
|
|
|
|
+ deviceState: deviceState(),
|
|
|
|
+ asyncDataLoaded: false,
|
|
|
|
+ limitNoil: true,
|
|
|
|
+ timePage: 1,
|
|
|
|
+ colorIndex: 0,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -181,23 +212,7 @@
|
|
};
|
|
};
|
|
},
|
|
},
|
|
},
|
|
},
|
|
- watch: {
|
|
|
|
- // tableData: {
|
|
|
|
- // handler(newVal) {
|
|
|
|
- // let arr = newVal
|
|
|
|
- // arr.forEach((item) => {
|
|
|
|
- // if (item.id == this.incubatorID) {
|
|
|
|
- // item.flag = true
|
|
|
|
- // } else {
|
|
|
|
- // item.flag = false
|
|
|
|
- // }
|
|
|
|
- // })
|
|
|
|
- // this.incubatorData = arr
|
|
|
|
- // },
|
|
|
|
- // immediate: true,
|
|
|
|
- // deep: true // 开启深度监听
|
|
|
|
- // },
|
|
|
|
- },
|
|
|
|
|
|
+ watch: {},
|
|
mounted() {
|
|
mounted() {
|
|
// this.keyUpSearch()
|
|
// this.keyUpSearch()
|
|
},
|
|
},
|
|
@@ -207,30 +222,54 @@
|
|
this.getList()
|
|
this.getList()
|
|
},
|
|
},
|
|
// 获取保温箱列表
|
|
// 获取保温箱列表
|
|
- getList() {
|
|
|
|
|
|
+ async getList() {
|
|
this.tableLoading = true
|
|
this.tableLoading = true
|
|
var params = {
|
|
var params = {
|
|
page: this.Pagination.PageIndex,
|
|
page: this.Pagination.PageIndex,
|
|
pageSize: this.Pagination.PageSize,
|
|
pageSize: this.Pagination.PageSize,
|
|
showTemp: true,
|
|
showTemp: true,
|
|
name: this.incubatorName,
|
|
name: this.incubatorName,
|
|
|
|
+ monitorStatus: 1, //监控中
|
|
}
|
|
}
|
|
- getCoolerBox(params).then(res => {
|
|
|
|
|
|
+ if (this.currentId == 2) {
|
|
|
|
+ delete params.monitorStatus
|
|
|
|
+ }
|
|
|
|
+ await getCoolerBox(params).then(res => {
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
|
|
+ res.data.list.forEach(async item => {
|
|
|
|
+ item.deviceData.address = ''
|
|
|
|
+ item.deviceData.address = await this.longitudeLatitude(item.deviceData.T_site)
|
|
|
|
+ })
|
|
this.tableData = res.data.list
|
|
this.tableData = res.data.list
|
|
this.Total = res.data.count
|
|
this.Total = res.data.count
|
|
|
|
+ this.$forceUpdate()
|
|
}
|
|
}
|
|
this.tableLoading = false
|
|
this.tableLoading = false
|
|
}).catch(() => {
|
|
}).catch(() => {
|
|
this.tableLoading = false
|
|
this.tableLoading = false
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
+ // 更新保温箱实时数据
|
|
|
|
+ refreshData(event, soleSn) {
|
|
|
|
+ this.tableData.map(async item => {
|
|
|
|
+ if (item.sn === soleSn) {
|
|
|
|
+ item.deviceData.address = await this.longitudeLatitude(event.T_site)
|
|
|
|
+ item.deviceData.T_rh = event.T_rh
|
|
|
|
+ item.deviceData.T_t = event.T_t
|
|
|
|
+ item.deviceData.T_time = event.T_time
|
|
|
|
+ item.deviceData.T_site = event.T_site
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
selectRol(event) {
|
|
selectRol(event) {
|
|
if (this.currentId != event.id) {
|
|
if (this.currentId != event.id) {
|
|
if (event.id == 1) {
|
|
if (event.id == 1) {
|
|
this.playbackControl = false
|
|
this.playbackControl = false
|
|
this.keyUpSearch()
|
|
this.keyUpSearch()
|
|
} else {
|
|
} else {
|
|
|
|
+ this.incubatorSn = []
|
|
|
|
+ this.examine(true)
|
|
this.historicalRoute()
|
|
this.historicalRoute()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -245,7 +284,49 @@
|
|
item.flag = false
|
|
item.flag = false
|
|
}
|
|
}
|
|
})
|
|
})
|
|
- this.$forceUpdate
|
|
|
|
|
|
+ this.$forceUpdate()
|
|
|
|
+ },
|
|
|
|
+ // 普通类型文字匹配
|
|
|
|
+ initDictvalueil(value, list, type) {
|
|
|
|
+ let name = ''
|
|
|
|
+ if (list) {
|
|
|
|
+ list.forEach(item => {
|
|
|
|
+ if (value[type] === item.value) {
|
|
|
|
+ name = item.label
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ return name
|
|
|
|
+ },
|
|
|
|
+ // tag颜色获取
|
|
|
|
+ filterColor(value, list, type) {
|
|
|
|
+ let color = ''
|
|
|
|
+ if (list) {
|
|
|
|
+ list.forEach(item => {
|
|
|
|
+ if (value[type] === item.value) {
|
|
|
|
+ color = item.bgcolor
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ return color
|
|
|
|
+ },
|
|
|
|
+ // 获取经纬度
|
|
|
|
+ longitudeLatitude(latitude) {
|
|
|
|
+ return new Promise((resolve, inject) => {
|
|
|
|
+ let addressArr = ''
|
|
|
|
+ var geocoder = new AMap.Geocoder({
|
|
|
|
+ city: "010", //城市设为北京,默认:“全国”
|
|
|
|
+ radius: 1000 //范围,默认:500
|
|
|
|
+ });
|
|
|
|
+ geocoder.getAddress(latitude, function(status, result) {
|
|
|
|
+ if (status === 'complete' && result.regeocode) {
|
|
|
|
+ var address = result.regeocode.formattedAddress;
|
|
|
|
+ resolve(address)
|
|
|
|
+ } else {
|
|
|
|
+ resolve('')
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ })
|
|
},
|
|
},
|
|
// 展开收起
|
|
// 展开收起
|
|
getUnpack() {
|
|
getUnpack() {
|
|
@@ -258,68 +339,86 @@
|
|
handleSelectionChange(event) {
|
|
handleSelectionChange(event) {
|
|
let arr = []
|
|
let arr = []
|
|
event.forEach(item => {
|
|
event.forEach(item => {
|
|
- arr.push(item.sn)
|
|
|
|
|
|
+ let list = {
|
|
|
|
+ sn: item.sn,
|
|
|
|
+ name: item.name,
|
|
|
|
+ }
|
|
|
|
+ arr.push(list)
|
|
})
|
|
})
|
|
this.incubatorSn = arr
|
|
this.incubatorSn = arr
|
|
- // console.log(arr, 35)
|
|
|
|
},
|
|
},
|
|
// 查看实时数据
|
|
// 查看实时数据
|
|
- async examine() {
|
|
|
|
|
|
+ async examine(event) {
|
|
const that = this
|
|
const that = this
|
|
that.realTimeTrajectory = []
|
|
that.realTimeTrajectory = []
|
|
|
|
|
|
function difference(arr1, arr2) {
|
|
function difference(arr1, arr2) {
|
|
- return arr1.filter(item => !arr2.includes(item));
|
|
|
|
|
|
+ return arr1.filter(item => !arr2.includes(item.sn));
|
|
}
|
|
}
|
|
- const uniqueToFirstArray = difference(that.incubatorSn, that.jointSn);
|
|
|
|
- const uniqueToFirstArray1 = difference(that.jointSn, that.incubatorSn);
|
|
|
|
- uniqueToFirstArray1.forEach(ique => {
|
|
|
|
- that.jointSn = deleteElementById(that.jointSn, ique)
|
|
|
|
|
|
|
|
- function deleteElementById(arr, id) {
|
|
|
|
- return arr.filter((item) => item !== id);
|
|
|
|
- }
|
|
|
|
- if (that.carMarker[ique].marker) {
|
|
|
|
- that.carMarker[ique].marker.setMap(null)
|
|
|
|
- }
|
|
|
|
- if (that.carMarker[ique].startMarker) {
|
|
|
|
- that.carMarker[ique].startMarker.setMap(null)
|
|
|
|
- }
|
|
|
|
- if (that.carMarker[ique].polyline) {
|
|
|
|
- that.carMarker[ique].polyline.setMap(null)
|
|
|
|
|
|
+ const uniqueToFirstArray = difference(that.incubatorSn, that.jointSn);
|
|
|
|
+ // console.log(uniqueToFirstArray,324)
|
|
|
|
+ that.jointSn.forEach(item => {
|
|
|
|
+ that.eventSource[item.sn].close()
|
|
|
|
+ if (that.carMarker[item.sn]) {
|
|
|
|
+ if (that.carMarker[item.sn].marker) {
|
|
|
|
+ that.carMarker[item.sn].marker.setMap(null)
|
|
|
|
+ }
|
|
|
|
+ if (that.carMarker[item.sn].startMarker) {
|
|
|
|
+ that.carMarker[item.sn].startMarker.setMap(null)
|
|
|
|
+ }
|
|
|
|
+ if (that.carMarker[item.sn].polyline) {
|
|
|
|
+ that.carMarker[item.sn].polyline.setMap(null)
|
|
|
|
+ }
|
|
|
|
+ that.carMarker[item.sn] = null
|
|
}
|
|
}
|
|
- that.eventSource[ique].close()
|
|
|
|
- that.carMarker[ique] = null
|
|
|
|
})
|
|
})
|
|
- that.jointSn = that.incubatorSn
|
|
|
|
const userData = localStorage.getItem('userList')
|
|
const userData = localStorage.getItem('userList')
|
|
const deptId = JSON.parse(userData)
|
|
const deptId = JSON.parse(userData)
|
|
that.map.setFitView(null, false, [150, 60, 100, 60])
|
|
that.map.setFitView(null, false, [150, 60, 100, 60])
|
|
|
|
+ if (event == true) {
|
|
|
|
+ return
|
|
|
|
+ }
|
|
if (that.incubatorSn.length > 0) {
|
|
if (that.incubatorSn.length > 0) {
|
|
|
|
+ that.jointSn = that.incubatorSn
|
|
|
|
+ // 处理 SSE 流
|
|
for (let i = 0; i < uniqueToFirstArray.length; i++) {
|
|
for (let i = 0; i < uniqueToFirstArray.length; i++) {
|
|
- const T_sn = uniqueToFirstArray[i]
|
|
|
|
- // 处理 SSE 流
|
|
|
|
that.mapLoading = true
|
|
that.mapLoading = true
|
|
- that.eventSource[T_sn] = await new EventSource(
|
|
|
|
- `http://182.43.247.65:6280/api/waybill/newlocus?T_sn=${T_sn}&id=${deptId.dept.id}`);
|
|
|
|
- that.eventSource[T_sn].onopen = function(e) {
|
|
|
|
- // console.log('Connection to SSE opened.', e);
|
|
|
|
- };
|
|
|
|
- that.eventSource[T_sn].onmessage = function(e) {
|
|
|
|
- // console.log('Message from SSE stream:', e.data);
|
|
|
|
- const arr = JSON.parse(e.data)
|
|
|
|
|
|
+ const T_sn = uniqueToFirstArray[i].sn
|
|
|
|
+ const CoolerName = uniqueToFirstArray[i].name
|
|
|
|
+ await that.getDeviceAttachment(T_sn, CoolerName, deptId)
|
|
|
|
+ that.mapLoading = false
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ that.$message({
|
|
|
|
+ message: '请选择保温箱',
|
|
|
|
+ type: 'warning'
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // sse连接保温箱设备
|
|
|
|
+ getDeviceAttachment(T_sn, CoolerName, deptId) {
|
|
|
|
+ return new Promise((resolve, inject) => {
|
|
|
|
+ const that = this
|
|
|
|
+ // that.eventSource[T_sn] = new EventSource(
|
|
|
|
+ // `http://182.43.247.65:6280/api/waybill/newlocus?T_sn=${T_sn}&Id=${deptId.dept.id}&CoolerName=${CoolerName}`
|
|
|
|
+ // ); //测试
|
|
|
|
+ that.eventSource[T_sn] = new EventSource(
|
|
|
|
+ `https://colddelivery.coldbaozhida.com/cold_delivery/api/waybill/newlocus?T_sn=${T_sn}&Id=${deptId.dept.id}&CoolerName=${CoolerName}`
|
|
|
|
+ );//正式
|
|
|
|
+ that.eventSource[T_sn].onopen = function(e) {
|
|
|
|
+ // console.log('Connection to SSE opened.', e);
|
|
|
|
+ };
|
|
|
|
+ that.eventSource[T_sn].onmessage = function(e) {
|
|
|
|
+ resolve()
|
|
|
|
+ // console.log('Message from SSE stream:', e.data);
|
|
|
|
+ const arr = JSON.parse(e.data)
|
|
|
|
+ // console.log('Message from SSE stream:', arr);
|
|
|
|
+ if (arr.data) {
|
|
if (arr.code == 200) {
|
|
if (arr.code == 200) {
|
|
- // 判断数组对象中是否存在该对象
|
|
|
|
- let index = that.realTimeTrajectory.findIndex((item) => item.sn === arr.sn);
|
|
|
|
- // 如果有就替换,没有就添加
|
|
|
|
- if (index !== -1) {
|
|
|
|
- that.realTimeTrajectory.splice(index, 1, arr);
|
|
|
|
- } else {
|
|
|
|
- that.realTimeTrajectory.push(arr);
|
|
|
|
- }
|
|
|
|
- that.realTimeTrajectory.forEach(event => {
|
|
|
|
- that.initMarker(event.data[0], event)
|
|
|
|
- })
|
|
|
|
|
|
+ that.initMarker(arr.data[0], arr)
|
|
|
|
+ // 更新数据
|
|
|
|
+ that.refreshData(arr.data[0], arr.sn)
|
|
} else {
|
|
} else {
|
|
that.jointSn = deleteElementById(that.jointSn, T_sn)
|
|
that.jointSn = deleteElementById(that.jointSn, T_sn)
|
|
|
|
|
|
@@ -329,42 +428,93 @@
|
|
that.$message.error(arr.msg);
|
|
that.$message.error(arr.msg);
|
|
that.eventSource[T_sn].close()
|
|
that.eventSource[T_sn].close()
|
|
}
|
|
}
|
|
- that.mapLoading = false
|
|
|
|
- };
|
|
|
|
- that.eventSource[T_sn].onerror = function(e) {
|
|
|
|
- that.mapLoading = false
|
|
|
|
- console.error('Error from SSE stream:', uniqueToFirstArray[i], e);
|
|
|
|
- };
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- that.$message({
|
|
|
|
- message: '请选择保温箱',
|
|
|
|
- type: 'warning'
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
|
|
+ } else {
|
|
|
|
+ that.eventSource[T_sn].close()
|
|
|
|
+ that.$message({
|
|
|
|
+ message: '设备:' + T_sn + '暂无数据!请开启监控设备',
|
|
|
|
+ type: 'warning'
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+ that.eventSource[T_sn].onerror = function(e) {
|
|
|
|
+ that.mapLoading = false
|
|
|
|
+ // console.error('Error from SSE stream:', uniqueToFirstArray[i], e);
|
|
|
|
+ };
|
|
|
|
+ })
|
|
},
|
|
},
|
|
// 初始化坐标点的icon
|
|
// 初始化坐标点的icon
|
|
- initMarker(location, item) {
|
|
|
|
|
|
+ initMarker(location, information) {
|
|
|
|
+ let that = this
|
|
let latitude = location.T_site.split(',')
|
|
let latitude = location.T_site.split(',')
|
|
- let dataList = item.data
|
|
|
|
|
|
+ let dataList = information.data
|
|
var trackList = []
|
|
var trackList = []
|
|
- var positions = item.data
|
|
|
|
|
|
+ var correctionTrajectory = []
|
|
|
|
+ var positions = information.data
|
|
if (positions.length > 0) {
|
|
if (positions.length > 0) {
|
|
positions.forEach(item => {
|
|
positions.forEach(item => {
|
|
if (item.T_site != '0,0' && item.T_site) {
|
|
if (item.T_site != '0,0' && item.T_site) {
|
|
const data = item.T_site.split(',')
|
|
const data = item.T_site.split(',')
|
|
let arrTrack = [Number(data[0]), Number(data[1])]
|
|
let arrTrack = [Number(data[0]), Number(data[1])]
|
|
|
|
+ let corre = {
|
|
|
|
+ 'x': Number(data[0]),
|
|
|
|
+ 'y': Number(data[1]),
|
|
|
|
+ 'sp': 10,
|
|
|
|
+ 'ag': 130,
|
|
|
|
+ 'tm': convertToTimestamp(item.T_time)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function convertToTimestamp(dateString) {
|
|
|
|
+ return new Date(dateString).getTime();
|
|
|
|
+ }
|
|
|
|
+ correctionTrajectory.push(corre)
|
|
trackList.push(arrTrack)
|
|
trackList.push(arrTrack)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
// 生成坐标点icon
|
|
// 生成坐标点icon
|
|
- if (this.carMarker[item.sn]) {
|
|
|
|
- if (this.carMarker[item.sn].marker) {
|
|
|
|
- this.carMarker[item.sn].marker.setPosition([Number(latitude[0]), Number(latitude[1])])
|
|
|
|
|
|
+ if (that.carMarker[information.sn] && that.carMarker[information.sn] != null) {
|
|
|
|
+ if (that.carMarker[information.sn].marker) {
|
|
|
|
+ that.carMarker[information.sn].marker.setMap(null)
|
|
|
|
+ let icon = new AMap.Icon({
|
|
|
|
+ size: new AMap.Size(40, 45),
|
|
|
|
+ image: require(`@/assets/images/truck.png`),
|
|
|
|
+ imageSize: new AMap.Size(40, 45),
|
|
|
|
+ });
|
|
|
|
+ that.carMarker[information.sn].marker = new AMap.Marker({
|
|
|
|
+ icon: icon, // 坐标点图标
|
|
|
|
+ position: [Number(latitude[0]), Number(latitude[1])], // 左边点的经纬度
|
|
|
|
+ offset: new AMap.Pixel(-10, -30) // 坐标点偏移量
|
|
|
|
+ });
|
|
|
|
+ var geocoder = new AMap.Geocoder({
|
|
|
|
+ city: "010", //城市设为北京,默认:“全国”
|
|
|
|
+ radius: 1000 //范围,默认:500
|
|
|
|
+ });
|
|
|
|
+ geocoder.getAddress([Number(latitude[0]), Number(latitude[1])], function(status, result) {
|
|
|
|
+ if (status === 'complete' && result.regeocode) {
|
|
|
|
+ var address = result.regeocode.formattedAddress;
|
|
|
|
+ // 点标记显示内容,HTML要素字符串
|
|
|
|
+ var markerContent = '' +
|
|
|
|
+ '<div class="incubator_card_map">' +
|
|
|
|
+ ' <div class="map_title_incu">' + information.CoolerName + '</div>' +
|
|
|
|
+ ' <div class="map_title_incu1">' + information.sn + '</div>' +
|
|
|
|
+ ' <div class="map_title_incu1">最新温度: <span>' + location.T_t + '</span></div>' +
|
|
|
|
+ ' <div class="map_title_incu2">记录时间: ' + location.T_time + '</div>' +
|
|
|
|
+ ' <div class="map_title_incu2">当前地址: ' + address + '</div>' +
|
|
|
|
+ ' <div class="map_arrows"></div>' +
|
|
|
|
+ '</div>';
|
|
|
|
+ that.carMarker[information.sn].marker.setLabel({
|
|
|
|
+ offset: new AMap.Pixel(-3, -68),
|
|
|
|
+ content: markerContent,
|
|
|
|
+ direction: 'center',
|
|
|
|
+ })
|
|
|
|
+ that.carMarker[information.sn].marker.setMap(that.map)
|
|
|
|
+ }
|
|
|
|
+ });
|
|
}
|
|
}
|
|
- if (this.carMarker[item.sn].polyline) {
|
|
|
|
- this.carMarker[item.sn].polyline.setPath(trackList)
|
|
|
|
|
|
+ that.carMarker[information.sn].polyline = that.carMarker[information.sn].polyline
|
|
|
|
+ that.carMarker[information.sn].startMarker = that.carMarker[information.sn].startMarker
|
|
|
|
+ if (that.carMarker[information.sn].polyline) {
|
|
|
|
+ that.carMarker[information.sn].polyline.setPath(trackList)
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
// 创建一个 起点Icon
|
|
// 创建一个 起点Icon
|
|
@@ -379,53 +529,94 @@
|
|
image: require(`@/assets/images/truck.png`),
|
|
image: require(`@/assets/images/truck.png`),
|
|
imageSize: new AMap.Size(40, 45),
|
|
imageSize: new AMap.Size(40, 45),
|
|
});
|
|
});
|
|
- this.carMarker[item.sn] = {
|
|
|
|
|
|
+ that.carMarker[information.sn] = {
|
|
marker: null,
|
|
marker: null,
|
|
polyline: null,
|
|
polyline: null,
|
|
startMarker: null,
|
|
startMarker: null,
|
|
}
|
|
}
|
|
// 坐标点 生成方法
|
|
// 坐标点 生成方法
|
|
- this.carMarker[item.sn].marker = new AMap.Marker({
|
|
|
|
|
|
+ that.carMarker[information.sn].marker = new AMap.Marker({
|
|
icon: icon, // 坐标点图标
|
|
icon: icon, // 坐标点图标
|
|
position: [Number(latitude[0]), Number(latitude[1])], // 左边点的经纬度
|
|
position: [Number(latitude[0]), Number(latitude[1])], // 左边点的经纬度
|
|
- offset: new AMap.Pixel(0, -30) // 坐标点偏移量
|
|
|
|
|
|
+ offset: new AMap.Pixel(-10, -30) // 坐标点偏移量
|
|
});
|
|
});
|
|
// 起点
|
|
// 起点
|
|
var startArr = positions[positions.length - 1].T_site.split(',')
|
|
var startArr = positions[positions.length - 1].T_site.split(',')
|
|
- this.carMarker[item.sn].startMarker = new AMap.Marker({
|
|
|
|
|
|
+ that.carMarker[information.sn].startMarker = new AMap.Marker({
|
|
icon: startIcon, // 坐标点图标
|
|
icon: startIcon, // 坐标点图标
|
|
position: [Number(startArr[0]), Number(startArr[1])], // 左边点的经纬度
|
|
position: [Number(startArr[0]), Number(startArr[1])], // 左边点的经纬度
|
|
offset: new AMap.Pixel(-11, -28) // 坐标点偏移量
|
|
offset: new AMap.Pixel(-11, -28) // 坐标点偏移量
|
|
});
|
|
});
|
|
- // 点标记显示内容,HTML要素字符串
|
|
|
|
- var markerContent = '' +
|
|
|
|
- '<div class="incubator_card_map">' +
|
|
|
|
- ' <div class="map_title_incu">保温箱1</div>' +
|
|
|
|
- ' <div class="map_title_incu1">' + item.sn + '</div>' +
|
|
|
|
- ' <div class="map_title_incu1">最新温度: <span>' + location.T_t + '</span></div>' +
|
|
|
|
- ' <div class="map_title_incu2">记录时间: ' + location.T_time + '</div>' +
|
|
|
|
- ' <div class="map_title_incu2">当前地址: ' + location.T_time + '</div>' +
|
|
|
|
- ' <div class="map_arrows"></div>' +
|
|
|
|
- '</div>';
|
|
|
|
- this.carMarker[item.sn].marker.setLabel({
|
|
|
|
- offset: new AMap.Pixel(-7, -68),
|
|
|
|
- content: markerContent,
|
|
|
|
- direction: 'center',
|
|
|
|
- })
|
|
|
|
- this.carMarker[item.sn].polyline = new AMap.Polyline({
|
|
|
|
- map: this.map,
|
|
|
|
- path: trackList,
|
|
|
|
- showDir: true,
|
|
|
|
- strokeColor: "#28F", //线颜色
|
|
|
|
- strokeWeight: 10, //线宽
|
|
|
|
- strokeStyle: "solid",
|
|
|
|
- lineJoin: 'round',
|
|
|
|
- lineCap: 'round',
|
|
|
|
|
|
+ that.carMarker[information.sn].startMarker.setMap(that.map)
|
|
|
|
+ var geocoder = new AMap.Geocoder({
|
|
|
|
+ city: "010", //城市设为北京,默认:“全国”
|
|
|
|
+ radius: 1000 //范围,默认:500
|
|
|
|
+ });
|
|
|
|
+ geocoder.getAddress([Number(latitude[0]), Number(latitude[1])], function(status, result) {
|
|
|
|
+ if (status === 'complete' && result.regeocode) {
|
|
|
|
+ var address = result.regeocode.formattedAddress;
|
|
|
|
+ // 点标记显示内容,HTML要素字符串
|
|
|
|
+ var markerContent = '' +
|
|
|
|
+ '<div class="incubator_card_map">' +
|
|
|
|
+ ' <div class="map_title_incu">' + information.CoolerName + '</div>' +
|
|
|
|
+ ' <div class="map_title_incu1">' + information.sn + '</div>' +
|
|
|
|
+ ' <div class="map_title_incu1">最新温度: <span>' + location.T_t + '</span></div>' +
|
|
|
|
+ ' <div class="map_title_incu2">记录时间: ' + location.T_time + '</div>' +
|
|
|
|
+ ' <div class="map_title_incu2">当前地址: ' + address + '</div>' +
|
|
|
|
+ ' <div class="map_arrows"></div>' +
|
|
|
|
+ '</div>';
|
|
|
|
+ that.carMarker[information.sn].marker.setLabel({
|
|
|
|
+ offset: new AMap.Pixel(-3, -68),
|
|
|
|
+ content: markerContent,
|
|
|
|
+ direction: 'center',
|
|
|
|
+ })
|
|
|
|
+ that.carMarker[information.sn].marker.setMap(that.map)
|
|
|
|
+ let colorArr = ['#0070ff', '#E6A23C', '#67C23A', '#f9ff00', '#8fff00', '#a0cfff', '#00ff16',
|
|
|
|
+ '#00fdff', '#9f00ff', '#ff0000',
|
|
|
|
+ ]
|
|
|
|
+ that.carMarker[information.sn].polyline = new AMap.Polyline({
|
|
|
|
+ map: that.map,
|
|
|
|
+ path: trackList,
|
|
|
|
+ showDir: true,
|
|
|
|
+ strokeColor: colorArr[that.colorIndex], //线颜色
|
|
|
|
+ strokeWeight: 10, //线宽
|
|
|
|
+ strokeStyle: "solid",
|
|
|
|
+ lineJoin: 'round',
|
|
|
|
+ lineCap: 'round',
|
|
|
|
+ });
|
|
|
|
+ that.colorIndex++
|
|
|
|
+ that.carMarker[information.sn].polyline.setMap(that.map)
|
|
|
|
+ that.map.setFitView(null, false, [150, 60, 100, 60])
|
|
|
|
+ // var graspRoad;
|
|
|
|
+ // if (!graspRoad) {
|
|
|
|
+ // graspRoad = new AMap.GraspRoad()
|
|
|
|
+ // }
|
|
|
|
+ // console.log(correctionTrajectory, 25425)
|
|
|
|
+ // graspRoad.driving(correctionTrajectory, function(error, result) {
|
|
|
|
+ // console.log(error, result, 25425)
|
|
|
|
+ // if (!error) {
|
|
|
|
+ // var path2 = [];
|
|
|
|
+ // var newPath = result.data.points;
|
|
|
|
+ // for (var i = 0; i < newPath.length; i += 1) {
|
|
|
|
+ // path2.push([newPath[i].x, newPath[i].y])
|
|
|
|
+ // }
|
|
|
|
+ // var newLine = new AMap.Polyline({
|
|
|
|
+ // path: path2,
|
|
|
|
+ // strokeWeight: 8,
|
|
|
|
+ // strokeOpacity: 0.8,
|
|
|
|
+ // strokeColor: '#28F',
|
|
|
|
+ // showDir: true
|
|
|
|
+ // })
|
|
|
|
+ // that.map.add(newLine)
|
|
|
|
+ // that.map.setFitView()
|
|
|
|
+ // }
|
|
|
|
+ // })
|
|
|
|
+ } else {
|
|
|
|
+ console.error('根据经纬度查询地址失败')
|
|
|
|
+ }
|
|
});
|
|
});
|
|
- this.carMarker[item.sn].marker.setMap(this.map)
|
|
|
|
- this.carMarker[item.sn].startMarker.setMap(this.map)
|
|
|
|
}
|
|
}
|
|
- this.map.setFitView(null, false, [150, 60, 100, 60])
|
|
|
|
|
|
+ that.map.setFitView(null, false, [150, 60, 100, 60])
|
|
},
|
|
},
|
|
keyUpSearch() {
|
|
keyUpSearch() {
|
|
var that = this
|
|
var that = this
|
|
@@ -448,25 +639,53 @@
|
|
// 选择保温箱
|
|
// 选择保温箱
|
|
selectIncubator(event) {
|
|
selectIncubator(event) {
|
|
this.$refs.multipleTable.toggleRowSelection(event);
|
|
this.$refs.multipleTable.toggleRowSelection(event);
|
|
- this.incubatorID = event.id
|
|
|
|
- if (this.currentId == 2) {
|
|
|
|
- event.flag = true
|
|
|
|
|
|
+ if (event.monitorStatus == 4) {
|
|
this.optionFlag = true
|
|
this.optionFlag = true
|
|
- this.getBoxLocus(event.id)
|
|
|
|
|
|
+ this.timePage = 1
|
|
|
|
+ this.limitNoil = true
|
|
|
|
+ this.timeData = []
|
|
|
|
+ this.$message.error('该保温箱暂未绑定平台');
|
|
|
|
+ } else {
|
|
|
|
+ this.incubatorID = event.id
|
|
|
|
+ if (this.currentId == 2) {
|
|
|
|
+ event.flag = true
|
|
|
|
+ this.optionFlag = true
|
|
|
|
+ this.timePage = 1
|
|
|
|
+ this.limitNoil = true
|
|
|
|
+ this.timeData = []
|
|
|
|
+ this.getBoxLocus()
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
// 重选时间段轨迹
|
|
// 重选时间段轨迹
|
|
reelect() {
|
|
reelect() {
|
|
this.optionFlag = true
|
|
this.optionFlag = true
|
|
},
|
|
},
|
|
|
|
+ // 滚动触底
|
|
|
|
+ scrollLoad() {
|
|
|
|
+ if (this.limitNoil && this.timeData.length > 0) {
|
|
|
|
+ this.getBoxLocus()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
// 获取保温箱历史时间段
|
|
// 获取保温箱历史时间段
|
|
- getBoxLocus(boxID) {
|
|
|
|
|
|
+ getBoxLocus() {
|
|
this.timeLoading = true
|
|
this.timeLoading = true
|
|
- getCoolerBoxLocus({
|
|
|
|
- id: boxID,
|
|
|
|
|
|
+ getcoolerboxall({
|
|
|
|
+ coolerBoxId: this.incubatorID,
|
|
|
|
+ page: this.timePage,
|
|
|
|
+ pageSize: 10,
|
|
}).then(res => {
|
|
}).then(res => {
|
|
- if (res.code == 200 && res.data.list != null) {
|
|
|
|
- this.timeData = res.data.list
|
|
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ let arr = res.data.list
|
|
|
|
+ if (this.limitNoil == true && arr) {
|
|
|
|
+ this.timeData = this.timeData.concat(arr)
|
|
|
|
+ }
|
|
|
|
+ if (arr.length >= 10) {
|
|
|
|
+ this.timePage = ++this.timePage;
|
|
|
|
+ } else {
|
|
|
|
+ // 已经没数据了 不需要增加数据
|
|
|
|
+ this.limitNoil = false;
|
|
|
|
+ }
|
|
} else {
|
|
} else {
|
|
this.timeData = []
|
|
this.timeData = []
|
|
}
|
|
}
|
|
@@ -480,47 +699,51 @@
|
|
if (this.marker) {
|
|
if (this.marker) {
|
|
this.marker.stopMove();
|
|
this.marker.stopMove();
|
|
}
|
|
}
|
|
- getHistoryLocus({
|
|
|
|
- sn: event.sn,
|
|
|
|
- start_time: event.start_time,
|
|
|
|
- end_time: event.end_time,
|
|
|
|
- t_id: event.t_id,
|
|
|
|
- page: 1,
|
|
|
|
- page_z: 999,
|
|
|
|
- }).then(res => {
|
|
|
|
- if (res.code == 200) {
|
|
|
|
- var trackList = []
|
|
|
|
- var positions = res.data
|
|
|
|
- if (positions.length > 0) {
|
|
|
|
- positions.forEach(item => {
|
|
|
|
- if (item.T_site != '0,0' && item.T_site) {
|
|
|
|
- const data = item.T_site.split(',')
|
|
|
|
- trackList.push(data)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- if (this.polyline) {
|
|
|
|
- this.polyline.setMap(null); // 移除轨迹
|
|
|
|
- }
|
|
|
|
- this.polyline = null
|
|
|
|
- if (this.passedPolyline) {
|
|
|
|
- this.passedPolyline.setMap(null)
|
|
|
|
- }
|
|
|
|
- this.passedPolyline = null
|
|
|
|
- if (this.marker) {
|
|
|
|
- this.marker.setMap(null)
|
|
|
|
- }
|
|
|
|
- this.marker = null
|
|
|
|
- if (this.endMarker) {
|
|
|
|
- this.endMarker.setMap(null)
|
|
|
|
|
|
+ if (event.sn) {
|
|
|
|
+ getHistoryLocus({
|
|
|
|
+ sn: event.sn,
|
|
|
|
+ start_time: event.coolerBoxUserTime,
|
|
|
|
+ end_time: event.coolerEndUseTime,
|
|
|
|
+ // t_id: event.t_id,
|
|
|
|
+ page: 1,
|
|
|
|
+ page_z: 999,
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ var trackList = []
|
|
|
|
+ var positions = res.data
|
|
|
|
+ if (positions && positions.length > 0) {
|
|
|
|
+ positions.forEach(item => {
|
|
|
|
+ if (item.T_site != '0,0' && item.T_site) {
|
|
|
|
+ const data = item.T_site.split(',')
|
|
|
|
+ trackList.push(data)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ if (this.polyline) {
|
|
|
|
+ this.polyline.setMap(null); // 移除轨迹
|
|
|
|
+ }
|
|
|
|
+ this.polyline = null
|
|
|
|
+ if (this.passedPolyline) {
|
|
|
|
+ this.passedPolyline.setMap(null)
|
|
|
|
+ }
|
|
|
|
+ this.passedPolyline = null
|
|
|
|
+ if (this.marker) {
|
|
|
|
+ this.marker.setMap(null)
|
|
|
|
+ }
|
|
|
|
+ this.marker = null
|
|
|
|
+ if (this.endMarker) {
|
|
|
|
+ this.endMarker.setMap(null)
|
|
|
|
+ }
|
|
|
|
+ this.endMarker = null
|
|
|
|
+ this.trackList = trackList
|
|
|
|
+ this.optionFlag = false
|
|
|
|
+ this.trackCircle = true
|
|
|
|
+ if (trackList.length > 0) {
|
|
|
|
+ this.initMap(trackList)
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- this.endMarker = null
|
|
|
|
- this.trackList = trackList
|
|
|
|
- this.optionFlag = false
|
|
|
|
- this.trackCircle = true
|
|
|
|
- this.initMap(trackList)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ })
|
|
|
|
+ }
|
|
},
|
|
},
|
|
// 历史轨迹
|
|
// 历史轨迹
|
|
initMap(arr) {
|
|
initMap(arr) {
|
|
@@ -656,10 +879,10 @@
|
|
},
|
|
},
|
|
// 弹窗关闭
|
|
// 弹窗关闭
|
|
dialogClose() {
|
|
dialogClose() {
|
|
- if (this.incubatorSn.length > 0) {
|
|
|
|
- this.incubatorSn.forEach(item => {
|
|
|
|
- if(this.eventSource[item]){
|
|
|
|
- this.eventSource[item].close()
|
|
|
|
|
|
+ if (this.jointSn.length > 0) {
|
|
|
|
+ this.jointSn.forEach(item => {
|
|
|
|
+ if (this.eventSource[item.sn]) {
|
|
|
|
+ this.eventSource[item.sn].close()
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
@@ -672,6 +895,13 @@
|
|
item.flag = false
|
|
item.flag = false
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
+ this.incubatorSn = []
|
|
|
|
+ this.jointSn = []
|
|
|
|
+ this.realTimeTrajectory = []
|
|
|
|
+ this.carMarker = []
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$refs.multipleTable.clearSelection();
|
|
|
|
+ })
|
|
this.logisticsFlag = true
|
|
this.logisticsFlag = true
|
|
},
|
|
},
|
|
changeSize(val) {
|
|
changeSize(val) {
|
|
@@ -688,6 +918,8 @@
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
::v-deep .amap-marker-label {
|
|
::v-deep .amap-marker-label {
|
|
|
|
+ bottom: -3px !important;
|
|
|
|
+ top: unset !important;
|
|
border: unset !important;
|
|
border: unset !important;
|
|
padding: 0px !important;
|
|
padding: 0px !important;
|
|
background-color: unset !important;
|
|
background-color: unset !important;
|
|
@@ -809,6 +1041,10 @@
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ ::v-deep .history_warp .current-row>td.el-table__cell {
|
|
|
|
+ background-color: #9eb1f7 !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
.overturn {
|
|
.overturn {
|
|
transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
@@ -879,11 +1115,12 @@
|
|
|
|
|
|
::v-deep .incubator_card_map {
|
|
::v-deep .incubator_card_map {
|
|
position: relative;
|
|
position: relative;
|
|
- width: 180px;
|
|
|
|
|
|
+ width: 190px;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
border: 1px solid #DCDFE6;
|
|
border: 1px solid #DCDFE6;
|
|
padding: 5px;
|
|
padding: 5px;
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
|
+ // overflow: hidden;
|
|
}
|
|
}
|
|
|
|
|
|
::v-deep .map_title_incu {
|
|
::v-deep .map_title_incu {
|
|
@@ -902,6 +1139,7 @@
|
|
}
|
|
}
|
|
|
|
|
|
::v-deep .map_title_incu2 {
|
|
::v-deep .map_title_incu2 {
|
|
|
|
+ white-space: normal;
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
margin: 2px 0px;
|
|
margin: 2px 0px;
|
|
}
|
|
}
|