|
|
@@ -1,2069 +1,1293 @@
|
|
|
<!-- 首页模块 首页面 -->
|
|
|
<template>
|
|
|
- <div class="home" id='contentView'>
|
|
|
- <div class="body-middle" :class="{ 'body-middle-height': blockList[0].flag }">
|
|
|
- <div class="body-middle-left">
|
|
|
- <!-- 任务、消息、提醒、超期 -->
|
|
|
- <!-- <Panel :data-list="panelList" @click="gotoNewRw"></Panel> -->
|
|
|
- <el-switch v-model="isShow" @change="changeSwitch"></el-switch>
|
|
|
- <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-button @click="openPort()">openPort</el-button>
|
|
|
- <el-button @click="closePort()">closePort</el-button>
|
|
|
- <div>{{text}}</div>
|
|
|
- </div>
|
|
|
- <div class="content2">
|
|
|
- <el-row class="content2-aside">
|
|
|
- <h3 class="title" @click="contract(0)">采购合同完成进度</h3>
|
|
|
- <el-col :span="12" class="chart-card">
|
|
|
- <div style="font-weight: bold;" class="">
|
|
|
- <div ref="myEchart1" style="height: 288px;" class="roseChart"></div>
|
|
|
- <div class="bottom-tip">统计单位：吨</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12" class="chart-card">
|
|
|
- <div style="font-weight: bold;">
|
|
|
- <div ref="myEchart2" style="height: 288px;" class="roseChart"></div>
|
|
|
- <div class="bottom-tip">统计单位：万</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12" class="chart-card">
|
|
|
- <div style="font-weight: bold;">
|
|
|
- <div ref="myEchart3" style="height: 288px;" class="roseChart"></div>
|
|
|
- <div class="bottom-tip">统计单位：万</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
+ <div id="index" ref="appRef">
|
|
|
+ <!-- <dv-loading v-show="loading">Loading...</dv-loading> -->
|
|
|
+ <div class="host-body">
|
|
|
+ <div>
|
|
|
+ <!-- 顶部title部分 -->
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6"
|
|
|
+ ><dv-decoration-8
|
|
|
+ class="title_right"
|
|
|
+ :color="['#008CFF', '#00ADDD']"
|
|
|
+ /></el-col>
|
|
|
+ <el-col :span="12"
|
|
|
+ ><div class="title_text">数 据 可 视 化 系 统</div>
|
|
|
+ <dv-decoration-5
|
|
|
+ class="title_center"
|
|
|
+ :color="['#008CFF', '#00ADDD']"
|
|
|
+ /></el-col>
|
|
|
+ <el-col :span="6"
|
|
|
+ ><div class="title_time">{{ dateYear + dateWeek + dateDay }}</div>
|
|
|
+ <dv-decoration-8
|
|
|
+ :reverse="true"
|
|
|
+ class="title_left"
|
|
|
+ :color="['#008CFF', '#00ADDD']"
|
|
|
+ /></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">{{carCount1}}</span><span class="number-text">台</span></p>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <p>装货车辆</p>
|
|
|
- <p><span class="number" style="color:#ffa523">{{carCount2}}</span><span class="number-text">台</span>
|
|
|
+ <!-- 主体部分 -->
|
|
|
+ <el-row>
|
|
|
+ <!-- 第一列 -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <!-- 饼图部分 -->
|
|
|
+ <div class="left_box1">
|
|
|
+ <dv-border-box-12>
|
|
|
+ <div id="Rose_diagram"></div>
|
|
|
+ <dv-active-ring-chart
|
|
|
+ :config="config"
|
|
|
+ class="left_box1_rose_right"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ class="rose_text"
|
|
|
+ v-for="(item, index) in numberData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <p>
|
|
|
+ <span class="coin">￥</span>
|
|
|
+ <span class="rose_text_nmb">{{
|
|
|
+ item.number.number
|
|
|
+ }}</span>
|
|
|
</p>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <p>卸货车辆</p>
|
|
|
- <p><span class="number" style="color:#2483ff">{{carCount3}}</span><span class="number-text">台</span>
|
|
|
+ <p>
|
|
|
+ <span>{{ item.text }}</span>
|
|
|
+ <span class="colorYellow">(件)</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <h3>粮食总储量</h3>
|
|
|
- <div ref="myEchart7" style="height: 208px;" @click="contract(3)"></div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <h3 class="content2-map">库点流向分布</h3>
|
|
|
- <div class="center-map" style="border: 2px solid #6a5f5f">
|
|
|
- <map-drag :listData=' mapInfo'></map-drag>
|
|
|
- </div>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <div style="display: flex;">
|
|
|
- <h3>头寸</h3>
|
|
|
- <h3 style="margin-left: 30px;">{{isShow?'***':position}}吨</h3>
|
|
|
+ </dv-border-box-12>
|
|
|
</div>
|
|
|
- <div class="content3">
|
|
|
- <div class="left">
|
|
|
- <!-- <img src="../../../public/img/1637204557176-s4AMbBA8.png" alt=""> -->
|
|
|
- <span>实际库存</span>
|
|
|
- <span class="content3-number blue">{{isShow?'***':physicalInventory}}</span>
|
|
|
- <span style="margin-top: 10px;">吨</span>
|
|
|
- </div>
|
|
|
- <div class="left">
|
|
|
- <!-- <img src="../../../public/img/1637204557176-s4AMbBA8.png" alt=""> -->
|
|
|
- <span>采购待执行（吨）</span>
|
|
|
- <span class="content3-number blue">{{isShow?'***':procurementPending}}</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">{{isShow?'***':salesPending}}</span>
|
|
|
- <span style="margin-top: 10px;">吨</span>
|
|
|
- </div>
|
|
|
+ <!-- 柱状图部分 -->
|
|
|
+ <div class="left_box2">
|
|
|
+ <dv-border-box-12 style="padding-top: 10px">
|
|
|
+ <p style="margin-left: 15px">数据统计图</p>
|
|
|
+ <div id="columnar"></div>
|
|
|
+ </dv-border-box-12>
|
|
|
</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;" class="roseChart" @click="contract(1)"></div>
|
|
|
- <div class="bottom-tip">统计单位：吨</div>
|
|
|
+ <!-- 轮播表格部分 -->
|
|
|
+ <div class="left_box3">
|
|
|
+ <dv-border-box-12 style="padding-top: 10px">
|
|
|
+ <dv-scroll-board
|
|
|
+ :config="board_info"
|
|
|
+ class="carousel_list"
|
|
|
+ oddRowBGC="#fff"
|
|
|
+ />
|
|
|
+ </dv-border-box-12>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="12" class="chart-card">
|
|
|
- <div style="font-weight: bold;">
|
|
|
- <div ref="myEchart5" style="height: 288px;" class="roseChart" @click="contract(1)"></div>
|
|
|
- <div class="bottom-tip">统计单位：万</div>
|
|
|
+ <!-- 第二列 -->
|
|
|
+ <el-col :span="12">
|
|
|
+ <!-- 中国地图 -->
|
|
|
+ <div id="china-map"></div>
|
|
|
+ <!-- 折线图 -->
|
|
|
+ <div class="line_center">
|
|
|
+ <dv-border-box-8>
|
|
|
+ <div id="line_center_diagram"></div>
|
|
|
+ </dv-border-box-8>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="12" class="chart-card">
|
|
|
- <div style="font-weight: bold;">
|
|
|
- <div ref="myEchart6" style="height: 288px;" class="roseChart" @click="contract(1)"></div>
|
|
|
- <div class="bottom-tip">统计单位：万</div>
|
|
|
+ <!-- 第三列 -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <!-- 轮播排行榜部分 -->
|
|
|
+ <div class="right_box1">
|
|
|
+ <dv-border-box-12>
|
|
|
+ <dv-decoration-7 style="width: 100%; height: 30px"
|
|
|
+ >销 售 排 行 榜</dv-decoration-7
|
|
|
+ >
|
|
|
+ <dv-scroll-ranking-board
|
|
|
+ :config="config"
|
|
|
+ style="width: 95%; height: 87%; margin-left: 2%"
|
|
|
+ />
|
|
|
+ </dv-border-box-12>
|
|
|
+ </div>
|
|
|
+ <!-- 虚线柱状图部分 -->
|
|
|
+ <div class="right_box2">
|
|
|
+ <dv-border-box-12 :reverse="true">
|
|
|
+ <div id="dotter_bar"></div>
|
|
|
+ </dv-border-box-12>
|
|
|
+ </div>
|
|
|
+ <!-- 部分 -->
|
|
|
+ <div class="right_box3">
|
|
|
+ <dv-border-box-12 :reverse="true">
|
|
|
+ <dv-conical-column-chart :config="cone" class="cone_box" />
|
|
|
+ </dv-border-box-12>
|
|
|
</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>
|
|
|
- <!-- 试用租户 -->
|
|
|
- <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'
|
|
|
-
|
|
|
- import mapDrag from '@/components/mapdrag/indexMap'
|
|
|
- // 统计图end
|
|
|
- // 正式租户
|
|
|
- import successfulDialog from './components/successfulDialog'
|
|
|
- // 试用租户
|
|
|
- import trialNotExpired from './components/trialNotExpired'
|
|
|
- // 新 api
|
|
|
- import {
|
|
|
- noticeNumber,
|
|
|
- queryCircularManagementReceiveList,
|
|
|
- getStaffHomeShowList,
|
|
|
- gChartsData,
|
|
|
- getAdminId
|
|
|
- } 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'
|
|
|
+
|
|
|
+import drawMixin from './drawMixin'; //自适应缩放
|
|
|
+import { formatTime } from './index.js'; //日期格式转换
|
|
|
+import * as echarts from 'echarts';
|
|
|
export default {
|
|
|
- name: 'index',
|
|
|
+ mixins: [drawMixin],
|
|
|
components: {
|
|
|
- mapDrag,
|
|
|
- axios,
|
|
|
- News,
|
|
|
- ShipMap,
|
|
|
- Panel,
|
|
|
- successfulDialog,
|
|
|
- trialNotExpired,
|
|
|
- //统计图start
|
|
|
- maintenance,
|
|
|
- shipCertificate,
|
|
|
- sparePartsMaterial,
|
|
|
- procurement
|
|
|
- //统计图end
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
- isShow:false,
|
|
|
- physicalInventory :0,
|
|
|
- procurementPending:0,
|
|
|
- salesPending:0,
|
|
|
- position:0,
|
|
|
- mapInfo: [],
|
|
|
- totalReserves: '',
|
|
|
- carCount1: '',
|
|
|
- carCount2: '',
|
|
|
- carCount3: '',
|
|
|
- chartsData: [],
|
|
|
- nowDate: null, //存放年月日变量
|
|
|
- nowTime: null, //存放时分秒变量
|
|
|
- timer: '', //定义一个定时器的变量
|
|
|
- currentTime: new Date(), // 获取当前时间
|
|
|
- timer1: '',
|
|
|
- dialogVisible: false,
|
|
|
- showEchart: false,
|
|
|
- phone: '', // 正式租户电话号码
|
|
|
- day: '', //试用租户剩余天数
|
|
|
- trialNotExpired: false, //试用租户 剩余天数
|
|
|
- successfulDialog: false, //第一次登陆的弹窗
|
|
|
- mapXY: undefined,
|
|
|
- shipService: undefined,
|
|
|
- blockList: [{
|
|
|
- name: this.$t('home.shortcutEntrance'),
|
|
|
- flag: true
|
|
|
+ //定时器
|
|
|
+ timing: null,
|
|
|
+ //loading图
|
|
|
+ loading: true,
|
|
|
+ //时分秒
|
|
|
+ dateDay: null,
|
|
|
+ //年月日
|
|
|
+ dateYear: null,
|
|
|
+ //周几
|
|
|
+ dateWeek: null,
|
|
|
+ //周几
|
|
|
+ weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
|
|
+ //轮播排行榜
|
|
|
+ config: {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '周口',
|
|
|
+ value: 55,
|
|
|
},
|
|
|
{
|
|
|
- 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: '任务'
|
|
|
+ name: '南阳',
|
|
|
+ value: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '西峡',
|
|
|
+ value: 78,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '驻马店',
|
|
|
+ value: 66,
|
|
|
},
|
|
|
{
|
|
|
- type: 'message',
|
|
|
- task: this.$t('homeIndex.message'),
|
|
|
- url: require('@/assets/newhome/xx01.png'),
|
|
|
- number: this.number.news,
|
|
|
- background: require('@/assets/newhome/xx.png'),
|
|
|
- remark: '消息'
|
|
|
+ name: '新乡',
|
|
|
+ value: 80,
|
|
|
},
|
|
|
{
|
|
|
- type: '1',
|
|
|
- task: this.$t('homeIndex.remind'),
|
|
|
- url: require('@/assets/newhome/tx01.png'),
|
|
|
- number: this.number.remind,
|
|
|
- background: require('@/assets/newhome/tx.png'),
|
|
|
- remark: '提醒'
|
|
|
+ name: '信阳',
|
|
|
+ value: 45,
|
|
|
},
|
|
|
{
|
|
|
- type: '2',
|
|
|
- task: this.$t('homeIndex.beyond'),
|
|
|
- url: require('@/assets/newhome/cq01.png'),
|
|
|
- number: this.number.overdue,
|
|
|
- background: require('@/assets/newhome/cq.png'),
|
|
|
- remark: '超期'
|
|
|
- }
|
|
|
- ]
|
|
|
+ name: '漯河',
|
|
|
+ value: 29,
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
- optionSingleHeightTime() {
|
|
|
- return {
|
|
|
- openWatch: true,
|
|
|
- limitMoveNum: -1, //启动无缝滚动最小数据量 this.dataList.length
|
|
|
- direction: 2,
|
|
|
- switchDelay: 1000
|
|
|
- }
|
|
|
+ //左侧饼图文字
|
|
|
+ numberData: [
|
|
|
+ {
|
|
|
+ number: {
|
|
|
+ number: 15,
|
|
|
+ },
|
|
|
+ text: '今日构建总量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: {
|
|
|
+ number: 1144,
|
|
|
+ },
|
|
|
+ text: '总共完成数量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: {
|
|
|
+ number: 361,
|
|
|
+ },
|
|
|
+ text: '正在编译数量',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ //左侧轮播表格配置项
|
|
|
+ board_info: {
|
|
|
+ header: ['人员', '月产量', '月合格率'],
|
|
|
+ data: [
|
|
|
+ ['张三', '10830', '90%'],
|
|
|
+ ['张四', '13500', '92%'],
|
|
|
+ ['张五', '10350', '97%'],
|
|
|
+ ['张六', '13300', '94%'],
|
|
|
+ ['张七', '12500', '95%'],
|
|
|
+ ['张八', '11500', '96%'],
|
|
|
+ ['张九', '12500', '89%'],
|
|
|
+ ['王六', '10360', '95%'],
|
|
|
+ ['王二', '10567', '91%'],
|
|
|
+ ['李四', '15721', '99%'],
|
|
|
+ ],
|
|
|
+ evenRowBGC: '#020308',
|
|
|
+ oddRowBGC: '#382B47',
|
|
|
+ headerBGC: '#020308',
|
|
|
},
|
|
|
- getLanguage() {
|
|
|
- return this.$store.getters.language
|
|
|
+ // 定义颜色
|
|
|
+ colorList: {
|
|
|
+ linearYtoG: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#f5b44d',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#28f8de',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ linearGtoB: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#43dfa2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#28f8de',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ linearBtoG: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#1c98e8',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#28f8de',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ areaBtoG: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(35,184,210,.2)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(35,184,210,0)',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
},
|
|
|
- isShowShipList() {
|
|
|
- return this.userSetting['shipMap'][0].showFlag && this.vesselBankFlag !== 'V' && this.permissionIf(
|
|
|
- 'map.mapManagement.view')
|
|
|
+ //锥形柱状图
|
|
|
+ cone: {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '周口',
|
|
|
+ value: 55,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '南阳',
|
|
|
+ value: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '西峡',
|
|
|
+ value: 71,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '驻马店',
|
|
|
+ value: 66,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '新乡',
|
|
|
+ value: 80,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '信阳',
|
|
|
+ value: 35,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '漯河',
|
|
|
+ value: 15,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ showValue: true,
|
|
|
},
|
|
|
-
|
|
|
+ }
|
|
|
},
|
|
|
- activated() {
|
|
|
- // var staffId=JSON.parse(localStorage.getItem('winseaview-userInfo')).content.staffId
|
|
|
- // if ('WebSocket' in window) {
|
|
|
- // if (process.env.NODE_ENV === 'production') {
|
|
|
- // this.websocket = new WebSocket('wss://www.zthymaoyi.com/wss/websocket/'+staffId )
|
|
|
- // }
|
|
|
- // else {
|
|
|
- // // this.websocket = new WebSocket('ws://192.168.1.115:8090/commonUser/api/onOpen?adminId=84f62127b7384dcdbaeaddfe460329fc' )
|
|
|
- // this.websocket = new WebSocket('ws://192.168.1.115:8080/websocket/'+staffId )
|
|
|
- // }
|
|
|
- // this.initWebSocket()
|
|
|
- // } else {
|
|
|
- // alert('当前浏览器不支持websocket')
|
|
|
- // }
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ //获取实时时间
|
|
|
+ this.timeFn();
|
|
|
+ //加载loading图
|
|
|
+ this.cancelLoading();
|
|
|
+ //中国地图
|
|
|
+ this.china_map();
|
|
|
+ //左侧玫瑰饼图
|
|
|
+ this.Rose_diagram();
|
|
|
+ //左侧柱状图
|
|
|
+ this.columnar();
|
|
|
+ //中间折线图
|
|
|
+ this.line_center_diagram();
|
|
|
+ //虚线柱状图
|
|
|
+ this.dotter_bar();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ //离开时删除计时器
|
|
|
+ clearInterval(this.timing);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //右上角当前日期时间显示：每一秒更新一次最新时间
|
|
|
+ timeFn() {
|
|
|
+ this.timing = setInterval(() => {
|
|
|
+ //获取当前时分秒
|
|
|
+ this.dateDay = formatTime(new Date(), 'HH: mm: ss');
|
|
|
+ //获取当前年月日
|
|
|
+ this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
|
|
|
+ //获取当前周几
|
|
|
+ this.dateWeek = this.weekday[new Date().getDay()];
|
|
|
+ }, 1000);
|
|
|
},
|
|
|
- async created() {
|
|
|
- //获取快捷路口列表
|
|
|
- this.getRouteList()
|
|
|
- // this.checkUserInfoDialog()
|
|
|
- // {
|
|
|
- this.timer = setInterval(this.getTime, 1000);
|
|
|
- this.timer1 = setInterval(this.flushData, 120000);
|
|
|
- // }
|
|
|
+ //loading图
|
|
|
+ cancelLoading() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.loading = false;
|
|
|
+ }, 500);
|
|
|
},
|
|
|
- beforeDestroy() {
|
|
|
- clearInterval(this.timer);
|
|
|
- if (this.timer) {
|
|
|
- clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
|
|
|
- }
|
|
|
- clearInterval(this.timer1);
|
|
|
- if (this.timer1) {
|
|
|
- clearInterval(this.timer1); // 在Vue实例销毁前，清除定时器
|
|
|
+ //中国地图
|
|
|
+ china_map() {
|
|
|
+ let mapChart = this.$echarts.init(document.getElementById('china-map')); //图表初始化，china-map是绑定的元素
|
|
|
+ window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
|
|
|
+ let series = []; //存放循环配置项
|
|
|
+ let res = []; //存放射线的起始点和结束点位置
|
|
|
+ let province = []; //存放有射线的省的名字，以此来拿到对应省份的坐标
|
|
|
+ //提前存好的所有省份坐标，用于后面根据名字拿到对应的左边
|
|
|
+ let chinaGeoCoordMap = {
|
|
|
+ 新疆: [86.9023, 41.148],
|
|
|
+ 西藏: [87.8695, 31.6846],
|
|
|
+ 内蒙古: [110.5977, 41.3408],
|
|
|
+ 青海: [95.2402, 35.4199],
|
|
|
+ 四川: [102.9199, 30.1904],
|
|
|
+ 黑龙江: [128.1445, 46.7156],
|
|
|
+ 甘肃: [102.7129, 38.166],
|
|
|
+ 云南: [101.0652, 24.6807],
|
|
|
+ 广西: [108.7813, 23.6426],
|
|
|
+ 湖南: [111.5332, 27.3779],
|
|
|
+ 陕西: [108.5996, 33.7396],
|
|
|
+ 广东: [113.8668, 22.8076],
|
|
|
+ 吉林: [126.1746, 43.5938],
|
|
|
+ 河北: [115.4004, 38.1688],
|
|
|
+ 湖北: [112.2363, 30.8572],
|
|
|
+ 贵州: [106.6113, 26.6385],
|
|
|
+ 山东: [118.2402, 36.2307],
|
|
|
+ 江西: [115.7156, 27.99],
|
|
|
+ 河南: [113.0668, 33.8818],
|
|
|
+ 辽宁: [123.0438, 41.0889],
|
|
|
+ 山西: [112.4121, 36.6611],
|
|
|
+ 安徽: [117.2461, 31.0361],
|
|
|
+ 福建: [118.3008, 25.9277],
|
|
|
+ 浙江: [120.498, 29.0918],
|
|
|
+ 江苏: [119.8586, 32.915],
|
|
|
+ 重庆: [107.7539, 29.8904],
|
|
|
+ 宁夏: [105.9961, 37.1096],
|
|
|
+ 海南: [109.9512, 19.2041],
|
|
|
+ 台湾: [120.8254, 23.5986],
|
|
|
+ 北京: [116.4551, 40.2539],
|
|
|
+ 天津: [117.4219, 39.4189],
|
|
|
+ 上海: [121.4648, 31.2891],
|
|
|
+ 香港: [114.6178, 22.3242],
|
|
|
+ 澳门: [113.5547, 21.6484],
|
|
|
+ };
|
|
|
+ //后台给的数据模拟
|
|
|
+ let lineData = [
|
|
|
+ {
|
|
|
+ val: 32, //数据
|
|
|
+ blat: [86.9023, 41.148], //发射点
|
|
|
+ elon: [87.8695, 31.6846], //接收点
|
|
|
+ bcitysim: '新疆', //发射省的名字
|
|
|
+ ecitysim: '西藏', //接收省的名字
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 31,
|
|
|
+ blat: [87.8695, 31.6846],
|
|
|
+ elon: [95.2402, 35.4199],
|
|
|
+ bcitysim: '西藏',
|
|
|
+ ecitysim: '青海',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [86.9023, 41.148],
|
|
|
+ elon: [95.2402, 35.4199],
|
|
|
+ bcitysim: '新疆',
|
|
|
+ ecitysim: '青海',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [116.4551, 40.2539],
|
|
|
+ elon: [119.8586, 32.915],
|
|
|
+ bcitysim: '北京',
|
|
|
+ ecitysim: '江苏',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [120.8254, 23.5986],
|
|
|
+ elon: [109.9512, 19.2041],
|
|
|
+ bcitysim: '台湾',
|
|
|
+ ecitysim: '海南',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [120.498, 29.0918],
|
|
|
+ elon: [115.7156, 27.99],
|
|
|
+ bcitysim: '浙江',
|
|
|
+ ecitysim: '江西',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [117.2461, 31.0361],
|
|
|
+ elon: [119.8586, 32.915],
|
|
|
+ bcitysim: '安徽',
|
|
|
+ ecitysim: '江苏',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [117.2461, 31.0361],
|
|
|
+ elon: [105.9961, 37.1096],
|
|
|
+ bcitysim: '安徽',
|
|
|
+ ecitysim: '宁夏',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [117.2461, 31.0361],
|
|
|
+ elon: [107.7539, 29.8904],
|
|
|
+ bcitysim: '安徽',
|
|
|
+ ecitysim: '重庆',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [117.2461, 31.0361],
|
|
|
+ elon: [123.0438, 41.0889],
|
|
|
+ bcitysim: '安徽',
|
|
|
+ ecitysim: '辽宁',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [119.8586, 32.915],
|
|
|
+ elon: [102.7129, 38.166],
|
|
|
+ bcitysim: '江苏',
|
|
|
+ ecitysim: '甘肃',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [119.8586, 32.915],
|
|
|
+ elon: [128.1445, 46.7156],
|
|
|
+ bcitysim: '江苏',
|
|
|
+ ecitysim: '黑龙江',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [119.8586, 32.915],
|
|
|
+ elon: [110.5977, 41.3408],
|
|
|
+ bcitysim: '江苏',
|
|
|
+ ecitysim: '内蒙古',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [119.8586, 32.915],
|
|
|
+ elon: [101.0652, 24.6807],
|
|
|
+ bcitysim: '江苏',
|
|
|
+ ecitysim: '云南',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [119.8586, 32.915],
|
|
|
+ elon: [86.9023, 41.148],
|
|
|
+ bcitysim: '江苏',
|
|
|
+ ecitysim: '新疆',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [86.9023, 41.148],
|
|
|
+ elon: [110.5977, 41.3408],
|
|
|
+ bcitysim: '新疆',
|
|
|
+ ecitysim: '内蒙古',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 33,
|
|
|
+ blat: [86.9023, 41.148],
|
|
|
+ elon: [102.9199, 30.1904],
|
|
|
+ bcitysim: '新疆',
|
|
|
+ ecitysim: '四川',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ //循环拿到处理好的数据
|
|
|
+ for (var i = 0; i < lineData.length; i++) {
|
|
|
+ province.push(lineData[i].bcitysim); //存进去每个省的名字
|
|
|
+ province.push(lineData[i].ecitysim); //存进去每个省的名字
|
|
|
+ res.push({
|
|
|
+ fromName: lineData[i].bcitysim, //发射的省名，保存用于弹框显示
|
|
|
+ toName: lineData[i].ecitysim, //接收的省名，保存用于弹框显示
|
|
|
+ coords: [
|
|
|
+ lineData[i].blat, //发射
|
|
|
+ lineData[i].elon, //接收
|
|
|
+ ],
|
|
|
+ count: lineData[i].val, //数据
|
|
|
+ });
|
|
|
}
|
|
|
- },
|
|
|
- async mounted() {
|
|
|
- var staffId = JSON.parse(localStorage.getItem('winseaview-userInfo')).content.staffId
|
|
|
- // getAdminId().toPromise().then(response => {console.log(11111)})
|
|
|
- this.loading = false
|
|
|
- // WebSocket
|
|
|
- // this.$store.dispatch('setAdminId', response.data.data)
|
|
|
- if ('WebSocket' in window) {
|
|
|
- if (process.env.NODE_ENV === 'production') {
|
|
|
- this.websocket = new WebSocket('wss://www.zthymaoyi.com/wss/websocket/' + staffId)
|
|
|
- } else {
|
|
|
- // this.websocket = new WebSocket('ws://192.168.1.115:8090/commonUser/api/onOpen?adminId=84f62127b7384dcdbaeaddfe460329fc' )
|
|
|
- this.websocket = new WebSocket('ws://192.168.1.119:9100/websocket/' + staffId)
|
|
|
+ let index_data = new Set(province); //把省的名字去重
|
|
|
+ let data_res = []; //定义一个新的变量存放省的坐标
|
|
|
+
|
|
|
+ //注意这里一定要用name和value的形式。不是这个格式的散点图显示不出来
|
|
|
+ index_data.forEach((item) => {
|
|
|
+ data_res.push({
|
|
|
+ name: item, //每个省的名字
|
|
|
+ value: chinaGeoCoordMap[item], //每个省的坐标
|
|
|
+ });
|
|
|
+ });
|
|
|
+ //循环往series内添加配置项
|
|
|
+ series.push(
|
|
|
+ {
|
|
|
+ //射线效果图层
|
|
|
+ type: 'lines', //类型：射线
|
|
|
+ zlevel: 1, //类似图层效果
|
|
|
+ effect: {
|
|
|
+ show: true, //是否显示图标
|
|
|
+ symbol: 'arrow', //箭头图标
|
|
|
+ symbolSize: 5, //图标大小
|
|
|
+ trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ normal: {
|
|
|
+ color: '#00A0FF',
|
|
|
+ width: 1, //尾迹线条宽度
|
|
|
+ opacity: 0.5, //尾迹线条透明度
|
|
|
+ curveness: 0.1, //尾迹线条曲直度
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //提示框信息
|
|
|
+ tooltip: {
|
|
|
+ formatter: function (param) {
|
|
|
+ return (
|
|
|
+ param.data.fromName +
|
|
|
+ '>' +
|
|
|
+ param.data.toName +
|
|
|
+ '<br>数量：' +
|
|
|
+ param.data.count
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: res, //拿到射线的起始点和结束点
|
|
|
+ },
|
|
|
+ //散点图
|
|
|
+ // {
|
|
|
+ // type: "effectScatter",//散点图
|
|
|
+ // coordinateSystem: "geo",//这个不能删，删了不显示
|
|
|
+ // zlevel: 1,
|
|
|
+ // rippleEffect: {
|
|
|
+ // //涟漪特效
|
|
|
+ // period: 4, //动画时间，值越小速度越快
|
|
|
+ // brushType: "stroke", //波纹绘制方式 stroke, fill
|
|
|
+ // scale: 4, //波纹圆环最大限制，值越大波纹越大
|
|
|
+ // },
|
|
|
+ // //设置文字部分
|
|
|
+ // label: {
|
|
|
+ // normal: {
|
|
|
+ // show: true, //省份名显示隐藏
|
|
|
+ // position: "right", //省份名显示位置
|
|
|
+ // offset: [5, 0], //省份名偏移设置
|
|
|
+ // formatter: function (params) {
|
|
|
+ // //圆环显示省份名
|
|
|
+ // return params.name; //这个名字是根据data中的name来显示的
|
|
|
+ // },
|
|
|
+ // fontSize: 12,//文字大小
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // show: true,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // symbol: "circle",//散点图
|
|
|
+ // symbolSize: 5,//散点大小
|
|
|
+ // itemStyle: {//散点样式
|
|
|
+ // normal: {
|
|
|
+ // show: true,
|
|
|
+ // color: "#fff",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // data: data_res, //处理好后的散点图坐标数组
|
|
|
+ // },
|
|
|
+ //点击高亮
|
|
|
+ {
|
|
|
+ type: 'map',
|
|
|
+ mapType: 'china',
|
|
|
+ zlevel: 1,
|
|
|
+ roam: true,
|
|
|
+ geoIndex: 0,
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: '#00196d',
|
|
|
+ borderColor: '#0a53e9',
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: true,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true, // 是否显示对应地名
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: '#00196d',
|
|
|
+ borderColor: '#0a53e9',
|
|
|
+ },
|
|
|
+ },
|
|
|
}
|
|
|
- this.initWebSocket()
|
|
|
- } else {
|
|
|
- alert('当前浏览器不支持websocket')
|
|
|
- }
|
|
|
-
|
|
|
- let that = this
|
|
|
- this.getChartsData()
|
|
|
- // 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);
|
|
|
- // }
|
|
|
-
|
|
|
- // }).catch(err =>{
|
|
|
- // console.log(err);
|
|
|
- // });
|
|
|
- // }, 2000);
|
|
|
- //获取新闻列表
|
|
|
- // this.getNewList()
|
|
|
- gChartsData({
|
|
|
- compId: localStorage.getItem('ws-pf_compId'),
|
|
|
- loadingstatus: 1,
|
|
|
- seachMoth: '2022'
|
|
|
- }).toPromise().then(res => {
|
|
|
- console.log('··············', res)
|
|
|
- this.chartsData = res
|
|
|
- this.carCount1 = res[6].biViewInfoList[0].count
|
|
|
- this.carCount2 = res[6].biViewInfoList[1].count
|
|
|
- this.carCount3 = res[6].biViewInfoList[2].count
|
|
|
- this.physicalInventory = Number(res[7].biViewInfoList[0].count).toFixed(2)
|
|
|
- this.procurementPending= Number(res[7].biViewInfoList[1].count).toFixed(2)
|
|
|
- this.salesPending = Number(res[7].biViewInfoList[2].count).toFixed(2)
|
|
|
- this.position = Number(Number(this.physicalInventory)+Number(this.procurementPending) - Number(this.salesPending)).toFixed(2)
|
|
|
- this.totalReserves = res[8].biViewInfoList
|
|
|
- this.mapInfo = res[9]
|
|
|
- console.log(res)
|
|
|
- this.initCharts()
|
|
|
- })
|
|
|
- // 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
|
|
|
- // }
|
|
|
- // }
|
|
|
+ );
|
|
|
+ //配置
|
|
|
+ let option = {
|
|
|
+ //title可要可不要
|
|
|
+
|
|
|
+ // title: {
|
|
|
+ // text: "查查的地图",
|
|
|
+ // textStyle: {
|
|
|
+ // color: "#ffffff",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ selected: {},
|
|
|
+ x: 'left',
|
|
|
+ orient: 'vertical',
|
|
|
+ textStyle: {
|
|
|
+ color: 'white',
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ //鼠标移上去的弹框
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ //geo：这是重点
|
|
|
+ geo: {
|
|
|
+ map: 'china', //中国地图
|
|
|
+ zoom: 1.2, //缩放倍数
|
|
|
+ roam: false, //是否允许缩放和拖拽地图
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true, // 是否显示省份名字，现在是隐藏的状态，因为和散点图的名字重叠了。如果需要就true
|
|
|
+ textStyle: {
|
|
|
+ //名字的样式
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //地图样式
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: '#293171', //地图边框颜色
|
|
|
+ borderWidth: '2', //地图边框粗细
|
|
|
+ areaColor: '#0A0F33', //地图背景色
|
|
|
+ },
|
|
|
+ //省份地图阴影
|
|
|
+ emphasis: {
|
|
|
+ areaColor: null,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowOffsetY: 0,
|
|
|
+ shadowBlur: 20,
|
|
|
+ borderWidth: 0,
|
|
|
+ shadowColor: '#fff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: series, //图表配置
|
|
|
+ };
|
|
|
+ mapChart.setOption(option); //生成图表
|
|
|
},
|
|
|
- watch: {
|
|
|
- // getLanguage: function () {
|
|
|
- // this.getShipList()
|
|
|
- // }
|
|
|
+ //玫瑰饼图
|
|
|
+ Rose_diagram() {
|
|
|
+ let mapChart = this.$echarts.init(
|
|
|
+ document.getElementById('Rose_diagram')
|
|
|
+ ); //图表初始化，china-map是绑定的元素
|
|
|
+ window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
|
|
|
+ let option = {
|
|
|
+ color: [
|
|
|
+ '#37a2da',
|
|
|
+ '#32c5e9',
|
|
|
+ '#9fe6b8',
|
|
|
+ '#ffdb5c',
|
|
|
+ '#ff9f7f',
|
|
|
+ '#fb7293',
|
|
|
+ '#e7bcf3',
|
|
|
+ '#8378ea',
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)',
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ calculable: true,
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ icon: 'circle',
|
|
|
+ bottom: 0,
|
|
|
+ x: 'center',
|
|
|
+ data: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6'],
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '通过率统计',
|
|
|
+ type: 'pie',
|
|
|
+ radius: [10, 50],
|
|
|
+ roseType: 'area',
|
|
|
+ center: ['50%', '40%'],
|
|
|
+ data: [
|
|
|
+ { value: 10, name: 'data1' },
|
|
|
+ { value: 5, name: 'data2' },
|
|
|
+ { value: 15, name: 'data3' },
|
|
|
+ { value: 25, name: 'data4' },
|
|
|
+ { value: 20, name: 'data5' },
|
|
|
+ { value: 35, name: 'data6' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ mapChart.setOption(option); //生成图表
|
|
|
},
|
|
|
- methods: {
|
|
|
- ...mapActions('user', ['toSetShow', 'changeVesslBank']),
|
|
|
- changeSwitch(e){
|
|
|
- debugger
|
|
|
- console.log('eee')
|
|
|
- console.log(e)
|
|
|
- this.isSHow = e
|
|
|
- this.initCharts()
|
|
|
- },
|
|
|
- flushData(){
|
|
|
- gChartsData({
|
|
|
- compId: localStorage.getItem('ws-pf_compId'),
|
|
|
- loadingstatus: 1,
|
|
|
- seachMoth: '2022'
|
|
|
- }).toPromise().then(res => {
|
|
|
- console.log('··············', res)
|
|
|
- // this.chartsData = res
|
|
|
- this.carCount1 = res[6].biViewInfoList[0].count
|
|
|
- this.carCount2 = res[6].biViewInfoList[1].count
|
|
|
- this.carCount3 = res[6].biViewInfoList[2].count
|
|
|
- // this.physicalInventory = Number(res[7].biViewInfoList[0].count).toFixed(2)
|
|
|
- // this.procurementPending= Number(res[7].biViewInfoList[1].count).toFixed(2)
|
|
|
- // this.salesPending = Number(res[7].biViewInfoList[2].count).toFixed(2)
|
|
|
- // this.position = Number(Number(this.physicalInventory)+Number(this.procurementPending) - Number(this.salesPending)).toFixed(2)
|
|
|
- // this.totalReserves = res[8].biViewInfoList
|
|
|
- // this.mapInfo = res[9]
|
|
|
- // console.log(res)
|
|
|
- // this.initCharts()
|
|
|
- })
|
|
|
- },
|
|
|
- getChartsData() {
|
|
|
- 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
|
|
|
- })
|
|
|
- },
|
|
|
- initWebSocket() {
|
|
|
- console.log(this.websocket)
|
|
|
- // 连接错误
|
|
|
- this.websocket.onerror = this.setErrorMessage
|
|
|
- // 连接成功
|
|
|
- this.websocket.onopen = this.setOnopenMessage
|
|
|
-
|
|
|
- // 收到消息的回调
|
|
|
- this.websocket.onmessage = this.setOnmessageMessage
|
|
|
-
|
|
|
- // 连接关闭的回调
|
|
|
- this.websocket.onclose = this.setOncloseMessage
|
|
|
-
|
|
|
- // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
|
|
- window.onbeforeunload = this.onbeforeunload
|
|
|
- },
|
|
|
- setErrorMessage() {
|
|
|
- console.log('WebSocket连接发生错误 状态码：' + this.websocket.readyState)
|
|
|
- },
|
|
|
- setOnopenMessage() {
|
|
|
- // console.log(this.websocket)
|
|
|
- console.log('WebSocket连接成功 状态码：' + this.websocket.readyState)
|
|
|
- },
|
|
|
- setOnmessageMessage(event) {
|
|
|
- // console.log(3333)
|
|
|
- // 根据服务器推送的消息做自己的业务处理
|
|
|
- console.log('服务端返回：' + event.data)
|
|
|
- var msg = event.data.split('$')
|
|
|
- var that = this
|
|
|
- this.$notify.warning({
|
|
|
- title: '新消息提醒',
|
|
|
- message: msg[0],
|
|
|
- duration: 0,
|
|
|
- onClick() {
|
|
|
- that.$router.push({
|
|
|
- path: msg[1]
|
|
|
- }) // 你要跳转的路由 还可以传参 当然也可以通过其他方式跳转
|
|
|
- }
|
|
|
- })
|
|
|
- var currentPage = that.$router.history.current.path
|
|
|
- that.$router.push({
|
|
|
- path: '/'
|
|
|
- })
|
|
|
- that.$router.push({
|
|
|
- path: currentPage
|
|
|
- })
|
|
|
- },
|
|
|
- setOncloseMessage() {
|
|
|
- // console.log(this.websocket)
|
|
|
- console.log('WebSocket连接关闭 状态码：' + this.websocket.readyState)
|
|
|
- },
|
|
|
- //跳转
|
|
|
- contract(index) {
|
|
|
- if (index == 0) {
|
|
|
- this.$router.push({
|
|
|
- name: 'buyContract'
|
|
|
- })
|
|
|
- } else if (index == 1) {
|
|
|
- this.$router.push({
|
|
|
- name: 'salesContract'
|
|
|
- })
|
|
|
- } else if (index == 3) {
|
|
|
- this.$router.push({
|
|
|
- name: 'warehouseManagementList'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- 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 roseCharts = document.getElementsByClassName('roseChart');
|
|
|
- for (let i = 0; i < roseCharts.length; i++) {
|
|
|
- let myChart = app.$echarts.init(roseCharts[i]);
|
|
|
- let color = []
|
|
|
- let data = []
|
|
|
- let text = ''
|
|
|
- let formatter = ''
|
|
|
- let graphicText = ''
|
|
|
- switch (i) {
|
|
|
- case 0:
|
|
|
- // 圆环图各环节的颜色
|
|
|
- color = ['#75d1f4', '#3a3b40'];
|
|
|
- // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
- // if(this.isSHow){
|
|
|
- // data = [{
|
|
|
- // name: '已完成量',
|
|
|
- // value: '***',
|
|
|
- // type: '采购合同'
|
|
|
- // }, {
|
|
|
- // name: '待完成量',
|
|
|
- // value: '***',
|
|
|
- // type: '采购合同'
|
|
|
- // }]
|
|
|
- // text = '合同总量'
|
|
|
- // graphicText = ' \n\n总量合计\n\n***'
|
|
|
- // }else{
|
|
|
- data = [{
|
|
|
- name: '已完成量',
|
|
|
- value: Number(this.chartsData[i].biViewInfoList[0].count).toFixed(2),
|
|
|
- type: '采购合同'
|
|
|
- }, {
|
|
|
- name: '待完成量',
|
|
|
- value: Number(this.chartsData[i].biViewInfoList[1].count).toFixed(2),
|
|
|
- type: '采购合同'
|
|
|
- }]
|
|
|
- text = '合同总量'
|
|
|
- formatter = '{b}{c}吨 </br> 占比{d}%'
|
|
|
- graphicText = ' \n\n总量合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
|
|
|
- // }
|
|
|
-
|
|
|
-
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- // 圆环图各环节的颜色
|
|
|
- color = ['#247ef4', '#3a3b40'];
|
|
|
- // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
- data = [{
|
|
|
- name: '已开票',
|
|
|
- value: Number((this.chartsData[i].biViewInfoList[0].count)/10000).toFixed(2),
|
|
|
- type: '采购合同'
|
|
|
- }, {
|
|
|
- name: '待开票',
|
|
|
- value: Number((this.chartsData[i].biViewInfoList[1].count)/10000).toFixed(2),
|
|
|
- type: '采购合同'
|
|
|
- }]
|
|
|
- text = '合同总额'
|
|
|
- formatter = '{b}{c}万 </br> 占比{d}%'
|
|
|
- graphicText = ' \n\n开票合计\n\n' + Number((this.chartsData[i].total)/10000).toFixed(2)
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- // 圆环图各环节的颜色
|
|
|
- color = ['#f49f23', '#3a3b40'];
|
|
|
- // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
- data = [{
|
|
|
- name: '已付款',
|
|
|
- value: Number((this.chartsData[i].biViewInfoList[0].count/10000)).toFixed(2),
|
|
|
- type: '采购合同'
|
|
|
- }, {
|
|
|
- name: '待付款',
|
|
|
- value: Number((this.chartsData[i].biViewInfoList[1].count)/10000).toFixed(2),
|
|
|
- type: '采购合同'
|
|
|
- }]
|
|
|
- text = '合同总额'
|
|
|
- formatter = '{b}{c}万 </br> 占比{d}%'
|
|
|
- graphicText = ' \n\n付款合计\n\n' + Number((this.chartsData[i].total)/10000).toFixed(2)
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- // 圆环图各环节的颜色
|
|
|
- color = ['#75d1f4', '#3a3b40'];
|
|
|
- // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
- data = [{
|
|
|
- name: '已完成量',
|
|
|
- value: Number(this.chartsData[i].biViewInfoList[0].count).toFixed(2),
|
|
|
- type: '销售合同'
|
|
|
- }, {
|
|
|
- name: '待完成量',
|
|
|
- value: Number(this.chartsData[i].biViewInfoList[1].count).toFixed(2),
|
|
|
- }]
|
|
|
- text = '合同总量'
|
|
|
- formatter = '{b}{c}吨 </br> 占比{d}%'
|
|
|
- graphicText = ' \n\n总量合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- // 圆环图各环节的颜色
|
|
|
- color = ['#247ef4', '#3a3b40'];
|
|
|
- // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
- data = [{
|
|
|
- name: '已开票',
|
|
|
- value: Number((this.chartsData[i].biViewInfoList[0].count)/10000).toFixed(2),
|
|
|
- }, {
|
|
|
- name: '待开票',
|
|
|
- value: Number((this.chartsData[i].biViewInfoList[1].count)/10000).toFixed(2),
|
|
|
- }]
|
|
|
- text = '合同总额'
|
|
|
- formatter = '{b}{c}万 </br> 占比{d}%'
|
|
|
- graphicText = ' \n\n开票合计\n\n' + Number((this.chartsData[i].total)/10000).toFixed(2)
|
|
|
- break;
|
|
|
- case 5:
|
|
|
- // 圆环图各环节的颜色
|
|
|
- color = ['#f49f23', '#3a3b40'];
|
|
|
- // 圆环图各环节的名称和值(系列中各数据项的名称和值)
|
|
|
- data = [{
|
|
|
- name: '已付款',
|
|
|
- value: Number((this.chartsData[i].biViewInfoList[0].count)/10000).toFixed(2),
|
|
|
- }, {
|
|
|
- name: '待付款',
|
|
|
- value: Number((this.chartsData[i].biViewInfoList[1].count)/10000).toFixed(2),
|
|
|
- }]
|
|
|
- text = '合同总额'
|
|
|
- formatter = '{b}{c}万 </br> 占比{d}%'
|
|
|
- graphicText = ' \n\n付款合计\n\n' + Number((this.chartsData[i].total)/10000).toFixed(2)
|
|
|
- break;
|
|
|
- }
|
|
|
- myChart.setOption({
|
|
|
- title: [{
|
|
|
- text: 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'
|
|
|
+ //柱状图
|
|
|
+ columnar() {
|
|
|
+ let mapChart = this.$echarts.init(document.getElementById('columnar')); //图表初始化，china-map是绑定的元素
|
|
|
+ window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: 'rgba(255,255,255,0.1)',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ backgroundColor: '#7B7DDC',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['已贯通', '计划贯通', '贯通率'],
|
|
|
+ textStyle: {
|
|
|
+ color: '#B4B4B4',
|
|
|
+ },
|
|
|
+ top: '0%',
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ x: '8%',
|
|
|
+ width: '95%',
|
|
|
+ y: '4%',
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: [
|
|
|
+ '市区',
|
|
|
+ '万州',
|
|
|
+ '江北',
|
|
|
+ '南岸',
|
|
|
+ '北碚',
|
|
|
+ '綦南',
|
|
|
+ '长寿',
|
|
|
+ '永川',
|
|
|
+ '璧山',
|
|
|
+ '江津',
|
|
|
+ '城口',
|
|
|
+ '大足',
|
|
|
+ '垫江',
|
|
|
+ '丰都',
|
|
|
+ '奉节',
|
|
|
+ '合川',
|
|
|
+ '江津区',
|
|
|
+ '开州',
|
|
|
+ '南川',
|
|
|
+ '彭水',
|
|
|
+ '黔江',
|
|
|
+ '石柱',
|
|
|
+ '铜梁',
|
|
|
+ '潼南',
|
|
|
+ '巫山',
|
|
|
+ '巫溪',
|
|
|
+ '武隆',
|
|
|
+ '秀山',
|
|
|
+ '酉阳',
|
|
|
+ '云阳',
|
|
|
+ '忠县',
|
|
|
+ '川东',
|
|
|
+ '检修',
|
|
|
+ ],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#B4B4B4',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ splitLine: { show: false },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#B4B4B4',
|
|
|
},
|
|
|
- data: data
|
|
|
- }],
|
|
|
-
|
|
|
- // 提示框
|
|
|
- tooltip: {
|
|
|
- show: true, // 是否显示提示框
|
|
|
- formatter: formatter // 提示框显示内容,此处{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: graphicText, // 文本块文字。可以使用 \n 来换行。[ default: '' ]
|
|
|
- fill: '#fff', // 填充色。
|
|
|
- fontSize: 16, // 字体大小
|
|
|
- fontWeight: 'bold' // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
|
|
|
- }
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} ',
|
|
|
},
|
|
|
-
|
|
|
- // 系列列表
|
|
|
- series: [{
|
|
|
- name: '', // 系列名称
|
|
|
- type: 'pie', // 系列类型
|
|
|
- center: ['50%', '55%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
|
|
|
- radius: ['45%', '55%'], // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
|
|
|
- hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
|
|
|
- color: color, // 圆环图的颜色
|
|
|
- label: { // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
|
|
|
- normal: {
|
|
|
- show: true, // 是否显示标签[ default: false ]
|
|
|
- position: 'outside', // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
|
|
|
- formatter: '{c}', // 标签内容
|
|
|
- color: '#d5d5d6',
|
|
|
- fontSize: 16,
|
|
|
- }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '已贯通',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 10,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: 5,
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: '#956FD4' },
|
|
|
+ { offset: 1, color: '#3EACE5' },
|
|
|
+ ]),
|
|
|
},
|
|
|
- labelLine: { // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
|
|
|
- normal: {
|
|
|
- show: true, // 是否显示视觉引导线。
|
|
|
- length: 15, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
|
|
|
- length2: 10, // 视觉引导项第二段的长度。
|
|
|
- lineStyle: { // 视觉引导线的样式
|
|
|
- //color: '#000',
|
|
|
- //width: 1
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 46, 50, 55, 650, 75, 85, 99, 125, 140, 215, 232, 244, 252, 333,
|
|
|
+ 46, 50, 55, 65, 75, 85, 99, 225, 140, 215, 85, 99, 125, 140, 215,
|
|
|
+ 232, 244, 252, 75,
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '计划贯通',
|
|
|
+ type: 'bar',
|
|
|
+ barGap: '-100%',
|
|
|
+ barWidth: 10,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: 5,
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: 'rgba(156,107,211,0.8)' },
|
|
|
+ { offset: 0.2, color: 'rgba(156,107,211,0.5)' },
|
|
|
+ { offset: 1, color: 'rgba(156,107,211,0.2)' },
|
|
|
+ ]),
|
|
|
},
|
|
|
- data: data // 系列中的数据内容数组。
|
|
|
- }]
|
|
|
- })
|
|
|
- myChart.off('click');
|
|
|
- myChart.on('click', function(params) {
|
|
|
- // var a = params.dataIndex
|
|
|
- // console.log(params, '我被点击了');
|
|
|
- // app.dialogVisible = true
|
|
|
- return
|
|
|
- })
|
|
|
- }
|
|
|
- console.log(this.totalReserves)
|
|
|
- let _x = []
|
|
|
- let _y = []
|
|
|
- for (let i = 0; i < this.totalReserves.length; i++) {
|
|
|
- _x.push(this.totalReserves[i].name)
|
|
|
- var a = Number(this.totalReserves[i].count).toFixed(2)
|
|
|
- _y.push(a)
|
|
|
- }
|
|
|
-
|
|
|
- // 柱状图
|
|
|
- let myChart7 = app.$echarts.init(this.$refs.myEchart7);
|
|
|
- var zoption = {
|
|
|
- grid: {
|
|
|
- left: '0',
|
|
|
- right: '0',
|
|
|
- bottom: '0',
|
|
|
- top: '30',
|
|
|
- containLabel: true
|
|
|
+ },
|
|
|
+ z: -12,
|
|
|
+ data: [
|
|
|
+ 180, 207, 240, 283, 328, 360, 398, 447, 484, 504, 560, 626, 595,
|
|
|
+ 675, 180, 207, 240, 283, 328, 360, 398, 447, 484, 504, 360, 398,
|
|
|
+ 447, 484, 504, 500, 326, 495, 328,
|
|
|
+ ],
|
|
|
},
|
|
|
- // --- 提示框 ----
|
|
|
- tooltip: {
|
|
|
- show: true, // 是否显示提示框，默认为true
|
|
|
- trigger: 'item', // 数据项图形触发
|
|
|
- axisPointer: { // 指示样式
|
|
|
- type: 'shadow',
|
|
|
- axis: 'auto'
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ mapChart.setOption(option); //生成图表
|
|
|
+ },
|
|
|
+ //折线图
|
|
|
+ line_center_diagram() {
|
|
|
+ let mapChart = this.$echarts.init(
|
|
|
+ document.getElementById('line_center_diagram')
|
|
|
+ ); //图表初始化，china-map是绑定的元素
|
|
|
+ window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
|
|
|
+ let option = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
+ position: 'bottom',
|
|
|
+ axisLine: true,
|
|
|
+ axisLabel: {
|
|
|
+ color: 'rgba(255,255,255,.8)',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '年度生产量',
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameGap: 24,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: 'rgba(255,255,255,.5)',
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ splitNumber: 4,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ opacity: 0,
|
|
|
},
|
|
|
- padding: 5,
|
|
|
- textStyle: { // 提示框内容的样式
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
},
|
|
|
-
|
|
|
- // ------ X轴 ------
|
|
|
- xAxis: {
|
|
|
-
|
|
|
- axisLabel: { // 坐标轴标签
|
|
|
- show: true, // 是否显示
|
|
|
- inside: false, // 是否朝内
|
|
|
- rotate: 0, // 旋转角度
|
|
|
- margin: 10, // 刻度标签与轴线之间的距离
|
|
|
- color: '#666', // 默认取轴线的颜色
|
|
|
- interval: 0,
|
|
|
- rotate: 40
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ opacity: 0.1,
|
|
|
},
|
|
|
-
|
|
|
- splitArea: { // 网格区域
|
|
|
- show: false // 是否显示，默认为false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: 'rgba(255,255,255,.8)',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 50,
|
|
|
+ right: 10,
|
|
|
+ bottom: 25,
|
|
|
+ top: '18%',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'emptyCircle',
|
|
|
+ symbolSize: 8,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //线的颜色样式
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: this.colorList.linearBtoG,
|
|
|
+ width: 3,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //填充颜色样式
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: this.colorList.areaBtoG,
|
|
|
+ },
|
|
|
},
|
|
|
- data: _x
|
|
|
},
|
|
|
- // ------ y轴 ----------
|
|
|
- yAxis: {
|
|
|
-
|
|
|
- axisLine: { // 坐标轴 轴线
|
|
|
- show: false, // 是否显示
|
|
|
-
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ mapChart.setOption(option); //生成图表
|
|
|
+ },
|
|
|
+ //右侧虚线柱状图图
|
|
|
+ dotter_bar() {
|
|
|
+ let mapChart = this.$echarts.init(document.getElementById('dotter_bar')); //图表初始化，china-map是绑定的元素
|
|
|
+ window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
|
|
|
+ // Generate data
|
|
|
+ let category = [];
|
|
|
+ let dottedBase = +new Date();
|
|
|
+ let lineData = [];
|
|
|
+ let barData = [];
|
|
|
+ for (let i = 0; i < 20; i++) {
|
|
|
+ let date = new Date((dottedBase += 3600 * 24 * 1000));
|
|
|
+ category.push(
|
|
|
+ [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
|
|
|
+ );
|
|
|
+ let b = Math.random() * 200;
|
|
|
+ let d = Math.random() * 200;
|
|
|
+ barData.push(b);
|
|
|
+ lineData.push(d + b);
|
|
|
+ }
|
|
|
+ // option
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 50,
|
|
|
+ right: 10,
|
|
|
+ bottom: 25,
|
|
|
+ top: '18%',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['line', 'bar'],
|
|
|
+ textStyle: {
|
|
|
+ color: '#ccc',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: category,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ccc',
|
|
|
},
|
|
|
-
|
|
|
- axisLabel: { // 坐标轴的标签
|
|
|
- show: true, // 是否显示
|
|
|
- inside: false, // 是否朝内
|
|
|
- rotate: 0, // 旋转角度
|
|
|
- margin: 8, // 刻度标签与轴线之间的距离
|
|
|
- color: '#666', // 默认轴线的颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ splitLine: { show: false },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ccc',
|
|
|
},
|
|
|
- splitLine: { // gird 区域中的分割线
|
|
|
- show: true, // 是否显示
|
|
|
- lineStyle: {
|
|
|
- color: '#666',
|
|
|
- width: 1,
|
|
|
- type: 'dashed'
|
|
|
- }
|
|
|
- }
|
|
|
},
|
|
|
- // ------- 内容数据 -------
|
|
|
- series: [{
|
|
|
- name: '储量', // 序列名称
|
|
|
- type: 'bar', // 类型
|
|
|
- legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
|
|
|
- // label: { // 图形上的文本标签
|
|
|
- // show: false,
|
|
|
- // position: 'insideTop', // 相对位置
|
|
|
- // rotate: 0, // 旋转角度
|
|
|
- // color: '#eee'
|
|
|
- // },
|
|
|
- itemStyle: { // 图形的形状
|
|
|
- color: '#3779fd'
|
|
|
- // barBorderRadius: [18, 18, 0 ,0]
|
|
|
-
|
|
|
-
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'line',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ showAllSymbol: true,
|
|
|
+ symbol: 'emptyCircle',
|
|
|
+ symbolSize: 15,
|
|
|
+ data: lineData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'bar',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 10,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 5,
|
|
|
+ // color: "#14c8d4",
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: '#14c8d4' },
|
|
|
+ { offset: 1, color: '#43eec6' },
|
|
|
+ ]),
|
|
|
},
|
|
|
- barWidth: 20, // 柱形的宽度
|
|
|
- barCategoryGap: '20%', // 柱形的间距
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top',
|
|
|
- color: '#b0b1b3'
|
|
|
+ data: barData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'line',
|
|
|
+ type: 'bar',
|
|
|
+ barGap: '-100%',
|
|
|
+ barWidth: 10,
|
|
|
+ itemStyle: {
|
|
|
+ // color: "rgba(20,200,212,0.5)",
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: 'rgba(20,200,212,0.5)' },
|
|
|
+ { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
|
|
|
+ { offset: 1, color: 'rgba(20,200,212,0)' },
|
|
|
+ ]),
|
|
|
},
|
|
|
- data: _y
|
|
|
- }]
|
|
|
- };
|
|
|
- myChart7.setOption(zoption)
|
|
|
- },
|
|
|
- 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
|
|
|
+ z: -12,
|
|
|
+ data: lineData,
|
|
|
},
|
|
|
- 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.trialNotExpired = true
|
|
|
- localStorage.setItem('isShowTryUserDialog', '1')
|
|
|
- }
|
|
|
- },
|
|
|
- trialNotExpiredClose() {
|
|
|
- this.trialNotExpired = false
|
|
|
- },
|
|
|
- //第一次登陆的弹窗
|
|
|
- successfulDialogClose() {
|
|
|
- this.successfulDialog = false
|
|
|
- },
|
|
|
- initShipMap() {
|
|
|
- var options = {
|
|
|
- ak: 'c0ed286f357b7f4c7312476637a7ab04',
|
|
|
- // 初始中心点坐标
|
|
|
- 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')
|
|
|
+ {
|
|
|
+ name: 'dotted',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbol: 'rect',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#0f375f',
|
|
|
+ },
|
|
|
+ symbolRepeat: true,
|
|
|
+ symbolSize: [12, 4],
|
|
|
+ symbolMargin: 1,
|
|
|
+ z: -10,
|
|
|
+ data: lineData,
|
|
|
},
|
|
|
- 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
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- //获取新闻
|
|
|
- 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')
|
|
|
- // }
|
|
|
- // // 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)
|
|
|
- }
|
|
|
- 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
|
|
|
- }
|
|
|
- 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
|
|
|
- }
|
|
|
- await port.close();
|
|
|
- } else {
|
|
|
- console.log('the Web Serial API is not supported.', navigator);
|
|
|
- }
|
|
|
- },
|
|
|
- async closePort() {
|
|
|
- console.log('closePort');
|
|
|
- this.reader.cancel()
|
|
|
- }
|
|
|
- }
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ mapChart.setOption(option); //生成图表
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .home {
|
|
|
- padding: 10px;
|
|
|
- overflow-y: auto;
|
|
|
- // background-color: #eee;
|
|
|
+* {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style-type: none;
|
|
|
+ outline: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+html {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+body {
|
|
|
+ font-family: Arial, Helvetica, sans-serif;
|
|
|
+ line-height: 1.2em;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+a {
|
|
|
+ color: #343440;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+//页面样式部分！！！！
|
|
|
+#index {
|
|
|
+ color: #d3d6dd;
|
|
|
+ // width: 100%;
|
|
|
+ // height: calc(100% - 60px);
|
|
|
+ width: 1920px;
|
|
|
+ height: 1080px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ transform-origin: left top;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #2a2a2a;
|
|
|
+ .bg {
|
|
|
+ //整体页面背景
|
|
|
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;
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh - 60px);
|
|
|
-
|
|
|
- .body-middle-left {
|
|
|
- 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;
|
|
|
- }
|
|
|
-
|
|
|
- .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%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;*/
|
|
|
- /*}*/
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ height: 100%;
|
|
|
+ padding: 16px 16px 0 16px;
|
|
|
+ // background-image: url("../assets/pageBg.png"); //背景图
|
|
|
+ background-size: cover; //背景尺寸
|
|
|
+ background-position: center center; //背景位置
|
|
|
}
|
|
|
-
|
|
|
- .el-dropdown-menu {
|
|
|
- margin-top: -20px !important;
|
|
|
- /*left: 1872px !important;*/
|
|
|
+ //顶部右边装饰效果
|
|
|
+ .title_left {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
}
|
|
|
-
|
|
|
- .seamless-warp {
|
|
|
- // width: 100%;
|
|
|
+ //顶部左边装饰效果
|
|
|
+ .title_right {
|
|
|
width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- margin-top: 10px;
|
|
|
+ height: 50px;
|
|
|
+ margin-top: 18px;
|
|
|
}
|
|
|
-
|
|
|
- .home-tzthList:nth-of-type(3) {
|
|
|
- border: none;
|
|
|
+ //顶部中间装饰效果
|
|
|
+ .title_center {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
}
|
|
|
-
|
|
|
- .home-tzthList {
|
|
|
- display: flex;
|
|
|
- padding: 10px;
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
-
|
|
|
- .home-tzthList-type {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 28px;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ //顶部中间文字数据可视化系统
|
|
|
+ .title_text {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 14px;
|
|
|
+ color: #008cff;
|
|
|
}
|
|
|
-
|
|
|
- .noMore {
|
|
|
- position: absolute;
|
|
|
- margin: auto;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
+ //时间日期
|
|
|
+ .title_time {
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
-
|
|
|
- .ship-list {
|
|
|
+ //中国地图
|
|
|
+ #china-map {
|
|
|
+ height: 660px;
|
|
|
width: 100%;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #fff;
|
|
|
}
|
|
|
-
|
|
|
- //新增的图表的样式
|
|
|
- .chart {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
+ //中间折线图
|
|
|
+ .line_center {
|
|
|
+ width: 100%;
|
|
|
+ height: 288px;
|
|
|
+ }
|
|
|
+ //左1模块
|
|
|
+ .left_box1 {
|
|
|
+ height: 310px;
|
|
|
+ width: 100%;
|
|
|
margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
+ //左2模块
|
|
|
+ .left_box2 {
|
|
|
+ height: 310px;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ //左3模块
|
|
|
+ .left_box3 {
|
|
|
+ height: 310px;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
-
|
|
|
- .chart-card {
|
|
|
- // background: rgb(36, 38, 45);
|
|
|
- position: relative;
|
|
|
- background: #2a2a2a;
|
|
|
- width: 350px;
|
|
|
- margin-top: 10px;
|
|
|
- height: 288px;
|
|
|
- // height: 288px;
|
|
|
+ //右1模块
|
|
|
+ .right_box1 {
|
|
|
+ height: 310px;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
-
|
|
|
- .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;
|
|
|
-
|
|
|
+ //右2模块
|
|
|
+ .right_box2 {
|
|
|
+ height: 310px;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
-
|
|
|
- .content2 {
|
|
|
- // background-color: rgb(27, 28, 30);
|
|
|
- display: flex;
|
|
|
- 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;
|
|
|
- min-width: 910px;
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+ //右3模块
|
|
|
+ .right_box3 {
|
|
|
+ height: 310px;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
-
|
|
|
- .home {
|
|
|
- background: #2a2a2a;
|
|
|
- padding-bottom: 20px
|
|
|
+ //左1模块-玫瑰饼图
|
|
|
+ #Rose_diagram {
|
|
|
+ height: 70%;
|
|
|
+ width: 55%;
|
|
|
}
|
|
|
-
|
|
|
- .home .body-middle-height {
|
|
|
- height: auto;
|
|
|
+ //左1模块-圆环图
|
|
|
+ .left_box1_rose_right {
|
|
|
+ height: 85%;
|
|
|
+ width: 55%;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
-
|
|
|
- .content2-map {
|
|
|
- margin: 0;
|
|
|
+ //左1模块-文字部分
|
|
|
+ .rose_text {
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 4%;
|
|
|
+ margin-left: 4%;
|
|
|
}
|
|
|
-
|
|
|
- .content3 {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- background: #2a2a2a;
|
|
|
- padding: 10px;
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-
|
|
|
+ // 左1模块-￥符号样式
|
|
|
+ .coin {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #ffc107;
|
|
|
}
|
|
|
-
|
|
|
- .bottom-tip {
|
|
|
- position: absolute;
|
|
|
- z-index: 11;
|
|
|
- color: #8c8c8d;
|
|
|
- right: 10px;
|
|
|
- bottom: 10px;
|
|
|
+ //左1模块-（件）样式
|
|
|
+ .colorYellow {
|
|
|
+ color: yellowgreen;
|
|
|
+ }
|
|
|
+ //左1模块-数字样式
|
|
|
+ .rose_text_nmb {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #00b891;
|
|
|
+ }
|
|
|
+ //左2模块 柱状图
|
|
|
+ #columnar {
|
|
|
+ height: 97%;
|
|
|
+ width: 95%;
|
|
|
+ margin-left: 3%;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ //折线图
|
|
|
+ #line_center_diagram {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ //轮播表格
|
|
|
+ .carousel_list {
|
|
|
+ width: 96%;
|
|
|
+ height: 98%;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ //虚线柱状图
|
|
|
+ #dotter_bar {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
- .el-switch{
|
|
|
- position: fixed;
|
|
|
- top: 10px;
|
|
|
- left: 50%;
|
|
|
+ //锥形图
|
|
|
+ .cone_box {
|
|
|
+ width: 95%;
|
|
|
+ height: 97%;
|
|
|
+ margin-left: 3%;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
