dept_rank.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708
  1. <template>
  2. <div>
  3. <div class="diy_tip_bg" v-show="tips_show">
  4. <el-alert class="diy-tip" @close="tips_close" type="success" description><p>排名不包含初始分和工龄分</p></el-alert>
  5. </div>
  6. <div class="all padding-20">
  7. <el-form :inline="true">
  8. <el-form-item label="时间">
  9. <el-col :span="8">
  10. <el-select size="medium" v-model="time_type" placeholder="请选择分类" style="width: 100px;">
  11. <el-option v-for="item in time_types" :key="item.label" :label="item.label" :value="item.value"></el-option>
  12. </el-select>
  13. </el-col>
  14. <el-col :span="16">
  15. <el-date-picker
  16. size="medium"
  17. v-show="time_type == '2'"
  18. v-model="export_from.year"
  19. class="date-picker-width"
  20. type="year"
  21. value-format="yyyy"
  22. placeholder="选择年份排名"
  23. ></el-date-picker>
  24. <el-date-picker
  25. size="medium"
  26. v-show="time_type == '1' || time_type == '月份'"
  27. v-model="export_from.month"
  28. class="date-picker-width"
  29. type="month"
  30. value-format="yyyy-MM"
  31. placeholder="选择月份排名"
  32. ></el-date-picker>
  33. <season v-if="time_type == '3'" :isActive="true" class="date-picker-width" @confirm="export_quarter_confirm"></season>
  34. </el-col>
  35. </el-form-item>
  36. <el-form-item label="部门">
  37. <el-cascader
  38. size="medium"
  39. class="date-picker-width"
  40. v-model="dept_name"
  41. :options="dept_tree"
  42. :props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
  43. ref="dept"
  44. clearable
  45. filterable
  46. placeholder="全公司"
  47. ></el-cascader>
  48. <!-- 这是选部门多选。如果更改需求用这个: -->
  49. <!-- <el-cascader
  50. v-model="dept_name"
  51. :options="dept_tree"
  52. :props="{ multiple: true, checkStrictly: true }"
  53. class="date-picker-width"
  54. ref="dept"
  55. clearable
  56. collapse-tags
  57. placeholder="全公司"
  58. ></el-cascader>-->
  59. </el-form-item>
  60. <el-form-item label="谁不参与排名">
  61. <el-select v-model="formData.exclusion" size="medium" multiple filterable collapse-tags placeholder="请选择员工">
  62. <el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
  63. </el-select>
  64. </el-form-item>
  65. <el-form-item label="规则分类">
  66. <el-cascader
  67. size="medium"
  68. class="date-picker-width"
  69. v-model="rule_id"
  70. :options="rule_trees"
  71. :props="props2"
  72. ref="rule"
  73. clearable
  74. placeholder="请选择规则分类"
  75. ></el-cascader>
  76. </el-form-item>
  77. <el-form-item label="积分分类">
  78. <el-select class="date-picker-width" size="medium" v-model="formData.pt_id" placeholder="请选择积分分类">
  79. <el-option v-for="item in point_types" :key="item.name" :label="item.name" :value="item.id"></el-option>
  80. </el-select>
  81. </el-form-item>
  82. <el-form-item label="人员">
  83. <el-select size="medium" v-model="formData.position" style="width:150px" placeholder="请选择">
  84. <el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.age"></el-option>
  85. </el-select>
  86. </el-form-item>
  87. <el-form-item>
  88. <el-checkbox v-model="sort" size="medium" label="排名由低到高" border></el-checkbox>
  89. <el-button type="primary" size="medium" @click="selectBtn" style="margin-left:20px">查询</el-button>
  90. </el-form-item>
  91. <el-form-item>
  92. <el-button type="primary" size="medium" plain @click="dialogVisible = true">导出排名</el-button>
  93. <!-- <el-button type="primary" size="medium" plain @click="byRanking('byRankingData')">轮播排名</el-button> -->
  94. </el-form-item>
  95. </el-form>
  96. <el-table :data="list" style="width: 100%" v-loading="loading">
  97. <el-table-column label="名次" width="80" align="center">
  98. <template slot-scope="scope">
  99. <img v-if="scope.row.rank === 1" src="@/assets/image/statistics_NO1.png" alt="" />
  100. <img v-if="scope.row.rank === 2" src="@/assets/image/statistics_NO2.png" alt="" />
  101. <img v-if="scope.row.rank === 3" src="@/assets/image/statistics_NO3.png" alt="" />
  102. <span v-if="scope.row.rank > 3">{{ scope.row.rank }}</span>
  103. </template>
  104. </el-table-column>
  105. <el-table-column label="姓名" align="left">
  106. <template slot-scope="scope">
  107. <div class="flex-box">
  108. <userImage :user_name="scope.row.employee_name" :img_url="scope.row.employee_img_url" width="50px" height="50px"></userImage>
  109. <span style="line-height: 50px; padding-left: 10px;">{{ scope.row.employee_name }}</span>
  110. </div>
  111. </template>
  112. </el-table-column>
  113. <el-table-column :label="labelName" align="left" prop="point"></el-table-column>
  114. <template slot="empty">
  115. <div class="nopoint_box">
  116. <div class="noimg noperson"></div>
  117. <span class="title">没有对应的数据</span>
  118. </div>
  119. </template>
  120. </el-table>
  121. <center style="padding: 20px 0;">
  122. <el-pagination
  123. background
  124. @size-change="handleSizeChange"
  125. @current-change="handleCurrentChange"
  126. :page-sizes="[10, 20, 50, 100]"
  127. layout="total, sizes, prev, pager, next"
  128. :page-size="formData.page_size"
  129. :total="total"
  130. ></el-pagination>
  131. </center>
  132. </div>
  133. <!-- 导出弹窗 -->
  134. <el-dialog title="导出排名" :visible.sync="dialogVisible" width="730px" top="10%">
  135. <span style="font-size:15px">系统将按以下已选条件导出对应的排名报表</span>
  136. <el-form :inline="true">
  137. <div class="picker_er">
  138. <el-form-item label="时间">
  139. <el-date-picker
  140. v-model="Dc_Data.value1"
  141. type="daterange"
  142. size="medium"
  143. value-format="yyyy-MM-dd"
  144. format="yyyy-MM-dd"
  145. range-separator="至"
  146. start-placeholder="开始日期"
  147. end-placeholder="结束日期"
  148. ></el-date-picker>
  149. </el-form-item>
  150. <el-form-item label="人员" style="margin-left:30px">
  151. <el-select size="medium" v-model="Dc_Data.DC_position" style="width:150px" placeholder="请选择">
  152. <el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.age"></el-option>
  153. </el-select>
  154. </el-form-item>
  155. </div>
  156. <el-form-item label="部门">
  157. <el-cascader
  158. class="date-picker-width cascader_bm"
  159. v-model="Dc_Data.dept_name"
  160. :options="dept_tree"
  161. :props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
  162. ref="dept2"
  163. size="medium"
  164. clearable
  165. filterable
  166. placeholder="全公司"
  167. ></el-cascader>
  168. </el-form-item>
  169. <el-form-item label="规则分类" style="margin-left:20px">
  170. <el-cascader
  171. class="date-picker-width"
  172. @change="ruleInquiredialog"
  173. v-model="rule_ids"
  174. :options="rule_trees"
  175. :props="props"
  176. size="medium"
  177. ref="derive"
  178. clearable
  179. collapse-tags
  180. placeholder="请选择规则分类"
  181. ></el-cascader>
  182. </el-form-item>
  183. </el-form>
  184. <span slot="footer" class="dialog-footer">
  185. <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
  186. <el-button type="primary" @click="exportExcel" size="medium">导 出</el-button>
  187. </span>
  188. </el-dialog>
  189. <!-- 轮播弹窗 -->
  190. <el-dialog title="轮播排名" :visible.sync="byRankingShow" width="500px" top="10%">
  191. <div>
  192. <el-form :inline="true" ref="byRankingData" :model="byRankingData" :rules="byRankingDataRules" label-width="90px">
  193. <el-form-item label="月份" prop="month">
  194. <el-date-picker
  195. v-model="byRankingData.month"
  196. size="medium"
  197. class="date-picker-width"
  198. type="month"
  199. value-format="yyyy-MM"
  200. placeholder="选择月份排名"
  201. ></el-date-picker>
  202. </el-form-item>
  203. <el-form-item label="选择部门" prop="dept_id">
  204. <el-cascader
  205. size="medium"
  206. class="date-picker-width"
  207. v-model="byRankingData.dept_id"
  208. :options="dept_tree"
  209. :props="{ checkStrictly: true, value: 'obj', label: 'name', children: '_child' }"
  210. ref="dept1"
  211. clearable
  212. filterable
  213. placeholder="全公司"
  214. ></el-cascader>
  215. </el-form-item>
  216. <el-form-item label="人员范围" prop="position">
  217. <el-radio-group size="medium" v-model="byRankingData.position">
  218. <el-radio label="all">管理者和员工</el-radio>
  219. <el-radio label="manager">只看管理者</el-radio>
  220. <el-radio label="employee">只看员工</el-radio>
  221. </el-radio-group>
  222. </el-form-item>
  223. </el-form>
  224. </div>
  225. <span slot="footer">
  226. <el-button @click="byRankingShow = false" size="medium">取 消</el-button>
  227. <el-button type="primary" @click="swiperPage('byRankingData')" size="medium">开始轮播</el-button>
  228. </span>
  229. </el-dialog>
  230. </div>
  231. </template>
  232. <script>
  233. import moment from 'moment';
  234. import season from '@/components/season';
  235. export default {
  236. data() {
  237. return {
  238. rule_ids: null,
  239. Dc_Data: {
  240. //导出数据
  241. value1: '', //时间
  242. DC_position: '全部', //人员
  243. dept_name: [], //部门
  244. rule_id: [] //规则
  245. },
  246. dialogVisible: false,
  247. dept_name: [],
  248. dept_tree: [],
  249. loading: false,
  250. formData: {
  251. dept_id: '0',
  252. sort: 'DESC',
  253. pt_id: 3,
  254. time_type: 1,
  255. exclusion: [],
  256. page: 1,
  257. rule_id: '',
  258. page_size: 10,
  259. position: 0 //部门多选删除这个
  260. },
  261. total: null,
  262. rule_trees: null,
  263. rule_id: null,
  264. list: null,
  265. point_types: [],
  266. point_type: [],
  267. sort: false,
  268. time_types: [{ label: '月份', value: '1' }, { label: '年份', value: '2' }, { label: '季度', value: '3' }],
  269. props: { value: 'id', label: 'name', children: 'child', multiple: true },
  270. props2: { value: 'id', label: 'name', children: 'child', checkStrictly: true},
  271. time_type: '月份',
  272. export_from: {
  273. year: '',
  274. month: moment().format('YYYY-MM'),
  275. quarter: ''
  276. },
  277. employee_map: JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP')),
  278. positions: [{ id: 0, age: 'all', name: '全部' }, { id: 1, age: 'manager', name: '管理者' }, { id: 2, age: 'employee', name: '员工' }],
  279. tips_show: false,
  280. byRankingShow: false,
  281. byRankingData: {
  282. month: '',
  283. dept_id: '',
  284. position: 'all'
  285. },
  286. byRankingDeptId: '',
  287. byRankingDataRules: {
  288. month: [{ required: true, message: '请选择月份', trigger: 'blur' }],
  289. dept_id: [{ required: true, message: '请选择部门', trigger: 'change' }],
  290. position: [{ required: true, message: '请选择人员范围', trigger: 'change' }]
  291. },
  292. labelName: 'B分'
  293. };
  294. },
  295. watch: {
  296. sort(val) {
  297. if (val) {
  298. this.formData.sort = 'ASC';
  299. } else {
  300. this.formData.sort = 'DESC';
  301. }
  302. },
  303. dept_name(val) {
  304. if (val.length !== 0) {
  305. // 这是选部门多选。如果更改需求用这个:
  306. // let dept_id = [];
  307. // for (var i in val) {
  308. // dept_id.push(val[i][0]);
  309. // }
  310. // this.formData.dept_id = dept_id;//传入选中的部门ID,是数组
  311. this.formData.dept_id = val[val.length - 1];
  312. } else {
  313. this.formData.dept_id = 0;
  314. }
  315. this.$nextTick(() => {
  316. this.$refs.dept.dropDownVisible = false;
  317. this.getEmployeeList();
  318. });
  319. },
  320. 'byRankingData.dept_id'(val) {
  321. this.$refs.dept1.dropDownVisible = false;
  322. },
  323. 'Dc_Data.dept_name': function(val) {
  324. this.$refs.dept2.dropDownVisible = false;
  325. },
  326. rule_id(val) {
  327. if(val.length==0){
  328. this.formData.rule_id='';
  329. return false
  330. }
  331. if(val.length==1){
  332. this.formData.rule_id=(val).toString()
  333. }else{
  334. this.formData.rule_id=(val[val.length-1]).toString()
  335. }
  336. }
  337. },
  338. components: { season },
  339. methods: {
  340. ruleInquiredialog() {
  341. this.ruleUtif('derive');
  342. },
  343. ruleUtif(rule) {
  344. let ruleList = this.$refs[rule].getCheckedNodes();
  345. let ruleId = [];
  346. ruleList.forEach(item => {
  347. ruleId.push(item.value);
  348. });
  349. if (rule == 'ruleinquire') {
  350. this.formData.rule_id = ruleId;
  351. } else {
  352. this.Dc_Data.rule_id = ruleId;
  353. }
  354. this.$nextTick(() => {
  355. if (this.$refs[rule].presentTags[1]) {
  356. this.$refs[rule].presentTags[1].text = '+ ' + (ruleId.length - 1).toString();
  357. } else {
  358. if (ruleId.length > 1) {
  359. let list = {
  360. closable: false,
  361. key: -1,
  362. text: '+ ' + (ruleId.length - 1).toString()
  363. };
  364. this.$refs[rule].presentTags[1] = list;
  365. }
  366. }
  367. });
  368. },
  369. // 轮播页面跳转
  370. swiperPage(formName) {
  371. this.$refs[formName].validate(valid => {
  372. if (valid) {
  373. var { href } = this.$router.resolve({
  374. path: '/deptRankSwiper',
  375. query: {
  376. month: this.byRankingData.month || 0,
  377. type: '2',
  378. position: this.byRankingData.position,
  379. dept_id: this.byRankingData.dept_id[0].id,
  380. dept_name: this.byRankingData.dept_id[0].name,
  381. pt_id: 3
  382. }
  383. });
  384. window.open(href);
  385. }
  386. });
  387. },
  388. // 轮播排名弹窗
  389. byRanking() {
  390. (this.byRankingData = {
  391. month: '',
  392. dept_id: '',
  393. position: 'all'
  394. }),
  395. (this.byRankingShow = true);
  396. },
  397. // 提示信息
  398. tips_close() {
  399. localStorage.setItem('dept_rank_tips', 'true');
  400. this.tips_show = false;
  401. },
  402. // 查询
  403. selectBtn() {
  404. switch (this.time_type) {
  405. case '1':
  406. this.$set(this.formData, 'month', this.export_from.month);
  407. this.formData.month ? '' : delete this.formData.month;
  408. break;
  409. case '2':
  410. this.$set(this.formData, 'year', this.export_from.year);
  411. this.formData.year ? '' : delete this.formData.year;
  412. break;
  413. case '月份':
  414. this.$set(this.formData, 'month', this.export_from.month);
  415. this.formData.month ? '' : delete this.formData.month;
  416. break;
  417. case '3':
  418. this.$set(this.formData, 'quarter', this.export_from.quarter);
  419. this.formData.quarter ? '' : delete this.formData.quarter;
  420. break;
  421. default:
  422. break;
  423. }
  424. let data = JSON.parse(JSON.stringify(this.formData));
  425. console.log(data);
  426. var employee_ids = data.exclusion.join(',');
  427. data.exclusion = employee_ids;
  428. data.page = 1;
  429. data.page_size = 10;
  430. this.$nextTick(() => {
  431. this.get_list(data);
  432. });
  433. },
  434. // 页面变更
  435. handleCurrentChange(val) {
  436. this.formData.page = val;
  437. this.get_list(this.formData);
  438. },
  439. handleSizeChange(val) {
  440. this.formData.page = 1;
  441. this.formData.page_size = val;
  442. this.get_list(this.formData);
  443. },
  444. // 选择时间
  445. export_quarter_confirm(val) {
  446. this.export_from.quarter = val;
  447. },
  448. //请求数据
  449. get_list(data, bool) {
  450. if (this.time_type == 1) {
  451. delete data.year;
  452. delete data.quarter;
  453. } else if (this.time_type == 2) {
  454. delete data.month;
  455. delete data.quarter;
  456. } else if (this.time_type == '月份') {
  457. delete data.year;
  458. delete data.quarter;
  459. } else if (this.time_type == 3) {
  460. delete data.month;
  461. delete data.year;
  462. }
  463. if (bool) {
  464. data.month = moment().format('YYYY-MM');
  465. }
  466. let self = this;
  467. self.loading = true;
  468. data ? '' : (data = this.formData);
  469. data.position = data.position == 'manager' ? 'manager' : data.position == 'employee' ? 'employee' : 'all';
  470. self.$axios('get', '/api/integral/statistics/ranking', data, 'v2')
  471. .then(res => {
  472. this.labelName = this.formData.pt_id == 2 ? 'A分' : 'B分';
  473. if (res.data.code == 1) {
  474. self.list = res.data.data.list;
  475. self.total = res.data.data.total;
  476. } else {
  477. self.$message.error(res.data.data.msg);
  478. }
  479. })
  480. .finally(() => {
  481. self.loading = false;
  482. });
  483. },
  484. // 获取积分规则
  485. get_rule_tree() {
  486. this.$axios('get', '/api/integral/rule/trees', { cycle_type: '1' }).then(res => {
  487. this.rule_trees = this.getRuleTreeData(res.data.data.rule_tree);
  488. });
  489. },
  490. // 规则递归 children
  491. getRuleTreeData(data) {
  492. for (var i = 0; i < data.length; i++) {
  493. if (data[i].child.length < 1) {
  494. // children若为空数组,则将children设为undefined
  495. data[i].child = undefined;
  496. } else {
  497. // children若不为空数组,则继续 递归调用 本方法
  498. this.getRuleTreeData(data[i].child);
  499. }
  500. }
  501. return data;
  502. },
  503. // 递归判断列表,把最后的children设为undefined
  504. getTreeData(data) {
  505. for (var i = 0; i < data.length; i++) {
  506. data[i].obj = { id: data[i].id, name: data[i].name };
  507. if (data[i]._child.length < 1) {
  508. // children若为空数组,则将children设为undefined
  509. data[i]._child = undefined;
  510. } else {
  511. // children若不为空数组,则继续 递归调用 本方法
  512. this.getTreeData(data[i]._child);
  513. }
  514. }
  515. return data;
  516. },
  517. getEmployeeList() {
  518. let self = this;
  519. self.$axios('get', '/api/employee/list', { dept_id: self.formData.dept_id }).then(res => {
  520. if (res.data.code == 1) {
  521. this.employee_map = res.data.data.list;
  522. } else {
  523. self.$message.error(res.data.data.msg);
  524. }
  525. });
  526. },
  527. exportExcel() {
  528. //人员
  529. this.Dc_Data.DC_position =
  530. this.Dc_Data.DC_position == 'manager' ? 'manager' : this.Dc_Data.DC_position == 'employee' ? 'employee' : this.Dc_Data.DC_position == '全部' ? 'all' : 'all';
  531. //部门
  532. let dept_name;
  533. for (let i in this.Dc_Data.dept_name) {
  534. dept_name = this.Dc_Data.dept_name[i];
  535. }
  536. this.Dc_Data.dept_name = dept_name;
  537. //规则
  538. // let rule_id = [];
  539. // for (let i in this.Dc_Data.rule_id) {
  540. // for (let a in this.Dc_Data.rule_id[i]) {
  541. // rule_id.push(this.Dc_Data.rule_id[i][a]);
  542. // }
  543. // }
  544. // this.Dc_Data.rule_id = rule_id;
  545. let data = '';
  546. if (this.Dc_Data.value1) {
  547. data += '&start_date=' + this.Dc_Data.value1[0];
  548. data += '&end_date=' + this.Dc_Data.value1[1];
  549. }
  550. data += '&position=' + this.Dc_Data.DC_position;
  551. this.Dc_Data.dept_name > 0 ? (data += '&dept_id=' + this.Dc_Data.dept_name) : (data += '&dept_id=0');
  552. if (this.Dc_Data.rule_id.length > 0) {
  553. data += '&rule_id=' + this.Dc_Data.rule_id;
  554. }
  555. window.open(process.env.VUE_APP_BASE_API + 'api/download/ranking/v2?pt_id=' + this.formData.pt_id + '&employee_id=' + this.$getUserData().id + data, '_blank');
  556. this.dialogVisible = false;
  557. },
  558. //获取部门
  559. getDepartment() {
  560. this.$axios('get', '/api/department/tree').then(res => {
  561. this.dept_tree = this.getTreeData(res.data.data.list);
  562. });
  563. }
  564. },
  565. mounted() {
  566. this.point_types = this.$getTyps();
  567. this.tips_show = JSON.parse(localStorage.getItem('dept_rank_tips')) ? false : true;
  568. this.getDepartment();
  569. this.getEmployeeList();
  570. this.get_list(this.formData, true);
  571. this.get_rule_tree();
  572. }
  573. };
  574. </script>
  575. <style scoped lang="scss">
  576. .search_box {
  577. ::v-deep button:active {
  578. background: #26a2ff;
  579. }
  580. ::v-deep button:active .el-icon-search {
  581. color: #fff;
  582. }
  583. }
  584. .date-picker-width {
  585. width: 100% !important;
  586. }
  587. .nopoint_box {
  588. display: inline-block;
  589. text-align: center;
  590. width: 100%;
  591. margin-bottom: 10px;
  592. }
  593. .noimg {
  594. display: inline-block;
  595. width: 110px;
  596. height: 110px;
  597. margin: 22px auto 16px;
  598. /* background:url("/static/images/nodata_default.png") no-repeat center; */
  599. background-size: 99%;
  600. }
  601. .noperson {
  602. display: inline-block;
  603. width: 110px;
  604. height: 110px;
  605. line-height: none;
  606. margin: 22px auto 16px;
  607. background: url('/static/images/noperson_default.png') no-repeat center;
  608. background-size: 99%;
  609. }
  610. .title {
  611. display: block;
  612. text-align: center;
  613. font-size: 12px !important;
  614. line-height: 30px;
  615. color: #909399 !important;
  616. padding: 0;
  617. }
  618. .nopoint_box a {
  619. color: #26a2ff;
  620. }
  621. .chart_content {
  622. .chart-legend__wrap {
  623. text-align: right;
  624. padding: 20px;
  625. padding-right: 50px;
  626. & .chart-legend__pink {
  627. position: relative;
  628. padding-left: 12px;
  629. padding-right: 5px;
  630. &:after {
  631. content: '';
  632. position: absolute;
  633. margin-top: -2px;
  634. top: 35%;
  635. left: 0;
  636. width: 8px;
  637. height: 8px;
  638. background: #f56c6c;
  639. border-radius: 100%;
  640. }
  641. }
  642. & .chart-legend__green {
  643. position: relative;
  644. padding-left: 12px;
  645. &:after {
  646. content: '';
  647. position: absolute;
  648. margin-top: -2px;
  649. top: 35%;
  650. left: 0;
  651. width: 8px;
  652. height: 8px;
  653. background: #53b87f;
  654. border-radius: 100%;
  655. }
  656. }
  657. }
  658. }
  659. .drawer_title {
  660. font-size: 18px;
  661. padding: 20px;
  662. }
  663. .manager_statistics_box {
  664. background-color: #ffffff;
  665. padding: 20px;
  666. min-height: calc(100vh - 160px);
  667. ::v-deep .el-row .el-checkbox .el-checkbox__label {
  668. line-height: 20px;
  669. }
  670. }
  671. .diy_tip_bg {
  672. background: #f5f6f9;
  673. overflow: hidden;
  674. .diy-tip {
  675. margin-bottom: 15px;
  676. border: 1px solid #67c23a;
  677. padding: 20px 16px;
  678. p {
  679. color: #67c23a !important;
  680. font-size: 14px;
  681. margin: 0 !important;
  682. padding: 4px 0;
  683. }
  684. }
  685. }
  686. ::v-deep .el-dialog {
  687. top: 21%;
  688. }
  689. .picker_er {
  690. margin-top: 20px;
  691. }
  692. .el-range-editor--medium.el-input__inner {
  693. width: 280px;
  694. }
  695. ::v-deep .el-cascader .el-input .el-input__inner {
  696. width: 150px;
  697. }
  698. .el-checkbox.is-bordered.el-checkbox--medium {
  699. padding: 9px 20px 7px 10px;
  700. }
  701. </style>