|
|
@@ -2,163 +2,677 @@
|
|
|
<div class="mineWind">
|
|
|
<div class="mine-title">{{ mineTitle }}</div>
|
|
|
<div class="mine-content">
|
|
|
- <div class="content-label">
|
|
|
- <div class="label-t" v-for="(ite, ind) in labelList" :key="ind">{{ ite.name }}</div>
|
|
|
+ <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-text">
|
|
|
- <template v-for="(item, index) in mineData" :key="index">
|
|
|
- <div
|
|
|
- class="text"
|
|
|
- :style="{ color: item['isWarning'] ? '#F56731' : '#fff', fontWeight: item['isWarning'] ? '600' : 'normal' }"
|
|
|
- @click="goDetail(item['orgcode'])"
|
|
|
- >
|
|
|
- <span>{{ item.deviceName }}</span>
|
|
|
- <span>{{ filterBadValue(item.jf) }}</span>
|
|
|
- <span>{{ filterBadValue(item.hf) }}</span>
|
|
|
- <span>{{ filterBadValue(item.xf) }}</span>
|
|
|
+ <!-- 信息列表 -->
|
|
|
+ <!-- <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.production }}</div>
|
|
|
+ <div class="item-val">{{ item.person }}</div>
|
|
|
+ <div class="item-val">{{ item.br }}</div>
|
|
|
+ <div :class="contList.length > 10 ? 'item-val1' : 'item-val'">{{ item.brz }}</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </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 } from 'vue';
|
|
|
- import { useGo } from '/@/hooks/web/usePage';
|
|
|
+import { ref, reactive, watch, defineProps, nextTick } from 'vue';
|
|
|
+import * as echarts from 'echarts';
|
|
|
|
|
|
- let props = defineProps({
|
|
|
- airKjStatus: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return [];
|
|
|
- },
|
|
|
+let props = defineProps({
|
|
|
+ airKjStatus: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
},
|
|
|
- });
|
|
|
- const go = useGo();
|
|
|
- let mineTitle = ref('矿井通风状态监测');
|
|
|
- let labelList = reactive([{ name: '矿井名称' }, { name: '总进风量' }, { name: '总回风量' }, { name: '总需风量' }]);
|
|
|
- let mineData = ref<any[]>([]);
|
|
|
-
|
|
|
- // 过滤不合法的值，小于5000的视为传感器出错
|
|
|
- function filterBadValue(val: number | string) {
|
|
|
- const valid = parseInt(val) > 5000;
|
|
|
- return valid ? val : '/';
|
|
|
- }
|
|
|
- function goDetail(orgcode: string) {
|
|
|
- // 跳转实际矿端风量监测页面
|
|
|
- // 模拟跳转
|
|
|
- go('/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=windrect');
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+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: '柳塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '2', name: '寸草塔二矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '3', name: '布尔台矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '4', name: '乌兰木伦矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '5', name: '寸草塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '6', name: '石圪台矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '7', name: '补连塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '8', name: '哈拉沟矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '9', name: '上湾矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '10', name: '活鸡兔井', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '11', name: '大柳塔井', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '12', name: '锦界矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '13', name: '榆家梁矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
|
|
|
+ { id: '14', name: '保德矿', address: '陕西省榆林市', production: 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: '商洛市' },
|
|
|
+ ],
|
|
|
|
|
|
- watch(
|
|
|
- () => props.airKjStatus,
|
|
|
- (newA, oldA) => {
|
|
|
- console.log(newA, 'airKjStatus-----------');
|
|
|
- if (newA.length != 0) {
|
|
|
- mineData.value = newA;
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- immediate: true,
|
|
|
- deep: true,
|
|
|
+ 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-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';
|
|
|
- src: url('../../../../assets/font/douyuFont.otf');
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
- .mineWind {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
+ .mine-content {
|
|
|
height: 100%;
|
|
|
+ padding: 40px 0px 28px 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .mine-title {
|
|
|
- position: absolute;
|
|
|
- left: 50px;
|
|
|
- top: 12px;
|
|
|
- color: #fff;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .mine-content {
|
|
|
- height: 100%;
|
|
|
- padding: 62px 0px 28px 0px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .content-tabs {
|
|
|
+ width: 100%;
|
|
|
+ height: 45px;
|
|
|
+ padding: 0px 30px;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
align-items: center;
|
|
|
|
|
|
- .content-label {
|
|
|
- width: 366px;
|
|
|
- height: 32px;
|
|
|
+ .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% - 45px);
|
|
|
+ margin: 0px 30px;
|
|
|
+ border: 1px solid rgba(0, 216, 255, 0.3);
|
|
|
+
|
|
|
+ .table-head {
|
|
|
display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- background: url('../../../../../assets/images/company/content-label.png') no-repeat;
|
|
|
- .label-t {
|
|
|
- color: #3df6ff;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 50px;
|
|
|
+ border-bottom: 1px solid rgba(0, 216, 255, 0.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, 0.1);
|
|
|
+
|
|
|
&:nth-child(1) {
|
|
|
- width: 31%;
|
|
|
+ width: 20px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+
|
|
|
&:nth-child(2) {
|
|
|
- width: 23%;
|
|
|
+ width: 38px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+
|
|
|
&:nth-child(3) {
|
|
|
- width: 23%;
|
|
|
+ width: 57px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+
|
|
|
&:nth-child(4) {
|
|
|
- width: 23%;
|
|
|
+ width: 57px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(5) {
|
|
|
+ width: 57px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(6) {
|
|
|
+ width: 77px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(7) {
|
|
|
+ width: 77px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .content-text {
|
|
|
- height: calc(100% - 32px);
|
|
|
- width: 378px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- // justify-content: space-around;
|
|
|
- justify-content: flex-start;
|
|
|
- padding: 5px 0px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .table-cont {
|
|
|
+ height: calc(100% - 51px);
|
|
|
+
|
|
|
overflow-y: auto;
|
|
|
- .text {
|
|
|
- width: 100%;
|
|
|
- height: 28px;
|
|
|
+
|
|
|
+ .cont-item {
|
|
|
display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: flex-start;
|
|
|
- background: url('../../../../../assets/images/company/content-text.png') no-repeat;
|
|
|
- color: #fff;
|
|
|
- margin-bottom: 5px;
|
|
|
- cursor: pointer;
|
|
|
- &:hover {
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- text-align: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 32.5px;
|
|
|
+ border-bottom: 1px solid rgba(0, 216, 255, 0.1);
|
|
|
+
|
|
|
+ .item-val {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ border-right: 1px solid rgba(0, 216, 255, 0.1);
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
&:nth-child(1) {
|
|
|
- width: 31%;
|
|
|
+ width: 20px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+
|
|
|
&:nth-child(2) {
|
|
|
- width: 23%;
|
|
|
+ width: 38px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+
|
|
|
&:nth-child(3) {
|
|
|
- width: 23%;
|
|
|
+ width: 57px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+
|
|
|
&:nth-child(4) {
|
|
|
- width: 23%;
|
|
|
+ width: 57px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(5) {
|
|
|
+ width: 57px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(6) {
|
|
|
+ width: 77px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(7) {
|
|
|
+ width: 77px;
|
|
|
+ text-align: center;
|
|
|
+ border-right: none;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .item-val1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ width: 67px;
|
|
|
+ text-align: center;
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .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>
|
