~admin/srs-police-affairs.git

			@@ -7,42 +7,72 @@
			</div>

			<div class="table-box" v-show="!showMJL">
			<el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
			<el-table
			size="small"
			:height="tableHeight"
			:data="schedulingList"
			style="width: 100%;"
			:header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center', borderColor: '#324e75' }" :row-class-name="tableRowClassName"
			empty-text="暂无值班信息">
			:cell-style="{ 'text-align': 'center', borderColor: '#324e75' }"
			:row-class-name="tableRowClassName"
			:empty-text="schedulingNoDataText"
			v-loading="schedulingLoading"
			element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.5)"
			>
			<el-table-column prop="dept" label="值班单位"></el-table-column>
			<el-table-column prop="person" label="姓名"></el-table-column>
			<el-table-column prop="contact" label="联系方式"></el-table-column>
			</el-table>
			<div class="pointList">
			<el-tooltip class="item" effect="dark" :content="item.dept" placement="top"
			v-for="(item, index) in schedulingDeptList" :key="index">
			<div class="pointList" v-if="schedulingList == []">
			<el-tooltip
			class="item"
			effect="dark"
			:content="item.dept"
			placement="top"
			v-for="(item, index) in schedulingDeptList"
			:key="index"
			>
			<div class="point" @click="getSchedlingList(item)"></div>
			</el-tooltip>
			</div>
			</div>

			<div class="table-box" v-show="showMJL">
			<el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
			:show-header="false" :header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center', borderColor: '#324e75' }"
			:row-class-name="tableRowClassName">
			<el-table-column :show-overflow-tooltip="true" v-for="(item, index) in transTitle" :label="item"
			:key="index" align="center">
			<template slot-scope="scope">
			{{ scope.row[index] }}
			</template>
			</el-table-column>
			</el-table>
			<div class="duty-information-box" v-show="showMJL">
			<div>
			<div>
			<span>值班</span>
			</div>
			<div>
			<span>徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬</span>
			</div>
			</div>
			<div>
			<div>
			<span>副班、巡逻</span>
			</div>
			<div>
			<span>章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥</span>
			</div>
			</div>
			</div>
			</div>

			<svg class="border-svg">
			<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
			<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
			repeatCount="indefinite" />
			<use
			stroke-width="2"
			xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
			stroke="#4fd2dd"
			>
			<animate
			attributeName="stroke-dasharray"
			from="0, 1442"
			to="1442, 0"
			dur="8s"
			repeatCount="indefinite"
			/>
			</use>
			</svg>
			</div>
			@@ -50,21 +80,62 @@
			<div class="alert-box" ref="alertBox ">
			<div class="box">
			<div class="title">
			案件统计
			警情统计
			<div class="timer">
			<el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right" unlink-panels
			range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="caseTimeChange"
			:picker-options="pickerOptions"></el-date-picker>
			<el-date-picker
			:clearable="false"
			v-model="eventTime"
			type="daterange"
			align="right"
			unlink-panels
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			@change="caseTimeChange"
			:picker-options="pickerOptions"
			></el-date-picker>
			</div>
			</div>
			<div id="EventChangeEcharts" class="echarts-box"></div>
			<el-main
			v-loading="eventChangeEchartsLoading"
			element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.5)"
			>
			<div class="sub-tab">
			<div
			class="tab"
			:class="{ 'select-on-tab': caseInfoType == 0 }"
			@click="initEventChangeEcharts(0)"
			>
			<div class="tab-title-small">警情变化趋势</div>
			</div>
			<div
			class="tab"
			:class="{ 'select-on-tab': caseInfoType == 1 }"
			@click="initEventChangeEcharts(1)"
			>
			<div class="tab-title-small">警情排行</div>
			</div>
			</div>
			<div id="EventChangeEcharts" class="echarts-box"></div>
			</el-main>
			</div>

			<svg class="border-svg">
			<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
			<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
			repeatCount="indefinite" />
			<use
			stroke-width="2"
			xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
			stroke="#4fd2dd"
			>
			<animate
			attributeName="stroke-dasharray"
			from="0, 1442"
			to="1442, 0"
			dur="8s"
			repeatCount="indefinite"
			/>
			</use>
			</svg>
			</div>
			@@ -99,21 +170,47 @@

			<div class="crowd-box" ref="crowdBox">
			<div class="box">
			<div class="title">
			<div>现有设备</div>
			<div class="title-tab">
			<span :class="{ choosed: linetype == 0 }" @click="initEquipmentEcharts(0)">设备种类</span>/
			<span :class="{ choosed: linetype == 1 }" @click="initEquipmentEcharts(1)">设备状态</span>
			<div class="title">现有设备</div>
			<el-main
			v-loading="equipmentEchartsLoading"
			element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.5)"
			>
			<div class="sub-tab">
			<div
			class="tab"
			:class="{ 'select-on-tab': linetype == 0 }"
			@click="initEquipmentEcharts(0)"
			>
			<div class="tab-title-small">设备种类</div>
			</div>
			<div
			class="tab"
			:class="{ 'select-on-tab': linetype == 1 }"
			@click="initEquipmentEcharts(1)"
			>
			<div class="tab-title-small">设备状态</div>
			</div>
			</div>
			</div>
			<div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div>
			<div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div>
			</el-main>
			</div>

			<svg class="border-svg">
			<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
			<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
			repeatCount="indefinite" />
			<use
			stroke-width="2"
			xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
			stroke="#4fd2dd"
			>
			<animate
			attributeName="stroke-dasharray"
			from="0, 1442"
			to="1442, 0"
			dur="8s"
			repeatCount="indefinite"
			/>
			</use>
			</svg>
			</div>
			@@ -144,7 +241,7 @@
			import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js"
			import { fontSize } from "@/utils/fontSize.js"

			import { getCaseAll, getEquipment } from "@/api/home/index.js"
			import { getCaseAll, getCaseRanking, getEquipment } from "@/api/home/index.js"

			const timeEvents = []

			@@ -153,6 +250,10 @@
			data () {
			return {
			eventTime: [],
			equipmentEchartsLoading: false,
			eventChangeEchartsLoading: false,
			schedulingNoDataText: ' ',
			schedulingLoading: false,
			pickerOptions: {
			shortcuts: [
			{
			@@ -191,8 +292,9 @@
			schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
			policeStaionID: "",
			showMJL: false,
			originTitle: ['值班人员', '副班、巡逻人员'],
			transTitle: ['', '人员', '人员'],
			originTitle: ['值班', '副班、巡逻'],
			transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },],
			caseInfoType: 0
			}
			},

			@@ -223,7 +325,7 @@
			this.$refs.caseBox.offsetHeight -
			this.$refs.crowdBox.offsetHeight -
			this.$refs.alertBoxTitle.offsetHeight -
			86
			55
			})
			},

			@@ -254,7 +356,7 @@
			getHomeAllData (id = "") {
			this.policeStaionID = id

			this.initEventChangeEcharts()
			this.initEventChangeEcharts(this.caseInfoType)

			this.initEquipmentEcharts(this.linetype)

			@@ -264,29 +366,21 @@
			}

			rightTiming = setInterval(async () => {
			this.initEventChangeEcharts(this.caseInfoType)
			this.initEquipmentEcharts(this.linetype)
			}, 600000)
			},

			getSchedulingList () {
			console.log(this.userInfo, 4567)
			this.schedulingLoading = true
			if (this.userInfo.dept_id == "1596020515064381442") {
			this.schedulingNoDataText = ' '
			const data = [
			{
			person:
			"徐星逸、任圣日、娄永攀、蔡善龙、陈小强、梅祥、吕镇、刘开勇、付建冬",
			"徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬",
			patrol: "章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥",
			},
			{
			person:
			"矢裕忠、戴饶平、余传公、杨敏、苏浩男、周安云、蒋丁岩、陈圣俊、雷智荐",
			patrol: "潘林彬，刘志祥，李志强，杨俊浩，黄天行，叶子淳",
			},
			{
			person:
			"齐光华、周静、吕来城、周骏、邓道群、沈强、王岳、魏霄峰、夏添、李道福",
			patrol: "余梦宝，徐宝盛，李仁豪，付涵，周林，王宗强",
			},
			}
			]

			const matrixData = data.map((row) => {
			@@ -296,12 +390,14 @@
			}
			return arr
			})

			this.schedulingList = matrixData[0].map((col, i) => {
			return [this.originTitle[i], ...matrixData.map((row) => {
			return row[i]
			})]
			})
			setTimeout(() => {
			this.schedulingList = matrixData[0].map((col, i) => {
			return [this.originTitle[i], ...matrixData.map((row) => {
			return row[i]
			})]
			})
			this.schedulingLoading = false
			}, 1000)

			this.$nextTick(() => {
			this.tableHeight =
			@@ -321,7 +417,21 @@
			getSchedulingList(1, 100, params).then((res) => {
			this.schedulingList = res.data.data.records
			})


			setTimeout(() => {
			this.schedulingNoDataText = ' '
			this.schedulingLoading = false
			if (!this.schedulingList.length) {
			setTimeout(() => {
			this.schedulingNoDataText = '暂无值班数据'
			}, 200)
			}
			}, 500)


			}

			},

			echartsResize () {
			@@ -331,7 +441,7 @@
			eventchangemychart.resize()
			},

			// 案件统计中时间变化
			// 警情统计中时间变化
			async caseTimeChange (e) {
			const date = e.map((item) => {
			return this.dateFormat(item)
			@@ -348,7 +458,7 @@
			})
			setTimeout(() => {
			eventchangemychart.hideLoading()
			eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yData))
			eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yDataList))
			}, 500)
			},

			@@ -373,70 +483,147 @@
			return time
			},

			// 获取案件统计值
			// 获取警情统计值
			getCaseAll (start, end) {
			const caseAll = getCaseAll(
			getCaseAll(
			start,
			end,
			this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
			).then((res) => {
			if (res.data.length > 0) {
			return res.data.reduce(
			let obj = {}
			if (res.data.timeList) {
			let yDataList = {}
			yDataList.dqList = res.data.dqList.reduce(
			(previous, current) => {
			previous.xData.push(current.days)
			previous.yData.push(current.cout)
			previous.push(current.count)
			return previous
			},
			{ xData: [], yData: [] }
			[]
			)
			yDataList.zpList = res.data.zpList.reduce(
			(previous, current) => {
			previous.push(current.count)
			return previous
			},
			[]
			)
			yDataList.jfList = res.data.jfList.reduce(
			(previous, current) => {
			previous.push(current.count)
			return previous
			},
			[]
			)
			yDataList.qtList = res.data.qtList.reduce(
			(previous, current) => {
			previous.push(current.count)
			return previous
			},
			[]
			)
			let xData = res.data.timeList.map(item => item.slice(5, 10))
			obj = { xData, yDataList }
			} else {
			return { xData: [], yData: [] }
			obj = { xData: [], yDataList: {} }
			}
			})

			return caseAll
			eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList))

			setTimeout(() => {
			this.eventChangeEchartsLoading = false
			}, 500)
			})
			},

			// 初始化案件统计
			async initEventChangeEcharts () {
			var chartDom = document.getElementById("EventChangeEcharts")
			// 获取警情排行统计值
			getCaseRanking (start, end) {
			getCaseRanking(
			start,
			end,
			this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
			).then((res) => {
			let data = []

			if (res.data.data) {
			res.data.data = res.data.data.sort((a, b) => a.value - b.value)
			res.data.data = res.data.data.map((item, index) => {
			item.value = item.count

			if (index == 0) {
			item.itemStyle = {
			color: '#EB3C5A'
			}
			} else if (index == 1) {
			item.itemStyle = {
			color: '#FA8331'
			}
			} else if (index == 2) {
			item.itemStyle = {
			color: '#F7B833'
			}
			} else {
			item.itemStyle = {
			color: '#395FFD'
			}
			}

			return item
			}).sort((a, b) => b.value - a.value)

			console.log(res.data.data, 465)

			data = res.data.data
			} else {
			data = []
			}

			eventchangemychart.setOption(this.initRankingOption(data))

			setTimeout(() => {
			this.eventChangeEchartsLoading = false
			}, 500)
			})
			},

			// 初始化警情数量统计
			async initEventChangeEcharts (type) {
			this.caseInfoType = type
			this.eventChangeEchartsLoading = true

			if (
			eventchangemychart != null &&
			eventchangemychart != "" &&
			eventchangemychart != undefined
			)
			) {

			eventchangemychart.clear()
			eventchangemychart.dispose()

			}

			var chartDom = document.getElementById("EventChangeEcharts")
			eventchangemychart = this.$echarts.init(chartDom)

			const date = this.eventTime.map((item) => {
			return this.dateFormat(item)
			})

			const optionsData = await this.getCaseAll(date[0], date[1])
			if (type == 0) {
			this.getCaseAll(date[0], date[1])
			} else {
			this.getCaseRanking(date[0], date[1])
			}

			eventchangemychart.showLoading({
			text: '拼命加载中',
			color: '#c23531',
			textColor: '#FFF',
			maskColor: 'rgba(0, 0, 0, 0.2)',
			zlevel: 0,
			})
			setTimeout(() => {
			eventchangemychart.hideLoading()
			eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yData))
			}, 500)
			},

			// 案件统计的options
			initEventChangeOption (xData, yData) {
			// 警情数量统计的options
			initEventChangeOption (xData, yDataList) {
			let option
			if (xData.length == 0) {
			//暂无数据
			option = {
			title: {
			text: "暂无案件数据",
			text: "暂无警情数据",
			x: "center",
			y: "center",
			textStyle: {
			@@ -448,6 +635,7 @@
			}
			} else {
			option = {
			color: ['#5470C6', '#73C0DE', '#EE6666', '#FAC858'],
			tooltip: {
			trigger: "item",
			formatter:
			@@ -465,6 +653,12 @@
			color: "#fff",
			},
			},
			},
			legend: {
			data: ['盗窃', '诈骗', '纠纷', '其他'],
			textStyle: {
			color: "#fff"
			}
			},
			yAxis: {
			type: "value",
			@@ -486,41 +680,60 @@
			},
			series: [
			{
			data: yData,
			name: '盗窃',
			data: yDataList.dqList,
			type: "line",
			smooth: true,
			areaStyle: {
			normal: {
			//渐变色
			color: new this.$echarts.graphic.LinearGradient(
			0,
			0,
			0,
			1,
			[
			{
			//波形图渐变色样式
			offset: 0,
			color: "rgba(3, 108, 255, 0.7)",
			},
			{
			offset: 0.8,
			color: "rgba(3, 108, 255, 0.1)",
			},
			],
			false
			),
			},
			},
			itemStyle: {
			normal: {
			color: "red", //改变折线点的颜色
			lineStyle: {
			color: "rgba(3, 108, 255, 1)", //改变折线颜色
			},
			},
			},
			// areaStyle: {
			// normal: {
			// //渐变色
			// color: new this.$echarts.graphic.LinearGradient(
			// 0,
			// 0,
			// 0,
			// 1,
			// [
			// {
			// //波形图渐变色样式
			// offset: 0,
			// color: "rgba(3, 108, 255, 0.7)",
			// },
			// {
			// offset: 0.8,
			// color: "rgba(3, 108, 255, 0.1)",
			// },
			// ],
			// false
			// ),
			// },
			// },
			// itemStyle: {
			// normal: {
			// color: "red", //改变折线点的颜色
			// lineStyle: {
			// color: "rgba(3, 108, 255, 1)", //改变折线颜色
			// },
			// },
			// },
			},
			{
			name: '诈骗',
			data: yDataList.zpList,
			type: "line",
			smooth: true,
			},
			{
			name: '纠纷',
			data: yDataList.jfList,
			type: "line",
			smooth: true,
			},
			{
			name: '其他',
			data: yDataList.qtList,
			type: "line",
			smooth: true,
			}
			],
			grid: {
			top: "4%",
			@@ -529,6 +742,147 @@
			bottom: "4%",
			containLabel: true,
			},
			}
			}

			return option
			},

			// 警情排行统计的options
			initRankingOption (dataArr) {
			let option
			if (dataArr.length == 0) {
			//暂无数据
			option = {
			title: {
			text: "暂无警情排行数据",
			x: "center",
			y: "center",
			textStyle: {
			color: "#fff",
			fontSize: fontSize(14),
			fontWeight: "normal",
			},
			},
			}
			} else {
			let seriesData = dataArr.map(item => {
			return { value: item.value, itemStyle: item.itemStyle }
			})
			option = {
			tooltip: {
			trigger: "item",
			formatter:
			' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>',
			},
			xAxis: {
			type: "value",
			splitLine: { show: false },
			axisLabel: { show: false },
			axisTick: { show: false },
			axisLine: { show: false }
			},
			yAxis: [
			{
			type: "category",
			inverse: true,
			axisLine: { show: false },
			axisTick: { show: false },
			data: dataArr.map((item) => item.name),
			axisLabel: {
			rich: {
			nt1: {
			color: "#fff",
			backgroundColor: '#EB3B5A',
			width: fontSize(12),
			height: fontSize(12),
			fontSize: fontSize(10),
			align: "center",
			borderRadius: fontSize(50),
			padding: [0, 1, 2, 1]
			},
			nt2: {
			color: "#fff",
			backgroundColor: '#FA8231',
			width: fontSize(12),
			height: fontSize(12),
			fontSize: fontSize(10),
			align: "center",
			borderRadius: fontSize(50),
			padding: [0, 1, 2, 1]
			},
			nt3: {
			color: "#fff",
			backgroundColor: '#F7B731',
			width: fontSize(12),
			height: fontSize(12),
			fontSize: fontSize(10),
			align: "center",
			borderRadius: fontSize(50),
			padding: [0, 1, 2, 1]
			},
			nt: {
			color: "#fff",
			backgroundColor: '#00a9c8',
			width: fontSize(12),
			height: fontSize(12),
			fontSize: fontSize(10),
			align: "center",
			borderRadius: fontSize(50),
			padding: [0, 1, 2, 1]
			}
			},
			formatter: function (value, index) {
			let idx = index + 1
			if (idx <= 3) {
			return ["{nt" + idx + "\|" + idx + "}"].join("\n")
			} else {
			return ["{nt\|" + idx + "}"].join("\n")
			}
			}
			}
			},
			{//名称
			type: 'category',
			offset: -10,
			position: "left",
			axisLine: { show: false },
			axisTick: { show: false },
			axisLabel: {
			color: '#fff',
			align: "left",
			verticalAlign: "bottom",
			lineHeight: fontSize(24),
			fontSize: fontSize(10)
			},
			data: dataArr.reverse().map((item) => item.name),
			},
			],
			series: [
			{
			zlevel: 1,
			type: "bar",
			barWidth: fontSize(10),
			data: seriesData,
			itemStyle: {
			normal: {
			barBorderRadius: fontSize(5)
			}
			},
			label: {
			show: true,
			fontSize: fontSize(10),
			color: "#fff"
			}
			}
			],
			grid: {
			top: "3%",
			left: "-20%",
			right: "2%",
			bottom: "3%",
			containLabel: true,
			}
			}
			}

			@@ -553,8 +907,8 @@

			let data = []
			this.regionTotal = 0

			const dataAll = getEquipment(
			let dataAll = null
			dataAll = getEquipment(
			this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
			).then((res) => {
			if (this.linetype == 0) {
			@@ -611,6 +965,8 @@

			return data
			}
			}).catch(res => {
			dataAll = '请求错误'
			})

			return dataAll
			@@ -619,6 +975,7 @@
			// 现有设备饼图初始化
			async initEquipmentEcharts (type) {
			this.linetype = type
			this.equipmentEchartsLoading = true

			if (
			equipmentmyChart != null &&
			@@ -634,24 +991,18 @@

			const data = await this.getEquipment()

			if (data == '请求错误') {
			setTimeout(() => {
			this.equipmentEchartsLoading = false
			}, 500)
			}
			const newData = data.filter((item) => {
			if (item.value != 0) {
			return item
			}
			})

			equipmentmyChart.showLoading({
			text: '拼命加载中',
			color: '#c23531',
			textColor: '#FFF',
			maskColor: 'rgba(0, 0, 0, 0.2)',
			zlevel: 0,
			})
			setTimeout(() => {
			equipmentmyChart.hideLoading()
			equipmentmyChart.setOption(this.initEquipmentOptions(newData))
			}, 500)

			equipmentmyChart.setOption(this.initEquipmentOptions(newData))

			this.clickEquimentChart()

			@@ -662,6 +1013,9 @@
			equipmentmyChart.off("mouseover")
			equipmentmyChart.off("mouseout")
			}
			setTimeout(() => {
			this.equipmentEchartsLoading = false
			}, 500)
			},

			// 现有设备options饼图数据
			@@ -816,7 +1170,7 @@
			}
			},

			// 饼图轮播
			// 设备饼图轮播
			equipmentEchartsCarousel () {
			let curIndex = 0
			if (timer) {
			@@ -956,6 +1310,10 @@
			// margin-left: 8px;
			// }

			:deep(.el-main) {
			padding: 0;
			}

			.box {
			display: flex;
			position: absolute;
			@@ -1016,16 +1374,25 @@
			.sub-tab {
			padding: 10px;
			display: flex;
			color: #99cccc;

			.tab {
			display: flex;
			justify-content: center;
			margin: 0 10px;
			flex: 1;
			background: $sub-tab-bg-color;
			border-radius: 8px;
			cursor: pointer;
			height: 22px;
			display: flex;
			align-items: center;
			justify-content: center;

			&>div {
			height: 26px;
			line-height: 26px;
			& > div {
			height: 22px;
			line-height: 22px;
			white-space: nowrap;
			}
			}
			}
			@@ -1033,6 +1400,8 @@
			.echarts-box {
			padding: 12px;
			flex: 1;
			// height: 100%;
			// width: 100%;
			}

			.table-box {
			@@ -1043,7 +1412,7 @@
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			margin-top: 15px;
			margin-top: -10px;

			.point {
			width: 12px;
			@@ -1053,6 +1422,66 @@
			cursor: pointer;
			}
			}

			:deep(.el-table) {
			.cell {
			// white-space: pre-line;
			white-space: pre-wrap;
			height: 100% !important;
			line-height: 3.2 !important;
			}

			.el-table__body-wrapper {
			height: 100% !important;
			overflow: hidden;

			.el-table__body {
			width: 100% !important;
			height: 100% !important;

			tbody {
			width: 100% !important;
			height: 100% !important;

			td {
			flex: 1;
			}
			}
			}
			}
			}
			}

			.duty-information-box {
			height: 100%;

			& > div:first-child {
			background: $table-body-tr-n-color;
			}

			& > div:last-child {
			background: $table-body-tr-2n-color;
			}

			& > div {
			display: flex;
			height: 50%;

			& > div {
			display: flex;
			align-items: center;
			}

			& > div:first-child {
			width: 28%;
			justify-content: center;
			}

			& > div:last-child {
			width: 72%;
			text-align: left;
			}
			}
			}

			#peopleList {