m朔黄首页模拟数据更新

hanbaoshan

2021-02-28 72f553661a74b225c89310d3fb3d78f3ebe35f82

 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue

@@ -13,11 +13,11 @@
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">265</div>
          <div class="val">245</div>
          <div class="trend week-day-ratio">
            <div class="week-ratio">
              <span>周同比</span>
              <span class="triangle green"></span>
              <span class="triangle red"></span>
              <span>12%</span>
            </div>
            <div class="day-ratio">
@@ -29,7 +29,7 @@
          <div class="devide"></div>
          <div class="detail">
            <div class="name">日均隐患事件</div>
            <div class="specific">28</div>
            <div class="specific">35</div>
          </div>
        </el-card>
        <el-card>
@@ -39,14 +39,14 @@
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">{{$numberFormat(8846)}}</div>
          <div class="val">{{$numberFormat(735)}}</div>
          <div class="trend">
            <line-chart :options="optionsOfWeekAnalyze" style="height:50px"></line-chart>
          </div>
          <div class="devide"></div>
          <div class="detail">
            <div class="name">日均分析量</div>
            <div class="specific">128</div>
            <div class="specific">105</div>
          </div>
        </el-card>
        <el-card>
@@ -56,12 +56,12 @@
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">8846</div>
          <div class="val">1025</div>
          <div class="trend"></div>
          <div class="devide"></div>
          <div class="detail">
            <div class="name">转换率</div>
            <div class="specific">60%</div>
            <div class="specific">100%</div>
          </div>
        </el-card>
        <el-card>
@@ -71,7 +71,7 @@
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">78%</div>
          <div class="val">99%</div>
          <div class="trend"></div>
          <div class="devide"></div>
          <div class="detail week-day-ratio">
@@ -82,7 +82,7 @@
            </div>
            <div class="day-ratio">
              <span>日环比</span>
              <span class="triangle red"></span>
              <span class="triangle green"></span>
              <span>11%</span>
            </div>
          </div>
@@ -119,13 +119,16 @@
          <div class="rt">
            <div class="header">
              <span class="title">部门隐患数量排名</span>
              <el-select v-if="hidDangerTab=='hidDanderStatistic'" size="small">
              <!-- <el-select v-if="hidDangerTab=='hidDanderStatistic'" size="small">
                <el-option>中铁一局</el-option>
              </el-select>
              </el-select> -->
            </div>
            <div class="rank-list">
              <div class="rank-item" v-for="(rankItem,index) in rankList" :key="rankItem.id" >
                <span class="rank-index" :class="{'first':index==0,'second':index==1,'third':index==2}">{{index+1}}</span>
              <div class="rank-item" v-for="(rankItem,index) in rankList" :key="rankItem.id">
                <span
                  class="rank-index"
                  :class="{'first':index==0,'second':index==1,'third':index==2}"
                >{{index+1}}</span>
                <span class="name">{{rankItem.name}}</span>
                <span class="val">{{rankItem.val}}</span>
              </div>
@@ -144,7 +147,7 @@
                  <div class="lt">
                    <div class="chart-theme">乘务员总人数</div>
                    <div class="sum">
                      <span class="val">8846</span>
                      <span class="val">187</span>
                      <span class="ratio">17.1%</span>
                    </div>
                    <line-chart :options="optionsOfIrregularSum" style="height:70px"></line-chart>
@@ -152,18 +155,18 @@
                  <div class="gt">
                    <div class="chart-theme">人均违规次数</div>
                    <div class="sum">
                      <span class="val">8846</span>
                      <span class="val">1.31</span>
                    </div>
                    <line-chart :options="optionsOfIrregularPer" style="height:70px"></line-chart>
                  </div>
                </div>
                <el-table class="thbg" :data="irregularTableData">
                  <el-table-column label="排名"></el-table-column>
                  <el-table-column label="姓名"></el-table-column>
                  <el-table-column label="违规次数"></el-table-column>
                  <el-table-column label="周涨幅"></el-table-column>
                  <el-table-column label="排名" type="index" width="90"></el-table-column>
                  <el-table-column label="姓名" prop="name"></el-table-column>
                  <el-table-column label="违规次数" prop="wg"></el-table-column>
                  <!-- <el-table-column label="周涨幅" prop="ratio"></el-table-column> -->
                </el-table>
                <el-pagination
                <!-- <el-pagination
                  @size-change="handleTableSizeChange"
                  @current-change="renderIrregularMenTable"
                  :current-page.sync="PageIndex"
@@ -171,6 +174,15 @@
                  :page-sizes="pageSizes"
                  layout="total,sizes, prev, pager, next"
                  :total="tableTotal"
                ></el-pagination> -->
                <el-pagination
                  @size-change="handleTableSizeChange"
                  @current-change="renderIrregularMenTable"
                  :current-page.sync="PageIndex"
                  :page-size="PageSize"
                  :page-sizes="pageSizes"
                  layout="total,sizes, prev, pager, next"
                  :total="irregularTableData.length"
                ></el-pagination>
              </div>
            </div>
@@ -182,15 +194,18 @@
                <time-shortcut @actPickerChange="irregularEventStatistic"></time-shortcut>
              </div>
              <div class="statics-content">
                <el-radio-group v-model="irregularEventType" @change="checkIrregularEventType" size="small">
                <el-radio-group
                  v-model="irregularEventType"
                  @change="checkIrregularEventType"
                  size="small"
                >
                  <el-radio-button label="fhdd">防护地段</el-radio-button>
                  <el-radio-button label="jcz">进出站</el-radio-button>
                  <el-radio-button label="gfx">过分相</el-radio-button>
                  <el-radio-button label="hc">会车</el-radio-button>
                  <el-radio-button label="lsmx">临时慢性</el-radio-button>
                </el-radio-group>
                <!-- <Pie :options="optionsOfIrregularEventPie"></Pie> -->
                <Pie :options="optionsOfHidDangerPie" style="padding-top:20px;"></Pie>
                <Pie :options="optionsOfIrregularEventPie" style="padding-top:20px;"></Pie>
              </div>
            </div>
          </div>
@@ -213,7 +228,7 @@
          </div>
          <div class="content">
            <div class="indicator-title">本周任务指派量</div>
            <div class="indicator-val">8000</div>
            <div class="indicator-val">742</div>
          </div>
        </div>
        <div class="indicator">
@@ -222,7 +237,7 @@
          </div>
          <div class="content">
            <div class="indicator-title">分析量</div>
            <div class="indicator-val">8000</div>
            <div class="indicator-val">735</div>
          </div>
        </div>
        <div class="indicator lastOne">
@@ -231,7 +246,7 @@
          </div>
          <div class="content">
            <div class="indicator-title">违规量</div>
            <div class="indicator-val">8000</div>
            <div class="indicator-val">245</div>
          </div>
        </div>
      </div>
@@ -266,7 +281,7 @@
                <time-shortcut @actPickerChange="partAssignstatics"></time-shortcut>
              </div>
              <div class="statics-content">
                <Pie :options="optionsOfHidDangerPie"></Pie>
                <Pie :options="optionsOfTaskAssignPie"></Pie>
              </div>
            </div>
          </div>
@@ -307,13 +322,13 @@
                  <el-table-column prop="rwl" label="任务量"></el-table-column>
                  <el-table-column prop="fxl" label="分析量"></el-table-column>
                  <el-table-column prop="pdwgl" label="判定违规量"></el-table-column>
                  <el-table-column prop="wgl" label="判定违规率"></el-table-column>
                  <el-table-column prop="pdwglv" label="判定违规率"></el-table-column>
                  <el-table-column prop="wcl" label="完成率"></el-table-column>
                </el-table>
              </div>

              <div class="flex-end">
                <el-pagination
                <!-- <el-pagination
                  @size-change="handleTableSizeChange"
                  @current-change="renderIrregularMenTable"
                  :current-page.sync="PageIndex"
@@ -321,6 +336,15 @@
                  :page-sizes="pageSizes"
                  layout="total,sizes, prev, pager, next"
                  :total="tableTotal"
                ></el-pagination> -->
                <el-pagination
                  @size-change="handleTableSizeChange"
                  @current-change="renderIrregularMenTable"
                  :current-page.sync="PageIndex"
                  :page-size="PageSize"
                  :page-sizes="pageSizes"
                  layout="total,sizes, prev, pager, next"
                  :total="taskAnalyzeCaseTableData.length"
                ></el-pagination>
              </div>
            </div>
@@ -340,12 +364,39 @@
import DatasetChart from './charts/dataset';
export default {
  components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart },
  mounted () {
    let tempArr = [{
      "text": "Same but with checkboxes",
      "children": [
        {
          "text": "initially selected",
          "selected": true
        }
      ]
    }];
    for (var i = 0; i < 20; i++) {
      tempArr[0].children.push({
        "text": "initially open",
        "icon": "fa fa-folder icon-state-default",
        "opened": true,
        "children": [
          {
            "text": "Another node"
          }
        ]
      })
    }
    tempArr.forEach(node => {
      //if(node.children.length)

    })
    this.jsTreeNodes = tempArr
  },
  data () {
    return {
      //actCardTab: 'dataStatistic',
      actCardTab: 'taskStatistic',
      actCardTab: 'dataStatistic',
      hidDangerTab: 'hidDanderStatistic',
      optionsOfWeekAnalyze:{
      optionsOfWeekAnalyze: {
        animation: false,
        grid: {
          top: 0,
@@ -437,7 +488,7 @@
            name: '数量',
            type: 'bar',
            barWidth: '24%',
            data: [270, 500, 300, 430, 620, 540]
            data: [21, 102, 100, 1, 7, 14]
          }
        ]
      },
@@ -450,7 +501,7 @@
          orient: 'vertical',
          right: 10,
          y: 'center',
          data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答']
          data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
        },
        series: [
          {
@@ -476,12 +527,57 @@
              show: false
            },
            data: [
              { value: 270, name: '未鸣笛' },
              { value: 500, name: '未手比' },
              { value: 300, name: '未呼唤' },
              { value: 430, name: '运行中睡觉' },
              { value: 620, name: '未检查' },
              { value: 540, name: '未应答' },
              { value: 21, name: '未鸣笛' },
              { value: 102, name: '未手比' },
              { value: 100, name: '未呼唤' },
              { value: 1, name: '运行中睡觉' },
              { value: 7, name: '未检查' },
              { value: 14, name: '未应答' },
            ]
          }
        ]
      },
      optionsOfTaskAssignPie: {
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br>{b}:{c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          y: 'center',
          data: ['张磊', '李四', '王丽', '马宏宇', '刘乃超', '何光宗']
        },
        series: [
          {
            name: '异常事件',
            type: 'pie',
            color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
            radius: ['70%', '90%'],
            //center: ['40%','60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              formatter: '{b}\n{c} '
            },
            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: '何光宗' },
            ]
          }
        ]
@@ -489,19 +585,39 @@
      rankList: [{
        id: 'jl',
        name: '机辆分公司',
        val: 324456
      }, {
        id: 'jg',
        name: '京高铁路',
        val: 328356
        val: 121
      }, {
        id: 'ztyj',
        name: '中铁一局',
        val: 4563356
      }, {
        val: 52
      },{
        id: 'ztsj',
        name: '中铁四局',
        val: 40
      },{
        id: 'ztsanj',
        name: '中铁三局',
        val: 4563856
        val: 38
      },{
        id: 'ztswj',
        name: '中铁十五局',
        val: 36
      },{
        id: 'ztslj',
        name: '中铁十六局',
        val: 33
      },{
        id: 'jtjw',
        name: '京铁机务',
        val: 24
      },{
        id: 'lhjw',
        name: '路华机务',
        val: 15
      },{
        id: 'nhjw',
        name: '南环机务',
        val: 14
      }],
      optionsOfIrregularSum: {
        animation: false,
@@ -594,14 +710,56 @@
          }
        ]
      },
      irregularTableData: [],
      irregularTableData: [{name:'吴国梁',wg:2},{name:'王仁兴',wg:1},{name:'罗元发',wg:1}],
      PageIndex: 1,
      PageSize: 5,
      pageSizes: [5, 10],
      tableTotal: 0,
      irregularEventType: 'fhdd',
      optionsOfIrregularEventPie: {

        tooltip: {
          trigger: 'item',
          formatter: '{a}<br>{b}:{c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          y: 'center',
          data: ['防护地段', '进出站', '过分相', '会车', '临时慢性']
        },
        series: [
          {
            name: '异常事件',
            type: 'pie',
            color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
            radius: ['70%', '90%'],
            //center: ['40%','60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              formatter: '{b}\n{c} '
            },
            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: '临时慢性' },
 
            ]
          }
        ]
      },
      searchTaskAssignTime: [],
      optionsOfTaskAssign: {
@@ -649,18 +807,18 @@
          }
        ]
      },
      searchTaskAnalyzeTime: [],
      searchTaskAnalyzeTime: [new Date(2021,1,22),new Date(2021,2,1)],
      optionsOfTaskAnalyzeBar: {
        color: ['#fbd438', '#4fcb74'],
        dataset: {
          source: [
            ['mon', 70, 30],
            ['tue', 30, 50],
            ['wed', 30, 60],
            ['thu', 40, 50],
            ['fri', 20, 30],
            ['sat', 30, 20],
            ['sun', 20, 40],
            ['mon', 44, 83],
            ['tue', 47, 83],
            ['wed', 43, 85],
            ['thu', 44, 85],
            ['fri', 46, 80],
            ['sat', 12, 40],
            ['sun', 9, 34],
          ]
        },
        legend: {
@@ -720,14 +878,21 @@
          }
        ]
      },
      taskAnalyzeCaseTableData: []
      taskAnalyzeCaseTableData: [
        { name: '张磊', rwl: 127, fxl: 127, pdwgl: 44, pdwglv: '34.65%', wcl: '100%' },
        { name: '李四', rwl: 130, fxl: 129, pdwgl: 47, pdwglv: '36.43%', wcl: '99.23%' },
        { name: '王丽', rwl: 128, fxl: 127, pdwgl: 43, pdwglv: '33.86%', wcl: '99.22%' },
        { name: '马宏宇', rwl: 129, fxl: 125, pdwgl: 44, pdwglv: '35.2%', wcl: '96.90%' },
        { name: '刘乃超', rwl: 126, fxl: 126, pdwgl: 46, pdwglv: '33.50%', wcl: '100%' },
        { name: '何光宗', rwl: 112, fxl: 112, pdwgl: 12, pdwglv: '10.71%', wcl: '100%'}],
      jsTreeNodes: [],
    }
  },
  methods: {
    checkTabInSwipe(tab){
    checkTabInSwipe (tab) {
      debugger
    },
    checkIrregularEventType(type){
    checkIrregularEventType (type) {
      debugger
    },
    taskAnalyzeCase (time) {
@@ -758,7 +923,7 @@

    }
  },
  

}
</script>