轨迹图查询方法更新,朔黄添加首页

hanbaoshan

2021-01-19 1af0c937466d8f8df26aaddd72dbd702dd0f3033

轨迹图查询方法更新,朔黄添加首页

 src/pages/panoramicView/components/TracePlot.vue

@@ -12,7 +12,7 @@
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00','23:59:59']"
      ></el-date-picker>
      <el-button @click="searchData" size="small" type="primary" class="btn-search">查 询</el-button>
      <el-button @click="checkTime" size="small" type="primary" class="btn-search">查 询</el-button>
    </div>
    <div class="check-target" :style="{height:fixedH+'px'}">
      <div class="controller">
@@ -118,7 +118,6 @@
  },
  methods: {
    checkTime () {
      debugger
      if (!this.searchTime) {
        this.$notify({
          type: 'warning',
@@ -148,6 +147,7 @@
        treeNodes: [],
        isAll: false
      };
      clearInterval(this.timer);
      getSearchList(param).then(res => {
        _this.actObjs = [];
        if (!res.data.datalist) {

 src/pages/shuohuangMonitorAnalyze/components/charts/bar.vue

New file
@@ -0,0 +1,33 @@
<template>
  <div ref="barChart" style="width: 100%; height: 100%;"></div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  props: {
    options:{
      type: Object,
    }
  },
  mounted(){
    this.initBar();
  },
  methods: {
    initBar(){
      this.$nextTick(()=>{
        let dom = this.$echarts.init(this.$refs['barChart']);
        dom.setOption(this.options);
      })
      
    }
  }
}
</script>

<style >
</style>

 src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue

New file
@@ -0,0 +1,32 @@
<template>
  <div ref="pieChart" style="width: 100%; height: 100%;"></div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  props: {
    options: {
      type: Object
    }
  },
  mounted () {
    this.initPie();
  },
  methods: {
    initPie () {
      this.$nextTick(() => {
        let dom = this.$echarts.init(this.$refs['pieChart']);
        dom.setOption(this.options);
      })
    }
  }
}
</script>

<style lang="scss">
</style>

 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue

New file
@@ -0,0 +1,367 @@
<template>
  <div class="guide-index">
    <el-tabs class="tab-menu" v-model="actCardTab">
      <el-tab-pane label="数据统计分析" name="dataStatistic"></el-tab-pane>
      <el-tab-pane label="任务统计分析" name="taskStatistic"></el-tab-pane>
    </el-tabs>
    <div class="tab-content">
      <div class="card-view">
        <el-card>
          <div class="title">
            <span class="lt">本周隐患数量</span>
            <span class="rgt">
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">265</div>
          <div class="trend week-day-ratio">
            <div class="week-ratio">
              <span>周同比</span>
              <span class="triangle green"></span>
              <span>12%</span>
            </div>
            <div class="day-ratio">
              <span>日环比</span>
              <span class="triangle red"></span>
              <span>11%</span>
            </div>
          </div>
          <div class="devide"></div>
          <div class="detail">
            <div class="name">日均隐患事件</div>
            <div class="specific">28</div>
          </div>
        </el-card>
        <el-card>
          <div class="title">
            <span class="lt">本周分析车次量</span>
            <span class="rgt">
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">8846</div>
          <div class="trend"></div>
          <div class="devide"></div>
          <div class="detail">
            <div class="name">日均分析量</div>
            <div class="specific">128</div>
          </div>
        </el-card>
        <el-card>
          <div class="title">
            <span class="lt">转储总量</span>
            <span class="rgt">
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">8846</div>
          <div class="trend"></div>
          <div class="devide"></div>
          <div class="detail">
            <div class="name">转换率</div>
            <div class="specific">60%</div>
          </div>
        </el-card>
        <el-card>
          <div class="title">
            <span class="lt">任务完成比例</span>
            <span class="rgt">
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">78%</div>
          <div class="trend"></div>
          <div class="devide"></div>
          <div class="detail week-day-ratio">
            <div class="week-ratio">
              <span>周同比</span>
              <span class="triangle green"></span>
              <span>12%</span>
            </div>
            <div class="day-ratio">
              <span>日环比</span>
              <span class="triangle red"></span>
              <span>11%</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="part">
        <div class="header-width-tab">
          <el-tabs class="tab-menu" v-model="hidDangerTab">
            <el-tab-pane label="隐患事件统计" name="hidDanderStatistic"></el-tab-pane>
            <el-tab-pane label="隐患事件趋势" name="hidDanderTrend"></el-tab-pane>
          </el-tabs>
          <div class="rt">
            <time-shortcut @actPickerChange="timeShortChange"></time-shortcut>
            <el-date-picker
              v-model="searchTime"
              type="datetimerange"
              size="small"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            ></el-date-picker>
          </div>
        </div>
        <div class="statics">
          <div class="lt">
            <el-radio-group v-model="actHidDanderChart" size="mini">
              <el-radio-button label="bar">柱状图</el-radio-button>
              <el-radio-button label="pie">饼图</el-radio-button>
            </el-radio-group>
            <Bar :options="optionsOfHidDangerBar" v-show="actHidDanderChart=='bar'"></Bar>
            <Pie :options="optionsOfHidDangerPie" v-show="actHidDanderChart=='pie'"></Pie>
          </div>
          <div class="rt">
            <div class="header">
              <span class="title">部门隐患数量排名</span>
              <el-select v-if="hidDangerTab=='hidDanderStatistic'" size="small">
                <el-option>中铁一局</el-option>
              </el-select>
            </div>
            <div class="rank-list">
              <div class="rank-item">
                <span class="rank-index">1</span>
                <span class="name">机辆分公司</span>
                <span class="val">323,234</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import timeShortcut from './timeShortcut';
import Bar from './charts/bar';
import Pie from './charts/pie';
export default {
  components: { timeShortcut, Bar, Pie },
  data () {
    return {
      actCardTab: 'dataStatistic',
      hidDangerTab: 'hidDanderStatistic',
      searchTime: [],
      actHidDanderChart: 'bar',
      optionsOfHidDangerBar: {
        color: ['#9ed2f5'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          { type: 'value' }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '24%',
            data: [270, 500, 300, 430, 620, 540]
          }
        ]
      },
      optionsOfHidDangerPie: {
        tooltip:{
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答']
        },
        series: [
          {
            name:'异常事件',
            type:'pie',
            color: [],
            radius: ['50%','70%'],
            avoidLabelOverlap: false,
            label:{
              show: false,
              position: 'center'
            },
            emphasis:{
              label:{
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine:{
              show: false
            },
            data: [
              {value: 270,name:'未鸣笛'},
              {value: 500,name:'未手比'},
              {value: 300,name:'未呼唤'},
              {value: 430,name:'运行中睡觉'},
              {value: 620,name:'未检查'},
              {value: 540,name:'未应答'},
            ]
          }
        ]
      }
    }
  },
  methods: {
    timeShortChange (time) {
      debugger
    },
  }
}
</script>

<style lang="scss">
.guide-index {
  .triangle {
    width: 0;
    height: 0;
    border: 6px solid #ccc;
    &.green {
      border-color: #64de27;
      border-top-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }
    &.red {
      border-color: #f5222d;
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }
  }
  .tab-menu {
    .el-tabs__item {
      padding: 0 30px !important;
      height: 60px;
      line-height: 60px;
    }
  }
  .tab-content {
    padding: 20px;
    .card-view {
      display: flex;
      margin-right: -20px;
      .el-card {
        flex: 1;
        margin-right: 20px;
        text-align: left;
        .el-card__body {
          padding-bottom: 13px;
        }
        .title {
          color: #999;
          font-size: 14px;
          display: flex;
          justify-content: space-between;
        }
        .val {
          font-size: 30px;
          color: #000;
          margin: 10px 0 14px;
        }
        .trend {
          height: 40px;
          color: #999;
        }
        .week-day-ratio {
          display: flex;
          align-items: center;
          .week-ratio,
          .day-ratio {
            display: flex;
            align-items: center;
          }
        }
        .devide {
          height: 1px;
          background-color: #eee;
          margin: 10px 0;
        }
        .detail {
          display: flex;
        }
      }
    }
    .part {
      padding: 10px 0;
      .header-width-tab {
        display: flex;
        justify-content: space-between;
        .rt {
          display: flex;
          padding-top: 20px;
        }
      }
      .statics {
        display: flex;
        padding: 0 10px;
        min-height: 400px;
        .lt {
          text-align: left;
          flex: 1;
          padding-right: 20px;
        }
        .rt {
          text-align: left;
          width: 400px;
          .header {
            display: flex;
            .title {
              font-size: 16px;
              margin-right: 20px;
              font-weight: bold;
            }
          }
          .rank-list{
            padding: 10px 0;
            .rank-item{
              height: 36px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 14px;
              color: #666;
              .rank-index{
                width: 20px;
                height: 20px;
                line-height: 20px;
                background: #eee;
                color: #666;
                border-radius: 50%;
                text-align: center;
              }
              .name{
                width:200px;
              }
            }
          }
        }
      }
    }
  }
}
</style>

 src/pages/shuohuangMonitorAnalyze/components/leftNav.vue

@@ -12,7 +12,7 @@
      :default-active="activeIndex"
      @select="handleSelect"
    >
      <el-menu-item index="1">
      <el-menu-item index="guideIndex">
        <i class="iconfont iconshouye"></i>
        <span slot="title">首页</span>
      </el-menu-item>

 src/pages/shuohuangMonitorAnalyze/components/memberManage.vue

@@ -11,17 +11,18 @@
        :data="treeData"
        node-key="id"
        default-expand-all
        @node-click="checkNode"
        :expand-on-click-node="false"
        :check-on-click-node="true"
        :highlight-current="true"
        @node-click="checkNode"
        @node-contextmenu="nodeContextMenu"
      ></el-tree>
      <div class="menuList" v-show="showMenu" :style="{top:menuTop+'px',left:menuLeft+'px'}">
        <ul>
          <li>创建同级节点</li>
          <li>删除节点</li>
          <li>重命名节点</li>
          <li>关闭</li>
          <li @click="showMenu = false">关闭</li>
        </ul>
      </div>
    </div>
@@ -194,16 +195,17 @@
      <div>
        <p class="tip">
          *请提前根据文件模板中的要求收集人员信息，在一个文件夹中存放人员照片和EXCEL文件
          (<a href="javascript:;" @mouseover="showDemo=true" @mouseout="showDemo=false">示例</a>),点击
          (
          <a href="javascript:;" @mouseover="showDemo=true" @mouseout="showDemo=false">示例</a>),点击
          <a href="javascript:;">下载模板.excel</a>
          <img class="tip-demo" v-if="showDemo" :src="`${publicPath}images/shuohuang/tip.jpg`" alt="">
          <img class="tip-demo" v-if="showDemo" :src="`${publicPath}images/shuohuang/tip.jpg`" alt />
        </p>
        <div class="flex-box">
          <label>上传文件:</label>
          <el-button size="mini" type="primary" @click="uploadDirectoryTrigger" >点击上传</el-button>
          <input ref="directoryInput" @change="importDirectory" hidden type="file" webkitdirectory >
          <el-button size="mini" type="primary" @click="uploadDirectoryTrigger">点击上传</el-button>
          <input ref="directoryInput" @change="importDirectory" hidden type="file" webkitdirectory />
          <!-- <el-button size="mini" type="primary" @click="uploadExeclTrigger" style="margin-left:10px;">点击上传Excel</el-button>
          <input ref="excelInput" @change="importExecl" hidden type="file" accept=".xlsx"> -->
          <input ref="excelInput" @change="importExecl" hidden type="file" accept=".xlsx">-->
          <!-- <el-upload
            class="upload-demo batch-upload"
            action="https://jsonplaceholder.typicode.com/posts/"
@@ -216,7 +218,7 @@
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload> -->
          </el-upload>-->
        </div>
        <el-table class="thbg" :data="batchImportTableData" fit>
          <el-table-column type="index" label="序号"></el-table-column>
@@ -288,7 +290,12 @@

  },
  methods: {

    nodeContextMenu (e, data, node, comp) {
      debugger
      this.showMenu = true;
      this.menuTop = e.pageY;
      this.menuLeft = e.pageX;
    },
    checkOrgNode (a, b, c) {
      this.checkedOrg = a.id
    },
@@ -392,7 +399,7 @@
    uploadPic () {

    },
    uploadDirectoryTrigger(){
    uploadDirectoryTrigger () {
      this.$refs['directoryInput'].click();
    },
    // uploadExeclTrigger(){
@@ -401,13 +408,13 @@
    importDirectory () {
      //this.$refs['directoryInput'].files //文件夹map
      let formData = new FormData;
      formData.append('File',this.$refs['directoryInput'].files)
      formData.append('File', this.$refs['directoryInput'].files)
      debugger
      // uploadDirectory(formData).then(res=>{
      //   debugger
      

      // })
      

    },

    handleRemove () {
@@ -429,14 +436,7 @@
        this.$set(this.memberEditForm, 'Surface', res.data)
      })
    },
    openMenuList (t, l, frame) {
      this.showMenu = true;
      this.menuTop = t;
      this.menuLeft = l;
    },
    closeMenuList () {
      this.showMenu = false;
    },

    deepNodeChildren (node) {
      if (node.ChildDept && node.ChildDept.length > 0) {
        return node.ChildDept.map(child => {
@@ -575,15 +575,15 @@
      }
    }
  }
  .batch-import-dialog{
    .el-dialog__body{
  .batch-import-dialog {
    .el-dialog__body {
      padding: 14px 20px;
    }
    .tip{
    .tip {
      text-align: left;
      margin-bottom: 10px;
      position: relative;
      .tip-demo{
      .tip-demo {
        position: absolute;
        width: 530px;
        z-index: 1000;
@@ -598,7 +598,8 @@
    z-index: 100;
    width: 180px;
    text-align: left;
    border: 1px solid #ccc;
    border: 1px solid #ddd;
    box-shadow: 4px 4px 3px 0px rgba(0, 0, 0, 0.1);
  }
  .menuList li {
    line-height: 28px;
@@ -607,7 +608,7 @@
    background: #fff;
  }
  .menuList li:hover {
    background: rgba(152, 170, 190, 0.7);
    background: #ecf0fc;
  }
  .right {
    padding-left: 20px;

 src/pages/shuohuangMonitorAnalyze/components/timeShortcut.vue

New file
@@ -0,0 +1,83 @@
<template>
  <div class="time-shortcut">
    <ul>
      <li :class="{act:actPicker=='today'}" @click="checkToday">今日</li>
      <li :class="{act:actPicker=='week'}" @click="checkWeek">本周</li>
      <li :class="{act:actPicker=='month'}" @click="checkMonth">本月</li>
      <li :class="{act:actPicker=='year'}" @click="checkYear">全年</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      actPicker: 'today',
    }
  },
  watch: {
    actPicker (n, o) {
      let tempArr = [];
      if (n == 'today') {
        tempArr = this.checkToday()
      } else if (n == 'week') {
        tempArr = this.checkWeek();
      } else if (n == 'month') {
        tempArr = this.checkMonth();
      } else if (n == 'year') {
        tempArr = this.checkYear();
      }
      this.$emit('actPickerChange', tempArr)
    }
  },
  methods: {
    checkToday () {
      this.actPicker = 'today';
      const start = new Date();
      const end = new Date();
      start.setHours(0, 0, 0);
      return [start, end];
    },
    checkWeek () {
      this.actPicker = 'week';
      const start = new Date();
      const end = new Date();
      start.setDate(start.getDate() - start.getDay() + 1);
      start.setHours(0, 0, 0);
      return [start, end];
    },
    checkMonth () {
      this.actPicker = 'month';
      const start = new Date();
      const end = new Date();
      start.setDate(1);
      start.setHours(0, 0, 0);
      return [start, end];
    },
    checkYear () {
      this.actPicker = 'year';
      const start = new Date(new Date().getFullYear(), 0);
      const end = new Date();
      start.setHours(0, 0, 0);
      return [start, end];
    }
  }
}
</script>

<style lang="scss">
.time-shortcut {
  ul {
    display: flex;
    li {
      padding: 10px 14px;
      font-size: 14px;
      cursor: pointer;
      &.act {
        color: #409eff;
      }
    }
  }
}
</style>

 src/pages/shuohuangMonitorAnalyze/index/App.vue

@@ -17,6 +17,7 @@
        <transferMemo v-if="actPage=='transferMemo'"></transferMemo>
        <transferDeviceManage v-if="actPage=='transferDeviceManage'"></transferDeviceManage>
        <configManage v-if="actPage=='configManage'"></configManage>
        <guideIndex v-if="actPage=='guideIndex'"></guideIndex>
      </div>
    </div>
  </div>
@@ -31,8 +32,9 @@
import TransferMemo from '../components/transferMemo';
import TransferDeviceManage from '../components/transferDeviceManage';
import ConfigManage from '../components/configManage';
import GuideIndex from '../components/guideIndex';
export default {
  components: { LeftNav, TopNav, SearchForVideoAnalyze, MemberManage, TaskManage, TransferMemo, TransferDeviceManage, ConfigManage },
  components: { LeftNav, TopNav, SearchForVideoAnalyze, MemberManage, TaskManage, TransferMemo, TransferDeviceManage, ConfigManage, GuideIndex },
  data () {
    return {
      isCollapse: false,

 src/pages/shuohuangMonitorAnalyze/index/main.ts

@@ -3,12 +3,13 @@
import Mixin from "./mixins";
import ElementUI from 'element-ui';
import moment from 'moment';

import echarts from 'echarts';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/css/element-variables.scss";
Vue.use(ElementUI);
Vue.mixin(Mixin);
Vue.prototype.$moment = moment;
Vue.prototype.$echarts = echarts;
new Vue({
  el: '#app',
  render: h => h(App)