|
|
@@ -1,1066 +1,1892 @@
|
|
|
<!-- 首页模块 首页面 -->
|
|
|
<template>
|
|
|
<div class="home">
|
|
|
- <div class="body-middle"
|
|
|
- :class="{ 'body-middle-height': blockList[0].flag }">
|
|
|
+ <div class="body-middle" :class="{ 'body-middle-height': blockList[0].flag }">
|
|
|
<div class="body-middle-left">
|
|
|
<!-- 任务、消息、提醒、超期 -->
|
|
|
- <Panel :data-list="panelList"
|
|
|
- @click="gotoNewRw"></Panel>
|
|
|
+ <!-- <Panel :data-list="panelList" @click="gotoNewRw"></Panel> -->
|
|
|
+ <div class="header">
|
|
|
+ <div class="left">
|
|
|
+ <img src="../../../public/img/8b2c7255e9b19c71d68b33a08f20f74.png" alt="">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="top">
|
|
|
+ {{ nowDate }}
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ {{ nowTime }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div v-show="false">
|
|
|
- <el-input v-model="param"/>
|
|
|
+ <el-input v-model="param" />
|
|
|
<el-button @click="openPort()">openPort</el-button>
|
|
|
<el-button @click="closePort()">closePort</el-button>
|
|
|
<div>{{text}}</div>
|
|
|
</div>
|
|
|
- <img style='width:100%;margin-top:10px;' src="../../../public/img/tmt.gif" alt="">
|
|
|
+ <div class="content2">
|
|
|
+ <el-row class="content2-aside">
|
|
|
+ <h3 class="title">采购合同完成进度</h3>
|
|
|
+ <el-col :span="12" class="chart-card">
|
|
|
+ <div style="font-weight: bold;" class="">
|
|
|
+ <div ref="myEchart1" style="height: 288px;"></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="chart-card">
|
|
|
+ <div style="font-weight: bold;">
|
|
|
+ <div ref="myEchart2" style="height: 288px;"></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="chart-card">
|
|
|
+ <div style="font-weight: bold;">
|
|
|
+ <div ref="myEchart3" style="height: 288px;"></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div class="content2-middle">
|
|
|
+ <el-row class="left">
|
|
|
+ <el-col :span="12">
|
|
|
+ <h3>在途信息统计</h3>
|
|
|
+ <div class="left-card">
|
|
|
+ <div class="item">
|
|
|
+ <p>在途车辆</p>
|
|
|
+ <p><span class="number">76</span><span class="number-text">台</span></p>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <p>装货车辆</p>
|
|
|
+ <p><span class="number" style="color:#ffa523;">86</span><span class="number-text">台</span></p>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <p>卸货车辆</p>
|
|
|
+ <p><span class="number" style="color: #2483ff;">16</span><span class="number-text">台</span></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <h3>粮食总储量</h3>
|
|
|
+ <div ref="myEchart7" style="height: 208px;"></div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <h3 class="content2-map">库点流向分布</h3>
|
|
|
+ <div class="center-map">
|
|
|
+ <map-drag></map-drag>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <h3>库存成本</h3>
|
|
|
+ <div class="content3">
|
|
|
+ <div class="left">
|
|
|
+ <img src="../../../public/img/1637204557176-s4AMbBA8.png" alt="">
|
|
|
+ <span>总库存量</span>
|
|
|
+ <span class="content3-number blue">27631</span>
|
|
|
+ <span style="margin-top: 10px;">吨</span>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <img src="../../../public/img/1637204768818-70JRjz0H.png" alt="">
|
|
|
+ <span>库存价值</span>
|
|
|
+ <span class="content3-number yellow">37745671</span>
|
|
|
+ <span style="margin-top: 10px;">吨</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-row class="content2-aside">
|
|
|
+ <h3 class="left-title">采购合同完成进度</h3>
|
|
|
+ <el-col :span="12" class="chart-card">
|
|
|
+ <div style="font-weight: bold;">
|
|
|
+ <div ref="myEchart4" style="height: 288px;"></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="chart-card">
|
|
|
+ <div style="font-weight: bold;">
|
|
|
+ <div ref="myEchart5" style="height: 288px;"></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="chart-card">
|
|
|
+ <div style="font-weight: bold;">
|
|
|
+ <div ref="myEchart6" style="height: 288px;"></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-dialog :append-to-body="true" :show-close='false' :visible.sync="dialogVisible" width="30%"
|
|
|
+ :before-close="handleClose">
|
|
|
+ <span>这是一段信息</span>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- <img style='width:100%;margin-top:10px;' src="../../../public/img/tmt.gif" alt=""> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="mapXY"></div>
|
|
|
<!-- </ws-dialog> -->
|
|
|
<!-- 第一次登陆的租户 -->
|
|
|
- <successfulDialog v-if="successfulDialog"
|
|
|
- :phone="phone"
|
|
|
- :successfulDialog="successfulDialog"
|
|
|
- @close="successfulDialogClose">
|
|
|
+ <successfulDialog v-if="successfulDialog" :phone="phone" :successfulDialog="successfulDialog"
|
|
|
+ @close="successfulDialogClose">
|
|
|
</successfulDialog>
|
|
|
<!-- 试用租户 -->
|
|
|
- <trialNotExpired v-if="trialNotExpired"
|
|
|
- :day="day"
|
|
|
- :phone="phone"
|
|
|
- :trialNotExpired="trialNotExpired"
|
|
|
- @close="trialNotExpiredClose">
|
|
|
+ <trialNotExpired v-if="trialNotExpired" :day="day" :phone="phone" :trialNotExpired="trialNotExpired"
|
|
|
+ @close="trialNotExpiredClose">
|
|
|
</trialNotExpired>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-// import serialport from 'serialport'
|
|
|
-// 统计图start
|
|
|
-import maintenance from './components/maintenance'
|
|
|
-import shipCertificate from './components/shipCertificate'
|
|
|
-import sparePartsMaterial from './components/sparePartsMaterial'
|
|
|
-import procurement from './components/procurement'
|
|
|
-// 统计图end
|
|
|
-// 正式租户
|
|
|
-import successfulDialog from './components/successfulDialog'
|
|
|
-// 试用租户
|
|
|
-import trialNotExpired from './components/trialNotExpired'
|
|
|
-// 新 api
|
|
|
-import { noticeNumber, queryCircularManagementReceiveList, getStaffHomeShowList } from '@/model/home/index'
|
|
|
-import {
|
|
|
- getUserVesselList,
|
|
|
- findHottestRouting
|
|
|
-} from '@/model/indexRx'
|
|
|
-import News from './components/News'
|
|
|
-import ShipMap from './components/ShipMap'
|
|
|
-import { getCnCity, getCnWea } from './city'
|
|
|
-import { getLanguage } from '@/lang'
|
|
|
-import Panel from './components/Panel'
|
|
|
-import { getChangeLoginFlag } from '@/model/indexRx'
|
|
|
-import { zipDown } from '@/utils/batchDown'
|
|
|
-import { EventBus } from 'base-core-lib'
|
|
|
-import { mapActions, mapGetters, mapState } from 'vuex';
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'index',
|
|
|
- components: {
|
|
|
- News,
|
|
|
- ShipMap,
|
|
|
- Panel,
|
|
|
- successfulDialog,
|
|
|
- trialNotExpired,
|
|
|
- //统计图start
|
|
|
- maintenance,
|
|
|
- shipCertificate,
|
|
|
- sparePartsMaterial,
|
|
|
- procurement
|
|
|
- //统计图end
|
|
|
- },
|
|
|
-
|
|
|
- data () {
|
|
|
- return {
|
|
|
- showEchart: false,
|
|
|
- phone: '', // 正式租户电话号码
|
|
|
- day: '', //试用租户剩余天数
|
|
|
- trialNotExpired: false, //试用租户 剩余天数
|
|
|
- successfulDialog: false, //第一次登陆的弹窗
|
|
|
- mapXY: undefined,
|
|
|
- shipService: undefined,
|
|
|
- blockList: [
|
|
|
- {
|
|
|
- name: this.$t('home.shortcutEntrance'),
|
|
|
- flag: true
|
|
|
+ // import serialport from 'serialport'
|
|
|
+ // 统计图start
|
|
|
+ import maintenance from './components/maintenance'
|
|
|
+ import shipCertificate from './components/shipCertificate'
|
|
|
+ import sparePartsMaterial from './components/sparePartsMaterial'
|
|
|
+ import procurement from './components/procurement'
|
|
|
+
|
|
|
+ import mapDrag from '@/components/mapdrag/indexMap'
|
|
|
+ // 统计图end
|
|
|
+ // 正式租户
|
|
|
+ import successfulDialog from './components/successfulDialog'
|
|
|
+ // 试用租户
|
|
|
+ import trialNotExpired from './components/trialNotExpired'
|
|
|
+ // 新 api
|
|
|
+ import {
|
|
|
+ noticeNumber,
|
|
|
+ queryCircularManagementReceiveList,
|
|
|
+ getStaffHomeShowList
|
|
|
+ } from '@/model/home/index'
|
|
|
+ import {
|
|
|
+ getUserVesselList,
|
|
|
+ findHottestRouting
|
|
|
+ } from '@/model/indexRx'
|
|
|
+ import News from './components/News'
|
|
|
+ import ShipMap from './components/ShipMap'
|
|
|
+ import {
|
|
|
+ getCnCity,
|
|
|
+ getCnWea
|
|
|
+ } from './city'
|
|
|
+ import {
|
|
|
+ getLanguage
|
|
|
+ } from '@/lang'
|
|
|
+ import Panel from './components/Panel'
|
|
|
+ import {
|
|
|
+ getChangeLoginFlag
|
|
|
+ } from '@/model/indexRx'
|
|
|
+ import {
|
|
|
+ zipDown
|
|
|
+ } from '@/utils/batchDown'
|
|
|
+ import {
|
|
|
+ EventBus
|
|
|
+ } from 'base-core-lib'
|
|
|
+ import {
|
|
|
+ mapActions,
|
|
|
+ mapGetters,
|
|
|
+ mapState
|
|
|
+ } from 'vuex';
|
|
|
+ import axios from 'axios'
|
|
|
+ export default {
|
|
|
+ name: 'index',
|
|
|
+ components: {
|
|
|
+ mapDrag,
|
|
|
+ axios,
|
|
|
+ News,
|
|
|
+ ShipMap,
|
|
|
+ Panel,
|
|
|
+ successfulDialog,
|
|
|
+ trialNotExpired,
|
|
|
+ //统计图start
|
|
|
+ maintenance,
|
|
|
+ shipCertificate,
|
|
|
+ sparePartsMaterial,
|
|
|
+ procurement
|
|
|
+ //统计图end
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ nowDate: null, //存放年月日变量
|
|
|
+ nowTime: null, //存放时分秒变量
|
|
|
+ timer: "", //定义一个定时器的变量
|
|
|
+ currentTime: new Date(), // 获取当前时间
|
|
|
+ timer: '',
|
|
|
+ dialogVisible: false,
|
|
|
+ showEchart: false,
|
|
|
+ phone: '', // 正式租户电话号码
|
|
|
+ day: '', //试用租户剩余天数
|
|
|
+ trialNotExpired: false, //试用租户 剩余天数
|
|
|
+ successfulDialog: false, //第一次登陆的弹窗
|
|
|
+ mapXY: undefined,
|
|
|
+ shipService: undefined,
|
|
|
+ blockList: [{
|
|
|
+ name: this.$t('home.shortcutEntrance'),
|
|
|
+ flag: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: this.$t('home.shipMap'),
|
|
|
+ flag: true
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ newList: [],
|
|
|
+ noticeList: [],
|
|
|
+ routeList: [],
|
|
|
+ showBlockList: [],
|
|
|
+ shipList: [],
|
|
|
+ setFlag: false,
|
|
|
+
|
|
|
+ todoCount: '-',
|
|
|
+ msgCount: '-',
|
|
|
+ weather: undefined,
|
|
|
+ ships: [],
|
|
|
+ selectShip: undefined,
|
|
|
+ isFullScreen: false,
|
|
|
+ number: {
|
|
|
+ task: 0,
|
|
|
+ remind: 0,
|
|
|
+ overdue: 0,
|
|
|
+ news: 0
|
|
|
},
|
|
|
- {
|
|
|
- name: this.$t('home.shipMap'),
|
|
|
- flag: true
|
|
|
- }
|
|
|
- ],
|
|
|
- newList: [],
|
|
|
- noticeList: [],
|
|
|
- routeList: [],
|
|
|
- showBlockList: [],
|
|
|
- shipList: [],
|
|
|
- setFlag: false,
|
|
|
-
|
|
|
- todoCount: '-',
|
|
|
- msgCount: '-',
|
|
|
- weather: undefined,
|
|
|
- ships: [],
|
|
|
- selectShip: undefined,
|
|
|
- isFullScreen: false,
|
|
|
- number: {
|
|
|
- task: 0,
|
|
|
- remind: 0,
|
|
|
- overdue: 0,
|
|
|
- news: 0
|
|
|
+ vesselBankFlag: localStorage.getItem('ws-pf_vesselBankFlag'),
|
|
|
+ shezhiVal: '',
|
|
|
+ text: '数据',
|
|
|
+ reader: null,
|
|
|
+ param: 9600
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ showVesslBankFlag: state => state.commonStore.showVesslBankFlag
|
|
|
+ }),
|
|
|
+ ...mapGetters(['userSetting']),
|
|
|
+ /** 计算属性计算属性节点 */
|
|
|
+ panelList() {
|
|
|
+ return [{
|
|
|
+ type: '0',
|
|
|
+ task: this.$t('homeIndex.task'),
|
|
|
+ url: require('@/assets/newhome/rw01.png'),
|
|
|
+ number: this.number.task,
|
|
|
+ background: require('@/assets/newhome/rw.png'),
|
|
|
+ remark: '任务'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'message',
|
|
|
+ task: this.$t('homeIndex.message'),
|
|
|
+ url: require('@/assets/newhome/xx01.png'),
|
|
|
+ number: this.number.news,
|
|
|
+ background: require('@/assets/newhome/xx.png'),
|
|
|
+ remark: '消息'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: '1',
|
|
|
+ task: this.$t('homeIndex.remind'),
|
|
|
+ url: require('@/assets/newhome/tx01.png'),
|
|
|
+ number: this.number.remind,
|
|
|
+ background: require('@/assets/newhome/tx.png'),
|
|
|
+ remark: '提醒'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: '2',
|
|
|
+ task: this.$t('homeIndex.beyond'),
|
|
|
+ url: require('@/assets/newhome/cq01.png'),
|
|
|
+ number: this.number.overdue,
|
|
|
+ background: require('@/assets/newhome/cq.png'),
|
|
|
+ remark: '超期'
|
|
|
+ }
|
|
|
+ ]
|
|
|
},
|
|
|
- vesselBankFlag: localStorage.getItem('ws-pf_vesselBankFlag'),
|
|
|
- shezhiVal: '',
|
|
|
- text:'数据',
|
|
|
- reader:null,
|
|
|
- param:9600
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState({
|
|
|
- showVesslBankFlag: state => state.commonStore.showVesslBankFlag
|
|
|
- }),
|
|
|
- ...mapGetters(['userSetting']),
|
|
|
- /** 计算属性计算属性节点 */
|
|
|
- panelList () {
|
|
|
- return [
|
|
|
- {
|
|
|
- type: '0',
|
|
|
- task: this.$t('homeIndex.task'),
|
|
|
- url: require('@/assets/newhome/rw01.png'),
|
|
|
- number: this.number.task,
|
|
|
- background: require('@/assets/newhome/rw.png'),
|
|
|
- remark: '任务'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'message',
|
|
|
- task: this.$t('homeIndex.message'),
|
|
|
- url: require('@/assets/newhome/xx01.png'),
|
|
|
- number: this.number.news,
|
|
|
- background: require('@/assets/newhome/xx.png'),
|
|
|
- remark: '消息'
|
|
|
- },
|
|
|
- {
|
|
|
- type: '1',
|
|
|
- task: this.$t('homeIndex.remind'),
|
|
|
- url: require('@/assets/newhome/tx01.png'),
|
|
|
- number: this.number.remind,
|
|
|
- background: require('@/assets/newhome/tx.png'),
|
|
|
- remark: '提醒'
|
|
|
- },
|
|
|
- {
|
|
|
- type: '2',
|
|
|
- task: this.$t('homeIndex.beyond'),
|
|
|
- url: require('@/assets/newhome/cq01.png'),
|
|
|
- number: this.number.overdue,
|
|
|
- background: require('@/assets/newhome/cq.png'),
|
|
|
- remark: '超期'
|
|
|
+ optionSingleHeightTime() {
|
|
|
+ return {
|
|
|
+ openWatch: true,
|
|
|
+ limitMoveNum: -1, //启动无缝滚动最小数据量 this.dataList.length
|
|
|
+ direction: 2,
|
|
|
+ switchDelay: 1000
|
|
|
}
|
|
|
- ]
|
|
|
+ },
|
|
|
+ getLanguage() {
|
|
|
+ return this.$store.getters.language
|
|
|
+ },
|
|
|
+ isShowShipList() {
|
|
|
+ return this.userSetting['shipMap'][0].showFlag && this.vesselBankFlag !== 'V' && this.permissionIf(
|
|
|
+ 'map.mapManagement.view')
|
|
|
+ },
|
|
|
+
|
|
|
},
|
|
|
- optionSingleHeightTime () {
|
|
|
- return {
|
|
|
- openWatch: true,
|
|
|
- limitMoveNum: -1, //启动无缝滚动最小数据量 this.dataList.length
|
|
|
- direction: 2,
|
|
|
- switchDelay: 1000
|
|
|
+ async created() {
|
|
|
+ //获取快捷路口列表
|
|
|
+ this.getRouteList()
|
|
|
+ // this.checkUserInfoDialog()
|
|
|
+ {
|
|
|
+ this.timer = setInterval(this.getTime, 1000);
|
|
|
}
|
|
|
},
|
|
|
- getLanguage () {
|
|
|
- return this.$store.getters.language
|
|
|
- },
|
|
|
- isShowShipList () {
|
|
|
- return this.userSetting['shipMap'][0].showFlag && this.vesselBankFlag !== 'V' && this.permissionIf('map.mapManagement.view')
|
|
|
+ beforeDestroy() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
|
|
|
+ }
|
|
|
},
|
|
|
+ async mounted() {
|
|
|
+ let that = this
|
|
|
+ // this.timer = setInterval(function(){
|
|
|
+ // // that.getRouteList()
|
|
|
+ // axios.get('https://live.eliangeyun.com/api/v1/device/channellist')
|
|
|
+ // .then(resp =>{
|
|
|
+ // 图表重置 myChart.setOption
|
|
|
+ // that.aa = resp.data.ChannelList
|
|
|
+ // for(var i=0;i<that.dataList.length;i++){
|
|
|
+ // console.log('ssss',that.dataList[i].Status);
|
|
|
+ // }
|
|
|
|
|
|
- },
|
|
|
- async created () {
|
|
|
- //获取快捷路口列表
|
|
|
- this.getRouteList()
|
|
|
- // this.checkUserInfoDialog()
|
|
|
- },
|
|
|
- async mounted () {
|
|
|
- //获取新闻列表
|
|
|
- // this.getNewList()
|
|
|
- noticeNumber().toPromise().then(res => {
|
|
|
- const { task = 0, remind = 0, overdue = 0, news = 0 } = res
|
|
|
- this.number.task = task
|
|
|
- this.number.remind = remind
|
|
|
- this.number.overdue = overdue
|
|
|
- this.number.news = news
|
|
|
- })
|
|
|
- // if (this.vesselBankFlag !== 'V') {
|
|
|
- // EventBus.$emit('addShipScript', () => {
|
|
|
- // this.initShipMap()
|
|
|
- // })
|
|
|
- // }
|
|
|
- // setTimeout(() => {
|
|
|
- // this.showEchart = true
|
|
|
- // }, 900)
|
|
|
-
|
|
|
- // this.showBlockList = []
|
|
|
- // if (this.vesselBankFlag === 'V') {
|
|
|
- // this.$refs.noticeList.style.width = 'calc(50% - 7px)'
|
|
|
- // this.$refs.newsList.style.width = 'calc(50% - 7px)'
|
|
|
- // } else {
|
|
|
- // this.showBlockList = []
|
|
|
- // this.blockList[1].flag = false
|
|
|
- // this.$refs.noticeList.style.width = 'calc(50% - 7px)'
|
|
|
- // this.$refs.newsList.style.width = 'calc(50% - 7px)'
|
|
|
- // if (this.userSetting['shipMap'] && this.userSetting['shipMap'][0].showFlag) {
|
|
|
- // this.showBlockList.push('船舶动态')
|
|
|
- // this.blockList[1].flag = true
|
|
|
- // }
|
|
|
- // }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- // getLanguage: function () {
|
|
|
- // this.getShipList()
|
|
|
- // }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapActions('user', ['toSetShow', 'changeVesslBank']),
|
|
|
- // 下载通知通函
|
|
|
- downloadNotification (item) {
|
|
|
- zipDown({
|
|
|
- appendixIds: item.attachmentPath,
|
|
|
- baseUrl: this.$store.getters.baseInfo.fileUrl,
|
|
|
- zipName: item.theme
|
|
|
+ // }).catch(err =>{
|
|
|
+ // console.log(err);
|
|
|
+ // });
|
|
|
+ // }, 2000);
|
|
|
+ this.initCharts()
|
|
|
+ //获取新闻列表
|
|
|
+ // this.getNewList()
|
|
|
+ noticeNumber().toPromise().then(res => {
|
|
|
+ const {
|
|
|
+ task = 0, remind = 0, overdue = 0, news = 0
|
|
|
+ } = res
|
|
|
+ this.number.task = task
|
|
|
+ this.number.remind = remind
|
|
|
+ this.number.overdue = overdue
|
|
|
+ this.number.news = news
|
|
|
})
|
|
|
+ // if (this.vesselBankFlag !== 'V') {
|
|
|
+ // EventBus.$emit('addShipScript', () => {
|
|
|
+ // this.initShipMap()
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.showEchart = true
|
|
|
+ // }, 900)
|
|
|
+
|
|
|
+ // this.showBlockList = []
|
|
|
+ // if (this.vesselBankFlag === 'V') {
|
|
|
+ // this.$refs.noticeList.style.width = 'calc(50% - 7px)'
|
|
|
+ // this.$refs.newsList.style.width = 'calc(50% - 7px)'
|
|
|
+ // } else {
|
|
|
+ // this.showBlockList = []
|
|
|
+ // this.blockList[1].flag = false
|
|
|
+ // this.$refs.noticeList.style.width = 'calc(50% - 7px)'
|
|
|
+ // this.$refs.newsList.style.width = 'calc(50% - 7px)'
|
|
|
+ // if (this.userSetting['shipMap'] && this.userSetting['shipMap'][0].showFlag) {
|
|
|
+ // this.showBlockList.push('船舶动态')
|
|
|
+ // this.blockList[1].flag = true
|
|
|
+ // }
|
|
|
+ // }
|
|
|
},
|
|
|
- /**
|
|
|
- * 校验各种弹框问题
|
|
|
- * @Desc 不是本人原意, 请不要骂我 谢谢. 请联系 "后台开发人员" 梳理逻辑
|
|
|
- */
|
|
|
- async checkUserInfoDialog () {
|
|
|
- const {
|
|
|
- statusFlag,
|
|
|
- loginInfo: { loginFlag = 0 },
|
|
|
- daysRemaining,
|
|
|
- customerServiceStaffPhone
|
|
|
- } = JSON.parse(localStorage.getItem('ws_login_getTenantInfoByUser'))
|
|
|
- if (statusFlag * 1 === 3) {
|
|
|
- // 判断后台返回的是空 还是 0 是空还是 0 的时候请求后台接口 不懂啥意思 为啥要这么弄
|
|
|
- if (!loginFlag && !localStorage.getItem('isShowTryUserDialog') * 1) {
|
|
|
- let newId = JSON.parse(localStorage.getItem('ws_login_accountId'))
|
|
|
+ watch: {
|
|
|
+ // getLanguage: function () {
|
|
|
+ // this.getShipList()
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions('user', ['toSetShow', 'changeVesslBank']),
|
|
|
+ getTime(){
|
|
|
+ const date = new Date();
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = date.getMonth() + 1;
|
|
|
+ const day = date.getDate();
|
|
|
+ const hour= date.getHours();
|
|
|
+ const minute = date.getMinutes();
|
|
|
+ const second = date.getSeconds();
|
|
|
+ this.month=check(month);
|
|
|
+ this.day=check(day);
|
|
|
+ this.hour=check(hour);
|
|
|
+ this.minute=check(minute);
|
|
|
+ this.second=check(second);
|
|
|
+ function check(i){
|
|
|
+ const num = (i<10)?("0"+i) : i;
|
|
|
+ return num;
|
|
|
+ }
|
|
|
+ this.nowDate = year + "-" + this.month + "-" + this.day;
|
|
|
+ this.nowTime = this.hour + ":" + this.minute + ":" + this.second ;
|
|
|
+ },
|
|
|
+ initCharts() {
|
|
|
+ let app = this;
|
|
|
+ let myChart = app.$echarts.init(this.$refs.myEchart1);
|
|
|
+ let myChart2 = app.$echarts.init(this.$refs.myEchart2);
|
|
|
+ let myChart3 = app.$echarts.init(this.$refs.myEchart3);
|
|
|
+ let myChart4 = app.$echarts.init(this.$refs.myEchart4);
|
|
|
+ let myChart5 = app.$echarts.init(this.$refs.myEchart5);
|
|
|
+ let myChart6 = app.$echarts.init(this.$refs.myEchart6);
|
|
|
+ let myChart7 = app.$echarts.init(this.$refs.myEchart7);
|
|
|
+
|
|
|
+ // 圆环图各环节的颜色
|
|
|
+ var color = ['#75d1f4', '#ffa523'];
|
|
|
+
|
|
|
+ // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
+ var data = [{
|
|
|
+ name: '已完成量',
|
|
|
+ value: 320
|
|
|
+ }, {
|
|
|
+ name: '待完成量',
|
|
|
+ value: 586
|
|
|
+ }];
|
|
|
+ // 指定图表的配置项和数据
|
|
|
+ var option = {
|
|
|
+
|
|
|
+ //背景色
|
|
|
+ // backgroundColor: { // 背景颜色
|
|
|
+ // type: 'linear',
|
|
|
+ // x: 0,
|
|
|
+ // y: 0,
|
|
|
+ // x2: 0,
|
|
|
+ // y2: 1,
|
|
|
+ // colorStops: [{
|
|
|
+ // offset: 0,
|
|
|
+ // color: 'rgba(0,0,0,0.4)' // 0% 处的颜色
|
|
|
+ // }, {
|
|
|
+ // offset: 0.5,
|
|
|
+ // color: 'rgba(0,0,0,0.4)' // 50% 处的颜色
|
|
|
+ // }, {
|
|
|
+ // offset: 1,
|
|
|
+ // color: 'rgba(0,0,0,0.4)' // 100% 处的颜色
|
|
|
+ // }],
|
|
|
+ // globalCoord: false // 缺省为 false
|
|
|
+ // },
|
|
|
+
|
|
|
+ // 标题
|
|
|
+ title: [{
|
|
|
+ text: '合同总量',
|
|
|
+ top: '2%',
|
|
|
+ left: '3%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#f4f4f4',
|
|
|
+ fontSize: 18,
|
|
|
+ }
|
|
|
+ }],
|
|
|
+
|
|
|
+ // 图例
|
|
|
+ legend: [{
|
|
|
+ selectedMode: true, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
|
|
|
+ top: '10%',
|
|
|
+ left: 'center',
|
|
|
+ con: "circle",
|
|
|
+ itemWidth: 10, // 设置宽度
|
|
|
+ itemHeight: 10, // 设置高度
|
|
|
+ itemGap: 40, // 设置间距
|
|
|
+ textStyle: { // 图例的公用文本样式。
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ data: ['已完成量', '待完成量']
|
|
|
+ }],
|
|
|
+
|
|
|
+ // 提示框
|
|
|
+ tooltip: {
|
|
|
+ show: true, // 是否显示提示框
|
|
|
+ formatter: '{b} </br> 销量{c}件 </br> 占比{d}%' // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
|
|
|
+ },
|
|
|
+
|
|
|
+ // graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
|
|
+ graphic: {
|
|
|
+ type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
|
|
+ top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
|
|
|
+ left: 'center', // 同上
|
|
|
+ style: {
|
|
|
+ text: '合计\n\n123', // 文本块文字。可以使用 \n 来换行。[ default: '' ]
|
|
|
+ fill: '#fff', // 填充色。
|
|
|
+ fontSize: 16, // 字体大小
|
|
|
+ fontWeight: 'bold' // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 系列列表
|
|
|
+ series: [{
|
|
|
+ name: '', // 系列名称
|
|
|
+ type: 'pie', // 系列类型
|
|
|
+ center: ['50%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
|
|
|
+ radius: ['35%', '45%'], // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
|
|
|
+ hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
|
|
|
+ color: color, // 圆环图的颜色
|
|
|
+ label: { // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
|
|
|
+ normal: {
|
|
|
+ show: true, // 是否显示标签[ default: false ]
|
|
|
+ position: 'outside', // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
|
|
|
+ formatter: '{b} : {c}件' // 标签内容
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: { // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
|
|
|
+ normal: {
|
|
|
+ show: true, // 是否显示视觉引导线。
|
|
|
+ length: 15, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
|
|
|
+ length2: 10, // 视觉引导项第二段的长度。
|
|
|
+ lineStyle: { // 视觉引导线的样式
|
|
|
+ //color: '#000',
|
|
|
+ //width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data // 系列中的数据内容数组。
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ // 柱状图
|
|
|
+ // 指定图表的配置项和数据
|
|
|
+ var zoption = {
|
|
|
+ // ---- 标题 -----
|
|
|
+ // title: {
|
|
|
+ // text: '',//主标题
|
|
|
+ // textStyle: {
|
|
|
+ // color: 'red'
|
|
|
+ // },
|
|
|
+ // subtext: '',//副标题
|
|
|
+ // subtextStyle: {
|
|
|
+ // color: 'blue'
|
|
|
+ // },
|
|
|
+ // padding: [0, 0, 10, 100] // 位置
|
|
|
+ // },
|
|
|
+ // ---- legend ----
|
|
|
+ // legend: {
|
|
|
+ // type: 'plain', // 图列类型，默认为 'plain'
|
|
|
+ // top: '1%', // 图列相对容器的位置 top\bottom\left\right
|
|
|
+ // selected: {
|
|
|
+ // // '销量': true // 图列选择，图形加载出来会显示选择的图列，默认为true
|
|
|
+ // },
|
|
|
+ // textStyle: { // 图列内容样式
|
|
|
+ // color: '#fff', // 字体颜色
|
|
|
+ // backgroundColor: 'black' // 字体背景色
|
|
|
+ // },
|
|
|
+ // tooltip: { // 图列提示框，默认不显示
|
|
|
+ // show: true,
|
|
|
+ // color: '#666'
|
|
|
+ // },
|
|
|
+ // data: [ // 图列内容
|
|
|
+ // {
|
|
|
+ // name: '', //上方标题内容
|
|
|
+ // icon: 'circle',
|
|
|
+ // textStyle: {
|
|
|
+ // color: '#666', // 单独设置某一个图列的颜色
|
|
|
+ // backgroundColor: '#fff' // 单独设置某一个图列的字体背景色
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // },
|
|
|
+ grid: {
|
|
|
+ left: '0',
|
|
|
+ right: '0',
|
|
|
+ bottom: '0',
|
|
|
+ top: '30',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ // --- 提示框 ----
|
|
|
+ tooltip: {
|
|
|
+ show: true, // 是否显示提示框，默认为true
|
|
|
+ trigger: 'item', // 数据项图形触发
|
|
|
+ axisPointer: { // 指示样式
|
|
|
+ type: 'shadow',
|
|
|
+ axis: 'auto'
|
|
|
+ },
|
|
|
+ padding: 5,
|
|
|
+ textStyle: { // 提示框内容的样式
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // ---- gird区域 ---
|
|
|
+ // gird: {
|
|
|
+ // show: false, // 是否显示直角坐标系网格
|
|
|
+ // top: 10, // 相对位置 top\bottom\left\right
|
|
|
+ // containLabel: false, // gird 区域是否包含坐标轴的刻度标签
|
|
|
+ // tooltip: {
|
|
|
+ // show: true,
|
|
|
+ // trigger: 'item', // 触发类型
|
|
|
+ // textStyle: {
|
|
|
+ // color: '#666'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // ------ X轴 ------
|
|
|
+ xAxis: {
|
|
|
+ // show: true, // 是否显示
|
|
|
+ // position: 'bottom', // x轴的位置
|
|
|
+ // offset: 0, // x轴相对于默认位置的偏移
|
|
|
+ // type: 'category', // 轴类型， 默认为 'category'
|
|
|
+ // name: '', // 轴名称
|
|
|
+ // nameLocation: 'end', // 轴名称相对位置
|
|
|
+ // nameTextStyle: { // 坐标轴名称样式
|
|
|
+ // color: '#666',
|
|
|
+ // padding: [5, 0, 0, -5]
|
|
|
+ // },
|
|
|
+ // nameGap: 30, // 坐标轴名称与轴线之间的距离
|
|
|
+ // nameRotate: 0, // 坐标轴名字旋转
|
|
|
+ // axisLine: { // 坐标轴 轴线
|
|
|
+ // show: true, // 是否显示
|
|
|
+ // // symbol: ['none', 'arrow'], // 是否显示轴线箭头
|
|
|
+ // // symbolSize: [8, 8], // 箭头大小
|
|
|
+ // // symbolOffset: [0, 7], // 箭头位置
|
|
|
+ // // ------ 线 ---------
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#666',
|
|
|
+ // width: 1,
|
|
|
+ // type: 'solid'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // axisTick: { // 坐标轴 刻度
|
|
|
+ // show: true, // 是否显示
|
|
|
+ // inside: true, // 是否朝内
|
|
|
+ // length: 3, // 长度
|
|
|
+ // lineStyle: { // 默认取轴线的样式
|
|
|
+ // color: '#666',
|
|
|
+ // width: 1,
|
|
|
+ // type: 'solid'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ axisLabel: { // 坐标轴标签
|
|
|
+ show: true, // 是否显示
|
|
|
+ inside: false, // 是否朝内
|
|
|
+ rotate: 0, // 旋转角度
|
|
|
+ margin: 10, // 刻度标签与轴线之间的距离
|
|
|
+ color: '#666', // 默认取轴线的颜色
|
|
|
+ interval: 0,
|
|
|
+ rotate: 40
|
|
|
+ },
|
|
|
+ // splitLine: { // gird区域中的分割线
|
|
|
+ // show: false, // 是否显示
|
|
|
+ // lineStyle: {
|
|
|
+ // // color: 'red',
|
|
|
+ // // width: 1,
|
|
|
+ // // type: 'solid'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ splitArea: { // 网格区域
|
|
|
+ show: false // 是否显示，默认为false
|
|
|
+ },
|
|
|
+ data: ['玉米', '玉米（潮粮）', '玉米（酒精）', '玉米（机收）', '混合麦', '白小麦', '大豆', '水稻', '高粱', '玉米淀粉', '豆粕']
|
|
|
+ },
|
|
|
+ // ------ y轴 ----------
|
|
|
+ yAxis: {
|
|
|
+ // show: true, // 是否显示
|
|
|
+ // position: 'left', // y轴位置
|
|
|
+ // offset: 0, // y轴相对于默认位置的偏移
|
|
|
+ // type: 'value', // 轴类型，默认为 ‘category’
|
|
|
+ // // name: '销量', // 轴名称
|
|
|
+ // nameLocation: 'end', // 轴名称相对位置value
|
|
|
+ // nameTextStyle: { // 坐标轴名称样式
|
|
|
+ // color: '#fff',
|
|
|
+ // padding: [5, 0, 0, 5] // 坐标轴名称相对位置
|
|
|
+ // },
|
|
|
+ // nameGap: 15, // 坐标轴名称与轴线之间的距离
|
|
|
+ // nameRotate: 270, // 坐标轴名字旋转
|
|
|
+
|
|
|
+ axisLine: { // 坐标轴 轴线
|
|
|
+ show: false, // 是否显示
|
|
|
+ // ----- 箭头 -----
|
|
|
+ // symbol: ['none', 'arrow'], // 是否显示轴线箭头
|
|
|
+ // symbolSize: [8, 8], // 箭头大小
|
|
|
+ // symbolOffset: [0, 7], // 箭头位置
|
|
|
+
|
|
|
+ // ----- 线 -------
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#666',
|
|
|
+ // width: 1,
|
|
|
+ // type: 'solid'
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // axisTick: { // 坐标轴的刻度
|
|
|
+ // show: true, // 是否显示
|
|
|
+ // inside: true, // 是否朝内
|
|
|
+ // length: 3, // 长度
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#666', // 默认取轴线的颜色
|
|
|
+ // width: 1,
|
|
|
+ // type: 'solid'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ axisLabel: { // 坐标轴的标签
|
|
|
+ show: true, // 是否显示
|
|
|
+ inside: false, // 是否朝内
|
|
|
+ rotate: 0, // 旋转角度
|
|
|
+ margin: 8, // 刻度标签与轴线之间的距离
|
|
|
+ color: '#666', // 默认轴线的颜色
|
|
|
+ },
|
|
|
+ splitLine: { // gird 区域中的分割线
|
|
|
+ show: true, // 是否显示
|
|
|
+ lineStyle: {
|
|
|
+ color: '#666',
|
|
|
+ width: 1,
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // splitArea: { // 网格区域
|
|
|
+ // show: false // 是否显示，默认为false
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // ------- 内容数据 -------
|
|
|
+ series: [{
|
|
|
+ name: '储量', // 序列名称
|
|
|
+ type: 'bar', // 类型
|
|
|
+ legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
|
|
|
+ // label: { // 图形上的文本标签
|
|
|
+ // show: false,
|
|
|
+ // position: 'insideTop', // 相对位置
|
|
|
+ // rotate: 0, // 旋转角度
|
|
|
+ // color: '#eee'
|
|
|
+ // },
|
|
|
+ itemStyle: { // 图形的形状
|
|
|
+ color: '#3779fd'
|
|
|
+ // barBorderRadius: [18, 18, 0 ,0]
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ barWidth: 20, // 柱形的宽度
|
|
|
+ barCategoryGap: '20%', // 柱形的间距
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ color: "#b0b1b3"
|
|
|
+ },
|
|
|
+ data: [3000, 4000, 4200, 4500, 6000, 5600, 4500, 5020, 4500, 5400, 4300]
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ // 使用刚指定的配置项和数据显示图表
|
|
|
+ myChart.setOption(option)
|
|
|
+ myChart2.setOption(option)
|
|
|
+ myChart3.setOption(option)
|
|
|
+ myChart4.setOption(option)
|
|
|
+ myChart5.setOption(option)
|
|
|
+ myChart6.setOption(option)
|
|
|
+ myChart7.setOption(zoption)
|
|
|
+ myChart.off("click");
|
|
|
+ myChart.on("click", function(params) {
|
|
|
+ // var a = params.dataIndex
|
|
|
+ console.log(params, "我被点击了");
|
|
|
+ app.dialogVisible = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ this.$confirm('确认关闭？')
|
|
|
+ .then(_ => {
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch(_ => {});
|
|
|
+ },
|
|
|
+ // 下载通知通函
|
|
|
+ downloadNotification(item) {
|
|
|
+ zipDown({
|
|
|
+ appendixIds: item.attachmentPath,
|
|
|
+ baseUrl: this.$store.getters.baseInfo.fileUrl,
|
|
|
+ zipName: item.theme
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 校验各种弹框问题
|
|
|
+ * @Desc 不是本人原意, 请不要骂我 谢谢. 请联系 "后台开发人员" 梳理逻辑
|
|
|
+ */
|
|
|
+ async checkUserInfoDialog() {
|
|
|
+ const {
|
|
|
+ statusFlag,
|
|
|
+ loginInfo: {
|
|
|
+ loginFlag = 0
|
|
|
+ },
|
|
|
+ daysRemaining,
|
|
|
+ customerServiceStaffPhone
|
|
|
+ } = JSON.parse(localStorage.getItem('ws_login_getTenantInfoByUser'))
|
|
|
+ if (statusFlag * 1 === 3) {
|
|
|
+ // 判断后台返回的是空 还是 0 是空还是 0 的时候请求后台接口 不懂啥意思 为啥要这么弄
|
|
|
+ if (!loginFlag && !localStorage.getItem('isShowTryUserDialog') * 1) {
|
|
|
+ let newId = JSON.parse(localStorage.getItem('ws_login_accountId'))
|
|
|
+ this.phone = customerServiceStaffPhone
|
|
|
+ this.successfulDialog = true
|
|
|
+ localStorage.setItem('isShowTryUserDialog', '1')
|
|
|
+ await getChangeLoginFlag({
|
|
|
+ accountId: newId
|
|
|
+ }).toPromise()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 试用租户
|
|
|
+ const dayDialog = [30, 15, 7, 5, 3, 2, 1, 0]
|
|
|
+ if (statusFlag * 1 === 2 && dayDialog.indexOf(daysRemaining) > -1 && !localStorage.getItem(
|
|
|
+ 'isShowTryUserDialog') * 1) {
|
|
|
+ this.day = daysRemaining
|
|
|
this.phone = customerServiceStaffPhone
|
|
|
- this.successfulDialog = true
|
|
|
+ this.trialNotExpired = true
|
|
|
localStorage.setItem('isShowTryUserDialog', '1')
|
|
|
- await getChangeLoginFlag({ accountId: newId }).toPromise()
|
|
|
}
|
|
|
- }
|
|
|
- // 试用租户
|
|
|
- const dayDialog = [30, 15, 7, 5, 3, 2, 1, 0]
|
|
|
- if (statusFlag * 1 === 2 && dayDialog.indexOf(daysRemaining) > -1 && !localStorage.getItem('isShowTryUserDialog') * 1) {
|
|
|
- this.day = daysRemaining
|
|
|
- this.phone = customerServiceStaffPhone
|
|
|
- this.trialNotExpired = true
|
|
|
- localStorage.setItem('isShowTryUserDialog', '1')
|
|
|
- }
|
|
|
- },
|
|
|
- trialNotExpiredClose () {
|
|
|
- this.trialNotExpired = false
|
|
|
- },
|
|
|
- //第一次登陆的弹窗
|
|
|
- successfulDialogClose () {
|
|
|
- this.successfulDialog = false
|
|
|
- },
|
|
|
- initShipMap () {
|
|
|
- var options = {
|
|
|
- ak: '57df9eaa033b44809d4bdaf919af457e',
|
|
|
- // 初始中心点坐标
|
|
|
- centerPoint: [30.171, 121.27],
|
|
|
- zoom: 3,
|
|
|
- minZoom: 2,
|
|
|
- maxZoom: 18,
|
|
|
- defaultMapType: 'MT_SEA', //默认海图
|
|
|
- // 公司版权信息( 支持html )，默认Elane Inc.
|
|
|
- attribution: {
|
|
|
- isShow: false,
|
|
|
- emptyString:
|
|
|
- '©2019 <a class="shipxy_small"></a> <a>WinSea Inc.</a>'
|
|
|
- },
|
|
|
- measureCtrl: { isShow: false },
|
|
|
- mousePostionCtrl: { isShow: false },
|
|
|
- zoomControlElane: { isShow: true, position: 'bottomright' },
|
|
|
- zoomviewControl: { isShow: false, position: 'bottomright' },
|
|
|
- basemapsControl: { isShow: false, position: 'topright' },
|
|
|
- scaleCtrl: { isShow: true, position: 'bottomleft' }
|
|
|
- }
|
|
|
- // 创建地图示例
|
|
|
- // eslint-disable-next-line no-undef
|
|
|
- this.mapXY = new ShipxyAPI.Map('mapXY', options)
|
|
|
- // eslint-disable-next-line no-undef
|
|
|
- this.shipService = ShipxyAPI.ShipService(this.mapXY, {
|
|
|
- enableAreaShip: false,
|
|
|
- enableFleetShip: false,
|
|
|
- isAutoUpdateSrvtime: false,
|
|
|
- // delayTime: 5000,
|
|
|
- lableFont: ['500 12px Arial', '500 12px 宋体'], // 船舶名称，文字字体，默认值：["600 12px Arial", "500 12px Arial"]
|
|
|
- lableTxtColor: ['#fff', '#fff'], // 船舶名称，文字颜色，默认值：["#000","#fff"]
|
|
|
- lableLineColor: ['rgba(1, 30, 62, 0)', 'rgba(1, 30, 62, 0)'], // 边框颜色，默认值：["#000","#000"]
|
|
|
- lableLinefillColor: ['rgba(0, 0, 0, 0.6)', 'rgba(0, 0, 0, 0.6)'], // 框内填充颜色，默认值：[null,null]
|
|
|
- obliqueLineColor: ['#000', '#000'], // 船舶名称，斜线颜色，默认值：[null,null]
|
|
|
- dShipColor: '#FF6437', // D+船颜色，默认：#ff6347
|
|
|
- zoomLevel_data: 1,
|
|
|
- zoomLevel_base: 1,
|
|
|
- getAreaShipsCallBack: (call) => {
|
|
|
- // console.info(call, 'getAreaShipsCallBack')
|
|
|
- },
|
|
|
- drawShipsEndCallBack: (call) => {
|
|
|
- // console.info(call, 'drawShipsEndCallBack')
|
|
|
+ },
|
|
|
+ trialNotExpiredClose() {
|
|
|
+ this.trialNotExpired = false
|
|
|
+ },
|
|
|
+ //第一次登陆的弹窗
|
|
|
+ successfulDialogClose() {
|
|
|
+ this.successfulDialog = false
|
|
|
+ },
|
|
|
+ initShipMap() {
|
|
|
+ var options = {
|
|
|
+ ak: '57df9eaa033b44809d4bdaf919af457e',
|
|
|
+ // 初始中心点坐标
|
|
|
+ centerPoint: [30.171, 121.27],
|
|
|
+ zoom: 3,
|
|
|
+ minZoom: 2,
|
|
|
+ maxZoom: 18,
|
|
|
+ defaultMapType: 'MT_SEA', //默认海图
|
|
|
+ // 公司版权信息( 支持html )，默认Elane Inc.
|
|
|
+ attribution: {
|
|
|
+ isShow: false,
|
|
|
+ emptyString: '©2019 <a class="shipxy_small"></a> <a>WinSea Inc.</a>'
|
|
|
+ },
|
|
|
+ measureCtrl: {
|
|
|
+ isShow: false
|
|
|
+ },
|
|
|
+ mousePostionCtrl: {
|
|
|
+ isShow: false
|
|
|
+ },
|
|
|
+ zoomControlElane: {
|
|
|
+ isShow: true,
|
|
|
+ position: 'bottomright'
|
|
|
+ },
|
|
|
+ zoomviewControl: {
|
|
|
+ isShow: false,
|
|
|
+ position: 'bottomright'
|
|
|
+ },
|
|
|
+ basemapsControl: {
|
|
|
+ isShow: false,
|
|
|
+ position: 'topright'
|
|
|
+ },
|
|
|
+ scaleCtrl: {
|
|
|
+ isShow: true,
|
|
|
+ position: 'bottomleft'
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
- this.shipService.setPointerEvents(true)
|
|
|
- window.shipService = this.shipService
|
|
|
- //获取船舶列表
|
|
|
- this.getShipList()
|
|
|
- },
|
|
|
- toRoute (url) {
|
|
|
- this.$router.push(url)
|
|
|
- },
|
|
|
- toSetShow () {
|
|
|
- this.showBlockList = []
|
|
|
- this.setFlag = true
|
|
|
- // getStaffHomeShowList({
|
|
|
- // staffId: localStorage.getItem('ws-pf_userId')
|
|
|
- // }).toPromise().then(data => {
|
|
|
- // for (let i = 0; i < data.length; i++) {
|
|
|
- // if (data[i].typeId === 'shipMap' && data[i].showFlag) {
|
|
|
- // this.showBlockList.push('船舶动态')
|
|
|
- // } else {
|
|
|
- // this.showBlockList = []
|
|
|
- // }
|
|
|
- // }
|
|
|
- // })
|
|
|
- },
|
|
|
+ // 创建地图示例
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ this.mapXY = new ShipxyAPI.Map('mapXY', options)
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ this.shipService = ShipxyAPI.ShipService(this.mapXY, {
|
|
|
+ enableAreaShip: false,
|
|
|
+ enableFleetShip: false,
|
|
|
+ isAutoUpdateSrvtime: false,
|
|
|
+ // delayTime: 5000,
|
|
|
+ lableFont: ['500 12px Arial', '500 12px 宋体'], // 船舶名称，文字字体，默认值：["600 12px Arial", "500 12px Arial"]
|
|
|
+ lableTxtColor: ['#fff', '#fff'], // 船舶名称，文字颜色，默认值：["#000","#fff"]
|
|
|
+ lableLineColor: ['rgba(1, 30, 62, 0)', 'rgba(1, 30, 62, 0)'], // 边框颜色，默认值：["#000","#000"]
|
|
|
+ lableLinefillColor: ['rgba(0, 0, 0, 0.6)', 'rgba(0, 0, 0, 0.6)'], // 框内填充颜色，默认值：[null,null]
|
|
|
+ obliqueLineColor: ['#000', '#000'], // 船舶名称，斜线颜色，默认值：[null,null]
|
|
|
+ dShipColor: '#FF6437', // D+船颜色，默认：#ff6347
|
|
|
+ zoomLevel_data: 1,
|
|
|
+ zoomLevel_base: 1,
|
|
|
+ getAreaShipsCallBack: (call) => {
|
|
|
+ // console.info(call, 'getAreaShipsCallBack')
|
|
|
+ },
|
|
|
+ drawShipsEndCallBack: (call) => {
|
|
|
+ // console.info(call, 'drawShipsEndCallBack')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.shipService.setPointerEvents(true)
|
|
|
+ window.shipService = this.shipService
|
|
|
+ //获取船舶列表
|
|
|
+ this.getShipList()
|
|
|
+ },
|
|
|
+ toRoute(url) {
|
|
|
+ this.$router.push(url)
|
|
|
+ },
|
|
|
+ toSetShow() {
|
|
|
+ this.showBlockList = []
|
|
|
+ this.setFlag = true
|
|
|
+ // getStaffHomeShowList({
|
|
|
+ // staffId: localStorage.getItem('ws-pf_userId')
|
|
|
+ // }).toPromise().then(data => {
|
|
|
+ // for (let i = 0; i < data.length; i++) {
|
|
|
+ // if (data[i].typeId === 'shipMap' && data[i].showFlag) {
|
|
|
+ // this.showBlockList.push('船舶动态')
|
|
|
+ // } else {
|
|
|
+ // this.showBlockList = []
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ },
|
|
|
|
|
|
- toMap () {
|
|
|
- this.$router.push('/map/trajectory_child')
|
|
|
- },
|
|
|
- goNews () {
|
|
|
- this.$router.push('/news/noticeType')
|
|
|
- },
|
|
|
- goNewsDetail (id) {
|
|
|
- this.$router.push('/news/noticeDetails?id=' + id)
|
|
|
- },
|
|
|
- goNotice (data) {
|
|
|
- this.$router.push({
|
|
|
- name: 'notificationItDetail',
|
|
|
- query: { id: data.id }
|
|
|
- })
|
|
|
- },
|
|
|
- goNoticeMore () {
|
|
|
- this.$router.push('/notice/notificationCircularReleasedIt_child')
|
|
|
- },
|
|
|
- toHide (index) {
|
|
|
- this.changeVesslBank([{
|
|
|
- id: this.userSetting['shipMap'][0].id,
|
|
|
- staffId: localStorage.getItem('ws-pf_userId'),
|
|
|
- typeId: 'shipMap',
|
|
|
- showFlag: false
|
|
|
- }])
|
|
|
- },
|
|
|
- getRouteList () {
|
|
|
- let data = {
|
|
|
- accountId: localStorage.getItem('ws-pf_userId'),
|
|
|
- pageSize: 30
|
|
|
- }
|
|
|
- findHottestRouting(data).toPromise().then(res => {
|
|
|
- this.routeList = res
|
|
|
- if (res.length == 0) {
|
|
|
- this.blockList[0].flag = false
|
|
|
+ toMap() {
|
|
|
+ this.$router.push('/map/trajectory_child')
|
|
|
+ },
|
|
|
+ goNews() {
|
|
|
+ this.$router.push('/news/noticeType')
|
|
|
+ },
|
|
|
+ goNewsDetail(id) {
|
|
|
+ this.$router.push('/news/noticeDetails?id=' + id)
|
|
|
+ },
|
|
|
+ goNotice(data) {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'notificationItDetail',
|
|
|
+ query: {
|
|
|
+ id: data.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goNoticeMore() {
|
|
|
+ this.$router.push('/notice/notificationCircularReleasedIt_child')
|
|
|
+ },
|
|
|
+ toHide(index) {
|
|
|
+ this.changeVesslBank([{
|
|
|
+ id: this.userSetting['shipMap'][0].id,
|
|
|
+ staffId: localStorage.getItem('ws-pf_userId'),
|
|
|
+ typeId: 'shipMap',
|
|
|
+ showFlag: false
|
|
|
+ }])
|
|
|
+ },
|
|
|
+ getRouteList() {
|
|
|
+ let data = {
|
|
|
+ accountId: localStorage.getItem('ws-pf_userId'),
|
|
|
+ pageSize: 30
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- //获取新闻
|
|
|
- getNewList () {
|
|
|
- let data = {
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 2,
|
|
|
- loginUserId: localStorage.getItem('ws-pf_userId'),
|
|
|
- compId: localStorage.getItem('ws-pf_compId'),
|
|
|
- releaseFlag: 0
|
|
|
- }
|
|
|
- // queryHomePage(data).toPromise().then(resNewList => {
|
|
|
- // for (let i of resNewList) {
|
|
|
- // i.content = '<p>' + i.content.replace(/<[^>]+>/g, '') + '</p>'
|
|
|
- // }
|
|
|
- // this.newList = resNewList
|
|
|
- // for (let i of this.newList) {
|
|
|
- // if (i.ossCoverUrl && i.ossCoverUrl.length > 0) {
|
|
|
- // } else {
|
|
|
- // this.$set(
|
|
|
- // i,
|
|
|
- // 'imgUrl',
|
|
|
- // require('@/assets/images/page/home/noImg.png')
|
|
|
- // )
|
|
|
- // }
|
|
|
+ findHottestRouting(data).toPromise().then(res => {
|
|
|
+ this.routeList = res
|
|
|
+ if (res.length == 0) {
|
|
|
+ this.blockList[0].flag = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取新闻
|
|
|
+ getNewList() {
|
|
|
+ let data = {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 2,
|
|
|
+ loginUserId: localStorage.getItem('ws-pf_userId'),
|
|
|
+ compId: localStorage.getItem('ws-pf_compId'),
|
|
|
+ releaseFlag: 0
|
|
|
+ }
|
|
|
+ // queryHomePage(data).toPromise().then(resNewList => {
|
|
|
+ // for (let i of resNewList) {
|
|
|
+ // i.content = '<p>' + i.content.replace(/<[^>]+>/g, '') + '</p>'
|
|
|
+ // }
|
|
|
+ // this.newList = resNewList
|
|
|
+ // for (let i of this.newList) {
|
|
|
+ // if (i.ossCoverUrl && i.ossCoverUrl.length > 0) {
|
|
|
+ // } else {
|
|
|
+ // this.$set(
|
|
|
+ // i,
|
|
|
+ // 'imgUrl',
|
|
|
+ // require('@/assets/images/page/home/noImg.png')
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ //获取通知通函
|
|
|
+ // getNoticeList () {
|
|
|
+ // let pagesize = Math.floor((this.$refs.noticeList.clientHeight - 44) / 80)
|
|
|
+ // let data = {
|
|
|
+ // currentPage: 1,
|
|
|
+ // pageSize: pagesize || 3,
|
|
|
+ // vesselDeptId:
|
|
|
+ // localStorage.getItem('ws-pf_vesselBankFlag') === 'V'
|
|
|
+ // ? localStorage.getItem('ws-pf_vesselId')
|
|
|
+ // : localStorage.getItem('ws-pf_deptId'),
|
|
|
+ // compId: localStorage.getItem('ws-pf_compId')
|
|
|
// }
|
|
|
- // })
|
|
|
- },
|
|
|
- //获取通知通函
|
|
|
- // getNoticeList () {
|
|
|
- // let pagesize = Math.floor((this.$refs.noticeList.clientHeight - 44) / 80)
|
|
|
- // let data = {
|
|
|
- // currentPage: 1,
|
|
|
- // pageSize: pagesize || 3,
|
|
|
- // vesselDeptId:
|
|
|
- // localStorage.getItem('ws-pf_vesselBankFlag') === 'V'
|
|
|
- // ? localStorage.getItem('ws-pf_vesselId')
|
|
|
- // : localStorage.getItem('ws-pf_deptId'),
|
|
|
- // compId: localStorage.getItem('ws-pf_compId')
|
|
|
- // }
|
|
|
- // // TODO: 【此处有问题】接口变更的不对
|
|
|
- // queryCircularManagementReceiveList(data)
|
|
|
- // .toPromise()
|
|
|
- // .then(response => {
|
|
|
- // this.noticeList = response.records
|
|
|
- // })
|
|
|
- // },
|
|
|
- // 获取船舶状态
|
|
|
- getNaviStatusStr (t) {
|
|
|
- var array = [
|
|
|
- this.$t('home.navistatus0'),
|
|
|
- this.$t('home.navistatus1'),
|
|
|
- this.$t('home.navistatus2'),
|
|
|
- this.$t('home.navistatus3'),
|
|
|
- this.$t('home.navistatus4'),
|
|
|
- this.$t('home.navistatus5'),
|
|
|
- this.$t('home.navistatus6'),
|
|
|
- this.$t('home.navistatus7'),
|
|
|
- this.$t('home.navistatus8')
|
|
|
- ]
|
|
|
-
|
|
|
- if (t >= 0 && t <= 8) {
|
|
|
- return array[t]
|
|
|
- }
|
|
|
- return ''
|
|
|
- },
|
|
|
- // 获取船舶状态
|
|
|
- getNaviStatusBg (t) {
|
|
|
- var array = [
|
|
|
- 'bg0',
|
|
|
- 'bg1',
|
|
|
- 'bg2',
|
|
|
- 'bg3',
|
|
|
- 'bg4',
|
|
|
- 'bg5',
|
|
|
- 'bg6',
|
|
|
- 'bg7',
|
|
|
- 'bg8'
|
|
|
- ]
|
|
|
-
|
|
|
- if (t >= 0 && t <= 8) {
|
|
|
- return array[t]
|
|
|
- }
|
|
|
- return ''
|
|
|
- },
|
|
|
- getShipList () {
|
|
|
- getUserVesselList({ vesselStatus: 'UNDER_CONTROL' }).toPromise().then(res => {
|
|
|
- this.shipList = []
|
|
|
- let num = res.length > 10 ? 10 : res.length
|
|
|
- let obj = {}
|
|
|
- for (let i = 0; i < num; i++) {
|
|
|
- if (res[i].mmsiCode && res[i].mmsiCode.length > 0) {
|
|
|
- obj = this.shipService.getShipByMmsi(res[i].mmsiCode)
|
|
|
- ? this.shipService.getShipByMmsi(res[i].mmsiCode)
|
|
|
- : {}
|
|
|
- obj.vesselName = res[i].vesselName
|
|
|
-
|
|
|
- this.shipList.push(obj)
|
|
|
+ // // TODO: 【此处有问题】接口变更的不对
|
|
|
+ // queryCircularManagementReceiveList(data)
|
|
|
+ // .toPromise()
|
|
|
+ // .then(response => {
|
|
|
+ // this.noticeList = response.records
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // 获取船舶状态
|
|
|
+ getNaviStatusStr(t) {
|
|
|
+ var array = [
|
|
|
+ this.$t('home.navistatus0'),
|
|
|
+ this.$t('home.navistatus1'),
|
|
|
+ this.$t('home.navistatus2'),
|
|
|
+ this.$t('home.navistatus3'),
|
|
|
+ this.$t('home.navistatus4'),
|
|
|
+ this.$t('home.navistatus5'),
|
|
|
+ this.$t('home.navistatus6'),
|
|
|
+ this.$t('home.navistatus7'),
|
|
|
+ this.$t('home.navistatus8')
|
|
|
+ ]
|
|
|
+
|
|
|
+ if (t >= 0 && t <= 8) {
|
|
|
+ return array[t]
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ // 获取船舶状态
|
|
|
+ getNaviStatusBg(t) {
|
|
|
+ var array = [
|
|
|
+ 'bg0',
|
|
|
+ 'bg1',
|
|
|
+ 'bg2',
|
|
|
+ 'bg3',
|
|
|
+ 'bg4',
|
|
|
+ 'bg5',
|
|
|
+ 'bg6',
|
|
|
+ 'bg7',
|
|
|
+ 'bg8'
|
|
|
+ ]
|
|
|
+
|
|
|
+ if (t >= 0 && t <= 8) {
|
|
|
+ return array[t]
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ getShipList() {
|
|
|
+ getUserVesselList({
|
|
|
+ vesselStatus: 'UNDER_CONTROL'
|
|
|
+ }).toPromise().then(res => {
|
|
|
+ this.shipList = []
|
|
|
+ let num = res.length > 10 ? 10 : res.length
|
|
|
+ let obj = {}
|
|
|
+ for (let i = 0; i < num; i++) {
|
|
|
+ if (res[i].mmsiCode && res[i].mmsiCode.length > 0) {
|
|
|
+ obj = this.shipService.getShipByMmsi(res[i].mmsiCode) ?
|
|
|
+ this.shipService.getShipByMmsi(res[i].mmsiCode) : {}
|
|
|
+ obj.vesselName = res[i].vesselName
|
|
|
+
|
|
|
+ this.shipList.push(obj)
|
|
|
+ }
|
|
|
}
|
|
|
+ //我想不出还有什么招了:临时解决办法
|
|
|
+ const oldList = this.shipList
|
|
|
+ for (let i = 1; i < 5; i++) {
|
|
|
+ oldList.forEach(item => {
|
|
|
+ this.shipList.push(item)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ onTodoClick() {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'workNotification'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onMsgClick() {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'message'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onChange(list) {},
|
|
|
+ onShipMenuItemClick(ship) {
|
|
|
+ this.selectShip = ship
|
|
|
+ if (ship) {
|
|
|
+ this.$refs.shipMap.selectShip(ship.id)
|
|
|
+ } else {
|
|
|
+ this.$refs.shipMap.unSelectShip()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onFullScreen() {
|
|
|
+ this.isFullScreen = !this.isFullScreen
|
|
|
+ },
|
|
|
+ onNoticeMoreBtnClick() {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'notice'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onShipSelectEvent(shipid) {
|
|
|
+ this.selectShip = this.ships.find(item => {
|
|
|
+ return item.id == shipid
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCityName(encity) {
|
|
|
+ if (getLanguage() === 'zh') {
|
|
|
+ return getCnCity(encity)
|
|
|
}
|
|
|
- //我想不出还有什么招了:临时解决办法
|
|
|
- const oldList = this.shipList
|
|
|
- for (let i = 1; i < 5; i++) {
|
|
|
- oldList.forEach(item => {
|
|
|
- this.shipList.push(item)
|
|
|
+ return encity
|
|
|
+ },
|
|
|
+ getWeaName(enwea) {
|
|
|
+ if (getLanguage() === 'zh') {
|
|
|
+ return getCnWea(enwea)
|
|
|
+ }
|
|
|
+ return enwea
|
|
|
+ },
|
|
|
+ gotoNewRw(data) {
|
|
|
+ if (data === 'message') {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'message',
|
|
|
+ query: {
|
|
|
+ types: data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'workNotification',
|
|
|
+ query: {
|
|
|
+ types: data
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
+ },
|
|
|
+ test() {
|
|
|
+ console.log('testtesttesttest');
|
|
|
+ },
|
|
|
+ async test1() {
|
|
|
+ console.log('testtesttesttest111111');
|
|
|
+ },
|
|
|
+ async openPort() {
|
|
|
+ console.log('openPort', navigator);
|
|
|
+ if ('serial' in navigator) {
|
|
|
+ // The Web Serial API is supported.
|
|
|
+ console.log('the Web Serial API is supported.');
|
|
|
+ console.log(this.param);
|
|
|
+ const port = await navigator.serial.requestPort();
|
|
|
+ await port.open({
|
|
|
+ baudRate: this.param
|
|
|
+ }); // set baud rate
|
|
|
+ this.reader = port.readable.getReader();
|
|
|
+ // 监听来自串行设备的数据
|
|
|
+ while (true) {
|
|
|
+ const {
|
|
|
+ value,
|
|
|
+ done
|
|
|
+ } = await this.reader.read();
|
|
|
+ if (done) {
|
|
|
+ // 允许稍后关闭串口。
|
|
|
+ this.reader.releaseLock();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ console.log('value:', value);
|
|
|
|
|
|
- onTodoClick () {
|
|
|
- this.$router.push({ name: 'workNotification' })
|
|
|
- },
|
|
|
- onMsgClick () {
|
|
|
- this.$router.push({ name: 'message' })
|
|
|
- },
|
|
|
- onChange (list) { },
|
|
|
- onShipMenuItemClick (ship) {
|
|
|
- this.selectShip = ship
|
|
|
- if (ship) {
|
|
|
- this.$refs.shipMap.selectShip(ship.id)
|
|
|
- } else {
|
|
|
- this.$refs.shipMap.unSelectShip()
|
|
|
- }
|
|
|
- },
|
|
|
- onFullScreen () {
|
|
|
- this.isFullScreen = !this.isFullScreen
|
|
|
- },
|
|
|
- onNoticeMoreBtnClick () {
|
|
|
- this.$router.push({
|
|
|
- name: 'notice'
|
|
|
- })
|
|
|
- },
|
|
|
- onShipSelectEvent (shipid) {
|
|
|
- this.selectShip = this.ships.find(item => {
|
|
|
- return item.id == shipid
|
|
|
- })
|
|
|
- },
|
|
|
- getCityName (encity) {
|
|
|
- if (getLanguage() === 'zh') {
|
|
|
- return getCnCity(encity)
|
|
|
- }
|
|
|
- return encity
|
|
|
- },
|
|
|
- getWeaName (enwea) {
|
|
|
- if (getLanguage() === 'zh') {
|
|
|
- return getCnWea(enwea)
|
|
|
- }
|
|
|
- return enwea
|
|
|
- },
|
|
|
- gotoNewRw (data) {
|
|
|
- if (data === 'message') {
|
|
|
- this.$router.push({ name: 'message', query: { types: data } })
|
|
|
- } else {
|
|
|
- this.$router.push({ name: 'workNotification', query: { types: data } })
|
|
|
- }
|
|
|
- },
|
|
|
- test(){
|
|
|
- console.log('testtesttesttest');
|
|
|
- },
|
|
|
- async test1(){
|
|
|
- console.log('testtesttesttest111111');
|
|
|
- },
|
|
|
- async openPort(){
|
|
|
- console.log('openPort',navigator);
|
|
|
- if ('serial' in navigator) {
|
|
|
- // The Web Serial API is supported.
|
|
|
- console.log('the Web Serial API is supported.');
|
|
|
- console.log(this.param);
|
|
|
- const port = await navigator.serial.requestPort();
|
|
|
- await port.open({ baudRate: this.param }); // set baud rate
|
|
|
- this.reader = port.readable.getReader();
|
|
|
- // 监听来自串行设备的数据
|
|
|
- while (true) {
|
|
|
- const { value, done } = await this.reader.read();
|
|
|
- if (done) {
|
|
|
- // 允许稍后关闭串口。
|
|
|
- this.reader.releaseLock();
|
|
|
- break;
|
|
|
- }
|
|
|
- console.log('value:',value);
|
|
|
-
|
|
|
- var result='';
|
|
|
- var flag = false;
|
|
|
- for (var i = value.length - 1; i >= 0; i--) {
|
|
|
- var tmp = String.fromCharCode(value[i])
|
|
|
- if (tmp == '=') {
|
|
|
- flag = true
|
|
|
+ var result = '';
|
|
|
+ var flag = false;
|
|
|
+ for (var i = value.length - 1; i >= 0; i--) {
|
|
|
+ var tmp = String.fromCharCode(value[i])
|
|
|
+ if (tmp == '=') {
|
|
|
+ flag = true
|
|
|
+ }
|
|
|
+ if (flag && result.length < 9 && tmp != '=') {
|
|
|
+ result += tmp
|
|
|
+ }
|
|
|
}
|
|
|
- if (flag && result.length < 9 && tmp != '=') {
|
|
|
- result += tmp
|
|
|
+
|
|
|
+ setTimeout(1000)
|
|
|
+ if (parseInt(result)) {
|
|
|
+ console.log('result:', result);
|
|
|
+ this.text = parseInt(result)
|
|
|
}
|
|
|
+ console.log('this.text:', this.text);
|
|
|
+
|
|
|
+ // value 是一个 Uint8Array
|
|
|
}
|
|
|
-
|
|
|
- setTimeout(1000)
|
|
|
- if(parseInt(result)){
|
|
|
- console.log('result:',result);
|
|
|
- this.text = parseInt(result)
|
|
|
- }
|
|
|
- console.log('this.text:',this.text);
|
|
|
-
|
|
|
- // value 是一个 Uint8Array
|
|
|
+ await port.close();
|
|
|
+ } else {
|
|
|
+ console.log('the Web Serial API is not supported.', navigator);
|
|
|
}
|
|
|
- await port.close();
|
|
|
- }
|
|
|
- else{
|
|
|
- console.log('the Web Serial API is not supported.',navigator);
|
|
|
+ },
|
|
|
+ async closePort() {
|
|
|
+ console.log('closePort');
|
|
|
+ this.reader.cancel()
|
|
|
}
|
|
|
- },
|
|
|
- async closePort(){
|
|
|
- console.log('closePort');
|
|
|
- this.reader.cancel()
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.home {
|
|
|
- padding: 10px;
|
|
|
- overflow-y: auto;
|
|
|
- // background-color: #eee;
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh - 60px);
|
|
|
- .set-img {
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- position: fixed;
|
|
|
- right: 0;
|
|
|
- bottom: 99px;
|
|
|
- z-index: 1000;
|
|
|
- }
|
|
|
- .shortcut-entrance {
|
|
|
- width: 100%;
|
|
|
- height: 60px;
|
|
|
- background: #fff;
|
|
|
- margin-bottom: 10px;
|
|
|
- padding: 0 20px;
|
|
|
- line-height: 60px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .shortcut-entrance-left {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- width: 50%;
|
|
|
- overflow: hidden;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .shortcut-entrance-right {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- .body-middle {
|
|
|
- display: flex;
|
|
|
+ .home {
|
|
|
+ padding: 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+ // background-color: #eee;
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 60px);
|
|
|
- .body-middle-left {
|
|
|
+
|
|
|
+ .set-img {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ bottom: 99px;
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shortcut-entrance {
|
|
|
width: 100%;
|
|
|
- // margin-right: 10px;
|
|
|
- .panel-list {
|
|
|
- display: flex;
|
|
|
- color: #ffffff;
|
|
|
- text-shadow: 0px 1px 1px rgba(111, 52, 0, 0.55);
|
|
|
- }
|
|
|
- .ship-list-body {
|
|
|
- position: relative;
|
|
|
- width: 300px;
|
|
|
- margin-top: 10px;
|
|
|
- .shipList-box {
|
|
|
- width: 85%;
|
|
|
- margin: 0 auto;
|
|
|
- .shipList-icon {
|
|
|
- position: absolute;
|
|
|
- top: 6px;
|
|
|
- left: 0px;
|
|
|
- }
|
|
|
- .shipList-name {
|
|
|
- cursor: context-menu;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 26px;
|
|
|
- color: #333333;
|
|
|
- max-width: 100px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .shipList-address {
|
|
|
- cursor: context-menu;
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- line-height: 35px;
|
|
|
- }
|
|
|
- .shipList-time {
|
|
|
- cursor: context-menu;
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- .ship-list-status {
|
|
|
- cursor: context-menu;
|
|
|
- margin-left: 20px;
|
|
|
- padding: 5px 10px;
|
|
|
- border-radius: 20px;
|
|
|
- color: #fff;
|
|
|
- max-width: 90px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .bg0 {
|
|
|
- background: #7ed321;
|
|
|
- }
|
|
|
- .bg1 {
|
|
|
- background: #ff8f00;
|
|
|
- }
|
|
|
- .bg2 {
|
|
|
- background: #495b61;
|
|
|
- }
|
|
|
- .bg3 {
|
|
|
- background: #4fc3f7;
|
|
|
- }
|
|
|
- .bg4 {
|
|
|
- background: #26a69a;
|
|
|
- }
|
|
|
- .bg5 {
|
|
|
- background: #9c7fee;
|
|
|
- }
|
|
|
- .bg6 {
|
|
|
- background: #ff5722;
|
|
|
- }
|
|
|
- .bg7 {
|
|
|
- background: #8d6e63;
|
|
|
- }
|
|
|
- .bg8 {
|
|
|
- background: #fadd60;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .notice-list {
|
|
|
- width: calc(50% - 7px);
|
|
|
- background: #fff;
|
|
|
- margin-top: 10px;
|
|
|
- // height: calc(100% - 180px);
|
|
|
- // min-height: 460px;
|
|
|
- border-radius: 4px;
|
|
|
- // float: left;
|
|
|
- }
|
|
|
+ height: 60px;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 0 20px;
|
|
|
+ line-height: 60px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .news-list {
|
|
|
- width: calc(50% - 7px);
|
|
|
- // float: left;
|
|
|
- background: #fff;
|
|
|
- margin-top: 10px;
|
|
|
- // height: calc(100% - 180px);
|
|
|
- height: 285px;
|
|
|
+ .shortcut-entrance-left {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ width: 50%;
|
|
|
overflow: hidden;
|
|
|
- // min-height: 460px;
|
|
|
- border-radius: 4px;
|
|
|
- // margin-right: 10px;
|
|
|
- .new-list-box {
|
|
|
- padding: 0 10px;
|
|
|
- .new-list-body:first-child {
|
|
|
- padding-bottom: 20px;
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
- }
|
|
|
- .new-list-body:last-child {
|
|
|
- padding-top: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .new-list-body {
|
|
|
- width: 100%;
|
|
|
- padding: 10px 0;
|
|
|
- display: flex;
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
- // height: 50%;
|
|
|
- overflow: hidden;
|
|
|
- // padding: 10px;
|
|
|
- // display: flex;
|
|
|
- .new-list-img {
|
|
|
- // height: 100%;
|
|
|
- width: 160px;
|
|
|
- height: 100px;
|
|
|
- position: relative;
|
|
|
- // margin-right: 20px;
|
|
|
- .newsTJ {
|
|
|
- position: absolute;
|
|
|
- width: 54px;
|
|
|
- height: 50px;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- .new-list-title {
|
|
|
- color: #343434;
|
|
|
- line-height: 30px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- span {
|
|
|
- cursor: pointer;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- .new-list-content {
|
|
|
- color: #666666;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 16px;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 3;
|
|
|
- overflow: hidden;
|
|
|
- height: 48px;
|
|
|
- span {
|
|
|
- cursor: pointer;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- .new-list-date {
|
|
|
- color: #999999;
|
|
|
- font-size: 12px;
|
|
|
- text-align: right;
|
|
|
- line-height: 22px;
|
|
|
- span {
|
|
|
- cursor: pointer;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // .new-list-body:hover {
|
|
|
- // background: #e2edfa;
|
|
|
- // cursor: pointer;
|
|
|
- // }
|
|
|
- .no-line {
|
|
|
- border-bottom: 0px solid #eeeeee;
|
|
|
- }
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
- .v-width {
|
|
|
- width: calc(50% - 7px);
|
|
|
+
|
|
|
+ .shortcut-entrance-right {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
}
|
|
|
}
|
|
|
- .body-middle-right {
|
|
|
- width: calc(30% - 10px);
|
|
|
- .notice-list {
|
|
|
- height: 50%;
|
|
|
- background: #fff;
|
|
|
+
|
|
|
+ .body-middle {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 60px);
|
|
|
+
|
|
|
+ .body-middle-left {
|
|
|
width: 100%;
|
|
|
- min-height: 300px;
|
|
|
- border-radius: 4px;
|
|
|
- .notice-list-body {
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
- padding: 20px 10px;
|
|
|
- .notice-list-title {
|
|
|
- color: #333333;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 18px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- .notice-list-type {
|
|
|
- margin: 9px 0 12px 0;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- .notice-list-person {
|
|
|
- color: #666666;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- .notice-list-date {
|
|
|
- color: #666666;
|
|
|
- font-size: 12px;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- .notice-list-body:hover {
|
|
|
- background: #e2edfa;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .notice-body-height {
|
|
|
- height: 50%;
|
|
|
- }
|
|
|
- .notice-body-height1 {
|
|
|
- height: 20%;
|
|
|
+
|
|
|
+ // margin-right: 10px;
|
|
|
+ .panel-list {
|
|
|
+ display: flex;
|
|
|
+ color: #ffffff;
|
|
|
+ text-shadow: 0px 1px 1px rgba(111, 52, 0, 0.55);
|
|
|
}
|
|
|
- }
|
|
|
- .notice-list-height {
|
|
|
- height: 100%;
|
|
|
- min-height: 638px;
|
|
|
- }
|
|
|
- .ship-list {
|
|
|
- height: calc(50% - 10px);
|
|
|
- margin-top: 10px;
|
|
|
- background: #fff;
|
|
|
- width: 100%;
|
|
|
- min-height: 327px;
|
|
|
- border-radius: 4px;
|
|
|
+
|
|
|
.ship-list-body {
|
|
|
- padding: 20px 0;
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
- .ship-list-head {
|
|
|
- display: flex;
|
|
|
- img {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
+ position: relative;
|
|
|
+ width: 300px;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .shipList-box {
|
|
|
+ width: 85%;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .shipList-icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 6px;
|
|
|
+ left: 0px;
|
|
|
}
|
|
|
- .ship-list-name {
|
|
|
- margin: 0 20px;
|
|
|
+
|
|
|
+ .shipList-name {
|
|
|
+ cursor: context-menu;
|
|
|
+ font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
+ line-height: 26px;
|
|
|
+ color: #333333;
|
|
|
+ max-width: 100px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shipList-address {
|
|
|
+ cursor: context-menu;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 35px;
|
|
|
}
|
|
|
+
|
|
|
+ .shipList-time {
|
|
|
+ cursor: context-menu;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
.ship-list-status {
|
|
|
- border-radius: 10px;
|
|
|
- padding: 4px 8px;
|
|
|
- color: #ffffff;
|
|
|
+ cursor: context-menu;
|
|
|
+ margin-left: 20px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 20px;
|
|
|
+ color: #fff;
|
|
|
+ max-width: 90px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
+
|
|
|
.bg0 {
|
|
|
background: #7ed321;
|
|
|
}
|
|
|
+
|
|
|
.bg1 {
|
|
|
background: #ff8f00;
|
|
|
}
|
|
|
+
|
|
|
.bg2 {
|
|
|
background: #495b61;
|
|
|
}
|
|
|
+
|
|
|
.bg3 {
|
|
|
background: #4fc3f7;
|
|
|
}
|
|
|
+
|
|
|
.bg4 {
|
|
|
background: #26a69a;
|
|
|
}
|
|
|
+
|
|
|
.bg5 {
|
|
|
background: #9c7fee;
|
|
|
}
|
|
|
+
|
|
|
.bg6 {
|
|
|
background: #ff5722;
|
|
|
}
|
|
|
+
|
|
|
.bg7 {
|
|
|
background: #8d6e63;
|
|
|
}
|
|
|
+
|
|
|
.bg8 {
|
|
|
background: #fadd60;
|
|
|
}
|
|
|
}
|
|
|
- .ship-list-address {
|
|
|
- margin: 10px 0 10px 34px;
|
|
|
- color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-list {
|
|
|
+ width: calc(50% - 7px);
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 10px;
|
|
|
+ // height: calc(100% - 180px);
|
|
|
+ // min-height: 460px;
|
|
|
+ border-radius: 4px;
|
|
|
+ // float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .news-list {
|
|
|
+ width: calc(50% - 7px);
|
|
|
+ // float: left;
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 10px;
|
|
|
+ // height: calc(100% - 180px);
|
|
|
+ height: 285px;
|
|
|
+ overflow: hidden;
|
|
|
+ // min-height: 460px;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ // margin-right: 10px;
|
|
|
+ .new-list-box {
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ .new-list-body:first-child {
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .new-list-body:last-child {
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .new-list-body {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 0;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ // height: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ // padding: 10px;
|
|
|
+ // display: flex;
|
|
|
+ .new-list-img {
|
|
|
+ // height: 100%;
|
|
|
+ width: 160px;
|
|
|
+ height: 100px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ // margin-right: 20px;
|
|
|
+ .newsTJ {
|
|
|
+ position: absolute;
|
|
|
+ width: 54px;
|
|
|
+ height: 50px;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .new-list-title {
|
|
|
+ color: #343434;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .new-list-content {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 48px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .new-list-date {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: right;
|
|
|
+ line-height: 22px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .new-list-body:hover {
|
|
|
+ // background: #e2edfa;
|
|
|
+ // cursor: pointer;
|
|
|
+ // }
|
|
|
+ .no-line {
|
|
|
+ border-bottom: 0px solid #eeeeee;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .v-width {
|
|
|
+ width: calc(50% - 7px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .body-middle-right {
|
|
|
+ width: calc(30% - 10px);
|
|
|
+
|
|
|
+ .notice-list {
|
|
|
+ height: 50%;
|
|
|
+ background: #fff;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 300px;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .notice-list-body {
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ padding: 20px 10px;
|
|
|
+
|
|
|
+ .notice-list-title {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 18px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-list-type {
|
|
|
+ margin: 9px 0 12px 0;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-list-person {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-list-date {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-list-body:hover {
|
|
|
+ background: #e2edfa;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-body-height {
|
|
|
+ height: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-body-height1 {
|
|
|
+ height: 20%;
|
|
|
}
|
|
|
- .ship-list-date {
|
|
|
- color: #666666;
|
|
|
- margin-left: 34px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-list-height {
|
|
|
+ height: 100%;
|
|
|
+ min-height: 638px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ship-list {
|
|
|
+ height: calc(50% - 10px);
|
|
|
+ margin-top: 10px;
|
|
|
+ background: #fff;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 327px;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .ship-list-body {
|
|
|
+ padding: 20px 0;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+
|
|
|
+ .ship-list-head {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ship-list-name {
|
|
|
+ margin: 0 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ship-list-status {
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 4px 8px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg0 {
|
|
|
+ background: #7ed321;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg1 {
|
|
|
+ background: #ff8f00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg2 {
|
|
|
+ background: #495b61;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg3 {
|
|
|
+ background: #4fc3f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg4 {
|
|
|
+ background: #26a69a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg5 {
|
|
|
+ background: #9c7fee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg6 {
|
|
|
+ background: #ff5722;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg7 {
|
|
|
+ background: #8d6e63;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg8 {
|
|
|
+ background: #fadd60;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ship-list-address {
|
|
|
+ margin: 10px 0 10px 34px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ship-list-date {
|
|
|
+ color: #666666;
|
|
|
+ margin-left: 34px;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ /*.ship-list-body:hover{*/
|
|
|
+ /* background: #e2edfa;*/
|
|
|
+ /*}*/
|
|
|
}
|
|
|
- /*.ship-list-body:hover{*/
|
|
|
- /* background: #e2edfa;*/
|
|
|
- /*}*/
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .body-middle-height {
|
|
|
+ height: calc(100vh - 80px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-title {
|
|
|
+ width: 100%;
|
|
|
+ // background: #f3f9fe;
|
|
|
+ background: url('~@/assets/newhome/titilebg.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 44px;
|
|
|
+ padding: 0 20px;
|
|
|
+ display: flex;
|
|
|
+ line-height: 44px;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+
|
|
|
+ .list-title-name {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-title-more {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .body-middle-height {
|
|
|
- height: calc(100vh - 70px);
|
|
|
+
|
|
|
+ .el-dropdown-menu {
|
|
|
+ margin-top: -20px !important;
|
|
|
+ /*left: 1872px !important;*/
|
|
|
}
|
|
|
- .list-title {
|
|
|
+
|
|
|
+ .seamless-warp {
|
|
|
+ // width: 100%;
|
|
|
width: 100%;
|
|
|
- // background: #f3f9fe;
|
|
|
- background: url('~@/assets/newhome/titilebg.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- height: 44px;
|
|
|
- padding: 0 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-tzthList:nth-of-type(3) {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-tzthList {
|
|
|
display: flex;
|
|
|
- line-height: 44px;
|
|
|
- justify-content: space-between;
|
|
|
- border-radius: 4px 4px 0 0;
|
|
|
- .list-title-name {
|
|
|
- font-size: 16px;
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+
|
|
|
+ .home-tzthList-type {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 28px;
|
|
|
font-weight: bold;
|
|
|
- color: #333333;
|
|
|
+
|
|
|
+ .home-tzthList-type-title {
|
|
|
+ color: #343434;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-tzthList-type-theme {
|
|
|
+ color: #666666;
|
|
|
+ margin: 0;
|
|
|
+ width: 80%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .list-title-more {
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- cursor: pointer;
|
|
|
+
|
|
|
+ .home-tzthList-people {
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ line-height: 22px;
|
|
|
+
|
|
|
+ .home-tzthList-Personnel,
|
|
|
+ .home-tzthList-timer {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.el-dropdown-menu {
|
|
|
- margin-top: -20px !important;
|
|
|
- /*left: 1872px !important;*/
|
|
|
-}
|
|
|
-.seamless-warp {
|
|
|
- // width: 100%;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
-.home-tzthList:nth-of-type(3) {
|
|
|
- border: none;
|
|
|
-}
|
|
|
-.home-tzthList {
|
|
|
- display: flex;
|
|
|
- padding: 10px;
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
- .home-tzthList-type {
|
|
|
+
|
|
|
+ .noMore {
|
|
|
+ position: absolute;
|
|
|
+ margin: auto;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ship-list {
|
|
|
width: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ //新增的图表的样式
|
|
|
+ .chart {
|
|
|
display: flex;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 28px;
|
|
|
- font-weight: bold;
|
|
|
- .home-tzthList-type-title {
|
|
|
- color: #343434;
|
|
|
- margin: 0;
|
|
|
- span {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-tzthList-timer-left {
|
|
|
+ width: 10%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: block;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
- .home-tzthList-type-theme {
|
|
|
- color: #666666;
|
|
|
- margin: 0;
|
|
|
- width: 80%;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- span {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ }
|
|
|
+.header{
|
|
|
+ // background: rgb(36, 38, 45);
|
|
|
+ background: #2a2a2a;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .right{
|
|
|
+ color: white;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ .top{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .bottom{
|
|
|
+ font-size: 26px;
|
|
|
}
|
|
|
}
|
|
|
- .home-tzthList-people {
|
|
|
+}
|
|
|
+ .chart-card {
|
|
|
+ // background: rgb(36, 38, 45);
|
|
|
+ background: #2a2a2a;
|
|
|
+ width: 350px;
|
|
|
+ margin-top: 10px;
|
|
|
+ height: 288px;
|
|
|
+ // height: 288px;
|
|
|
+ }
|
|
|
+ .title2{
|
|
|
+ pointer-events: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: "Microsoft Yahei", Arial, "sans-serif";
|
|
|
+ font-size: 15px;
|
|
|
+ writing-mode: horizontal-tb;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .content2 {
|
|
|
+ // background-color: rgb(27, 28, 30);
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- line-height: 22px;
|
|
|
- .home-tzthList-Personnel,
|
|
|
- .home-tzthList-timer {
|
|
|
- font-size: 12px;
|
|
|
- color: #666666;
|
|
|
- span {
|
|
|
- cursor: pointer;
|
|
|
+ margin-top: 10px;
|
|
|
+ height: calc(100% - 170px);
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ pointer-events: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ color: rgb(204, 204, 204);
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: "Microsoft Yahei", Arial, "sans-serif";
|
|
|
+ font-size: 24px;
|
|
|
+ writing-mode: horizontal-tb;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-map {
|
|
|
+ // background: yellow;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content2-aside {
|
|
|
+ width: 360px;
|
|
|
+ // height: 288px;
|
|
|
+ // background: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content2-middle {
|
|
|
+ width: calc(100% - 720px);
|
|
|
+ margin:0 20px 0 15px;
|
|
|
+
|
|
|
+ .left-card {
|
|
|
+ display: flex;
|
|
|
+ // background: green;
|
|
|
+ justify-content: space-evenly;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ background: #2a2a2a;
|
|
|
+ width: 28%;
|
|
|
+ height: 208px;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 20px;
|
|
|
+
|
|
|
+ p:nth-of-type(1) {
|
|
|
+ color: #d5d5d5;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 70px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p:nth-of-type(2) {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+
|
|
|
+ .number {
|
|
|
+ color: #50cad4;
|
|
|
+ font-size: 53px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .number-text{
|
|
|
+ color: #d5d5d5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.noMore {
|
|
|
- position: absolute;
|
|
|
- margin: auto;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
-}
|
|
|
-.ship-list {
|
|
|
- width: 100%;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #fff;
|
|
|
-}
|
|
|
|
|
|
-//新增的图表的样式
|
|
|
-.chart {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .home {
|
|
|
+ background: rgb(27, 28, 30);
|
|
|
+ padding-bottom:20px
|
|
|
+ }
|
|
|
+ .home .body-middle-height{
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+.content2-map{
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
-.home-tzthList-timer-left {
|
|
|
- width: 10%;
|
|
|
+.content3{
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- img {
|
|
|
- cursor: pointer;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- display: block;
|
|
|
- align-items: center;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
+ background: #2a2a2a;
|
|
|
+ padding: 10px 60px;
|
|
|
+ .content3-number{
|
|
|
+ margin-left: 40px;
|
|
|
+ }
|
|
|
+ .blue{
|
|
|
+ font-size: 30px;
|
|
|
+ color: #50cad4;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .yellow{
|
|
|
+ font-size: 30px;
|
|
|
+ color: #ffa523;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .left,.right{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #d5d5d5;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ display: inline-block;
|
|
|
+ width:35px;
|
|
|
+ height:35px;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
</style>
|
mxx
