|
|
@@ -0,0 +1,655 @@
|
|
|
+<template>
|
|
|
+ <div class="mineWind">
|
|
|
+ <div class="mine-title">{{ mineTitle }}</div>
|
|
|
+ <div class="mine-content">
|
|
|
+ <div class="content-tabs">
|
|
|
+ <div :class="activeIndex == '1' ? 'tabs-item1' : 'tabs-item'" @click="getChange('1')">信息列表</div>
|
|
|
+ <div :class="activeIndex == '2' ? 'tabs-item1' : 'tabs-item'" @click="getChange('2')">信息统计</div>
|
|
|
+ </div>
|
|
|
+ <!-- 信息列表 -->
|
|
|
+ <div class="content-search" v-if="activeIndex == '1'">
|
|
|
+ <div class="risk-select">
|
|
|
+ <a-select style="width: 120px" v-model:value="selectVal" allowClear class="code-mode-select"
|
|
|
+ @change="changeSelect">
|
|
|
+ <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode">{{
|
|
|
+ item.orgname }} </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-select style="width: 120px" v-model:value="selectVal" allowClear class="code-mode-select"
|
|
|
+ @change="changeSelect">
|
|
|
+ <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode">{{
|
|
|
+ item.orgname }} </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-select style="width: 120px" v-model:value="selectVal" allowClear class="code-mode-select"
|
|
|
+ @change="changeSelect">
|
|
|
+ <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode">{{
|
|
|
+ item.orgname }} </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-table" v-if="activeIndex == '1'">
|
|
|
+ <div class="table-head">
|
|
|
+ <div class="head-item" v-for="(ite, ind) in headList" :key="ind">{{ ite.label }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="table-cont">
|
|
|
+ <div class="cont-item" v-for="(item, index) in contList" :key="index">
|
|
|
+ <div class="item-val">{{ item.id }}</div>
|
|
|
+ <div class="item-val">{{ item.name }}</div>
|
|
|
+ <div class="item-val">{{ item.address }}</div>
|
|
|
+ <div class="item-val">{{ item.smoke }}</div>
|
|
|
+ <div class="item-val">{{ item.person }}</div>
|
|
|
+ <div class="item-val">{{ item.br }}</div>
|
|
|
+ <div class="item-val">{{ item.brz }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 统计信息 -->
|
|
|
+ <div class="echart-box" v-if="activeIndex == '2'">
|
|
|
+ <div class="piebox" ref="piebox"></div>
|
|
|
+ </div>
|
|
|
+ <div class="echart-all-box" v-if="activeIndex == '2'">
|
|
|
+ <div class="pieboxall" ref="pieboxall"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, reactive, watch, defineProps, nextTick, } from 'vue';
|
|
|
+import * as echarts from 'echarts';
|
|
|
+
|
|
|
+let props = defineProps({
|
|
|
+ airKjStatus: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+let activeIndex = ref('1')
|
|
|
+//获取dom元素节点
|
|
|
+let piebox = ref<any>();
|
|
|
+let pieboxall = ref<any>();
|
|
|
+let mineTitle = ref('矿井通风状态监测');
|
|
|
+let selectVal = ref('');
|
|
|
+let selectList = ref<any>([]);
|
|
|
+let contList = reactive<any[]>([
|
|
|
+ { id: '1', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '2', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '3', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '4', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '5', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '6', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '7', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '8', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '9', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+])
|
|
|
+let headList = reactive<any>([
|
|
|
+ { label: '序号' },
|
|
|
+ { label: '矿井名称' },
|
|
|
+ { label: '所属地区市/县' },
|
|
|
+ { label: '原煤产量/百万吨' },
|
|
|
+ { label: '从业人数/人' },
|
|
|
+ { label: '尘肺病累计病例/人' },
|
|
|
+ { label: '本年度尘肺病病例/人' },
|
|
|
+])
|
|
|
+
|
|
|
+//tabs选项切换
|
|
|
+function getChange(active) {
|
|
|
+ activeIndex.value = active
|
|
|
+ switch (activeIndex.value) {
|
|
|
+ case '1':
|
|
|
+
|
|
|
+ break;
|
|
|
+ case '2':
|
|
|
+ getOption()
|
|
|
+ getOptionAll()
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+//下拉框选项切换
|
|
|
+function changeSelect(val) { }
|
|
|
+function getOption() {
|
|
|
+ nextTick(() => {
|
|
|
+ let myChart = echarts.init(piebox.value);
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
|
+ },
|
|
|
+ color: ['#faa526', '#d5eb0f', '#afec07', '#f3f720', '#0ee93d', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b',],
|
|
|
+ title: {
|
|
|
+ "text": "陕西省尘肺病地区比例分析",
|
|
|
+ "left": "center",
|
|
|
+ "top": 5,
|
|
|
+ "textStyle": {
|
|
|
+ "color": "#00d8ff",
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ right: 10,
|
|
|
+ align: 'auto',
|
|
|
+ top: 'middle',
|
|
|
+ itemGap: 0.5,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 10,
|
|
|
+ },
|
|
|
+ icon: 'circle',
|
|
|
+ data: ['西安市', '宝鸡市', '咸阳市', '铜川市', '渭南市', '延安市', '榆林市', '汉中市', '安康市', '商洛市'],
|
|
|
+ // formatter: function (name) {
|
|
|
+ // var oa = option.series[0].data;
|
|
|
+ // var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
|
|
|
+ // for (var i = 0; i < option.series[0].data.length; i++) {
|
|
|
+ // if (name == oa[i].name) {
|
|
|
+ // return name + ' ' + oa[i].value + ' ' + (oa[i].value / num * 100).toFixed(2) + '%';
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '比例分析',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '55%',
|
|
|
+ center: ['48%', '50%'],
|
|
|
+ data: [
|
|
|
+ { value: 335, name: '西安市' },
|
|
|
+ { value: 310, name: '宝鸡市' },
|
|
|
+ { value: 234, name: '咸阳市' },
|
|
|
+ { value: 135, name: '铜川市' },
|
|
|
+ { value: 335, name: '渭南市' },
|
|
|
+ { value: 310, name: '延安市' },
|
|
|
+ { value: 234, name: '榆林市' },
|
|
|
+ { value: 135, name: '汉中市' },
|
|
|
+ { value: 335, name: '安康市' },
|
|
|
+ { value: 310, name: '商洛市' },
|
|
|
+
|
|
|
+ ],
|
|
|
+
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 10,
|
|
|
+ color: '#fff',
|
|
|
+ formatter: '{b} : {d}%'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ length: 50,
|
|
|
+ length2: 50,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
+ })
|
|
|
+}
|
|
|
+function getOptionAll() {
|
|
|
+ nextTick(() => {
|
|
|
+ let scaleData = [{
|
|
|
+ 'name': '横山区',
|
|
|
+ 'value': 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name': '神木市',
|
|
|
+ 'value': 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name': '府谷县',
|
|
|
+ 'value': 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name': '靖边县',
|
|
|
+ 'value': 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name': '定边县',
|
|
|
+ 'value': 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name': '绥德县',
|
|
|
+ 'value': 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name': '米脂县',
|
|
|
+ 'value': 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name': '佳县',
|
|
|
+ 'value': 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name': '吴堡县',
|
|
|
+ 'value': 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name': '清涧县',
|
|
|
+ 'value': 10
|
|
|
+ },
|
|
|
+
|
|
|
+ ];
|
|
|
+ let rich = {
|
|
|
+ white: {
|
|
|
+ color: '#fff',
|
|
|
+ align: 'center',
|
|
|
+ fontSize: 12,
|
|
|
+ padding: [3, 0]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ let placeHolderStyle = {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ color: 'rgba(0, 0, 0, 0)',
|
|
|
+ borderColor: 'rgba(0, 0, 0, 0)',
|
|
|
+ borderWidth: 0
|
|
|
+ }
|
|
|
+ };
|
|
|
+ let data: any[] = [];
|
|
|
+ let color1 = ['rgb(255, 153, 153)', 'rgb(255, 176, 63)', 'rgb(61, 186, 45)', 'rgb(43, 166, 254)', 'rgb(255,222,0)', 'rgb(255,0,0)', '#faa526', '#d5eb0f', '#afec07', '#f3f720', '#0ee93d', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b',];
|
|
|
+
|
|
|
+ for (let i = 0; i < scaleData.length; i++) {
|
|
|
+ data.push({
|
|
|
+ value: scaleData[i].value,
|
|
|
+ name: scaleData[i].name,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderWidth: 2,
|
|
|
+ shadowBlur: 0,
|
|
|
+ borderColor: color1[i],
|
|
|
+ shadowColor: color1[i],
|
|
|
+ color: color1[i],
|
|
|
+ opacity: 1,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ value: 2,
|
|
|
+ name: '',
|
|
|
+ itemStyle: placeHolderStyle
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let seriesObj = [{
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ clockWise: false,
|
|
|
+ radius: [40, 75],
|
|
|
+ center: ['48%', '56%'],
|
|
|
+ hoverAnimation: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'inner',
|
|
|
+ fontSize: 10,
|
|
|
+ color: '#fff',
|
|
|
+ formatter: function (params) {
|
|
|
+ let percent: any = 0;
|
|
|
+ let total = 0;
|
|
|
+ for (var i = 0; i < scaleData.length; i++) {
|
|
|
+ total += scaleData[i].value;
|
|
|
+ }
|
|
|
+ percent = ((params.value / total) * 100).toFixed(0);
|
|
|
+ if (params.name !== '') {
|
|
|
+ return params.name;
|
|
|
+ } else {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rich: rich
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data
|
|
|
+ }];
|
|
|
+ let myChart = echarts.init(pieboxall.value);
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: "{b} : {c} ({d}%)"
|
|
|
+ },
|
|
|
+ "title": {
|
|
|
+ "text": "榆林市尘肺病比例分析",
|
|
|
+ "left": "center",
|
|
|
+ "top": 0,
|
|
|
+ "textStyle": {
|
|
|
+ "color": "#00d8ff",
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ right: 10,
|
|
|
+ align: 'auto',
|
|
|
+ top: 'middle',
|
|
|
+ itemGap: 0.5,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 10,
|
|
|
+ },
|
|
|
+ icon: 'circle',
|
|
|
+ data: ['横山区', '神木市', '府谷县', '靖边县', '定边县', '绥德县', '米脂县', '佳县', '吴堡县', '清涧县'],
|
|
|
+
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ series: seriesObj
|
|
|
+ }
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.airKjStatus,
|
|
|
+ (newA, oldA) => {
|
|
|
+ console.log(newA, 'airKjStatus-----------');
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+@font-face {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ src: url('../../../../assets/font/douyuFont.otf');
|
|
|
+}
|
|
|
+
|
|
|
+.mineWind {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .mine-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ top: 12px;
|
|
|
+ color: #fff;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mine-content {
|
|
|
+ height: 100%;
|
|
|
+ padding: 40px 0px 28px 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .content-tabs {
|
|
|
+ width: 100%;
|
|
|
+ height: 45px;
|
|
|
+ padding: 0px 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .tabs-item {
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-item1 {
|
|
|
+ color: rgba(0, 216, 255, );
|
|
|
+ cursor: pointer;
|
|
|
+ border-bottom: 2px solid;
|
|
|
+ border-image: linear-gradient(to right, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-search {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ // padding: 0px 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .risk-select {
|
|
|
+ position: absolute;
|
|
|
+ width: 90%;
|
|
|
+ height: 30px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ top: 0px;
|
|
|
+ background: url('../../../../../assets/images/company/content-label.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
+ .zxm-select {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ left: 135px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ left: 260px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-table {
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ width: 90%;
|
|
|
+ height: calc(100% - 90px);
|
|
|
+ margin: 0px 30px;
|
|
|
+ border: 1px solid rgba(0, 216, 255, .3);
|
|
|
+
|
|
|
+ .table-head {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 50px;
|
|
|
+ border-bottom: 1px solid rgba(0, 216, 255, .3);
|
|
|
+
|
|
|
+ .head-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ color: rgba(0, 216, 255, );
|
|
|
+ font-size: 12px;
|
|
|
+ border-right: 1px solid rgba(0, 216, 255, .1);
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ width: 5%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ width: 10%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ width: 15%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(4) {
|
|
|
+ width: 15%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(5) {
|
|
|
+ width: 15%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(6) {
|
|
|
+ width: 20%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(7) {
|
|
|
+ width: 20%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-cont {
|
|
|
+ height: calc(100% - 51px);
|
|
|
+
|
|
|
+ .cont-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 32.5px;
|
|
|
+ border-bottom: 1px solid rgba(0, 216, 255, .1);
|
|
|
+
|
|
|
+ .item-val {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ border-right: 1px solid rgba(0, 216, 255, .1);
|
|
|
+ font-size: 12px;
|
|
|
+ border-right: 1px solid rgba(0, 216, 255, .1);
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ width: 5%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ width: 10%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ width: 15%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(4) {
|
|
|
+ width: 15%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(5) {
|
|
|
+ width: 15%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(6) {
|
|
|
+ width: 20%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(7) {
|
|
|
+ width: 20%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .echart-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 205px;
|
|
|
+
|
|
|
+ .piebox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .echart-all-box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 250px);
|
|
|
+
|
|
|
+ .pieboxall {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector {
|
|
|
+ height: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-search-input {
|
|
|
+ height: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .zxm-select-selection-placeholder {
|
|
|
+ color: #fff !important;
|
|
|
+ line-height: 22px !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector::after {
|
|
|
+ line-height: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
|
|
|
+ background-color: transparent;
|
|
|
+ border-top: 0px;
|
|
|
+ border-bottom: 0px;
|
|
|
+ border-left: 2px solid;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: linear-gradient(to bottom, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .zxm-select-arrow {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .zxm-select-selection-item {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .zxm-select-single .zxm-select-selector .zxm-select-selection-item {
|
|
|
+ line-height: 24px !important;
|
|
|
+}
|
|
|
+</style>
|
