Merge branch 'master' of http://192.168.5.5:10010/r/web/vue-smart-ai

ZZJ

2021-11-03 b4d2703e653bf702d705b18c20d9edb9066c7c8a

 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue

@@ -4,12 +4,12 @@
      <el-tab-pane label="数据统计分析" name="dataStatistic"></el-tab-pane>
      <el-tab-pane label="任务统计分析" name="taskStatistic"></el-tab-pane>
    </el-tabs>
    <div class="tab-content" v-show="actCardTab == 'dataStatistic'">
    <div class="tab-content" v-if="actCardTab == 'dataStatistic'">
      <div class="card-view">
        <el-card>
          <div class="left">
            <div class="title">
              <span class="icon iconfont">&#xe701;</span>
              <span class="icon iconfont">&#xe789;</span>
              <span class="info">本周隐患数量</span>
            </div>
            <div class="weekNum">2758</div>
@@ -21,13 +21,15 @@
          </div>
          <div class="right">
            <div class="outCircle"></div>
            <div id="chart1"></div>
            <div id="chart1">
              <bar :options="option1"></bar>
            </div>
          </div>
        </el-card>
        <el-card>
          <div class="left">
            <div class="title">
              <span class="icon iconfont icon2">&#xe701;</span>
              <span class="icon iconfont icon2">&#xe78a;</span>
              <span class="info">本周分析车次量</span>
            </div>
            <div class="weekNum">258</div>
@@ -38,13 +40,15 @@
            <div class="dayNum">25</div>
          </div>
          <div class="right">
            <div id="chart2"></div>
            <div id="chart2">
              <bar :options="option2"></bar>
            </div>
          </div>
        </el-card>
        <el-card>
          <div class="left">
            <div class="title">
              <span class="icon iconfont icon3">&#xe701;</span>
              <img src="/images/shuohuang/组 731.png/" alt="" class="icon3" />
              <span class="info">转储总量</span>
            </div>
            <div class="weekNum">2758</div>
@@ -55,13 +59,16 @@
            <div class="dayNum">100%</div>
          </div>
          <div class="right">
            <div id="chart3"></div>
            <div id="chart3">
              <bar :options="option3"></bar>
            </div>
          </div>
        </el-card>
        <el-card>
          <div class="left">
            <div class="title">
              <span class="icon iconfont icon5">&#xe701;</span>
              <img src="/images/shuohuang/组 727.png/" alt="" class="icon3" />

              <span class="info">任务完成比例</span>
            </div>
            <div class="weekNum">90%</div>
@@ -72,7 +79,9 @@
            <div class="dayNum">10%</div>
          </div>
          <div class="right">
            <div id="chart4"></div>
            <div id="chart4">
              <bar :options="option4"></bar>
            </div>
          </div>
        </el-card>
      </div>
@@ -175,7 +184,7 @@
        </el-card>
      </div> -->
      <div class="part">
        <div class="part-top">
        <!-- <div class="part-top">
          <div class="header-width-tab">
            <el-tabs
              class="tab-menu"
@@ -242,9 +251,9 @@
            <div class="rt">
              <div class="header">
                <span class="title">部门隐患数量排名</span>
                <!-- <el-select v-if="actHiddanderTab=='hidDanderStatistic'" size="small">
                <el-option>中铁一局</el-option>
              </el-select>-->
              // <el-select v-if="actHiddanderTab=='hidDanderStatistic'" size="small">
              //   <el-option>中铁一局</el-option>
              //  </el-select>
              </div>
              <div class="rank-list">
                <div
@@ -267,10 +276,257 @@
              </div>
            </div>
          </div>
        </div> -->

        <div class="part-head">
          <div class="top">
            <div class="title">隐患事件</div>
            <div class="control">
              <div class="icon iconfont" @click="click1">&#xe73f;</div>
              <el-date-picker
                ref="timepick1"
                v-model="value1"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
              <div
                class="time"
                :class="{ active: eventConrtol == 'day' }"
                @click="eventConrtol = 'day'"
              >
                今日
              </div>
              <div
                class="time"
                :class="{ active: eventConrtol == 'week' }"
                @click="eventConrtol = 'week'"
              >
                本周
              </div>
              <div
                class="time"
                :class="{ active: eventConrtol == 'mouth' }"
                @click="eventConrtol = 'mouth'"
              >
                本月
              </div>
              <div
                class="time"
                :class="{ active: eventConrtol == 'year' }"
                @click="eventConrtol = 'year'"
              >
                全年
              </div>
            </div>
          </div>

          <el-divider></el-divider>

          <div class="bottom">
            <div class="left box">
              <div class="box-top">
                <div class="title">隐患事件统计</div>
                <div class="control">
                  <div
                    class="chart"
                    :class="{ active: dangerEvent == 'bar' }"
                    @click="dangerEvent = 'bar'"
                  >
                    柱状图
                  </div>
                  <div
                    class="chart"
                    :class="{ active: dangerEvent == 'pai' }"
                    @click="dangerEvent = 'pai'"
                  >
                    饼状图
                  </div>
                </div>
              </div>
              <div class="echart">
                <bar :options="eventBarOptions" v-if="dangerEvent == 'bar'" />
                <Pie
                  :options="optionsOfHidDangerPie"
                  :pieW="500"
                  :pieH="250"
                  v-else
                ></Pie>
              </div>
            </div>

            <div class="middle box">
              <div class="box-top">
                <div class="title">隐患事件趋势</div>
                <div class="control">
                  <div
                    class="chart"
                    :class="{ active: dangerTrend == 'bar' }"
                    @click="dangerTrend = 'bar'"
                  >
                    折线图
                  </div>
                  <div
                    class="chart"
                    :class="{ active: dangerTrend == 'pai' }"
                    @click="dangerTrend = 'pai'"
                  >
                    饼状图
                  </div>
                </div>
              </div>
              <div class="echart">
                <bar :options="trendBarChart" v-if="dangerTrend == 'bar'" />
                <Pie
                  :options="optionsOfHidDangerTrendPie"
                  :pieW="500"
                  :pieH="250"
                  v-else
                ></Pie>
              </div>
            </div>

            <div class="right">
              <div class="header">
                <span class="title">部门隐患数量排名</span>
                <!--  //
                <el-select
                  v-if="actHiddanderTab == 'hidDanderStatistic'"
                  size="small"
                >
                  // <el-option>中铁一局</el-option> 
                  //
                </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
                  >
                  <span class="name"
                    >{{ rankItem.name }}
                    <span
                      class="icon iconfont up"
                      v-if="index == 0 || index == 3"
                      >&#xe78c;</span
                    >
                    <span
                      class="icon iconfont down"
                      v-if="index == 1 || index == 4"
                      >&#xe78b;</span
                    >
                  </span>

                  <span class="val"
                    >{{ rankItem.val }}
                    <span class="often" v-if="index == 1">常</span>
                    <span class="new" v-if="index == 2">新</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="statics flex-box">
          <div class="lt">
            <div class="statics-part">
            <div class="lt-head">
              <div class="title">乘务员违规统计</div>
              <div class="control">
                <div class="icon iconfont" @click="click2">&#xe73f;</div>
                <el-date-picker
                  ref="timepick2"
                  v-model="value2"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
                <div
                  class="time"
                  :class="{ active: personConrtol == 'day' }"
                  @click="personConrtol = 'day'"
                >
                  今日
                </div>
                <div
                  class="time"
                  :class="{ active: personConrtol == 'week' }"
                  @click="personConrtol = 'week'"
                >
                  本周
                </div>
                <div
                  class="time"
                  :class="{ active: personConrtol == 'mouth' }"
                  @click="personConrtol = 'mouth'"
                >
                  本月
                </div>
                <div
                  class="time"
                  :class="{ active: personConrtol == 'year' }"
                  @click="personConrtol = 'year'"
                >
                  全年
                </div>
              </div>
            </div>
            <el-divider></el-divider>

            <div class="lt-bottom">
              <div class="lt-bottom-left">
                <div class="chart-theme">乘务员总人数</div>
                <div class="val">187</div>
                <div class="ratio">17.1%</div>
                <div class="chart-theme">人均违规次数</div>
                <div class="val">1.31</div>
              </div>
              <div class="lt-bottom-mid">
                <div class="lt-chart1">
                  <LineChart :options="lt_chart1" />
                </div>
                <div class="lt-chart2">
                  <LineChart :options="lt_chart2" />
                </div>
              </div>
              <div class="lt-bottom-right">
                <el-table :data="irregularTableData" style="width: 100%">
                  <el-table-column
                    label="排名"
                    type="index"
                    width="90"
                    header-align="center"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    label="姓名"
                    prop="name"
                    header-align="center"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    label="违规次数"
                    prop="wg"
                    header-align="center"
                    align="center"
                  ></el-table-column>
                </el-table>
                <el-pagination small layout="prev, pager, next" :total="6">
                </el-pagination>
              </div>
            </div>

            <!-- <div class="statics-part">
              <div class="statics-header">
                <span class="title">乘务员违规统计</span>
                <time-shortcut
@@ -309,17 +565,8 @@
                  ></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
                  @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>-->
                <el-pagination
                  @size-change="handleTableSizeChange"
                  @current-change="renderIrregularMenTable"
@@ -330,10 +577,68 @@
                  :total="irregularTableData.length"
                ></el-pagination>
              </div>
            </div>
            </div> -->
          </div>
          <div class="rt">
            <div class="statics-part">
            <div class="rt-head">
              <div class="title">重点地段违规事件统计</div>
              <div class="control">
                <div class="icon iconfont" @click="click3">&#xe73f;</div>
                <el-date-picker
                  ref="timepick3"
                  v-model="value3"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
                <div
                  class="time"
                  :class="{ active: placeConrtol == 'day' }"
                  @click="placeConrtol = 'day'"
                >
                  今日
                </div>
                <div
                  class="time"
                  :class="{ active: placeConrtol == 'week' }"
                  @click="placeConrtol = 'week'"
                >
                  本周
                </div>
                <div
                  class="time"
                  :class="{ active: placeConrtol == 'mouth' }"
                  @click="placeConrtol = 'mouth'"
                >
                  本月
                </div>
                <div
                  class="time"
                  :class="{ active: placeConrtol == 'year' }"
                  @click="placeConrtol = 'year'"
                >
                  全年
                </div>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="rt-bottom">
              <div class="left">
                <div
                  class="left-item"
                  v-for="i in 6"
                  :key="i"
                  :class="{ active: place_active == i }"
                  @click="place_active = i"
                >
                  防护地段
                </div>
              </div>
              <div class="right">
                <Pie :options="rt_chart" :pieW="400" :pieH="300" />
              </div>
            </div>
            <!--  <div class="statics-part">
              <div class="statics-header">
                <span class="title">重点地段违规事件统计</span>
                <time-shortcut
@@ -358,10 +663,14 @@
                  style="padding-top: 20px"
                ></Pie>
              </div>
            </div>
            </div> -->
          </div>
        </div>
        <div class="part-bottom">
          <div class="bottom-head">
            <div class="title">违规情况统计</div>
          </div>
          <el-divider></el-divider>
          <div class="tab-swiper">
            <swipe-tabs @checkTab="checkTabInSwipe"></swipe-tabs>
          </div>
@@ -371,133 +680,210 @@
        </div>
      </div>
    </div>
    <div class="tab-content" v-show="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">742</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">735</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">245</div>
          </div>
        </div>
      </div>
      <div class="part">
        <div class="statics flex-box">
    <div class="tab-content" v-if="actCardTab == 'taskStatistic'">
      <div class="part2">
        <div class="statics flex-box part2-top">
          <div class="lt">
            <div class="statics-part">
              <div class="statics-header">
                <span class="title">任务指派统计</span>
            <div class="indicator">
              <div class="icon">
                <img src="/images/shuohuang/组 738.png/" alt="" />
              </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 class="content">
                <div class="indicator-title">本周任务指派量</div>
                <div class="indicator-val">742</div>
              </div>
            </div>
            <div class="indicator">
              <div class="icon">
                <img src="/images/shuohuang/组 739.png/" alt="" />
              </div>
              <div class="content">
                <div class="indicator-title">分析量</div>
                <div class="indicator-val">735</div>
              </div>
            </div>
            <div class="indicator lastOne">
              <div class="icon">
                <img src="/images/shuohuang/组 740.png/" alt="" />
              </div>
              <div class="content">
                <div class="indicator-title">违规量</div>
                <div class="indicator-val">245</div>
              </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="optionsOfTaskAssignPie"></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="pdwglv"
                    label="判定违规率"
                  ></el-table-column>
                  <el-table-column prop="wcl" label="完成率"></el-table-column>
                </el-table>
              </div>

              <div class="flex-end">
                <!-- <el-pagination
          <div class="mid">
            <div class="mid-head">
              <div class="title">任务指派统计</div>
              <div class="control">
                <div class="icon iconfont" @click="click4">&#xe73f;</div>
                <el-date-picker
                  ref="timepick4"
                  v-model="value4"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
                <div
                  class="time"
                  :class="{ active: taskConrtol == 'day' }"
                  @click="taskConrtol = 'day'"
                >
                  今日
                </div>
                <div
                  class="time"
                  :class="{ active: taskConrtol == 'week' }"
                  @click="taskConrtol = 'week'"
                >
                  本周
                </div>
                <div
                  class="time"
                  :class="{ active: taskConrtol == 'mouth' }"
                  @click="taskConrtol = 'mouth'"
                >
                  本月
                </div>
                <div
                  class="time"
                  :class="{ active: taskConrtol == 'year' }"
                  @click="taskConrtol = 'year'"
                >
                  全年
                </div>
              </div>
            </div>
            <el-divider></el-divider>
            <Bar :options="part2_chart1"></Bar>
          </div>

          <div class="rt">
            <div class="bottom-head">
              <div class="title">部门指派任务占比</div>
            </div>
            <el-divider></el-divider>

            <div class="rt-chart">
              <Pie
                :options="optionsOfTaskAssignPie"
                :pieW="400"
                :pieH="280"
              ></Pie>
            </div>
          </div>
        </div>
        <div class="part2-mid">
          <div class="mid-head">
            <div class="title">任务分析统计</div>
            <div class="control">
              <div class="icon iconfont" @click="click5">&#xe73f;</div>
              <el-date-picker
                ref="timepick5"
                v-model="value5"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
              <div
                class="time"
                :class="{ active: analysisConrtol == 'day' }"
                @click="analysisConrtol = 'day'"
              >
                今日
              </div>
              <div
                class="time"
                :class="{ active: analysisConrtol == 'week' }"
                @click="analysisConrtol = 'week'"
              >
                本周
              </div>
              <div
                class="time"
                :class="{ active: analysisConrtol == 'mouth' }"
                @click="analysisConrtol = 'mouth'"
              >
                本月
              </div>
              <div
                class="time"
                :class="{ active: analysisConrtol == 'year' }"
                @click="analysisConrtol = 'year'"
              >
                全年
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="mid-bottom">
            <Bar :options="optionsOfTaskAnalyzeBar"></Bar>
          </div>
        </div>
        <div class="part2-table">
          <div class="table-head">
            <div class="title">任务分析情况</div>
            <div class="control">
              <div class="icon iconfont" @click="click6">&#xe73f;</div>
              <el-date-picker
                ref="timepick6"
                v-model="value6"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
              <div
                class="time"
                :class="{ active: situationConrtol == 'day' }"
                @click="situationConrtol = 'day'"
              >
                今日
              </div>
              <div
                class="time"
                :class="{ active: situationConrtol == 'week' }"
                @click="situationConrtol = 'week'"
              >
                本周
              </div>
              <div
                class="time"
                :class="{ active: situationConrtol == 'mouth' }"
                @click="situationConrtol = 'mouth'"
              >
                本月
              </div>
              <div
                class="time"
                :class="{ active: situationConrtol == 'year' }"
                @click="situationConrtol = 'year'"
              >
                全年
              </div>
            </div>
          </div>
          <div class="table-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="pdwglv"
                  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"
@@ -506,16 +892,15 @@
                  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>
              <el-pagination
                @size-change="handleTableSizeChange"
                @current-change="renderIrregularMenTable"
                :current-page.sync="PageIndex"
                :page-size="PageSize"
                :page-sizes="pageSizes"
                layout=" prev, pager, next,sizes,total"
                :total="taskAnalyzeCaseTableData.length"
              ></el-pagination>
            </div>
          </div>
        </div>
@@ -532,8 +917,21 @@
import SwipeTabs from "./swipeTabs";
import DatasetChart from "./charts/dataset";
import * as echarts from "echarts";
import eventBarOptions from "./charts/eventBarOptions";
import trendBarChart from "./charts/trendBarChart";
import lt_chart1 from "./charts/lt_chart1";
import lt_chart2 from "./charts/lt_chart2";
import rt_chart from "./charts/rt_chart";
import part2_chart1 from "./charts/part2_chart1";
export default {
  components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart },
  components: {
    //timeShortcut,
    Bar,
    Pie,
    LineChart,
    SwipeTabs,
    DatasetChart,
  },
  mounted() {
    let tempArr = [
      {
@@ -563,10 +961,31 @@
    });
    this.jsTreeNodes = tempArr;
    this.refreshShoubiNum();
    this.initChart();
  },
  data() {
    return {
      place_active: 1,
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      value6: "",
      active: 1,
      part2_chart1,
      rt_chart,
      lt_chart1,
      lt_chart2,
      eventBarOptions,
      trendBarChart,
      personConrtol: "day",
      situationConrtol: "day",
      analysisConrtol: "day",
      placeConrtol: "day",
      eventConrtol: "day",
      taskConrtol: "day",
      dangerEvent: "bar",
      dangerTrend: "bar",
      actCardTab: "dataStatistic",
      //actHiddanderTab: 'hidDanderStatistic',
      optionsOfWeekAnalyze: {
@@ -801,8 +1220,8 @@
              "#f2637b",
              "#975fe4",
            ],
            radius: ["50%", "80%"],
            //center: ['40%','60%'],
            radius: ["50%", "70%"],
            center: ["40%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
@@ -860,13 +1279,14 @@
              "#f2637b",
              "#975fe4",
            ],
            radius: ["70%", "90%"],
            //center: ['40%','60%'],
            radius: ["50%", "70%"],
            center: ["40%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              formatter: "{b}\n{c} ",
              padding: [10, 0, 0, 0],
            },
            emphasis: {
              label: {
@@ -879,12 +1299,12 @@
              show: false,
            },
            data: [
              { value: 21, name: "未鸣笛" },
              { value: 102, name: "未手比" },
              { value: 100, name: "未呼唤" },
              { value: 1, name: "运行中睡觉" },
              { value: 7, name: "未检查" },
              { value: 14, name: "未应答" },
              { value: 22, name: "未鸣笛" },
              { value: 50, name: "未手比" },
              { value: 18, name: "未呼唤" },
              { value: 18, name: "运行中睡觉" },
              { value: 32, name: "未检查" },
              { value: 8, name: "未应答" },
            ],
          },
        ],
@@ -898,7 +1318,7 @@
          orient: "vertical",
          right: 10,
          y: "center",
          data: ["张磊", "李四", "王丽", "马宏宇", "刘乃超", "何光宗"],
          data: ["张磊", "李四", "王思", "洛桑", "王锁志", "刘建国", "田星"],
        },
        series: [
          {
@@ -912,14 +1332,32 @@
              "#f2637b",
              "#975fe4",
            ],
            radius: ["70%", "90%"],
            //center: ['40%','60%'],
            radius: ["40%", "50%"],
            center: ["40%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              formatter: "{b}\n{c} ",
              //展示文本设置
              normal: {
                show: true, //展示
                position: "outside", // outside表示文本显示位置为外部
              },
              emphasis: {
                //文本样式
                show: true, //展示
                textStyle: {
                  //文本样式
                  fontSize: "14",
                  fontWeight: "600",
                },
              },
            },
            labelLine: {
              //引导线设置
              normal: {
                show: true, //引导线显示
              },
            },

            emphasis: {
              label: {
                show: true,
@@ -927,16 +1365,15 @@
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },

            data: [
              { value: 127, name: "张磊" },
              { value: 130, name: "李四" },
              { value: 128, name: "王丽" },
              { value: 129, name: "马宏宇" },
              { value: 126, name: "刘乃超" },
              { value: 112, name: "何光宗" },
              { value: 22, name: "张磊" },
              { value: 50, name: "李四" },
              { value: 18, name: "王思" },
              { value: 18, name: "洛桑" },
              { value: 32, name: "王锁志" },
              { value: 8, name: "刘建国" },
              { value: 22, name: "田星" },
            ],
          },
        ],
@@ -1080,9 +1517,11 @@
        ],
      },
      irregularTableData: [
        { name: "吴国梁", wg: 2 },
        { name: "王仁兴", wg: 1 },
        { name: "罗元发", wg: 1 },
        { name: "吴国梁", wg: 8 },
        { name: "王仁兴", wg: 6 },
        { name: "罗元发", wg: 5 },
        { name: "张志红", wg: 3 },
        { name: "刘潭浩", wg: 1 },
      ],
      PageIndex: 1,
      PageSize: 5,
@@ -1199,7 +1638,7 @@
      },
      searchTaskAnalyzeTime: [new Date(2021, 1, 22), new Date(2021, 2, 1)],
      optionsOfTaskAnalyzeBar: {
        color: ["#fbd438", "#4fcb74"],
        color: ["#DC6363", "#E0E4ED"],
        dataset: {
          source: [
            ["mon", 44, 83],
@@ -1212,7 +1651,7 @@
          ],
        },
        legend: {
          left: 0,
          x: "right",
        },
        tooltip: {
          trigger: "axis",
@@ -1221,9 +1660,10 @@
          },
        },
        grid: {
          top: "9%",
          left: 10,
          right: 10,
          bottom: "3%",
          bottom: "7%",
          containLabel: true,
        },
        xAxis: [
@@ -1231,7 +1671,16 @@
            type: "category",
            //data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
            axisTick: {
              //y轴刻度线
              alignWithLabel: true,

              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rbg(241, 241, 240)",
                width: 1, //这里是为了突出显示加上的
              },
            },
            // axisLine: {
            //   lineStyle: {
@@ -1249,6 +1698,18 @@
            axisLine: {
              show: false,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            splitLine: {
              //网格线
              lineStyle: {
                color: "rgb(230, 230, 230)",
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true, //隐藏或显示
            },
          },
        ],
        series: [
@@ -1256,14 +1717,20 @@
            name: "有异常",
            type: "bar",
            stack: "异常",
            barWidth: 20,
            barWidth: 16,

            //data: [270, 500, 300, 430, 620, 540]
          },
          {
            name: "无异常",
            type: "bar",
            stack: "异常",
            barWidth: 20,
            barWidth: 16,
            itemStyle: {
              normal: {
                barBorderRadius: [8, 8, 0, 0],
              },
            },
            //data: [270, 500, 300, 430, 620, 540]
          },
        ],
@@ -1319,36 +1786,7 @@
        },
      ],
      jsTreeNodes: [],
    };
  },
  methods: {
    refreshShoubiNum() {
      let n = sessionStorage.getItem("shoubiNum");
      this.optionsOfHidDangerBar.series[0].data[1].value = +n;
    },
    initTabContent(tab) {
      if (tab.name == "hidDanderStatistic") {
        this.actHidDanderStatiscChart = "bar";
      } else {
        this.actHidDanderTrendChart = "line";
      }
    },
    checkTabInSwipe(tab) {},
    checkIrregularEventType(type) {},
    taskAnalyzeCase(time) {},
    taskAnalyzeStatics(time) {},
    partAssignstatics(time) {},
    taskAssignStatics(time) {},
    renderIrregularMenTable() {},
    handleTableSizeChange() {},
    timeShortChange(time) {},
    irregularMenStatistic(time) {},
    irregularEventStatistic(time) {},
    initChart() {
      var chartDom1 = document.getElementById("chart1");
      var myChart1 = echarts.init(chartDom1);

      var option1 = {
      option1: {
        tooltip: {
          show: false,
        },
@@ -1382,14 +1820,8 @@
          },
        ],
        color: ["#f8af4d", "rgb(211, 220, 239)"],
      };

      option1 && myChart1.setOption(option1);

      var chartDom2 = document.getElementById("chart2");
      var myChart2 = echarts.init(chartDom2);

      let option2 = {
      },
      option2: {
        top: 0,
        left: 0,
        grid: {
@@ -1410,7 +1842,7 @@
        },
        series: [
          {
            data: [82, 332, 290, 934, 529, 1330, 132],
            data: [0, 332, 290, 934, 529, 1330, 0],
            type: "line",
            smooth: true,
            lineStyle: {
@@ -1422,14 +1854,8 @@
            showSymbol: false,
          },
        ],
      };

      option2 && myChart2.setOption(option2);

      var chartDom3 = document.getElementById("chart3");
      var myChart3 = echarts.init(chartDom3);

      let option3 = {
      },
      option3: {
        top: 0,
        left: 0,
        grid: {
@@ -1465,6 +1891,8 @@
            itemStyle: {
              //通常情况下：
              normal: {
                barBorderRadius: [5, 5, 0, 0],

                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组中的颜色
                color: function (params) {
                  var colorList = [
@@ -1489,14 +1917,8 @@
            },
          },
        ],
      };

      option3 && myChart3.setOption(option3);

      var chartDom4 = document.getElementById("chart4");
      var myChart4 = echarts.init(chartDom4);

      let option4 = {
      },
      option4: {
        top: 0,
        left: 0,
        grid: {
@@ -1533,6 +1955,7 @@
            itemStyle: {
              //通常情况下：
              normal: {
                barBorderRadius: [5, 5, 0, 0],
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组中的颜色
                color: function (params) {
                  var colorList = [
@@ -1558,9 +1981,49 @@
            },
          },
        ],
      };

      option4 && myChart4.setOption(option4);
      },
    };
  },
  methods: {
    refreshShoubiNum() {
      let n = sessionStorage.getItem("shoubiNum");
      this.optionsOfHidDangerBar.series[0].data[1].value = +n;
    },
    initTabContent(tab) {
      if (tab.name == "hidDanderStatistic") {
        this.actHidDanderStatiscChart = "bar";
      } else {
        this.actHidDanderTrendChart = "line";
      }
    },
    checkTabInSwipe(tab) {},
    checkIrregularEventType(type) {},
    taskAnalyzeCase(time) {},
    taskAnalyzeStatics(time) {},
    partAssignstatics(time) {},
    taskAssignStatics(time) {},
    renderIrregularMenTable() {},
    handleTableSizeChange() {},
    timeShortChange(time) {},
    irregularMenStatistic(time) {},
    irregularEventStatistic(time) {},
    click1() {
      this.$refs["timepick1"].focus();
    },
    click2() {
      this.$refs["timepick2"].focus();
    },
    click3() {
      this.$refs["timepick3"].focus();
    },
    click4() {
      this.$refs["timepick4"].focus();
    },
    click5() {
      this.$refs["timepick5"].focus();
    },
    click6() {
      this.$refs["timepick6"].focus();
    },
  },
  watch: {
@@ -1684,7 +2147,6 @@

    .card-view {
      display: flex;
      margin-right: -20px;

      // margin-left: -2px;
      .el-card {
@@ -1693,6 +2155,10 @@
        margin-right: 20px;
        text-align: left;
        border-radius: 10px;

        &:last-child {
          margin-right: 0;
        }

        .el-card__body {
          display: flex;
@@ -1709,10 +2175,9 @@
              color: #213eb4;
            }
            .icon3 {
              color: #26d4b4;
            }
            .icon5 {
              color: #ed663e;
              margin-right: 15px;
              width: 15px;
              height: 15px;
            }
            .info {
              font-size: 12px;
@@ -1856,9 +2321,28 @@
        background-color: #fff;
      }
      .part-bottom {
        padding: 0 0 35px 35px;
        text-align: left;
        background-color: #fff;
        // padding: 0 30px 30px 30px;
        padding: 0 0 25px 0;
        box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
        border-radius: 10px;
        height: 624px;
        overflow: hidden;

        .bottom-head {
          height: 60px;
          line-height: 60px;
          text-align: left;
          .title {
            font-weight: bold;
            font-size: 15px;
            color: #2c3e7a;
          }
        }

        .tab-swiper {
          margin-top: 20px;
        }

        .tab-detail {
          margin: 0 25px;
@@ -1918,18 +2402,492 @@
          }
        }
        .lt {
          overflow: hidden;
          padding: 0 35px 35px 35px;
          text-align: left;
          flex: 1;
          padding: 3px 15px 15px 18px;
          flex: 6;
          height: 350px;
          background-color: #fff;
          margin-right: 18px;
          box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
          border-radius: 10px;

          .lt-head {
            display: flex;
            height: 60px;
            align-items: center;
            justify-content: space-between;
            .title {
              font-weight: bold;
              font-size: 15px;
              color: #2c3e7a;
            }

            .control {
              display: flex;
              .icon {
                cursor: pointer;
              }
              .time {
                text-align: center;
                font-size: 12px;
                margin-left: 20px;
                width: 40px;
                height: 18px;
                border-radius: 4px;
                cursor: pointer;
                &.active {
                  background: #2d52d7;
                  color: #fff;
                  opacity: 0.63;
                }
              }
            }

            .bottom {
              margin-top: 37px;
              display: flex;

              .box {
                overflow: hidden;
                height: 250px;
                width: 600px;
                padding-right: 33px;
                border-right: 1px solid #c6d2e4;

                .box-top {
                  display: flex;
                  justify-content: space-between;
                  .title {
                    color: #425277;
                  }
                  .control {
                    display: flex;
                    justify-content: center;
                    position: relative;

                    .chart {
                      width: 46px;
                      height: 20px;
                      cursor: pointer;

                      &:first-child {
                        border: 1px solid #6297f2;
                        background-color: #fff;
                        border-radius: 4px;
                        position: absolute;
                        top: 0;
                        left: -44px;
                      }

                      &:last-child {
                        border-top: 1px solid #6297f2;
                        border-right: 1px solid #6297f2;
                        border-bottom: 1px solid #6297f2;
                        border-radius: 0 4px 4px 0;
                      }

                      &.active {
                        background-color: #6297f2;
                        color: #fff;
                      }
                    }
                  }
                }

                .echart {
                  height: 250px;
                }
              }

              .middle {
                width: 670px;
                padding-left: 33px;
              }

              .right {
                width: 250px;
                flex: 1;
                text-align: left;
                background-color: #fff;
                padding: 0 15px 15px 35px;
                .header {
                  display: flex;
                  margin-bottom: 10px;
                  .title {
                    font-size: 16px;
                    margin-right: 20px;
                    font-weight: bold;
                  }
                }
                .rank-list {
                  padding: 10px 0;
                  max-height: 230px;
                  overflow-y: hidden;
                  .rank-item {
                    height: 36px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;
                    color: #666;
                    .rank-index {
                      width: 32px;
                      height: 24px;
                      margin-right: 20px;
                      line-height: 24px;
                      border-radius: 50%;
                      text-align: center;
                      color: #cb2839;
                      font-size: 12px;
                      &.first {
                        background-image: url(/images/shuohuang/组.png);
                        font-size: 15px;
                        font-weight: 700;
                        color: #cb2839;
                      }
                      &.second {
                        background-image: url(/images/shuohuang/组.png);
                        font-size: 15px;
                        font-weight: 700;
                        color: #cb2839;
                      }
                      &.third {
                        background-image: url(/images/shuohuang/组.png);
                        font-size: 15px;
                        font-weight: 700;
                        color: #cb2839;
                      }
                    }
                    .name {
                      width: 200px;
                      .up {
                        font-size: 12px;
                        color: #cb2839;
                      }
                      .down {
                        font-size: 12px;
                        color: #2bb15c;
                      }
                    }
                    .val {
                      width: 100px;
                      .often {
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        font-size: 12px;
                        background: #2d52d7;
                        color: #fff;
                        line-height: 18px;
                        text-align: center;
                        border-radius: 2px;
                      }

                      .new {
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        font-size: 12px;
                        background: #fe3c56;
                        color: #fff;
                        line-height: 18px;
                        text-align: center;
                        border-radius: 2px;
                      }
                    }
                  }
                }
              }
            }

            .el-divider {
              margin: 0;
            }
          }

          .lt-bottom {
            display: flex;
            padding-top: 35px;

            .lt-bottom-left {
              width: 133px;
              text-align: center;
              .val {
                font-size: 25px;
                font-weight: bold;
                margin-top: 20px;
              }
              .ratio {
                margin: 0 auto;
                margin-bottom: 54px;
                width: 46px;
                height: 22px;
                background: #f4f6f9;
                font-size: 15px;
                text-align: center;
              }
            }

            .lt-bottom-mid {
              flex: 1;
              .lt-chart1 {
                height: 110px;
              }
              .lt-chart2 {
                height: 110px;
              }
            }

            .lt-bottom-right {
              width: 340px;
              .el-table__row {
                td,
                th {
                  padding: 2px;
                }
              }

              .el-pagination {
                display: flex;
                justify-content: right;
                margin-top: 11px;
              }
            }
          }
        }
        .rt {
          padding: 25px 40px 10px 30px;
          overflow: hidden;
          text-align: left;
          flex: 4;
          background-color: #fff;
          padding: 3px 15px 15px 18px;
          width: 400px;
          .header {
          padding: 3px 30px 15px 30px;
          height: 351px;
          box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
          border-radius: 10px;

          .rt-head {
            display: flex;
            height: 60px;
            align-items: center;
            justify-content: space-between;
            .title {
              font-weight: bold;
              font-size: 15px;
              color: #2c3e7a;
            }

            .control {
              display: flex;
              .icon {
                cursor: pointer;
              }
              .time {
                text-align: center;
                font-size: 12px;
                margin-left: 20px;
                width: 40px;
                height: 18px;
                border-radius: 4px;
                cursor: pointer;
                &.active {
                  background: #2d52d7;
                  color: #fff;
                  opacity: 0.63;
                }
              }
            }

            .bottom {
              margin-top: 37px;
              display: flex;

              .box {
                overflow: hidden;
                height: 250px;
                width: 600px;
                padding-right: 33px;
                border-right: 1px solid #c6d2e4;

                .box-top {
                  display: flex;
                  justify-content: space-between;
                  .title {
                    color: #425277;
                  }
                  .control {
                    display: flex;
                    justify-content: center;
                    position: relative;

                    .chart {
                      width: 46px;
                      height: 20px;
                      cursor: pointer;

                      &:first-child {
                        border: 1px solid #6297f2;
                        background-color: #fff;
                        border-radius: 4px;
                        position: absolute;
                        top: 0;
                        left: -44px;
                      }

                      &:last-child {
                        border-top: 1px solid #6297f2;
                        border-right: 1px solid #6297f2;
                        border-bottom: 1px solid #6297f2;
                        border-radius: 0 4px 4px 0;
                      }

                      &.active {
                        background-color: #6297f2;
                        color: #fff;
                      }
                    }
                  }
                }

                .echart {
                  height: 250px;
                }
              }

              .middle {
                width: 670px;
                padding-left: 33px;
              }

              .right {
                width: 250px;
                flex: 1;
                text-align: left;
                background-color: #fff;
                padding: 0 15px 15px 35px;
                .header {
                  display: flex;
                  margin-bottom: 10px;
                  .title {
                    font-size: 16px;
                    margin-right: 20px;
                    font-weight: bold;
                  }
                }
                .rank-list {
                  padding: 10px 0;
                  max-height: 230px;
                  overflow-y: hidden;
                  .rank-item {
                    height: 36px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;
                    color: #666;
                    .rank-index {
                      width: 32px;
                      height: 24px;
                      margin-right: 20px;
                      line-height: 24px;
                      border-radius: 50%;
                      text-align: center;
                      color: #cb2839;
                      font-size: 12px;
                      &.first {
                        background-image: url(/images/shuohuang/组.png);
                        font-size: 15px;
                        font-weight: 700;
                        color: #cb2839;
                      }
                      &.second {
                        background-image: url(/images/shuohuang/组.png);
                        font-size: 15px;
                        font-weight: 700;
                        color: #cb2839;
                      }
                      &.third {
                        background-image: url(/images/shuohuang/组.png);
                        font-size: 15px;
                        font-weight: 700;
                        color: #cb2839;
                      }
                    }
                    .name {
                      width: 200px;
                      .up {
                        font-size: 12px;
                        color: #cb2839;
                      }
                      .down {
                        font-size: 12px;
                        color: #2bb15c;
                      }
                    }
                    .val {
                      width: 100px;
                      .often {
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        font-size: 12px;
                        background: #2d52d7;
                        color: #fff;
                        line-height: 18px;
                        text-align: center;
                        border-radius: 2px;
                      }

                      .new {
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        font-size: 12px;
                        background: #fe3c56;
                        color: #fff;
                        line-height: 18px;
                        text-align: center;
                        border-radius: 2px;
                      }
                    }
                  }
                }
              }
            }

            .el-divider {
              margin: 0;
            }
          }

          .rt-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
              overflow: hidden;
              background: #f4f6f9;
              box-shadow: 0px 3px 6px rgba(52, 109, 209, 0.66);
              border-radius: 7px;
              .left-item {
                width: 91px;
                height: 36px;
                line-height: 36px;
                border-left: 6px solid #f4f6f9;
                padding-left: 7px;
                cursor: pointer;

                &.active {
                  border-color: #2d52d7;
                  background: rgb(178, 192, 238);
                }
              }
            }
          }

          /* .header {
            display: flex;
            .title {
              font-size: 16px;
@@ -1976,12 +2934,10 @@
                width: 100px;
              }
            }
          }
          } */
        }
      }
      .flex-box {
        .lt,
        .rt,
        .gt {
          flex: 1;
          width: auto;
@@ -1991,40 +2947,417 @@
        width: calc(100vw - 367px);
        margin: 0 0 20px 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%);

      .part-head {
        overflow: hidden;
        padding: 0 35px 35px 35px;
        margin-bottom: 22px;
        height: 376px;
        background: #ffffff;
        box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
        border-radius: 10px;
        .top {
          display: flex;
          height: 60px;
          align-items: center;
          justify-content: space-between;
          .title {
            font-weight: bold;
            font-size: 15px;
            color: #2c3e7a;
          }

          .control {
            display: flex;
            .icon {
              cursor: pointer;
            }
            .time {
              font-size: 12px;
              margin-left: 20px;
              width: 40px;
              height: 18px;
              border-radius: 4px;
              cursor: pointer;
              &.active {
                background: #2d52d7;
                color: #fff;
                opacity: 0.63;
              }
            }
          }
        }
        .icon .iconfont {
          font-size: 40px;
          margin-right: 24px;
        }
        .indicator-title {
          font-size: 14px;
          color: #999;
          margin-bottom: 15px;
        }
        .indicator-val {
          font-size: 24px;

        .bottom {
          margin-top: 37px;
          display: flex;

          .box {
            overflow: hidden;
            height: 250px;
            width: 600px;
            padding-right: 33px;
            border-right: 1px solid #c6d2e4;

            .box-top {
              display: flex;
              justify-content: space-between;
              .title {
                color: #425277;
              }
              .control {
                display: flex;
                justify-content: center;
                position: relative;

                .chart {
                  width: 46px;
                  height: 20px;
                  cursor: pointer;

                  &:first-child {
                    border: 1px solid #6297f2;
                    background-color: #fff;
                    border-radius: 4px;
                    position: absolute;
                    top: 0;
                    left: -44px;
                  }

                  &:last-child {
                    border-top: 1px solid #6297f2;
                    border-right: 1px solid #6297f2;
                    border-bottom: 1px solid #6297f2;
                    border-radius: 0 4px 4px 0;
                  }

                  &.active {
                    background-color: #6297f2;
                    color: #fff;
                  }
                }
              }
            }

            .echart {
              height: 250px;
            }
          }

          .middle {
            width: 670px;
            padding-left: 33px;
          }

          .right {
            width: 250px;
            flex: 1;
            text-align: left;
            background-color: #fff;
            padding: 0 15px 15px 35px;
            .header {
              display: flex;
              margin-bottom: 10px;
              .title {
                font-size: 16px;
                margin-right: 20px;
                font-weight: bold;
              }
            }
            .rank-list {
              padding: 10px 0;
              max-height: 230px;
              overflow-y: hidden;
              .rank-item {
                height: 36px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                color: #666;
                .rank-index {
                  width: 32px;
                  height: 24px;
                  margin-right: 20px;
                  line-height: 24px;
                  border-radius: 50%;
                  text-align: center;
                  color: #cb2839;
                  font-size: 12px;
                  &.first {
                    background-image: url(/images/shuohuang/组.png);
                    font-size: 15px;
                    font-weight: 700;
                    color: #cb2839;
                  }
                  &.second {
                    background-image: url(/images/shuohuang/组.png);
                    font-size: 15px;
                    font-weight: 700;
                    color: #cb2839;
                  }
                  &.third {
                    background-image: url(/images/shuohuang/组.png);
                    font-size: 15px;
                    font-weight: 700;
                    color: #cb2839;
                  }
                }
                .name {
                  width: 200px;
                  .up {
                    font-size: 12px;
                    color: #cb2839;
                  }
                  .down {
                    font-size: 12px;
                    color: #2bb15c;
                  }
                }
                .val {
                  width: 100px;
                  .often {
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    font-size: 12px;
                    background: #2d52d7;
                    color: #fff;
                    line-height: 18px;
                    text-align: center;
                    border-radius: 2px;
                  }

                  .new {
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    font-size: 12px;
                    background: #fe3c56;
                    color: #fff;
                    line-height: 18px;
                    text-align: center;
                    border-radius: 2px;
                  }
                }
              }
            }
          }
        }
      }
    }

    .part2 {
      .part2-top {
        .lt {
          display: flex;
          flex-direction: column;
          width: 252px;
          height: 348px;
          background: #ffffff;
          box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
          border-radius: 10px;

          .indicator {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 38px;
            img {
              width: 50px;
              height: 50px;
            }
            .content {
              width: 100px;
              display: flex;
              flex-direction: column;
              align-items: center;
              .indicator-title {
                font-size: 14px;
              }
              .indicator-val {
                font-size: 36px;
                font-weight: 800;
              }
            }
          }
        }

        .mid {
          margin: 0 15px 0 27px;
          height: 348px;
          background: #ffffff;
          box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
          border-radius: 10px;
          overflow: hidden;
          padding: 0 35px 35px 35px;
          margin-bottom: 22px;
          flex: 1;
          .mid-head {
            display: flex;
            height: 60px;
            align-items: center;
            justify-content: space-between;
            .title {
              font-weight: bold;
              font-size: 15px;
              color: #2c3e7a;
            }

            .control {
              display: flex;
              .icon {
                cursor: pointer;
              }
              .time {
                font-size: 12px;
                margin-left: 20px;
                width: 40px;
                height: 18px;
                border-radius: 4px;
                cursor: pointer;
                &.active {
                  background: #2d52d7;
                  color: #fff;
                  opacity: 0.63;
                }
              }
            }
          }

          .mid-bottom {
            margin-top: 10px;
            height: 260px;
          }
        }

        .rt {
          width: 474px;
          height: 348px;
          padding: 0 0 35px 35px;
          text-align: left;
          background-color: #fff;
          box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
          border-radius: 10px;
          overflow: hidden;

          .bottom-head {
            height: 60px;
            line-height: 60px;
            text-align: left;
            .title {
              font-weight: bold;
              font-size: 15px;
              color: #2c3e7a;
            }
          }

          .rt-chart {
            width: 200px;
            height: 200px;
          }
        }
      }

      .part2-mid {
        height: 351px;
        background: #ffffff;
        box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
        border-radius: 10px;
        overflow: hidden;
        padding: 0 35px 35px 35px;
        margin-bottom: 22px;
        flex: 1;
        .mid-head {
          display: flex;
          height: 60px;
          align-items: center;
          justify-content: space-between;
          .title {
            font-weight: bold;
            font-size: 15px;
            color: #2c3e7a;
          }

          .control {
            display: flex;
            .icon {
              cursor: pointer;
            }
            .time {
              font-size: 12px;
              margin-left: 20px;
              width: 40px;
              height: 18px;
              border-radius: 4px;
              cursor: pointer;
              &.active {
                background: #2d52d7;
                color: #fff;
                opacity: 0.63;
              }
            }
          }
        }
        .mid-bottom {
          margin-top: 10px;
          height: 280px;
        }
      }

      .part2-table {
        background: #ffffff;
        box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
        border-radius: 10px;
        overflow: hidden;
        padding: 0 35px 35px 35px;
        margin-bottom: 22px;
        flex: 1;
        .table-head {
          display: flex;
          height: 60px;
          align-items: center;
          justify-content: space-between;
          .title {
            font-weight: bold;
            font-size: 15px;
            color: #2c3e7a;
          }

          .control {
            display: flex;
            .icon {
              cursor: pointer;
            }
            .time {
              font-size: 12px;
              margin-left: 20px;
              width: 40px;
              height: 18px;
              border-radius: 4px;
              cursor: pointer;
              &.active {
                background: #2d52d7;
                color: #fff;
                opacity: 0.63;
              }
            }
          }
        }
      }
    }
  }
  .el-divider {
    margin: 0;
  }
  .el-date-editor {
    position: relative;
    left: -35px;
    top: 20px;
    width: 0 !important;
    height: 1px !important;
    opacity: 0 !important;
  }
}
</style>