From b4d2703e653bf702d705b18c20d9edb9066c7c8a Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 03 十一月 2021 17:35:10 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.5.5:10010/r/web/vue-smart-ai
---
src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 1925 +++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 1,629 insertions(+), 296 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index d412b00..593892f 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -4,12 +4,12 @@
<el-tab-pane label="鏁版嵁缁熻鍒嗘瀽" name="dataStatistic"></el-tab-pane>
<el-tab-pane label="浠诲姟缁熻鍒嗘瀽" name="taskStatistic"></el-tab-pane>
</el-tabs>
- <div class="tab-content" v-show="actCardTab == 'dataStatistic'">
+ <div class="tab-content" v-if="actCardTab == 'dataStatistic'">
<div class="card-view">
<el-card>
<div class="left">
<div class="title">
- <span class="icon iconfont"></span>
+ <span class="icon iconfont"></span>
<span class="info">鏈懆闅愭偅鏁伴噺</span>
</div>
<div class="weekNum">2758</div>
@@ -21,13 +21,15 @@
</div>
<div class="right">
<div class="outCircle"></div>
- <div id="chart1"></div>
+ <div id="chart1">
+ <bar :options="option1"></bar>
+ </div>
</div>
</el-card>
<el-card>
<div class="left">
<div class="title">
- <span class="icon iconfont icon2"></span>
+ <span class="icon iconfont icon2"></span>
<span class="info">鏈懆鍒嗘瀽杞︽閲�</span>
</div>
<div class="weekNum">258</div>
@@ -38,13 +40,15 @@
<div class="dayNum">25</div>
</div>
<div class="right">
- <div id="chart2"></div>
+ <div id="chart2">
+ <bar :options="option2"></bar>
+ </div>
</div>
</el-card>
<el-card>
<div class="left">
<div class="title">
- <span class="icon iconfont icon3"></span>
+ <img src="/images/shuohuang/缁� 731.png/" alt="" class="icon3" />
<span class="info">杞偍鎬婚噺</span>
</div>
<div class="weekNum">2758</div>
@@ -55,13 +59,16 @@
<div class="dayNum">100%</div>
</div>
<div class="right">
- <div id="chart3"></div>
+ <div id="chart3">
+ <bar :options="option3"></bar>
+ </div>
</div>
</el-card>
<el-card>
<div class="left">
<div class="title">
- <span class="icon iconfont icon5"></span>
+ <img src="/images/shuohuang/缁� 727.png/" alt="" class="icon3" />
+
<span class="info">浠诲姟瀹屾垚姣斾緥</span>
</div>
<div class="weekNum">90%</div>
@@ -72,7 +79,9 @@
<div class="dayNum">10%</div>
</div>
<div class="right">
- <div id="chart4"></div>
+ <div id="chart4">
+ <bar :options="option4"></bar>
+ </div>
</div>
</el-card>
</div>
@@ -175,7 +184,7 @@
</el-card>
</div> -->
<div class="part">
- <div class="part-top">
+ <!-- <div class="part-top">
<div class="header-width-tab">
<el-tabs
class="tab-menu"
@@ -242,9 +251,9 @@
<div class="rt">
<div class="header">
<span class="title">閮ㄩ棬闅愭偅鏁伴噺鎺掑悕</span>
- <!-- <el-select v-if="actHiddanderTab=='hidDanderStatistic'" size="small">
- <el-option>涓搧涓�灞�</el-option>
- </el-select>-->
+ // <el-select v-if="actHiddanderTab=='hidDanderStatistic'" size="small">
+ // <el-option>涓搧涓�灞�</el-option>
+ // </el-select>
</div>
<div class="rank-list">
<div
@@ -267,10 +276,257 @@
</div>
</div>
</div>
+ </div> -->
+
+ <div class="part-head">
+ <div class="top">
+ <div class="title">闅愭偅浜嬩欢</div>
+ <div class="control">
+ <div class="icon iconfont" @click="click1"></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
@@ -309,17 +565,8 @@
></el-table-column>
<el-table-column label="濮撳悕" prop="name"></el-table-column>
<el-table-column label="杩濊娆℃暟" prop="wg"></el-table-column>
- <!-- <el-table-column label="鍛ㄦ定骞�" prop="ratio"></el-table-column> -->
+
</el-table>
- <!-- <el-pagination
- @size-change="handleTableSizeChange"
- @current-change="renderIrregularMenTable"
- :current-page.sync="PageIndex"
- :page-size="PageSize"
- :page-sizes="pageSizes"
- layout="total,sizes, prev, pager, next"
- :total="tableTotal"
- ></el-pagination>-->
<el-pagination
@size-change="handleTableSizeChange"
@current-change="renderIrregularMenTable"
@@ -330,10 +577,68 @@
:total="irregularTableData.length"
></el-pagination>
</div>
- </div>
+ </div> -->
</div>
<div class="rt">
- <div class="statics-part">
+ <div class="rt-head">
+ <div class="title">閲嶇偣鍦版杩濊浜嬩欢缁熻</div>
+ <div class="control">
+ <div class="icon iconfont" @click="click3"></div>
+ <el-date-picker
+ ref="timepick3"
+ v-model="value3"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ >
+ </el-date-picker>
+ <div
+ class="time"
+ :class="{ active: placeConrtol == 'day' }"
+ @click="placeConrtol = 'day'"
+ >
+ 浠婃棩
+ </div>
+ <div
+ class="time"
+ :class="{ active: placeConrtol == 'week' }"
+ @click="placeConrtol = 'week'"
+ >
+ 鏈懆
+ </div>
+ <div
+ class="time"
+ :class="{ active: placeConrtol == 'mouth' }"
+ @click="placeConrtol = 'mouth'"
+ >
+ 鏈湀
+ </div>
+ <div
+ class="time"
+ :class="{ active: placeConrtol == 'year' }"
+ @click="placeConrtol = 'year'"
+ >
+ 鍏ㄥ勾
+ </div>
+ </div>
+ </div>
+ <el-divider></el-divider>
+ <div class="rt-bottom">
+ <div class="left">
+ <div
+ class="left-item"
+ v-for="i in 6"
+ :key="i"
+ :class="{ active: place_active == i }"
+ @click="place_active = i"
+ >
+ 闃叉姢鍦版
+ </div>
+ </div>
+ <div class="right">
+ <Pie :options="rt_chart" :pieW="400" :pieH="300" />
+ </div>
+ </div>
+ <!-- <div class="statics-part">
<div class="statics-header">
<span class="title">閲嶇偣鍦版杩濊浜嬩欢缁熻</span>
<time-shortcut
@@ -358,10 +663,14 @@
style="padding-top: 20px"
></Pie>
</div>
- </div>
+ </div> -->
</div>
</div>
<div class="part-bottom">
+ <div class="bottom-head">
+ <div class="title">杩濊鎯呭喌缁熻</div>
+ </div>
+ <el-divider></el-divider>
<div class="tab-swiper">
<swipe-tabs @checkTab="checkTabInSwipe"></swipe-tabs>
</div>
@@ -371,133 +680,210 @@
</div>
</div>
</div>
- <div class="tab-content" v-show="actCardTab == 'taskStatistic'">
- <div class="general-view">
- <div class="indicator">
- <div class="icon">
- <i class="iconfont iconrenwuzhipai" style="color: #3399ff"></i>
- </div>
- <div class="content">
- <div class="indicator-title">鏈懆浠诲姟鎸囨淳閲�</div>
- <div class="indicator-val">742</div>
- </div>
- </div>
- <div class="indicator">
- <div class="icon">
- <i class="iconfont iconfenxi" style="color: #4c76ff"></i>
- </div>
- <div class="content">
- <div class="indicator-title">鍒嗘瀽閲�</div>
- <div class="indicator-val">735</div>
- </div>
- </div>
- <div class="indicator lastOne">
- <div class="icon">
- <i class="iconfont iconweigui" style="color: #fdd476"></i>
- </div>
- <div class="content">
- <div class="indicator-title">杩濊閲�</div>
- <div class="indicator-val">245</div>
- </div>
- </div>
- </div>
- <div class="part">
- <div class="statics flex-box">
+ <div class="tab-content" v-if="actCardTab == 'taskStatistic'">
+ <div class="part2">
+ <div class="statics flex-box part2-top">
<div class="lt">
- <div class="statics-part">
- <div class="statics-header">
- <span class="title">浠诲姟鎸囨淳缁熻</span>
+ <div class="indicator">
+ <div class="icon">
+ <img src="/images/shuohuang/缁� 738.png/" alt="" />
</div>
- <div class="statics-content">
- <div class="flex-end">
- <time-shortcut
- @actPickerChange="taskAssignStatics"
- ></time-shortcut>
- <el-date-picker
- v-model="searchTaskAssignTime"
- type="datetimerange"
- size="small"
- range-separator="鑷�"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- align="right"
- ></el-date-picker>
- </div>
- <line-chart
- :options="optionsOfTaskAssign"
- style="height: 300px"
- ></line-chart>
+ <div class="content">
+ <div class="indicator-title">鏈懆浠诲姟鎸囨淳閲�</div>
+ <div class="indicator-val">742</div>
+ </div>
+ </div>
+ <div class="indicator">
+ <div class="icon">
+ <img src="/images/shuohuang/缁� 739.png/" alt="" />
+ </div>
+ <div class="content">
+ <div class="indicator-title">鍒嗘瀽閲�</div>
+ <div class="indicator-val">735</div>
+ </div>
+ </div>
+ <div class="indicator lastOne">
+ <div class="icon">
+ <img src="/images/shuohuang/缁� 740.png/" alt="" />
+ </div>
+ <div class="content">
+ <div class="indicator-title">杩濊閲�</div>
+ <div class="indicator-val">245</div>
</div>
</div>
</div>
- <div class="rt">
- <div class="statics-part">
- <div class="statics-header">
- <span class="title">閮ㄩ棬鎸囨淳浠诲姟鍗犳瘮</span>
- <time-shortcut
- @actPickerChange="partAssignstatics"
- ></time-shortcut>
- </div>
- <div class="statics-content">
- <Pie :options="optionsOfTaskAssignPie"></Pie>
- </div>
- </div>
- </div>
- </div>
- <div class="statics">
- <div class="statics-part">
- <div class="statics-header">
- <span class="title">浠诲姟鍒嗘瀽缁熻</span>
- </div>
- <div class="statics-content">
- <div class="flex-end">
- <time-shortcut
- @actPickerChange="taskAnalyzeStatics"
- ></time-shortcut>
- <el-date-picker
- v-model="searchTaskAnalyzeTime"
- type="datetimerange"
- size="small"
- range-separator="鑷�"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- align="right"
- ></el-date-picker>
- </div>
- <Bar
- :options="optionsOfTaskAnalyzeBar"
- style="height: 300px"
- ></Bar>
- </div>
- </div>
- </div>
- <div class="statics">
- <div class="statics-part">
- <div class="statics-header">
- <span class="title">浠诲姟鍒嗘瀽鎯呭喌</span>
- <time-shortcut @actPickerChange="taskAnalyzeCase"></time-shortcut>
- </div>
- <div class="statics-content">
- <div class="table-area">
- <el-table class="thbg" :data="taskAnalyzeCaseTableData">
- <el-table-column type="index" label="搴忓彿"></el-table-column>
- <el-table-column prop="name" label="濮撳悕"></el-table-column>
- <el-table-column prop="rwl" label="浠诲姟閲�"></el-table-column>
- <el-table-column prop="fxl" label="鍒嗘瀽閲�"></el-table-column>
- <el-table-column
- prop="pdwgl"
- label="鍒ゅ畾杩濊閲�"
- ></el-table-column>
- <el-table-column
- prop="pdwglv"
- label="鍒ゅ畾杩濊鐜�"
- ></el-table-column>
- <el-table-column prop="wcl" label="瀹屾垚鐜�"></el-table-column>
- </el-table>
- </div>
- <div class="flex-end">
- <!-- <el-pagination
+ <div class="mid">
+ <div class="mid-head">
+ <div class="title">浠诲姟鎸囨淳缁熻</div>
+ <div class="control">
+ <div class="icon iconfont" @click="click4"></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"
@@ -506,16 +892,15 @@
layout="total,sizes, prev, pager, next"
:total="tableTotal"
></el-pagination>-->
- <el-pagination
- @size-change="handleTableSizeChange"
- @current-change="renderIrregularMenTable"
- :current-page.sync="PageIndex"
- :page-size="PageSize"
- :page-sizes="pageSizes"
- layout="total,sizes, prev, pager, next"
- :total="taskAnalyzeCaseTableData.length"
- ></el-pagination>
- </div>
+ <el-pagination
+ @size-change="handleTableSizeChange"
+ @current-change="renderIrregularMenTable"
+ :current-page.sync="PageIndex"
+ :page-size="PageSize"
+ :page-sizes="pageSizes"
+ layout=" prev, pager, next,sizes,total"
+ :total="taskAnalyzeCaseTableData.length"
+ ></el-pagination>
</div>
</div>
</div>
@@ -532,8 +917,21 @@
import SwipeTabs from "./swipeTabs";
import DatasetChart from "./charts/dataset";
import * as echarts from "echarts";
+import eventBarOptions from "./charts/eventBarOptions";
+import trendBarChart from "./charts/trendBarChart";
+import lt_chart1 from "./charts/lt_chart1";
+import lt_chart2 from "./charts/lt_chart2";
+import rt_chart from "./charts/rt_chart";
+import part2_chart1 from "./charts/part2_chart1";
export default {
- components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart },
+ components: {
+ //timeShortcut,
+ Bar,
+ Pie,
+ LineChart,
+ SwipeTabs,
+ DatasetChart,
+ },
mounted() {
let tempArr = [
{
@@ -563,10 +961,31 @@
});
this.jsTreeNodes = tempArr;
this.refreshShoubiNum();
- this.initChart();
},
data() {
return {
+ place_active: 1,
+ value1: "",
+ value2: "",
+ value3: "",
+ value4: "",
+ value5: "",
+ value6: "",
+ active: 1,
+ part2_chart1,
+ rt_chart,
+ lt_chart1,
+ lt_chart2,
+ eventBarOptions,
+ trendBarChart,
+ personConrtol: "day",
+ situationConrtol: "day",
+ analysisConrtol: "day",
+ placeConrtol: "day",
+ eventConrtol: "day",
+ taskConrtol: "day",
+ dangerEvent: "bar",
+ dangerTrend: "bar",
actCardTab: "dataStatistic",
//actHiddanderTab: 'hidDanderStatistic',
optionsOfWeekAnalyze: {
@@ -801,8 +1220,8 @@
"#f2637b",
"#975fe4",
],
- radius: ["50%", "80%"],
- //center: ['40%','60%'],
+ radius: ["50%", "70%"],
+ center: ["40%", "40%"],
avoidLabelOverlap: false,
label: {
show: false,
@@ -860,13 +1279,14 @@
"#f2637b",
"#975fe4",
],
- radius: ["70%", "90%"],
- //center: ['40%','60%'],
+ radius: ["50%", "70%"],
+ center: ["40%", "40%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
formatter: "{b}\n{c} ",
+ padding: [10, 0, 0, 0],
},
emphasis: {
label: {
@@ -879,12 +1299,12 @@
show: false,
},
data: [
- { value: 21, name: "鏈福绗�" },
- { value: 102, name: "鏈墜姣�" },
- { value: 100, name: "鏈懠鍞�" },
- { value: 1, name: "杩愯涓潯瑙�" },
- { value: 7, name: "鏈鏌�" },
- { value: 14, name: "鏈簲绛�" },
+ { value: 22, name: "鏈福绗�" },
+ { value: 50, name: "鏈墜姣�" },
+ { value: 18, name: "鏈懠鍞�" },
+ { value: 18, name: "杩愯涓潯瑙�" },
+ { value: 32, name: "鏈鏌�" },
+ { value: 8, name: "鏈簲绛�" },
],
},
],
@@ -898,7 +1318,7 @@
orient: "vertical",
right: 10,
y: "center",
- data: ["寮犵", "鏉庡洓", "鐜嬩附", "椹畯瀹�", "鍒樹箖瓒�", "浣曞厜瀹�"],
+ data: ["寮犵", "鏉庡洓", "鐜嬫��", "娲涙", "鐜嬮攣蹇�", "鍒樺缓鍥�", "鐢版槦"],
},
series: [
{
@@ -912,14 +1332,32 @@
"#f2637b",
"#975fe4",
],
- radius: ["70%", "90%"],
- //center: ['40%','60%'],
+ radius: ["40%", "50%"],
+ center: ["40%", "50%"],
avoidLabelOverlap: false,
label: {
- show: false,
- position: "center",
- formatter: "{b}\n{c} ",
+ //灞曠ず鏂囨湰璁剧疆
+ normal: {
+ show: true, //灞曠ず
+ position: "outside", // outside琛ㄧず鏂囨湰鏄剧ず浣嶇疆涓哄閮�
+ },
+ emphasis: {
+ //鏂囨湰鏍峰紡
+ show: true, //灞曠ず
+ textStyle: {
+ //鏂囨湰鏍峰紡
+ fontSize: "14",
+ fontWeight: "600",
+ },
+ },
},
+ labelLine: {
+ //寮曞绾胯缃�
+ normal: {
+ show: true, //寮曞绾挎樉绀�
+ },
+ },
+
emphasis: {
label: {
show: true,
@@ -927,16 +1365,15 @@
fontWeight: "bold",
},
},
- labelLine: {
- show: false,
- },
+
data: [
- { value: 127, name: "寮犵" },
- { value: 130, name: "鏉庡洓" },
- { value: 128, name: "鐜嬩附" },
- { value: 129, name: "椹畯瀹�" },
- { value: 126, name: "鍒樹箖瓒�" },
- { value: 112, name: "浣曞厜瀹�" },
+ { value: 22, name: "寮犵" },
+ { value: 50, name: "鏉庡洓" },
+ { value: 18, name: "鐜嬫��" },
+ { value: 18, name: "娲涙" },
+ { value: 32, name: "鐜嬮攣蹇�" },
+ { value: 8, name: "鍒樺缓鍥�" },
+ { value: 22, name: "鐢版槦" },
],
},
],
@@ -1080,9 +1517,11 @@
],
},
irregularTableData: [
- { name: "鍚村浗姊�", wg: 2 },
- { name: "鐜嬩粊鍏�", wg: 1 },
- { name: "缃楀厓鍙�", wg: 1 },
+ { name: "鍚村浗姊�", wg: 8 },
+ { name: "鐜嬩粊鍏�", wg: 6 },
+ { name: "缃楀厓鍙�", wg: 5 },
+ { name: "寮犲織绾�", wg: 3 },
+ { name: "鍒樻江娴�", wg: 1 },
],
PageIndex: 1,
PageSize: 5,
@@ -1199,7 +1638,7 @@
},
searchTaskAnalyzeTime: [new Date(2021, 1, 22), new Date(2021, 2, 1)],
optionsOfTaskAnalyzeBar: {
- color: ["#fbd438", "#4fcb74"],
+ color: ["#DC6363", "#E0E4ED"],
dataset: {
source: [
["mon", 44, 83],
@@ -1212,7 +1651,7 @@
],
},
legend: {
- left: 0,
+ x: "right",
},
tooltip: {
trigger: "axis",
@@ -1221,9 +1660,10 @@
},
},
grid: {
+ top: "9%",
left: 10,
right: 10,
- bottom: "3%",
+ bottom: "7%",
containLabel: true,
},
xAxis: [
@@ -1231,7 +1671,16 @@
type: "category",
//data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'],
axisTick: {
+ //y杞村埢搴︾嚎
alignWithLabel: true,
+
+ show: false,
+ },
+ axisLine: {
+ lineStyle: {
+ color: "rbg(241, 241, 240)",
+ width: 1, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
+ },
},
// axisLine: {
// lineStyle: {
@@ -1249,6 +1698,18 @@
axisLine: {
show: false,
},
+ axisTick: {
+ //y杞村埢搴︾嚎
+ show: false,
+ },
+ splitLine: {
+ //缃戞牸绾�
+ lineStyle: {
+ color: "rgb(230, 230, 230)",
+ type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ },
+ show: true, //闅愯棌鎴栨樉绀�
+ },
},
],
series: [
@@ -1256,14 +1717,20 @@
name: "鏈夊紓甯�",
type: "bar",
stack: "寮傚父",
- barWidth: 20,
+ barWidth: 16,
+
//data: [270, 500, 300, 430, 620, 540]
},
{
name: "鏃犲紓甯�",
type: "bar",
stack: "寮傚父",
- barWidth: 20,
+ barWidth: 16,
+ itemStyle: {
+ normal: {
+ barBorderRadius: [8, 8, 0, 0],
+ },
+ },
//data: [270, 500, 300, 430, 620, 540]
},
],
@@ -1319,36 +1786,7 @@
},
],
jsTreeNodes: [],
- };
- },
- methods: {
- refreshShoubiNum() {
- let n = sessionStorage.getItem("shoubiNum");
- this.optionsOfHidDangerBar.series[0].data[1].value = +n;
- },
- initTabContent(tab) {
- if (tab.name == "hidDanderStatistic") {
- this.actHidDanderStatiscChart = "bar";
- } else {
- this.actHidDanderTrendChart = "line";
- }
- },
- checkTabInSwipe(tab) {},
- checkIrregularEventType(type) {},
- taskAnalyzeCase(time) {},
- taskAnalyzeStatics(time) {},
- partAssignstatics(time) {},
- taskAssignStatics(time) {},
- renderIrregularMenTable() {},
- handleTableSizeChange() {},
- timeShortChange(time) {},
- irregularMenStatistic(time) {},
- irregularEventStatistic(time) {},
- initChart() {
- var chartDom1 = document.getElementById("chart1");
- var myChart1 = echarts.init(chartDom1);
-
- var option1 = {
+ option1: {
tooltip: {
show: false,
},
@@ -1382,14 +1820,8 @@
},
],
color: ["#f8af4d", "rgb(211, 220, 239)"],
- };
-
- option1 && myChart1.setOption(option1);
-
- var chartDom2 = document.getElementById("chart2");
- var myChart2 = echarts.init(chartDom2);
-
- let option2 = {
+ },
+ option2: {
top: 0,
left: 0,
grid: {
@@ -1410,7 +1842,7 @@
},
series: [
{
- data: [82, 332, 290, 934, 529, 1330, 132],
+ data: [0, 332, 290, 934, 529, 1330, 0],
type: "line",
smooth: true,
lineStyle: {
@@ -1422,14 +1854,8 @@
showSymbol: false,
},
],
- };
-
- option2 && myChart2.setOption(option2);
-
- var chartDom3 = document.getElementById("chart3");
- var myChart3 = echarts.init(chartDom3);
-
- let option3 = {
+ },
+ option3: {
top: 0,
left: 0,
grid: {
@@ -1465,6 +1891,8 @@
itemStyle: {
//閫氬父鎯呭喌涓嬶細
normal: {
+ barBorderRadius: [5, 5, 0, 0],
+
//姣忎釜鏌卞瓙鐨勯鑹插嵆涓篶olorList鏁扮粍閲岀殑姣忎竴椤癸紝濡傛灉鏌卞瓙鏁扮洰澶氫簬colorList鐨勯暱搴︼紝鍒欐煴瀛愰鑹插惊鐜娇鐢ㄨ鏁扮粍涓殑棰滆壊
color: function (params) {
var colorList = [
@@ -1489,14 +1917,8 @@
},
},
],
- };
-
- option3 && myChart3.setOption(option3);
-
- var chartDom4 = document.getElementById("chart4");
- var myChart4 = echarts.init(chartDom4);
-
- let option4 = {
+ },
+ option4: {
top: 0,
left: 0,
grid: {
@@ -1533,6 +1955,7 @@
itemStyle: {
//閫氬父鎯呭喌涓嬶細
normal: {
+ barBorderRadius: [5, 5, 0, 0],
//姣忎釜鏌卞瓙鐨勯鑹插嵆涓篶olorList鏁扮粍閲岀殑姣忎竴椤癸紝濡傛灉鏌卞瓙鏁扮洰澶氫簬colorList鐨勯暱搴︼紝鍒欐煴瀛愰鑹插惊鐜娇鐢ㄨ鏁扮粍涓殑棰滆壊
color: function (params) {
var colorList = [
@@ -1558,9 +1981,49 @@
},
},
],
- };
-
- option4 && myChart4.setOption(option4);
+ },
+ };
+ },
+ methods: {
+ refreshShoubiNum() {
+ let n = sessionStorage.getItem("shoubiNum");
+ this.optionsOfHidDangerBar.series[0].data[1].value = +n;
+ },
+ initTabContent(tab) {
+ if (tab.name == "hidDanderStatistic") {
+ this.actHidDanderStatiscChart = "bar";
+ } else {
+ this.actHidDanderTrendChart = "line";
+ }
+ },
+ checkTabInSwipe(tab) {},
+ checkIrregularEventType(type) {},
+ taskAnalyzeCase(time) {},
+ taskAnalyzeStatics(time) {},
+ partAssignstatics(time) {},
+ taskAssignStatics(time) {},
+ renderIrregularMenTable() {},
+ handleTableSizeChange() {},
+ timeShortChange(time) {},
+ irregularMenStatistic(time) {},
+ irregularEventStatistic(time) {},
+ click1() {
+ this.$refs["timepick1"].focus();
+ },
+ click2() {
+ this.$refs["timepick2"].focus();
+ },
+ click3() {
+ this.$refs["timepick3"].focus();
+ },
+ click4() {
+ this.$refs["timepick4"].focus();
+ },
+ click5() {
+ this.$refs["timepick5"].focus();
+ },
+ click6() {
+ this.$refs["timepick6"].focus();
},
},
watch: {
@@ -1684,7 +2147,6 @@
.card-view {
display: flex;
- margin-right: -20px;
// margin-left: -2px;
.el-card {
@@ -1693,6 +2155,10 @@
margin-right: 20px;
text-align: left;
border-radius: 10px;
+
+ &:last-child {
+ margin-right: 0;
+ }
.el-card__body {
display: flex;
@@ -1709,10 +2175,9 @@
color: #213eb4;
}
.icon3 {
- color: #26d4b4;
- }
- .icon5 {
- color: #ed663e;
+ margin-right: 15px;
+ width: 15px;
+ height: 15px;
}
.info {
font-size: 12px;
@@ -1856,9 +2321,28 @@
background-color: #fff;
}
.part-bottom {
+ padding: 0 0 35px 35px;
+ text-align: left;
background-color: #fff;
- // padding: 0 30px 30px 30px;
- padding: 0 0 25px 0;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ height: 624px;
+ overflow: hidden;
+
+ .bottom-head {
+ height: 60px;
+ line-height: 60px;
+ text-align: left;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+ }
+
+ .tab-swiper {
+ margin-top: 20px;
+ }
.tab-detail {
margin: 0 25px;
@@ -1918,18 +2402,492 @@
}
}
.lt {
+ overflow: hidden;
+ padding: 0 35px 35px 35px;
text-align: left;
- flex: 1;
- padding: 3px 15px 15px 18px;
+ flex: 6;
+ height: 350px;
background-color: #fff;
margin-right: 18px;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+
+ .lt-head {
+ display: flex;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+
+ .control {
+ display: flex;
+ .icon {
+ cursor: pointer;
+ }
+ .time {
+ text-align: center;
+ font-size: 12px;
+ margin-left: 20px;
+ width: 40px;
+ height: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ &.active {
+ background: #2d52d7;
+ color: #fff;
+ opacity: 0.63;
+ }
+ }
+ }
+
+ .bottom {
+ margin-top: 37px;
+ display: flex;
+
+ .box {
+ overflow: hidden;
+ height: 250px;
+ width: 600px;
+ padding-right: 33px;
+ border-right: 1px solid #c6d2e4;
+
+ .box-top {
+ display: flex;
+ justify-content: space-between;
+ .title {
+ color: #425277;
+ }
+ .control {
+ display: flex;
+ justify-content: center;
+ position: relative;
+
+ .chart {
+ width: 46px;
+ height: 20px;
+ cursor: pointer;
+
+ &:first-child {
+ border: 1px solid #6297f2;
+ background-color: #fff;
+ border-radius: 4px;
+ position: absolute;
+ top: 0;
+ left: -44px;
+ }
+
+ &:last-child {
+ border-top: 1px solid #6297f2;
+ border-right: 1px solid #6297f2;
+ border-bottom: 1px solid #6297f2;
+ border-radius: 0 4px 4px 0;
+ }
+
+ &.active {
+ background-color: #6297f2;
+ color: #fff;
+ }
+ }
+ }
+ }
+
+ .echart {
+ height: 250px;
+ }
+ }
+
+ .middle {
+ width: 670px;
+ padding-left: 33px;
+ }
+
+ .right {
+ width: 250px;
+ flex: 1;
+ text-align: left;
+ background-color: #fff;
+ padding: 0 15px 15px 35px;
+ .header {
+ display: flex;
+ margin-bottom: 10px;
+ .title {
+ font-size: 16px;
+ margin-right: 20px;
+ font-weight: bold;
+ }
+ }
+ .rank-list {
+ padding: 10px 0;
+ max-height: 230px;
+ overflow-y: hidden;
+ .rank-item {
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+ color: #666;
+ .rank-index {
+ width: 32px;
+ height: 24px;
+ margin-right: 20px;
+ line-height: 24px;
+ border-radius: 50%;
+ text-align: center;
+ color: #cb2839;
+ font-size: 12px;
+ &.first {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ &.second {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ &.third {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ }
+ .name {
+ width: 200px;
+ .up {
+ font-size: 12px;
+ color: #cb2839;
+ }
+ .down {
+ font-size: 12px;
+ color: #2bb15c;
+ }
+ }
+ .val {
+ width: 100px;
+ .often {
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ font-size: 12px;
+ background: #2d52d7;
+ color: #fff;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ }
+
+ .new {
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ font-size: 12px;
+ background: #fe3c56;
+ color: #fff;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .el-divider {
+ margin: 0;
+ }
+ }
+
+ .lt-bottom {
+ display: flex;
+ padding-top: 35px;
+
+ .lt-bottom-left {
+ width: 133px;
+ text-align: center;
+ .val {
+ font-size: 25px;
+ font-weight: bold;
+ margin-top: 20px;
+ }
+ .ratio {
+ margin: 0 auto;
+ margin-bottom: 54px;
+ width: 46px;
+ height: 22px;
+ background: #f4f6f9;
+ font-size: 15px;
+ text-align: center;
+ }
+ }
+
+ .lt-bottom-mid {
+ flex: 1;
+ .lt-chart1 {
+ height: 110px;
+ }
+ .lt-chart2 {
+ height: 110px;
+ }
+ }
+
+ .lt-bottom-right {
+ width: 340px;
+ .el-table__row {
+ td,
+ th {
+ padding: 2px;
+ }
+ }
+
+ .el-pagination {
+ display: flex;
+ justify-content: right;
+ margin-top: 11px;
+ }
+ }
+ }
}
.rt {
+ padding: 25px 40px 10px 30px;
+ overflow: hidden;
text-align: left;
+ flex: 4;
background-color: #fff;
- padding: 3px 15px 15px 18px;
- width: 400px;
- .header {
+ padding: 3px 30px 15px 30px;
+ height: 351px;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+
+ .rt-head {
+ display: flex;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+
+ .control {
+ display: flex;
+ .icon {
+ cursor: pointer;
+ }
+ .time {
+ text-align: center;
+ font-size: 12px;
+ margin-left: 20px;
+ width: 40px;
+ height: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ &.active {
+ background: #2d52d7;
+ color: #fff;
+ opacity: 0.63;
+ }
+ }
+ }
+
+ .bottom {
+ margin-top: 37px;
+ display: flex;
+
+ .box {
+ overflow: hidden;
+ height: 250px;
+ width: 600px;
+ padding-right: 33px;
+ border-right: 1px solid #c6d2e4;
+
+ .box-top {
+ display: flex;
+ justify-content: space-between;
+ .title {
+ color: #425277;
+ }
+ .control {
+ display: flex;
+ justify-content: center;
+ position: relative;
+
+ .chart {
+ width: 46px;
+ height: 20px;
+ cursor: pointer;
+
+ &:first-child {
+ border: 1px solid #6297f2;
+ background-color: #fff;
+ border-radius: 4px;
+ position: absolute;
+ top: 0;
+ left: -44px;
+ }
+
+ &:last-child {
+ border-top: 1px solid #6297f2;
+ border-right: 1px solid #6297f2;
+ border-bottom: 1px solid #6297f2;
+ border-radius: 0 4px 4px 0;
+ }
+
+ &.active {
+ background-color: #6297f2;
+ color: #fff;
+ }
+ }
+ }
+ }
+
+ .echart {
+ height: 250px;
+ }
+ }
+
+ .middle {
+ width: 670px;
+ padding-left: 33px;
+ }
+
+ .right {
+ width: 250px;
+ flex: 1;
+ text-align: left;
+ background-color: #fff;
+ padding: 0 15px 15px 35px;
+ .header {
+ display: flex;
+ margin-bottom: 10px;
+ .title {
+ font-size: 16px;
+ margin-right: 20px;
+ font-weight: bold;
+ }
+ }
+ .rank-list {
+ padding: 10px 0;
+ max-height: 230px;
+ overflow-y: hidden;
+ .rank-item {
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+ color: #666;
+ .rank-index {
+ width: 32px;
+ height: 24px;
+ margin-right: 20px;
+ line-height: 24px;
+ border-radius: 50%;
+ text-align: center;
+ color: #cb2839;
+ font-size: 12px;
+ &.first {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ &.second {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ &.third {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ }
+ .name {
+ width: 200px;
+ .up {
+ font-size: 12px;
+ color: #cb2839;
+ }
+ .down {
+ font-size: 12px;
+ color: #2bb15c;
+ }
+ }
+ .val {
+ width: 100px;
+ .often {
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ font-size: 12px;
+ background: #2d52d7;
+ color: #fff;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ }
+
+ .new {
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ font-size: 12px;
+ background: #fe3c56;
+ color: #fff;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .el-divider {
+ margin: 0;
+ }
+ }
+
+ .rt-bottom {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .left {
+ overflow: hidden;
+ background: #f4f6f9;
+ box-shadow: 0px 3px 6px rgba(52, 109, 209, 0.66);
+ border-radius: 7px;
+ .left-item {
+ width: 91px;
+ height: 36px;
+ line-height: 36px;
+ border-left: 6px solid #f4f6f9;
+ padding-left: 7px;
+ cursor: pointer;
+
+ &.active {
+ border-color: #2d52d7;
+ background: rgb(178, 192, 238);
+ }
+ }
+ }
+ }
+
+ /* .header {
display: flex;
.title {
font-size: 16px;
@@ -1976,12 +2934,10 @@
width: 100px;
}
}
- }
+ } */
}
}
.flex-box {
- .lt,
- .rt,
.gt {
flex: 1;
width: auto;
@@ -1991,40 +2947,417 @@
width: calc(100vw - 367px);
margin: 0 0 20px 20px;
}
- }
- .general-view {
- display: flex;
- padding: 20px 50px;
- .indicator {
- flex: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- &:not(.lastOne):after {
- content: "";
- width: 1px;
- height: 57px;
- background: #e9e9e9;
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
+
+ .part-head {
+ overflow: hidden;
+ padding: 0 35px 35px 35px;
+ margin-bottom: 22px;
+ height: 376px;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ .top {
+ display: flex;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+
+ .control {
+ display: flex;
+ .icon {
+ cursor: pointer;
+ }
+ .time {
+ font-size: 12px;
+ margin-left: 20px;
+ width: 40px;
+ height: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ &.active {
+ background: #2d52d7;
+ color: #fff;
+ opacity: 0.63;
+ }
+ }
+ }
}
- .icon .iconfont {
- font-size: 40px;
- margin-right: 24px;
- }
- .indicator-title {
- font-size: 14px;
- color: #999;
- margin-bottom: 15px;
- }
- .indicator-val {
- font-size: 24px;
+
+ .bottom {
+ margin-top: 37px;
+ display: flex;
+
+ .box {
+ overflow: hidden;
+ height: 250px;
+ width: 600px;
+ padding-right: 33px;
+ border-right: 1px solid #c6d2e4;
+
+ .box-top {
+ display: flex;
+ justify-content: space-between;
+ .title {
+ color: #425277;
+ }
+ .control {
+ display: flex;
+ justify-content: center;
+ position: relative;
+
+ .chart {
+ width: 46px;
+ height: 20px;
+ cursor: pointer;
+
+ &:first-child {
+ border: 1px solid #6297f2;
+ background-color: #fff;
+ border-radius: 4px;
+ position: absolute;
+ top: 0;
+ left: -44px;
+ }
+
+ &:last-child {
+ border-top: 1px solid #6297f2;
+ border-right: 1px solid #6297f2;
+ border-bottom: 1px solid #6297f2;
+ border-radius: 0 4px 4px 0;
+ }
+
+ &.active {
+ background-color: #6297f2;
+ color: #fff;
+ }
+ }
+ }
+ }
+
+ .echart {
+ height: 250px;
+ }
+ }
+
+ .middle {
+ width: 670px;
+ padding-left: 33px;
+ }
+
+ .right {
+ width: 250px;
+ flex: 1;
+ text-align: left;
+ background-color: #fff;
+ padding: 0 15px 15px 35px;
+ .header {
+ display: flex;
+ margin-bottom: 10px;
+ .title {
+ font-size: 16px;
+ margin-right: 20px;
+ font-weight: bold;
+ }
+ }
+ .rank-list {
+ padding: 10px 0;
+ max-height: 230px;
+ overflow-y: hidden;
+ .rank-item {
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+ color: #666;
+ .rank-index {
+ width: 32px;
+ height: 24px;
+ margin-right: 20px;
+ line-height: 24px;
+ border-radius: 50%;
+ text-align: center;
+ color: #cb2839;
+ font-size: 12px;
+ &.first {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ &.second {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ &.third {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ }
+ .name {
+ width: 200px;
+ .up {
+ font-size: 12px;
+ color: #cb2839;
+ }
+ .down {
+ font-size: 12px;
+ color: #2bb15c;
+ }
+ }
+ .val {
+ width: 100px;
+ .often {
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ font-size: 12px;
+ background: #2d52d7;
+ color: #fff;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ }
+
+ .new {
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ font-size: 12px;
+ background: #fe3c56;
+ color: #fff;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ }
+ }
+ }
+ }
+ }
}
}
}
+
+ .part2 {
+ .part2-top {
+ .lt {
+ display: flex;
+ flex-direction: column;
+ width: 252px;
+ height: 348px;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+
+ .indicator {
+ flex: 1;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 38px;
+ img {
+ width: 50px;
+ height: 50px;
+ }
+ .content {
+ width: 100px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .indicator-title {
+ font-size: 14px;
+ }
+ .indicator-val {
+ font-size: 36px;
+ font-weight: 800;
+ }
+ }
+ }
+ }
+
+ .mid {
+ margin: 0 15px 0 27px;
+ height: 348px;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ overflow: hidden;
+ padding: 0 35px 35px 35px;
+ margin-bottom: 22px;
+ flex: 1;
+ .mid-head {
+ display: flex;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+
+ .control {
+ display: flex;
+ .icon {
+ cursor: pointer;
+ }
+ .time {
+ font-size: 12px;
+ margin-left: 20px;
+ width: 40px;
+ height: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ &.active {
+ background: #2d52d7;
+ color: #fff;
+ opacity: 0.63;
+ }
+ }
+ }
+ }
+
+ .mid-bottom {
+ margin-top: 10px;
+ height: 260px;
+ }
+ }
+
+ .rt {
+ width: 474px;
+ height: 348px;
+ padding: 0 0 35px 35px;
+ text-align: left;
+ background-color: #fff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ overflow: hidden;
+
+ .bottom-head {
+ height: 60px;
+ line-height: 60px;
+ text-align: left;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+ }
+
+ .rt-chart {
+ width: 200px;
+ height: 200px;
+ }
+ }
+ }
+
+ .part2-mid {
+ height: 351px;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ overflow: hidden;
+ padding: 0 35px 35px 35px;
+ margin-bottom: 22px;
+ flex: 1;
+ .mid-head {
+ display: flex;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+
+ .control {
+ display: flex;
+ .icon {
+ cursor: pointer;
+ }
+ .time {
+ font-size: 12px;
+ margin-left: 20px;
+ width: 40px;
+ height: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ &.active {
+ background: #2d52d7;
+ color: #fff;
+ opacity: 0.63;
+ }
+ }
+ }
+ }
+ .mid-bottom {
+ margin-top: 10px;
+ height: 280px;
+ }
+ }
+
+ .part2-table {
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ overflow: hidden;
+ padding: 0 35px 35px 35px;
+ margin-bottom: 22px;
+ flex: 1;
+ .table-head {
+ display: flex;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+
+ .control {
+ display: flex;
+ .icon {
+ cursor: pointer;
+ }
+ .time {
+ font-size: 12px;
+ margin-left: 20px;
+ width: 40px;
+ height: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ &.active {
+ background: #2d52d7;
+ color: #fff;
+ opacity: 0.63;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .el-divider {
+ margin: 0;
+ }
+ .el-date-editor {
+ position: relative;
+ left: -35px;
+ top: 20px;
+ width: 0 !important;
+ height: 1px !important;
+ opacity: 0 !important;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0