shuohuang首页tab2静态页完善,页面优化

hanbaoshan

2021-01-21 e32af94f41a414960454d3bf39c1e27674fbede5

 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue

@@ -39,8 +39,10 @@
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">8846</div>
          <div class="trend"></div>
          <div class="val">{{$numberFormat(8846)}}</div>
          <div class="trend">
            <line-chart :options="optionsOfWeekAnalyze" style="height:40px"></line-chart>
          </div>
          <div class="devide"></div>
          <div class="detail">
            <div class="name">日均分析量</div>
@@ -95,7 +97,7 @@
          <div class="rt">
            <time-shortcut @actPickerChange="timeShortChange"></time-shortcut>
            <el-date-picker
              v-model="searchTime"
              v-model="searchHidDanderTime"
              type="datetimerange"
              size="small"
              range-separator="至"
@@ -122,10 +124,10 @@
              </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 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>
            </div>
          </div>
@@ -145,18 +147,17 @@
                      <span class="val">8846</span>
                      <span class="ratio">17.1%</span>
                    </div>
                    <line-chart :options="optionsOfIrregularSum" :defineW="300" :defineH="160"></line-chart>
                    <line-chart :options="optionsOfIrregularSum" style="height:70px"></line-chart>
                  </div>
                  <div class="gt">
                    <div class="chart-theme">人均违规次数</div>
                    <div class="sum">
                      <span class="val">8846</span>
                    </div>
                    <!-- <line-chart :options="optionsOfIrregularPer"></line-chart> -->
                    <line-chart :options="optionsOfIrregularPer" :defineW="300" :defineH="160"></line-chart>
                    <line-chart :options="optionsOfIrregularPer" style="height:70px"></line-chart>
                  </div>
                </div>
                <el-table :data="irregularTableData">
                <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>
@@ -181,7 +182,7 @@
                <time-shortcut @actPickerChange="irregularEventStatistic"></time-shortcut>
              </div>
              <div class="statics-content">
                <el-radio-group v-model="irregularEventType" 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>
@@ -189,14 +190,14 @@
                  <el-radio-button label="lsmx">临时慢性</el-radio-button>
                </el-radio-group>
                <!-- <Pie :options="optionsOfIrregularEventPie"></Pie> -->
                <Pie :options="optionsOfHidDangerPie"></Pie>
                <Pie :options="optionsOfHidDangerPie" style="padding-top:20px;"></Pie>
              </div>
            </div>
          </div>
        </div>
        <div class="part">
          <div class="tab-swiper">
            <swipe-tabs></swipe-tabs>
            <swipe-tabs @checkTab="checkTabInSwipe"></swipe-tabs>
          </div>
          <div class="tab-detail">
            <dataset-chart style="width:100%"></dataset-chart>
@@ -205,7 +206,127 @@
      </div>
    </div>
    <div class="tab-content" v-if="actCardTab=='taskStatistic'">
      
      <div class="general-view">
        <div class="indicator">
          <div class="icon">
            <i class="iconfont iconrenwuzhipai" style="color:#3399ff"></i>
          </div>
          <div class="content">
            <div class="indicator-title">本周任务指派量</div>
            <div class="indicator-val">8000</div>
          </div>
        </div>
        <div class="indicator">
          <div class="icon">
            <i class="iconfont iconfenxi" style="color:#4c76ff"></i>
          </div>
          <div class="content">
            <div class="indicator-title">分析量</div>
            <div class="indicator-val">8000</div>
          </div>
        </div>
        <div class="indicator lastOne">
          <div class="icon">
            <i class="iconfont iconweigui" style="color:#fdd476"></i>
          </div>
          <div class="content">
            <div class="indicator-title">违规量</div>
            <div class="indicator-val">8000</div>
          </div>
        </div>
      </div>
      <div class="part">
        <div class="statics flex-box">
          <div class="lt">
            <div class="statics-part">
              <div class="statics-header">
                <span class="title">任务指派统计</span>
              </div>
              <div class="statics-content">
                <div class="flex-end">
                  <time-shortcut @actPickerChange="taskAssignStatics"></time-shortcut>
                  <el-date-picker
                    v-model="searchTaskAssignTime"
                    type="datetimerange"
                    size="small"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                  ></el-date-picker>
                </div>
                <line-chart :options="optionsOfTaskAssign" style="height: 300px;"></line-chart>
              </div>
            </div>
          </div>
          <div class="rt">
            <div class="statics-part">
              <div class="statics-header">
                <span class="title">部门指派任务占比</span>
                <time-shortcut @actPickerChange="partAssignstatics"></time-shortcut>
              </div>
              <div class="statics-content">
                <Pie :options="optionsOfHidDangerPie"></Pie>
              </div>
            </div>
          </div>
        </div>
        <div class="statics">
          <div class="statics-part">
            <div class="statics-header">
              <span class="title">任务分析统计</span>
            </div>
            <div class="statics-content">
              <div class="flex-end">
                <time-shortcut @actPickerChange="taskAnalyzeStatics"></time-shortcut>
                <el-date-picker
                  v-model="searchTaskAnalyzeTime"
                  type="datetimerange"
                  size="small"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                ></el-date-picker>
              </div>
              <Bar :options="optionsOfTaskAnalyzeBar" style="height: 300px;"></Bar>
            </div>
          </div>
        </div>
        <div class="statics">
          <div class="statics-part">
            <div class="statics-header">
              <span class="title">任务分析情况</span>
              <time-shortcut @actPickerChange="taskAnalyzeCase"></time-shortcut>
            </div>
            <div class="statics-content">
              <div class="table-area">
                <el-table class="thbg" :data="taskAnalyzeCaseTableData">
                  <el-table-column type="index" label="序号"></el-table-column>
                  <el-table-column prop="name" label="姓名"></el-table-column>
                  <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="wcl" label="完成率"></el-table-column>
                </el-table>
              </div>

              <div class="flex-end">
                <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="tableTotal"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
@@ -221,9 +342,55 @@
  components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart },
  data () {
    return {
      actCardTab: 'dataStatistic',
      //actCardTab: 'dataStatistic',
      actCardTab: 'taskStatistic',
      hidDangerTab: 'hidDanderStatistic',
      searchTime: [],
      optionsOfWeekAnalyze:{
        animation: false,
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 10,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          show: false,
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          label: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          show: false,
          label: {
            show: false
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.7
            },
            color: '#975fe3'
          }
        ]
      },
      searchHidDanderTime: [],
      actHidDanderChart: 'bar',
      optionsOfHidDangerBar: {
        color: ['#9ed2f5'],
@@ -257,7 +424,7 @@
          }
        ],
        yAxis: [
          {            
          {
            type: 'value',
            axisLine: {
              show: false
@@ -276,7 +443,7 @@
      optionsOfHidDangerPie: {
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
          formatter: '{a}<br>{b}:{c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
@@ -294,7 +461,8 @@
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
              position: 'center',
              formatter: '{b}\n{c} '
            },
            emphasis: {
              label: {
@@ -317,11 +485,29 @@
          }
        ]
      },
      rankList: [{
        id: 'jl',
        name: '机辆分公司',
        val: 324456
      }, {
        id: 'jg',
        name: '京高铁路',
        val: 328356
      }, {
        id: 'ztyj',
        name: '中铁一局',
        val: 4563356
      }, {
        id: 'ztsj',
        name: '中铁三局',
        val: 4563856
      }],
      optionsOfIrregularSum: {
        animation: false,
        grid: {
          top: 0,
          left: 0
          left: 0,
          bottom: 10,
        },
        tooltip: {
          trigger: 'axis',
@@ -365,7 +551,8 @@
        animation: false,
        grid: {
          top: 0,
          left: 0
          left: 0,
          bottom: 10,
        },
        tooltip: {
          trigger: 'axis',
@@ -412,10 +599,146 @@
      irregularEventType: 'fhdd',
      optionsOfIrregularEventPie: {

      }
      },
      searchTaskAssignTime: [],
      optionsOfTaskAssign: {
        grid: {
          top: 40,
          left: 10,
          right: 10,
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          label: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          label: {
            show: false
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.3
            },
            color: '#5dbafd'
          }
        ]
      },
      searchTaskAnalyzeTime: [],
      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],
          ]
        },
        legend: {
          left: 0
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            //type: 'shadow'
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            //data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
            axisTick: {
              alignWithLabel: true
            },
            // axisLine: {
            //   lineStyle: {
            //     color: '#ccc'
            //   }
            // },
            // nameTextStyle: {
            //   color: "#333"
            // }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '有异常',
            type: 'bar',
            stack: '异常',
            barWidth: 20,
            //data: [270, 500, 300, 430, 620, 540]
          },
          {
            name: '无异常',
            type: 'bar',
            stack: '异常',
            barWidth: 20,
            //data: [270, 500, 300, 430, 620, 540]
          }
        ]
      },
      taskAnalyzeCaseTableData: []
    }
  },
  methods: {
    checkTabInSwipe(tab){
      debugger
    },
    checkIrregularEventType(type){
      debugger
    },
    taskAnalyzeCase (time) {

    },
    taskAnalyzeStatics (time) {

    },
    partAssignstatics (time) {

    },
    taskAssignStatics (time) {

    },
    renderIrregularMenTable () {

    },
@@ -431,6 +754,9 @@
    irregularEventStatistic (time) {

    }
  },
  mounted(){
    debugger
  }
}
</script>
@@ -495,13 +821,13 @@
          .day-ratio {
            display: flex;
            align-items: center;
            &>span{
            & > span {
              margin-right: 6px;
            }
            .triangle.green{
            .triangle.green {
              margin-top: -6px;
            }
            .triangle.red{
            .triangle.red {
              margin-top: 6px;
            }
          }
@@ -515,7 +841,7 @@
          display: flex;
          align-items: center;
          color: #777;
          .name{
          .name {
            margin-right: 20px;
          }
        }
@@ -536,13 +862,14 @@
        display: flex;
        padding: 0 10px;
        min-height: 400px;
        margin-bottom: 20px;
        margin-bottom: 30px;
        .statics-header {
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #eee;
          padding-bottom: 10px;
          // padding-bottom: 10px;
          margin-bottom: 20px;
          .title {
            font-size: 16px;
@@ -550,6 +877,7 @@
          }
        }
        .statics-part {
          flex: 1;
          .statics-content {
            padding: 0 20px;
            .chart-area {
@@ -590,6 +918,8 @@
          }
          .rank-list {
            padding: 10px 0;
            max-height: 380px;
            overflow-y: auto;
            .rank-item {
              height: 36px;
              display: flex;
@@ -605,9 +935,24 @@
                color: #666;
                border-radius: 50%;
                text-align: center;
                &.first {
                  background-color: red;
                  color: #fff;
                }
                &.second {
                  background-color: rgb(248, 126, 45);
                  color: #fff;
                }
                &.third {
                  background-color: #0b3c29;
                  color: #fff;
                }
              }
              .name {
                width: 200px;
              }
              .val {
                width: 100px;
              }
            }
          }
@@ -627,6 +972,39 @@
        margin-bottom: 20px;
      }
    }
    .general-view {
      display: flex;
      padding: 20px 50px;
      .indicator {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        &:not(.lastOne):after {
          content: '';
          width: 1px;
          height: 57px;
          background: #e9e9e9;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        .icon .iconfont {
          font-size: 40px;
          margin-right: 24px;
        }
        .indicator-title {
          font-size: 14px;
          color: #999;
          margin-bottom: 15px;
        }
        .indicator-val {
          font-size: 24px;
        }
      }
    }
  }
}
</style>