暂存

ZZJ

2021-10-29 33e428f32aabd653b816f063ed82d0c37016ca1d

 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue

@@ -4,8 +4,80 @@
      <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-if="actCardTab=='dataStatistic'">
    <div class="tab-content" v-show="actCardTab == 'dataStatistic'">
      <div class="card-view">
        <el-card>
          <div class="left">
            <div class="title">
              <span class="icon iconfont">&#xe701;</span>
              <span class="info">本周隐患数量</span>
            </div>
            <div class="weekNum">2758</div>
            <div class="mid">
              <div class="circle"></div>
              <div class="info">日均隐患事件</div>
            </div>
            <div class="dayNum">25</div>
          </div>
          <div class="right">
            <div class="outCircle"></div>
            <div id="chart1"></div>
          </div>
        </el-card>
        <el-card>
          <div class="left">
            <div class="title">
              <span class="icon iconfont icon2">&#xe701;</span>
              <span class="info">本周分析车次量</span>
            </div>
            <div class="weekNum">258</div>
            <div class="mid">
              <span class="circle2"></span>
              <div class="info">日均分析量</div>
            </div>
            <div class="dayNum">25</div>
          </div>
          <div class="right">
            <div id="chart2"></div>
          </div>
        </el-card>
        <el-card>
          <div class="left">
            <div class="title">
              <span class="icon iconfont icon3">&#xe701;</span>
              <span class="info">转储总量</span>
            </div>
            <div class="weekNum">2758</div>
            <div class="mid">
              <span class="circle3"></span>
              <div class="info">转换率</div>
            </div>
            <div class="dayNum">100%</div>
          </div>
          <div class="right">
            <div id="chart3"></div>
          </div>
        </el-card>
        <el-card>
          <div class="left">
            <div class="title">
              <span class="icon iconfont icon5">&#xe701;</span>
              <span class="info">任务完成比例</span>
            </div>
            <div class="weekNum">90%</div>
            <div class="mid">
              <span class="circle4"></span>
              <div class="info">日环比</div>
            </div>
            <div class="dayNum">10%</div>
          </div>
          <div class="right">
            <div id="chart4"></div>
          </div>
        </el-card>
      </div>

      <!-- <div class="card-view">
        <el-card>
          <div class="title">
            <span class="lt">本周隐患数量</span>
@@ -13,11 +85,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 +101,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,12 +111,17 @@
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">8846</div>
          <div class="trend"></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>
@@ -54,12 +131,14 @@
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">8846</div>
          <div class="trend"></div>
          <div class="val">{{ $numberFormat(1025) }}</div>
          <div class="trend">
            <Bar :options="optionsOfTransferSumBar" style="height: 70px"></Bar>
          </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>
@@ -69,8 +148,17 @@
              <i class="el-icon-warning-outline"></i>
            </span>
          </div>
          <div class="val">78%</div>
          <div class="trend"></div>
          <div class="val">99%</div>
          <div class="trend">
            <el-progress
              class="defined-progress"
              :percentage="99"
              stroke-linecap="square"
              color="#1890ff"
              :stroke-width="14"
              :show-text="false"
            ></el-progress>
          </div>
          <div class="devide"></div>
          <div class="detail week-day-ratio">
            <div class="week-ratio">
@@ -80,52 +168,102 @@
            </div>
            <div class="day-ratio">
              <span>日环比</span>
              <span class="triangle red"></span>
              <span class="triangle green"></span>
              <span>11%</span>
            </div>
          </div>
        </el-card>
      </div>
      </div> -->
      <div class="part">
        <div class="header-width-tab">
          <el-tabs class="tab-menu" v-model="hidDangerTab">
            <el-tab-pane label="隐患事件统计" name="hidDanderStatistic"></el-tab-pane>
            <el-tab-pane label="隐患事件趋势" name="hidDanderTrend"></el-tab-pane>
          </el-tabs>
          <div class="rt">
            <time-shortcut @actPickerChange="timeShortChange"></time-shortcut>
            <el-date-picker
              v-model="searchTime"
              type="datetimerange"
              size="small"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            ></el-date-picker>
          </div>
        </div>
        <div class="statics">
          <div class="lt">
            <el-radio-group v-model="actHidDanderChart" size="mini">
              <el-radio-button label="bar">柱状图</el-radio-button>
              <el-radio-button label="pie">饼图</el-radio-button>
            </el-radio-group>
            <Bar :options="optionsOfHidDangerBar" v-show="actHidDanderChart=='bar'"></Bar>
            <Pie :options="optionsOfHidDangerPie" v-show="actHidDanderChart=='pie'"></Pie>
          </div>
          <div class="rt">
            <div class="header">
              <span class="title">部门隐患数量排名</span>
              <el-select v-if="hidDangerTab=='hidDanderStatistic'" size="small">
                <el-option>中铁一局</el-option>
              </el-select>
        <div class="part-top">
          <div class="header-width-tab">
            <el-tabs
              class="tab-menu"
              v-model="actHiddanderTab"
              @tab-click="initTabContent"
            >
              <el-tab-pane
                label="隐患事件统计"
                name="hidDanderStatistic"
              ></el-tab-pane>
              <el-tab-pane
                label="隐患事件趋势"
                name="hidDanderTrend"
              ></el-tab-pane>
            </el-tabs>
            <div class="rt">
              <time-shortcut
                actPicker="today"
                @actPickerChange="timeShortChange"
              ></time-shortcut>
              <el-date-picker
                v-model="searchHidDanderTime"
                type="datetimerange"
                size="small"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              ></el-date-picker>
            </div>
            <div class="rank-list">
              <div class="rank-item">
                <span class="rank-index">1</span>
                <span class="name">机辆分公司</span>
                <span class="val">323,234</span>
          </div>
          <div class="statics">
            <div class="lt">
              <template v-if="actHiddanderTab == 'hidDanderStatistic'">
                <el-radio-group v-model="actHidDanderStatiscChart" size="mini">
                  <el-radio-button label="bar">柱状图</el-radio-button>
                  <el-radio-button label="pie">饼图</el-radio-button>
                </el-radio-group>
                <Bar
                  :options="optionsOfHidDangerBar"
                  v-if="actHidDanderStatiscChart == 'bar'"
                ></Bar>
                <Pie
                  :options="optionsOfHidDangerPie"
                  v-if="actHidDanderStatiscChart == 'pie'"
                ></Pie>
              </template>
              <template v-if="actHiddanderTab == 'hidDanderTrend'">
                <el-radio-group v-model="actHidDanderTrendChart" size="mini">
                  <el-radio-button label="line">折线图</el-radio-button>
                  <el-radio-button label="pie">饼图</el-radio-button>
                </el-radio-group>
                <line-chart
                  :options="optionsOfHidDangerTrend"
                  v-if="actHidDanderTrendChart == 'line'"
                  style="height: 350px"
                ></line-chart>
                <Pie
                  :options="optionsOfHidDangerTrendPie"
                  v-if="actHidDanderTrendChart == 'pie'"
                ></Pie>
              </template>
            </div>
            <div class="rt">
              <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>
                  <span class="val">{{ rankItem.val }}</span>
                </div>
              </div>
            </div>
          </div>
@@ -135,34 +273,45 @@
            <div class="statics-part">
              <div class="statics-header">
                <span class="title">乘务员违规统计</span>
                <time-shortcut @actPickerChange="irregularMenStatistic"></time-shortcut>
                <time-shortcut
                  @actPickerChange="irregularMenStatistic"
                ></time-shortcut>
              </div>
              <div class="statics-content">
                <div class="chart-area flex-box">
                  <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" :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>
                      <span class="val">1.31</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-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 class="thbg" :data="irregularTableData">
                  <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"
@@ -170,6 +319,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>
@@ -178,73 +336,902 @@
            <div class="statics-part">
              <div class="statics-header">
                <span class="title">重点地段违规事件统计</span>
                <time-shortcut @actPickerChange="irregularEventStatistic"></time-shortcut>
                <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>
                  <el-radio-button label="hc">会车</el-radio-button>
                  <el-radio-button label="lsmx">临时慢性</el-radio-button>
                  <el-radio-button label="lsmx">临时慢行</el-radio-button>
                </el-radio-group>
                <!-- <Pie :options="optionsOfIrregularEventPie"></Pie> -->
                <Pie :options="optionsOfHidDangerPie"></Pie>

                <Pie
                  :options="optionsOfIrregularEventPie"
                  style="padding-top: 20px"
                ></Pie>
              </div>
            </div>
          </div>
        </div>
        <div class="part">
        <div class="part-bottom">
          <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>
            <dataset-chart style="width: 100%"></dataset-chart>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-content" v-if="actCardTab=='taskStatistic'">
      
    <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="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="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
                  @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"
                  :current-page.sync="PageIndex"
                  :page-size="PageSize"
                  :page-sizes="pageSizes"
                  layout="total,sizes, prev, pager, next"
                  :total="taskAnalyzeCaseTableData.length"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import timeShortcut from './timeShortcut';
import Bar from './charts/bar';
import Pie from './charts/pie';
import LineChart from './charts/line';
import SwipeTabs from './swipeTabs';
import DatasetChart from './charts/dataset';
import timeShortcut from "./timeShortcut";
import Bar from "./charts/bar";
import Pie from "./charts/pie";
import LineChart from "./charts/line";
import SwipeTabs from "./swipeTabs";
import DatasetChart from "./charts/dataset";
import * as echarts from "echarts";
export default {
  components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart },
  data () {
  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;
    this.refreshShoubiNum();
    this.initChart();
  },
  data() {
    return {
      actCardTab: 'dataStatistic',
      hidDangerTab: 'hidDanderStatistic',
      searchTime: [],
      actHidDanderChart: 'bar',
      optionsOfHidDangerBar: {
        color: ['#9ed2f5'],
      actCardTab: "dataStatistic",
      //actHiddanderTab: 'hidDanderStatistic',
      optionsOfWeekAnalyze: {
        animation: false,
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 10,
          //containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'shadow'
            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: [100, 103, 101, 107, 104, 111, 109],
            type: "line",
            smooth: true,
            areaStyle: {
              opacity: 0.7,
            },
            color: "#975fe3",
          },
        ],
      },
      optionsOfTransferSumBar: {
        color: ["#3ba1ff"],
        grid: {
          top: 0,
          left: 10,
          right: 10,
          bottom: 30,
          //containLabel: true
        },
        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,
          boundaryGap: [0, "45%"],
          label: {
            show: false,
          },
        },
        series: [
          {
            name: "数量",
            type: "bar",
            barWidth: "24%",
            data: [123, 120, 157, 140, 147, 172, 166],
          },
        ],
      },
      searchHidDanderTime: [],
      actHiddanderTab: "hidDanderStatistic",
      actHidDanderStatiscChart: "bar",
      actHidDanderTrendChart: "line",
      optionsOfHidDangerBar: {
        color: ["#9ed2f5"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
            type: "category",
            data: [
              "未鸣笛",
              "未手比",
              "未呼唤",
              "运行中睡觉",
              "未检查",
              "未应答",
            ],
            axisTick: {
              alignWithLabel: true
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            barWidth: "60%",
            label: {
              show: true,
              position: "top",
            },
            data: [
              { value: 1, itemStyle: { color: "#3aa0ff" } },
              { value: 0, itemStyle: { color: "#36cbcb" } },
              { value: 1, itemStyle: { color: "#4dcb73" } },
              { value: 1, itemStyle: { color: "#fad337" } },
              { value: 3, itemStyle: { color: "#f2637b" } },
              { value: 2, itemStyle: { color: "#975fe4" } },
            ],
          },
        ],
      },
      optionsOfHidDangerTrend: {
        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: [83, 83, 85, 85, 80, 40, 30],
            type: "line",
            color: "#5dbafd",
            symbolSize: 10,
            symbol: "circle",
            lineStyle: {
              color: "#61b4ff",
              width: 2,
            },
            itemStyle: {
              color: "#98d87d",
            },
          },
        ],
      },
      optionsOfHidDangerTrendPie: {
        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: ["50%", "80%"],
            //center: ['40%','60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              // position: 'center',
              formatter: "{b}\n{c} ",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 83, name: "未鸣笛" },
              { value: 83, name: "未手比" },
              { value: 85, name: "未呼唤" },
              { value: 80, name: "运行中睡觉" },
              { value: 40, name: "未检查" },
              { value: 30, name: "未应答" },
            ],
          },
        ],
      },
      optionsOfHidDangerPie: {
        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: 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: 127, name: "张磊" },
              { value: 130, name: "李四" },
              { value: 128, name: "王丽" },
              { value: 129, name: "马宏宇" },
              { value: 126, name: "刘乃超" },
              { value: 112, name: "何光宗" },
            ],
          },
        ],
      },
      rankList: [
        {
          id: "jl",
          name: "机辆分公司",
          val: 121,
        },
        {
          id: "ztyj",
          name: "中铁一局",
          val: 52,
        },
        {
          id: "ztsj",
          name: "中铁四局",
          val: 40,
        },
        {
          id: "ztsanj",
          name: "中铁三局",
          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,
        grid: {
          top: 0,
          left: 0,
          bottom: 10,
          containLabel: true,
        },
        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,
          boundaryGap: [0, "30%"],
          label: {
            show: false,
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            areaStyle: {
              opacity: 0.3,
            },
            color: "#5dbafd",
          },
        ],
      },
      optionsOfIrregularPer: {
        animation: false,
        grid: {
          top: 0,
          left: 0,
          bottom: 10,
          containLabel: true,
        },
        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.3,
            },
            color: "#8adee6",
          },
        ],
      },
      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: ["50%", "80%"],
            //center: ['40%','60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              // position: 'center',
              formatter: "{b}\n{c} ",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b}\n{c} ",
                  labelLine: {
                    show: true,
                  },
                },
              },
            },
            // labelLine: {
            //   show: false
            // },
            data: [
              { value: 32, name: "防护地段" },
              { value: 55, name: "进出站" },
              { value: 42, name: "过分相" },
              { value: 96, name: "会车" },
              { value: 20, name: "临时慢行" },
            ],
          },
        ],
      },
      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: [new Date(2021, 1, 22), new Date(2021, 2, 1)],
      optionsOfTaskAnalyzeBar: {
        color: ["#fbd438", "#4fcb74"],
        dataset: {
          source: [
            ["mon", 44, 83],
            ["tue", 47, 83],
            ["wed", 43, 85],
            ["thu", 44, 85],
            ["fri", 46, 80],
            ["sat", 12, 40],
            ["sun", 9, 34],
          ],
        },
        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: {
@@ -254,189 +1241,398 @@
            // nameTextStyle: {
            //   color: "#333"
            // }
          }
          },
        ],
        yAxis: [
          {            
            type: 'value',
          {
            type: "value",
            axisLine: {
              show: false
            }
          }
              show: false,
            },
          },
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '24%',
            data: [270, 500, 300, 430, 620, 540]
          }
        ]
            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]
          },
        ],
      },
      optionsOfHidDangerPie: {
      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: {
    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 = {
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
          show: false,
        },
        legend: {
          orient: 'vertical',
          right: 10,
          y: 'center',
          data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答']
          show: false,
        },
        series: [
          {
            name: '异常事件',
            type: 'pie',
            color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
            radius: ['70%', '90%'],
            //center: ['40%','60%'],
            name: "Access From",
            type: "pie",
            left: 5,
            top: 5,
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
                show: false,
              },
            },
            labelLine: {
              show: false
              show: false,
            },
            data: [
              { value: 270, name: '未鸣笛' },
              { value: 500, name: '未手比' },
              { value: 300, name: '未呼唤' },
              { value: 430, name: '运行中睡觉' },
              { value: 620, name: '未检查' },
              { value: 540, name: '未应答' },
            ]
          }
        ]
      },
      optionsOfIrregularSum: {
        animation: false,
        grid: {
          top: 0,
          left: 0
        },
        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,
          boundaryGap: [0, '30%'],
          label: {
            show: false
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.3
            },
            color: '#5dbafd'
          }
        ]
      },
      optionsOfIrregularPer: {
        animation: false,
        grid: {
          top: 0,
          left: 0
        },
        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.3
            },
            color: '#8adee6'
          }
        ]
      },
      irregularTableData: [],
      PageIndex: 1,
      PageSize: 5,
      pageSizes: [5, 10],
      tableTotal: 0,
      irregularEventType: 'fhdd',
      optionsOfIrregularEventPie: {
              { value: 25, name: "Search Engine" },
              { value: 75, name: "Direct" },
            ],
          },
        ],
        color: ["#f8af4d", "rgb(211, 220, 239)"],
      };

      }
    }
      option1 && myChart1.setOption(option1);

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

      let option2 = {
        top: 0,
        left: 0,
        grid: {
          x: 5,
          y: 15,
          x2: 35,
          y2: 40,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          show: false,
          type: "value",
        },
        series: [
          {
            data: [82, 332, 290, 934, 529, 1330, 132],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#213EB4",
            },
            areaStyle: {
              color: "#213EB4",
            },
            showSymbol: false,
          },
        ],
      };

      option2 && myChart2.setOption(option2);

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

      let option3 = {
        top: 0,
        left: 0,
        grid: {
          x: 5,
          y: 15,
          x2: 35,
          y2: 40,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          show: false,
          type: "value",
        },
        series: [
          {
            data: [282, 332, 290, 434, 229, 530, 332],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#26d4b4",
            },
            showSymbol: false,
          },
          {
            data: [282, 332, 290, 434, 229, 530, 332],
            type: "bar",
            barWidth: 10,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组中的颜色
                color: function (params) {
                  var colorList = [
                    "#26D4B4",
                    "rgb(184, 241, 230)",
                    "#26D4B4",
                    "rgb(184, 241, 230)",
                    "#26D4B4",
                    "rgb(184, 241, 230)",
                    "#26D4B4",
                    "rgb(184, 241, 230)",
                  ];
                  return colorList[params.dataIndex];
                },
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option3 && myChart3.setOption(option3);

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

      let option4 = {
        top: 0,
        left: 0,
        grid: {
          x: 5,
          y: 15,
          x2: 35,
          y2: 40,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          show: false,
          type: "value",
        },
        series: [
          {
            data: [82, 332, 290, 934, 529, 1330, 132],

            type: "line",
            smooth: true,
            lineStyle: {
              color: "#ed663e",
            },
            showSymbol: false,
          },
          {
            data: [82, 332, 290, 934, 529, 1330, 132],
            barWidth: 10,
            type: "bar",
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组中的颜色
                color: function (params) {
                  var colorList = [
                    "rgb(247, 185, 166)",
                    "#ed663e",
                    "rgb(247, 185, 166)",
                    "#ed663e",
                    "rgb(247, 185, 166)",
                    "#ed663e",
                    "rgb(247, 185, 166)",
                    "#ed663e",
                    "rgb(247, 185, 166)",
                  ];
                  return colorList[params.dataIndex];
                },
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option4 && myChart4.setOption(option4);
    },
  },
  methods: {
    renderIrregularMenTable () {

  watch: {
    actCardTab(val) {
      this.$emit(
        "breadcrumb2Update",
        val == "dataStatistic" ? "数据统计分析" : "任务统计分析"
      );
    },
    handleTableSizeChange () {
  },
};

    },
    timeShortChange (time) {
//                                title : {
//                                    /*  text: '某站点用户访问来源',
//                                      subtext: '纯属虚构',
//                                      x:'center'*/
//                                },
//                                tooltip : {
//                                    trigger: 'item',
//                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
//                                },
//                                legend: {
//                                    orient: 'vertical',
//                                    left: 'right',
//                                    bottom:'80px',
//                                    data: ['企业','个体','社会组织','事业单位','机关单位','其他']
//                                },
//                                series : [
//                                    {
//                                        name: '占比情况',
//                                        type: 'pie',
//                                        radius : '55%',
//                                        center: ['40%', '60%'],
//                                        data: data,
// /*在series中添加itemStyle即可直观显示饼型数值*/
//                                        itemStyle:{
//                                 normal:{
//                                    label:{
//                                       show: true,
//                                       formatter: '{b} : {c} ({d}%)'
//                                       },
//                                       labelLine :{show:true}
//                                       }
//                                  }
//                                    }
//                                ]

    },
    irregularMenStatistic (time) {

    },
    irregularEventStatistic (time) {

    }
  }
}
//                            };
//                            myChart_qyhhmd.setOption(option,true)
</script>

<style lang="scss">
* {
  color: #425277;
}
.guide-index {
  background-color: #f0f2f5;
  .el-tabs__nav-wrap::after {
    width: 99.6%;
    left: 0.2%;
  }
  .tab-menu {
    background-color: #fff;
    border-radius: 10px;
    height: 60px;
  }
  .el-progress-bar__outer {
    border-radius: 2px;
  }
  .el-progress-bar__inner {
    border-radius: 2px;
  }
  .triangle {
    width: 0;
    height: 0;
@@ -454,6 +1650,27 @@
      border-right-color: transparent;
    }
  }
  .defined-progress {
    position: relative;
    &:before {
      content: "";
      position: absolute;
      width: 2px;
      height: 4px;
      background: #1890ff;
      top: -6px;
      right: -5px;
    }
    &:after {
      content: "";
      position: absolute;
      width: 2px;
      height: 4px;
      background: #1890ff;
      bottom: -6px;
      right: -5px;
    }
  }
  .tab-menu {
    .el-tabs__item {
      padding: 0 30px !important;
@@ -462,15 +1679,126 @@
    }
  }
  .tab-content {
    padding: 20px;
    // padding: 18px 12px;
    padding-top: 20px;

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

      // margin-left: -2px;
      .el-card {
        height: 190px;
        flex: 1;
        margin-right: 20px;
        text-align: left;
        border-radius: 10px;

        .el-card__body {
          display: flex;
        }

        .left {
          .title {
            .icon {
              font-size: 15px;
              margin-right: 15px;
              color: #f8af4d;
            }
            .icon2 {
              color: #213eb4;
            }
            .icon3 {
              color: #26d4b4;
            }
            .icon5 {
              color: #ed663e;
            }
            .info {
              font-size: 12px;
            }
          }
          .weekNum {
            font-size: 36px;
            font-size: 700;
            margin: 17px 0 17px 30px;
          }

          .mid {
            display: flex;
            align-items: center;
            .circle {
              margin-right: 18px;
              margin-left: 5px;
              width: 0;
              height: 0;
              border: 3px solid #f8af4d;
              border-radius: 3px;
            }

            .circle2 {
              margin-right: 18px;
              margin-left: 5px;
              width: 0;
              height: 0;
              border: 3px solid #213eb4;
              border-radius: 3px;
            }
            .circle3 {
              margin-right: 18px;
              margin-left: 5px;
              width: 0;
              height: 0;
              border: 3px solid #26d4b4;
              border-radius: 3px;
            }
            .circle4 {
              margin-right: 18px;
              margin-left: 5px;
              width: 0;
              height: 0;
              border: 3px solid #ed663e;
              border-radius: 3px;
            }
          }

          .dayNum {
            font-size: 20px;
            margin: 13px 0 0 36px;
          }
        }

        .right {
          position: relative;
          width: 170px;
          #chart1,
          #chart2,
          #chart3,
          #chart4 {
            margin-top: 40px;
            margin-left: 30px;
            width: 120px;
            height: 120px;
          }
          #chart2,
          #chart3,
          #chart4 {
            height: 100%;
            width: 100%;
          }

          .outCircle {
            position: absolute;
            top: 51px;
            left: 41px;
            width: 103px;
            height: 103px;
            border-radius: 50%;
            border: 1px solid #f8af4d;
          }
        }

        /* .el-card__body {
          padding-bottom: 13px;
        }
        .title {
@@ -495,13 +1823,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,34 +1843,50 @@
          display: flex;
          align-items: center;
          color: #777;
          .name{
          .name {
            margin-right: 20px;
          }
        }
        } */
      }
    }
    .part {
      padding: 20px 0;
      margin-bottom: 20px;
      .part-top {
        background-color: #fff;
      }
      .part-bottom {
        background-color: #fff;
        // padding: 0 30px 30px 30px;
        padding: 0 0 25px 0;

        .tab-detail {
          margin: 0 25px;
        }
      }
      .header-width-tab {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;

        .rt {
          display: flex;
          padding-top: 20px;
          margin-right: 25px;
        }
      }
      .statics {
        display: flex;
        padding: 0 10px;
        // padding: 0 10px;
        min-height: 400px;
        margin-bottom: 20px;
        .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 +1894,7 @@
          }
        }
        .statics-part {
          flex: 1;
          .statics-content {
            padding: 0 20px;
            .chart-area {
@@ -575,10 +1920,14 @@
        .lt {
          text-align: left;
          flex: 1;
          padding-right: 40px;
          padding: 3px 15px 15px 18px;
          background-color: #fff;
          margin-right: 18px;
        }
        .rt {
          text-align: left;
          background-color: #fff;
          padding: 3px 15px 15px 18px;
          width: 400px;
          .header {
            display: flex;
@@ -590,6 +1939,8 @@
          }
          .rank-list {
            padding: 10px 0;
            max-height: 380px;
            overflow-y: auto;
            .rank-item {
              height: 36px;
              display: flex;
@@ -605,9 +1956,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;
              }
            }
          }
@@ -619,12 +1985,44 @@
        .gt {
          flex: 1;
          width: auto;
          //padding: 0 20px;
        }
      }
      .tab-swiper {
        width: calc(100vw - 340px);
        margin-bottom: 20px;
        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%);
        }
        .icon .iconfont {
          font-size: 40px;
          margin-right: 24px;
        }
        .indicator-title {
          font-size: 14px;
          color: #999;
          margin-bottom: 15px;
        }
        .indicator-val {
          font-size: 24px;
        }
      }
    }
  }