web/apsDashboard-1.git

			@@ -4,8 +4,89 @@
			<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-if="actCardTab == 'dataStatistic'">
			<div class="card-view">
			<el-card>
			<div class="left">
			<div class="title">
			<span class="icon iconfont"></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">
			<bar :options="option1"></bar>
			</div>
			</div>
			</el-card>
			<el-card>
			<div class="left">
			<div class="title">
			<span class="icon iconfont icon2"></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">
			<bar :options="option2"></bar>
			</div>
			</div>
			</el-card>
			<el-card>
			<div class="left">
			<div class="title">
			<img src="/images/shuohuang/组 731.png/" alt="" class="icon3" />
			<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">
			<bar :options="option3"></bar>
			</div>
			</div>
			</el-card>
			<el-card>
			<div class="left">
			<div class="title">
			<img src="/images/shuohuang/组 727.png/" alt="" class="icon3" />

			<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">
			<bar :options="option4"></bar>
			</div>
			</div>
			</el-card>
			</div>

			<!-- <div class="card-view">
			<el-card>
			<div class="title">
			<span class="lt">本周隐患数量</span>
			@@ -39,9 +120,12 @@
			<i class="el-icon-warning-outline"></i>
			</span>
			</div>
			<div class="val">{{$numberFormat(735)}}</div>
			<div class="val">{{ $numberFormat(735) }}</div>
			<div class="trend">
			<line-chart :options="optionsOfWeekAnalyze" style="height:50px"></line-chart>
			<line-chart
			:options="optionsOfWeekAnalyze"
			style="height: 50px"
			></line-chart>
			</div>
			<div class="devide"></div>
			<div class="detail">
			@@ -56,9 +140,9 @@
			<i class="el-icon-warning-outline"></i>
			</span>
			</div>
			<div class="val">{{$numberFormat(1025)}}</div>
			<div class="val">{{ $numberFormat(1025) }}</div>
			<div class="trend">
			<Bar :options="optionsOfTransferSumBar" style="height: 70px;"></Bar>
			<Bar :options="optionsOfTransferSumBar" style="height: 70px"></Bar>
			</div>
			<div class="devide"></div>
			<div class="detail">
			@@ -98,83 +182,356 @@
			</div>
			</div>
			</el-card>
			</div>
			</div> -->
			<div class="part">
			<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 @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>
			<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 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" 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 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>
			</div> -->

			<div class="part-head">
			<div class="top">
			<div class="title">隐患事件</div>
			<div class="control">
			<div class="icon iconfont" @click="click1"></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"
			></span
			>
			<span
			class="icon iconfont down"
			v-if="index == 1 \|\| index == 4"
			></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"></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 @actPickerChange="irregularMenStatistic"></time-shortcut>
			<time-shortcut
			@actPickerChange="irregularMenStatistic"
			></time-shortcut>
			</div>
			<div class="statics-content">
			<div class="chart-area flex-box">
			@@ -184,31 +541,32 @@
			<span class="val">187</span>
			<span class="ratio">17.1%</span>
			</div>
			<line-chart :options="optionsOfIrregularSum" style="height:70px"></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">1.31</span>
			</div>
			<line-chart :options="optionsOfIrregularPer" style="height:70px"></line-chart>
			<line-chart
			:options="optionsOfIrregularPer"
			style="height: 70px"
			></line-chart>
			</div>
			</div>
			<el-table class="thbg" :data="irregularTableData">
			<el-table-column label="排名" type="index" width="90"></el-table-column>
			<el-table-column
			label="排名"
			type="index"
			width="90"
			></el-table-column>
			<el-table-column label="姓名" prop="name"></el-table-column>
			<el-table-column label="违规次数" prop="wg"></el-table-column>
			<!-- <el-table-column label="周涨幅" prop="ratio"></el-table-column> -->

			</el-table>
			<!-- <el-pagination
			@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"
			@@ -219,13 +577,73 @@
			: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"></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 @actPickerChange="irregularEventStatistic"></time-shortcut>
			<time-shortcut
			@actPickerChange="irregularEventStatistic"
			></time-shortcut>
			</div>
			<div class="statics-content">
			<el-radio-group
			@@ -239,130 +657,233 @@
			<el-radio-button label="hc">会车</el-radio-button>
			<el-radio-button label="lsmx">临时慢行</el-radio-button>
			</el-radio-group>
			<Pie :options="optionsOfIrregularEventPie" style="padding-top:20px;"></Pie>

			<Pie
			:options="optionsOfIrregularEventPie"
			style="padding-top: 20px"
			></Pie>
			</div>
			</div>
			</div> -->
			</div>
			</div>
			<div class="part">
			<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>
			<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="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"></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"></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"></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"
			@@ -371,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>
			@@ -390,45 +910,83 @@
			</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";
			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 },
			mounted () {
			let tempArr = [{
			"text": "Same but with checkboxes",
			"children": [
			{
			"text": "initially selected",
			"selected": true
			}
			]
			}];
			components: {
			//timeShortcut,
			Bar,
			Pie,
			LineChart,
			SwipeTabs,
			DatasetChart,
			},
			mounted() {
			let tempArr = [
			{
			text: "Same but with checkboxes",
			children: [
			{
			text: "initially selected",
			selected: true,
			},
			],
			},
			];
			for (var i = 0; i < 20; i++) {
			tempArr[0].children.push({
			"text": "initially open",
			"icon": "fa fa-folder icon-state-default",
			"opened": true,
			"children": [
			text: "initially open",
			icon: "fa fa-folder icon-state-default",
			opened: true,
			children: [
			{
			"text": "Another node"
			}
			]
			})
			text: "Another node",
			},
			],
			});
			}
			tempArr.forEach(node => {
			tempArr.forEach((node) => {
			//if(node.children.length)

			})
			this.jsTreeNodes = tempArr
			});
			this.jsTreeNodes = tempArr;
			this.refreshShoubiNum();
			},
			data () {
			data() {
			return {
			actCardTab: 'dataStatistic',
			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: {
			animation: false,
			@@ -440,44 +998,44 @@
			//containLabel: true
			},
			tooltip: {
			trigger: 'axis',
			trigger: "axis",
			axisPointer: {
			type: 'cross',
			type: "cross",
			label: {
			backgroundColor: '#6a7985'
			}
			}
			backgroundColor: "#6a7985",
			},
			},
			},
			xAxis: {
			show: false,
			type: 'category',
			type: "category",
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
			label: {
			show: false
			}
			show: false,
			},
			},
			yAxis: {
			type: 'value',
			type: "value",
			show: false,
			label: {
			show: false
			}
			show: false,
			},
			},
			series: [
			{
			data: [100, 103, 101, 107, 104, 111, 109],
			type: 'line',
			type: "line",
			smooth: true,
			areaStyle: {
			opacity: 0.7
			opacity: 0.7,
			},
			color: '#975fe3'
			}
			]
			color: "#975fe3",
			},
			],
			},
			optionsOfTransferSumBar: {
			color: ['#3ba1ff'],
			color: ["#3ba1ff"],
			grid: {
			top: 0,
			left: 10,
			@@ -486,91 +1044,101 @@
			//containLabel: true
			},
			tooltip: {
			trigger: 'axis',
			trigger: "axis",
			axisPointer: {
			type: 'cross',
			type: "cross",
			label: {
			backgroundColor: '#6a7985'
			}
			}
			backgroundColor: "#6a7985",
			},
			},
			},
			xAxis: {
			show: false,
			type: 'category',
			type: "category",
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
			label: {
			show: false
			}
			show: false,
			},
			},
			yAxis: {
			type: 'value',
			type: "value",
			show: false,
			boundaryGap: [0, '45%'],
			boundaryGap: [0, "45%"],
			label: {
			show: false
			}
			show: false,
			},
			},
			series: [
			{
			name: '数量',
			type: 'bar',
			barWidth: '24%',
			data: [123, 120, 157, 140, 147, 172, 166]
			}
			]
			name: "数量",
			type: "bar",
			barWidth: "24%",
			data: [123, 120, 157, 140, 147, 172, 166],
			},
			],
			},
			searchHidDanderTime: [],
			actHiddanderTab: 'hidDanderStatistic',
			actHidDanderStatiscChart: 'bar',
			actHidDanderTrendChart: 'line',
			actHiddanderTab: "hidDanderStatistic",
			actHidDanderStatiscChart: "bar",
			actHidDanderTrendChart: "line",
			optionsOfHidDangerBar: {
			color: ['#9ed2f5'],
			color: ["#9ed2f5"],
			tooltip: {
			trigger: 'axis',
			trigger: "axis",
			axisPointer: {
			type: 'shadow'
			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,
			},
			// axisLine: {
			// lineStyle: {
			// color: '#ccc'
			// }
			// },
			// nameTextStyle: {
			// color: "#333"
			// }
			}
			},
			],
			yAxis: [
			{
			type: 'value',
			type: "value",
			axisLine: {
			show: false
			}
			}
			show: false,
			},
			},
			],
			series: [
			{
			name: '数量',
			type: 'bar',
			barWidth: '24%',
			data: [21, 102, 100, 1, 7, 14]
			}
			]
			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: {
			@@ -580,265 +1148,323 @@
			containLabel: true,
			},
			tooltip: {
			trigger: 'axis',
			trigger: "axis",
			axisPointer: {
			type: 'cross',
			type: "cross",
			label: {
			backgroundColor: '#6a7985'
			}
			}
			backgroundColor: "#6a7985",
			},
			},
			},
			xAxis: {
			type: 'category',
			type: "category",
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
			label: {
			show: false
			}
			show: false,
			},
			},
			yAxis: {
			type: 'value',
			type: "value",
			axisLine: {
			show: false
			show: false,
			},
			label: {
			show: false
			}
			show: false,
			},
			},
			series: [
			{
			data: [83, 83, 85, 85, 80, 40, 30],
			type: 'line',
			color: '#5dbafd',
			type: "line",
			color: "#5dbafd",
			symbolSize: 10,
			symbol: 'circle',
			symbol: "circle",
			lineStyle: {
			color: '#61b4ff',
			color: "#61b4ff",
			width: 2,
			},
			itemStyle: {
			color: '#98d87d'
			}
			}
			]
			color: "#98d87d",
			},
			},
			],
			},
			optionsOfHidDangerTrendPie: {
			tooltip: {
			trigger: 'item',
			formatter: '{a}<br>{b}:{c} ({d}%)'
			trigger: "item",
			formatter: "{a}<br>{b}:{c} ({d}%)",
			},
			legend: {
			orient: 'vertical',
			orient: "vertical",
			right: 10,
			y: 'center',
			data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
			y: "center",
			data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
			},
			series: [
			{
			name: '异常事件',
			type: 'pie',
			color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
			radius: ['70%', '90%'],
			//center: ['40%','60%'],
			name: "异常事件",
			type: "pie",
			color: [
			"#3aa0ff",
			"#36cbcb",
			"#4dcb73",
			"#fad337",
			"#f2637b",
			"#975fe4",
			"rgb(47, 108, 213)",
			],
			radius: ["50%", "70%"],
			center: ["40%", "40%"],
			avoidLabelOverlap: false,
			label: {
			show: false,
			position: 'center',
			formatter: '{b}\n{c} '
			// position: 'center',
			formatter: "{b}\n{c} ",
			},
			emphasis: {
			label: {
			show: true,
			fontSize: '30',
			fontWeight: 'bold'
			}
			fontSize: "20",
			fontWeight: "bold",
			},
			},
			labelLine: {
			show: false
			show: false,
			},
			data: [
			{ value: 83, name: '未鸣笛' },
			{ value: 83, name: '未手比' },
			{ value: 85, name: '未呼唤' },
			{ value: 80, name: '运行中睡觉' },
			{ value: 40, name: '未检查' },
			{ value: 30, name: '未应答' },
			]
			}
			]
			{ value: 83, name: "Mon" },
			{ value: 83, name: "Tue" },
			{ value: 85, name: "Wed" },
			{ value: 80, name: "Thu" },
			{ value: 40, name: "Fri" },
			{ value: 30, name: "Sat" },
			{ value: 30, name: "Sun" },
			],
			},
			],
			},
			optionsOfHidDangerPie: {
			tooltip: {
			trigger: 'item',
			formatter: '{a}<br>{b}:{c} ({d}%)'
			trigger: "item",
			formatter: "{a}<br>{b}:{c} ({d}%)",
			},
			legend: {
			orient: 'vertical',
			orient: "vertical",
			right: 10,
			y: 'center',
			data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
			y: "center",
			data: [
			"未鸣笛",
			"未手比",
			"未呼唤",
			"运行中睡觉",
			"未检查",
			"未应答",
			],
			},
			series: [
			{
			name: '异常事件',
			type: 'pie',
			color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
			radius: ['70%', '90%'],
			//center: ['40%','60%'],
			name: "异常事件",
			type: "pie",
			color: [
			"#3aa0ff",
			"#36cbcb",
			"#4dcb73",
			"#fad337",
			"#f2637b",
			"#975fe4",
			],
			radius: ["50%", "70%"],
			center: ["40%", "40%"],
			avoidLabelOverlap: false,
			label: {
			show: false,
			position: 'center',
			formatter: '{b}\n{c} '
			position: "center",
			formatter: "{b}\n{c} ",
			padding: [10, 0, 0, 0],
			},
			emphasis: {
			label: {
			show: true,
			fontSize: '30',
			fontWeight: 'bold'
			}
			fontSize: "30",
			fontWeight: "bold",
			},
			},
			labelLine: {
			show: false
			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: "未应答" },
			],
			},
			],
			},
			optionsOfTaskAssignPie: {
			tooltip: {
			trigger: 'item',
			formatter: '{a}<br>{b}:{c} ({d}%)'
			trigger: "item",
			formatter: "{a}<br>{b}:{c} ({d}%)",
			},
			legend: {
			orient: 'vertical',
			orient: "vertical",
			right: 10,
			y: 'center',
			data: ['张磊', '李四', '王丽', '马宏宇', '刘乃超', '何光宗']
			y: "center",
			data: ["张磊", "李四", "王思", "洛桑", "王锁志", "刘建国", "田星"],
			},
			series: [
			{
			name: '异常事件',
			type: 'pie',
			color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
			radius: ['70%', '90%'],
			//center: ['40%','60%'],
			name: "异常事件",
			type: "pie",
			color: [
			"#3aa0ff",
			"#36cbcb",
			"#4dcb73",
			"#fad337",
			"#f2637b",
			"#975fe4",
			],
			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,
			fontSize: '30',
			fontWeight: 'bold'
			}
			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: '何光宗' },
			]
			}
			]
			{ value: 22, name: "张磊" },
			{ value: 50, name: "李四" },
			{ value: 18, name: "王思" },
			{ value: 18, name: "洛桑" },
			{ value: 32, name: "王锁志" },
			{ value: 8, name: "刘建国" },
			{ value: 22, 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
			}],
			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
			containLabel: true,
			},
			tooltip: {
			trigger: 'axis',
			trigger: "axis",
			axisPointer: {
			type: 'cross',
			type: "cross",
			label: {
			backgroundColor: '#6a7985'
			}
			}
			backgroundColor: "#6a7985",
			},
			},
			},
			xAxis: {
			show: false,
			type: 'category',
			type: "category",
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
			label: {
			show: false
			}
			show: false,
			},
			},
			yAxis: {
			type: 'value',
			type: "value",
			show: false,
			boundaryGap: [0, '30%'],
			boundaryGap: [0, "30%"],
			label: {
			show: false
			}
			show: false,
			},
			},
			series: [
			{
			data: [820, 932, 901, 934, 1290, 1330, 1320],
			type: 'line',
			type: "line",
			smooth: true,
			areaStyle: {
			opacity: 0.3
			opacity: 0.3,
			},
			color: '#5dbafd'
			}
			]
			color: "#5dbafd",
			},
			],
			},
			optionsOfIrregularPer: {
			animation: false,
			@@ -846,95 +1472,118 @@
			top: 0,
			left: 0,
			bottom: 10,
			containLabel: true
			containLabel: true,
			},
			tooltip: {
			trigger: 'axis',
			trigger: "axis",
			axisPointer: {
			type: 'cross',
			type: "cross",
			label: {
			backgroundColor: '#6a7985'
			}
			}
			backgroundColor: "#6a7985",
			},
			},
			},
			xAxis: {
			show: false,
			type: 'category',
			type: "category",
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
			label: {
			show: false
			}
			show: false,
			},
			},
			yAxis: {
			type: 'value',
			type: "value",
			show: false,
			label: {
			show: false
			}
			show: false,
			},
			},
			series: [
			{
			data: [820, 932, 901, 934, 1290, 1330, 1320],
			type: 'line',
			type: "line",
			smooth: true,
			areaStyle: {
			opacity: 0.3
			opacity: 0.3,
			},
			color: '#8adee6'
			}
			]
			color: "#8adee6",
			},
			],
			},
			irregularTableData: [{ name: '吴国梁', wg: 2 }, { name: '王仁兴', wg: 1 }, { name: '罗元发', wg: 1 }],
			irregularTableData: [
			{ name: "吴国梁", wg: 8 },
			{ name: "王仁兴", wg: 6 },
			{ name: "罗元发", wg: 5 },
			{ name: "张志红", wg: 3 },
			{ name: "刘潭浩", wg: 1 },
			],
			PageIndex: 1,
			PageSize: 5,
			pageSizes: [5, 10],
			tableTotal: 0,
			irregularEventType: 'fhdd',
			irregularEventType: "fhdd",
			optionsOfIrregularEventPie: {
			tooltip: {
			trigger: 'item',
			formatter: '{a}<br>{b}:{c} ({d}%)'
			trigger: "item",
			formatter: "{a}<br>{b}:{c} ({d}%)",
			},
			legend: {
			orient: 'vertical',
			orient: "vertical",
			right: 10,
			y: 'center',
			data: ['防护地段', '进出站', '过分相', '会车', '临时慢行']
			y: "center",
			data: ["防护地段", "进出站", "过分相", "会车", "临时慢行"],
			},
			series: [
			{
			name: '异常事件',
			type: 'pie',
			color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
			radius: ['70%', '90%'],
			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} '
			// position: 'center',
			formatter: "{b}\n{c} ",
			},
			emphasis: {
			label: {
			show: true,
			fontSize: '30',
			fontWeight: 'bold'
			}
			fontSize: "20",
			fontWeight: "bold",
			},
			},
			labelLine: {
			show: false
			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: '临时慢行' },

			]
			}
			]
			{ value: 32, name: "防护地段" },
			{ value: 55, name: "进出站" },
			{ value: 42, name: "过分相" },
			{ value: 96, name: "会车" },
			{ value: 20, name: "临时慢行" },
			],
			},
			],
			},
			searchTaskAssignTime: [],
			optionsOfTaskAssign: {
			@@ -945,78 +1594,88 @@
			containLabel: true,
			},
			tooltip: {
			trigger: 'axis',
			trigger: "axis",
			axisPointer: {
			type: 'cross',
			type: "cross",
			label: {
			backgroundColor: '#6a7985'
			}
			}
			backgroundColor: "#6a7985",
			},
			},
			},
			xAxis: {
			type: 'category',
			type: "category",
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
			label: {
			show: false
			}
			show: false,
			},
			},
			yAxis: {
			type: 'value',
			type: "value",
			axisLine: {
			show: false
			show: false,
			},
			label: {
			show: false
			}
			show: false,
			},
			},
			series: [
			{
			data: [820, 932, 901, 934, 1290, 1330, 1320],
			type: 'line',
			type: "line",
			smooth: true,
			areaStyle: {
			opacity: 0.3
			opacity: 0.3,
			},
			color: '#5dbafd'
			}
			]
			color: "#5dbafd",
			},
			],
			},
			searchTaskAnalyzeTime: [new Date(2021, 1, 22), new Date(2021, 2, 1)],
			optionsOfTaskAnalyzeBar: {
			color: ['#fbd438', '#4fcb74'],
			color: ["#DC6363", "#E0E4ED"],
			dataset: {
			source: [
			['mon', 44, 83],
			['tue', 47, 83],
			['wed', 43, 85],
			['thu', 44, 85],
			['fri', 46, 80],
			['sat', 12, 40],
			['sun', 9, 34],
			]
			["mon", 44, 83],
			["tue", 47, 83],
			["wed", 43, 85],
			["thu", 44, 85],
			["fri", 46, 80],
			["sat", 12, 40],
			["sun", 9, 34],
			],
			},
			legend: {
			left: 0
			x: "right",
			},
			tooltip: {
			trigger: 'axis',
			trigger: "axis",
			axisPointer: {
			//type: 'shadow'
			},
			},
			grid: {
			top: "9%",
			left: 10,
			right: 10,
			bottom: '3%',
			containLabel: true
			bottom: "7%",
			containLabel: true,
			},
			xAxis: [
			{
			type: 'category',
			type: "category",
			//data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
			axisTick: {
			alignWithLabel: true
			//y轴刻度线
			alignWithLabel: true,

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

			//data: [270, 500, 300, 430, 620, 540]
			},
			{
			name: '无异常',
			type: 'bar',
			stack: '异常',
			barWidth: 20,
			name: "无异常",
			type: "bar",
			stack: "异常",
			barWidth: 16,
			itemStyle: {
			normal: {
			barBorderRadius: [8, 8, 0, 0],
			},
			},
			//data: [270, 500, 300, 430, 620, 540]
			}
			]
			},
			],
			},
			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%' }],
			{
			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: [],
			}
			option1: {
			tooltip: {
			show: false,
			},
			legend: {
			show: false,
			},
			series: [
			{
			name: "Access From",
			type: "pie",
			left: 5,
			top: 5,
			radius: ["40%", "70%"],
			avoidLabelOverlap: false,
			label: {
			show: false,
			position: "center",
			},
			emphasis: {
			label: {
			show: false,
			},
			},
			labelLine: {
			show: false,
			},
			data: [
			{ value: 25, name: "Search Engine" },
			{ value: 75, name: "Direct" },
			],
			},
			],
			color: ["#f8af4d", "rgb(211, 220, 239)"],
			},
			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: [0, 332, 290, 934, 529, 1330, 0],
			type: "line",
			smooth: true,
			lineStyle: {
			color: "#213EB4",
			},
			areaStyle: {
			color: "#213EB4",
			},
			showSymbol: false,
			},
			],
			},
			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: {
			barBorderRadius: [5, 5, 0, 0],

			//每个柱子的颜色即为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)",
			},
			},
			},
			],
			},
			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: {
			barBorderRadius: [5, 5, 0, 0],
			//每个柱子的颜色即为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)",
			},
			},
			},
			],
			},
			};
			},
			methods: {
			initTabContent(tab){
			if(tab.name == "hidDanderStatistic"){
			this.actHidDanderStatiscChart = 'bar'
			}else{
			this.actHidDanderTrendChart = 'line'
			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) {

			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();
			},
			checkIrregularEventType (type) {

			click2() {
			this.$refs["timepick2"].focus();
			},
			taskAnalyzeCase (time) {

			click3() {
			this.$refs["timepick3"].focus();
			},
			taskAnalyzeStatics (time) {

			click4() {
			this.$refs["timepick4"].focus();
			},
			partAssignstatics (time) {

			click5() {
			this.$refs["timepick5"].focus();
			},
			taskAssignStatics (time) {

			click6() {
			this.$refs["timepick6"].focus();
			},
			renderIrregularMenTable () {

			},
			handleTableSizeChange () {

			},
			timeShortChange (time) {

			},
			irregularMenStatistic (time) {

			},
			irregularEventStatistic (time) {

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

			}
			// 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}
			// }
			// }
			// }
			// ]

			// };
			// 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;
			}
			@@ -1134,10 +2108,10 @@
			border-right-color: transparent;
			}
			}
			.defined-progress{
			.defined-progress {
			position: relative;
			&:before{
			content: '';
			&:before {
			content: "";
			position: absolute;
			width: 2px;
			height: 4px;
			@@ -1145,8 +2119,8 @@
			top: -6px;
			right: -5px;
			}
			&:after{
			content: '';
			&:after {
			content: "";
			position: absolute;
			width: 2px;
			height: 4px;
			@@ -1163,15 +2137,128 @@
			}
			}
			.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;

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

			.el-card__body {
			display: flex;
			}

			.left {
			.title {
			.icon {
			font-size: 15px;
			margin-right: 15px;
			color: #f8af4d;
			}
			.icon2 {
			color: #213eb4;
			}
			.icon3 {
			margin-right: 15px;
			width: 15px;
			height: 15px;
			}
			.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 {
			@@ -1219,25 +2306,59 @@
			.name {
			margin-right: 20px;
			}
			}
			} */
			}
			}
			.part {
			padding: 20px 0;
			margin-bottom: 20px;
			.part-top {
			background-color: #fff;
			}
			.part-bottom {
			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;
			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;
			}
			}
			.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: 30px;
			margin-bottom: 20px;
			.statics-header {
			height: 50px;
			display: flex;
			@@ -1276,14 +2397,492 @@
			}
			}
			.lt {
			overflow: hidden;
			padding: 0 35px 35px 35px;
			text-align: left;
			flex: 1;
			padding-right: 40px;
			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;
			width: 400px;
			.header {
			flex: 4;
			background-color: #fff;
			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;
			@@ -1330,56 +2929,453 @@
			width: 100px;
			}
			}
			}
			} */
			}
			}
			.flex-box {
			.lt,
			.rt,
			.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;
			}

			.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;
			}
			}
			}
			}

			.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;
			}
			}
			}
			}
			}
			}
			}
			}
			.general-view {
			display: flex;
			padding: 20px 50px;
			.indicator {

			.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;
			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%);
			.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;
			}
			}
			}
			}
			.icon .iconfont {
			font-size: 40px;
			margin-right: 24px;
			.mid-bottom {
			margin-top: 10px;
			height: 280px;
			}
			.indicator-title {
			font-size: 14px;
			color: #999;
			margin-bottom: 15px;
			}

			.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;
			}
			}
			}
			}
			.indicator-val {
			font-size: 24px;

			th {
			background-color: #2d52d7;
			div {
			color: #fff;
			}
			}

			tr:nth-child(even) {
			background-color: #f4f6f9;

			&:hover > td.el-table__cell:hover {
			background-color: #f4f6f9;
			}
			}

			tr:nth-child(odd) {
			background-color: #fff;

			&:hover > td.el-table__cell:hover {
			background-color: #fff;
			}
			}
			}
			}
			}
			.el-divider {
			margin: 0;
			}
			.el-date-editor {
			position: relative;
			left: -35px;
			top: 20px;
			width: 0 !important;
			height: 1px !important;
			opacity: 0 !important;
			}
			}
			</style>