123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539 |
- <template>
- <div class="windLine">
- <div class="title-top" @click="getDetail">关键路线通风</div>
- <div class="toggle-search">
- <i class="icon-search">
- <SvgIcon class="icon" size="14" name="toggle" />
- </i>
- <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="lineTypeList"
- aria-placeholder="请选择" @change="changeSelect" />
- </div>
- <div class="line-echart">
- <div class="line" ref="line"></div>
- <div class="pic">
- <img src="../../../../../assets/images/home-container/pie.png" alt="" />
- </div>
- <div class="percent">
- <div class="percent-box">
- <span>{{ percentF }}</span>
- <span class="dw">%</span>
- </div>
- <div class="percent-box">
- <span>{{ percentT }}</span>
- <span class="dw">%</span>
- </div>
- <div class="percent-box">
- <span>{{ percentE }}</span>
- <span class="dw">%</span>
- </div>
- </div>
- </div>
- <div class="line-card">
- <div class="card-item" v-for="(item, index) in tabList" :key="index">
- <div class="item-s">
- <div class="item-label">{{ item.name }}</div>
- <div class="item-val">{{ item.val }}</div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts" setup>
- import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
- import { SvgIcon } from '/@/components/Icon';
- import * as echarts from 'echarts';
- const emit = defineEmits(['goDetail'])
- let props = defineProps({
- lineList: Array,
- });
- //获取dom节点
- let line = ref<any>();
- let lineData = reactive<any[]>([]);
- let searchValue = ref('');
- const lineTypeList = reactive<any[]>([]);
- let echartData = reactive<any[]>([
- { name: '进风区', value: 0 },
- { name: '用风区', value: 0 },
- { name: '回风区', value: 0 },
- ]);
- let xData = reactive<any[]>([]);
- let yData = reactive<any[]>([]);
- let percentE = ref<any>(0);
- let percentF = ref<any>(0);
- let percentT = ref<any>(0);
- let tabList = reactive<any[]>([
- { name: '总风量(m³/min)', val: 0 },
- { name: '总阻力(Pa)', val: 0 },
- { name: '等积孔(m²)', val: 0 },
- ]);
- //跳转详情
- function getDetail() {
- emit('goDetail', 'majorpath')
- }
- //选项切换
- function changeSelect(val) {
- searchValue.value = val;
- switch (val) {
- case 'bet关键路线1':
- echartData[0].value = lineData[0].majorpath.drag_1 || 0;
- echartData[1].value = lineData[0].majorpath.drag_2 || 0;
- echartData[2].value = lineData[0].majorpath.drag_3 || 0;
- tabList[0].val = lineData[0].majorpath.drag_total || 0;
- tabList[1].val = lineData[0].majorpath.m3_total || 0;
- tabList[2].val = 0.78;
- percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
- percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
- percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
- // echartData[0].value = Math.floor(Math.random() * (629 - 620 + 1)) + 620;
- // echartData[1].value = Math.floor(Math.random() * (949 - 940 + 1)) + 940;
- // echartData[2].value = Math.floor(Math.random() * (855 - 850 + 1)) + 850;
- // tabList[0].val = Math.floor(Math.random() * (10700 - 10600 + 1)) + 10600;
- // tabList[1].val = Math.floor(Math.random() * (2433 - 2423 + 1)) + 2423;
- // tabList[2].val = 0.56;
- // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- getOption();
- break;
- case 'bet关键路线2':
- echartData[0].value = lineData[1].majorpath.drag_1 || 0;
- echartData[1].value = lineData[1].majorpath.drag_2 || 0;
- echartData[2].value = lineData[1].majorpath.drag_3 || 0;
- tabList[0].val = lineData[1].majorpath.drag_total || 0;
- tabList[1].val = lineData[1].majorpath.m3_total || 0;
- tabList[2].val = 0.83;
- percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
- percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
- percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
- // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
- // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
- // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
- // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
- // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
- // tabList[2].val = 0.78;
- // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- getOption();
- break;
- case 'sw关键路线1':
- echartData[0].value = lineData[2].majorpath.drag_1 || 0;
- echartData[1].value = lineData[2].majorpath.drag_2 || 0;
- echartData[2].value = lineData[2].majorpath.drag_3 || 0;
- tabList[0].val = lineData[2].majorpath.drag_total || 0;
- tabList[1].val = lineData[2].majorpath.m3_total || 0;
- tabList[2].val = 0.88;
- percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
- percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
- percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
- // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
- // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
- // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
- // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
- // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
- // tabList[2].val = 0.78;
- // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- getOption();
- break;
- case 'sw关键路线2':
- echartData[0].value = lineData[3].majorpath.drag_1 || 0;
- echartData[1].value = lineData[3].majorpath.drag_2 || 0;
- echartData[2].value = lineData[3].majorpath.drag_3 || 0;
- tabList[0].val = lineData[3].majorpath.drag_total || 0;
- tabList[1].val = lineData[3].majorpath.m3_total || 0;
- tabList[2].val = 0.93;
- percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
- percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
- percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
- // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
- // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
- // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
- // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
- // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
- // tabList[2].val = 0.78;
- // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- getOption();
- break;
- case '关键-路线':
- echartData[0].value = Math.floor(Math.random() * (110 - 100 + 1)) + 100;
- echartData[1].value = Math.floor(Math.random() * (210 - 200 + 1)) + 200;
- echartData[2].value = Math.floor(Math.random() * (310 - 300 + 1)) + 300;
- tabList[0].val = Math.floor(Math.random() * (1010 - 1000 + 1)) + 1000;
- tabList[1].val = Math.floor(Math.random() * (2010 - 2000+ 1)) + 2000;
- tabList[2].val = 0.56;
- percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
- getOption();
- break;
- }
- }
- function getOption() {
- nextTick(() => {
- function deepCopy(obj) {
- if (typeof obj !== 'object') {
- return obj;
- }
- var newobj = {};
- for (var attr in obj) {
- newobj[attr] = obj[attr];
- }
- return newobj;
- }
- echartData.map((a, b) => {
- xData.push(a.name);
- yData.push(a.value);
- });
- var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
- var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
- var RealData = [];
- var borderData = [];
- echartData.map((item, index) => {
- var newobj = deepCopy(item);
- var newobj1 = deepCopy(item);
- RealData.push(newobj);
- borderData.push(newobj1);
- });
- RealData.map((item, index) => {
- item.itemStyle = {
- normal: {
- color: startColor[index],
- },
- };
- });
- borderData.map((item, index) => {
- item.itemStyle = {
- normal: {
- color: borderStartColor[index],
- },
- };
- });
- const myChart = echarts.init(line.value);
- let option = {
- legend: [
- {
- // orient: 'vertical',
- x: '50%',
- y: '12%',
- itemWidth: 10,
- itemHeight: 10,
- align: 'left',
- textStyle: {
- fontSize: 14,
- color: '#b3b8cc',
- },
- data: ['进风区'],
- },
- {
- // orient: 'vertical',
- x: '50%',
- y: '42%',
- itemWidth: 10,
- itemHeight: 10,
- align: 'left',
- textStyle: {
- fontSize: 14,
- color: '#b3b8cc',
- },
- data: ['用风区'],
- },
- {
- // orient: 'vertical',
- x: '50%',
- y: '70%',
- itemWidth: 10,
- itemHeight: 10,
- align: 'left',
- textStyle: {
- fontSize: 14,
- color: '#b3b8cc',
- },
- data: ['回风区'],
- },
- ],
- tooltip: {
- formatter: '{b}:{c}',
- },
- series: [
- // 主要展示层的
- {
- radius: ['40%', '80%'],
- center: ['25%', '50%'],
- type: 'pie',
- z: 10,
- label: {
- normal: {
- show: false,
- },
- emphasis: {
- show: false,
- },
- },
- labelLine: {
- normal: {
- show: false,
- },
- emphasis: {
- show: false,
- },
- },
- itemStyle: {
- normal: {
- borderWidth: 5,
- borderColor: 'rgba(1, 57, 134,1)',
- },
- },
- data: RealData,
- },
- // 边框的设置
- {
- radius: ['45%', '52%'],
- center: ['25%', '50%'],
- type: 'pie',
- z: 5,
- label: {
- normal: {
- show: false,
- },
- emphasis: {
- show: false,
- },
- },
- labelLine: {
- normal: {
- show: false,
- },
- emphasis: {
- show: false,
- },
- },
- animation: false,
- tooltip: {
- show: false,
- },
- data: borderData,
- },
- ],
- };
- myChart.setOption(option);
- window.onresize = function () {
- myChart.resize();
- };
- });
- }
- watch(
- () => props.lineList,
- (val) => {
- console.log(val, '关键路线数据');
- lineData = val;
- lineTypeList.length = 0;
- lineData.forEach((el) => {
- lineTypeList.push({
- label: el.deviceName,
- value: el.deviceName,
- });
- });
- if (searchValue.value) {
- changeSelect(searchValue.value);
- } else {
- searchValue.value = lineTypeList[0].value;
- changeSelect(searchValue.value);
- }
- },
- {
- deep: true,
- }
- );
- onMounted(() => { });
- </script>
- <style lang="less" scoped>
- @font-face {
- font-family: 'douyuFont';
- src: url('../../../../../assets/font/douyuFont.otf');
- }
- .windLine {
- width: 100%;
- height: 100%;
- position: relative;
- .title-top {
- position: absolute;
- top: 9px;
- left: 46px;
- color: #fff;
- font-size: 16px;
- font-family: 'douyuFont';
- cursor: pointer;
- &:hover {
- color: #66ffff;
- }
- }
- .toggle-search {
- position: absolute;
- left: 9px;
- top: 37px;
- display: flex;
- .icon-search {
- position: absolute;
- top: 50%;
- left: 5px;
- transform: translate(0%, -50%);
- }
- }
- .line-echart {
- position: absolute;
- top: 66px;
- left: 0;
- width: 100%;
- height: 120px;
- .line {
- width: 100%;
- height: 100%;
- }
- .pic {
- height: 100%;
- position: absolute;
- left: 45%;
- top: 0;
- display: flex;
- align-items: center;
- img {
- height: 60%;
- }
- }
- .percent {
- position: absolute;
- left: 75%;
- top: 0;
- width: 45px;
- height: 100%;
- display: flex;
- flex-direction: column;
- // justify-content: space-between;
- align-items: center;
- .percent-box {
- font-size: 14px;
- // color: #b3b8cc;
- &:nth-child(1) {
- position: absolute;
- top: 12%;
- color: #ffe01c;
- }
- &:nth-child(2) {
- position: absolute;
- top: 42%;
- color: #1ff8fb;
- }
- &:nth-child(3) {
- position: absolute;
- top: 70%;
- color: #9affa8;
- }
- .dw {
- color: #b3b8cc;
- margin-left: 5px;
- }
- }
- }
- }
- .line-card {
- position: absolute;
- top: 186px;
- left: 0;
- width: 100%;
- height: calc(100% - 186px);
- padding: 0px 15px 15px 15px;
- box-sizing: border-box;
- display: flex;
- justify-content: space-around;
- align-items: center;
- .card-item {
- display: flex;
- flex: 1;
- justify-content: center;
- align-items: center;
- height: 100%;
- .item-s {
- position: relative;
- width: 105px;
- height: 58px;
- margin-top: 20px;
- background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
- background-size: 100% 90%;
- .item-label {
- width: 100%;
- text-align: center;
- color: #b3b8cc;
- font-size: 12px;
- }
- .item-val {
- position: absolute;
- left: 50%;
- top: 26px;
- font-size: 14px;
- font-family: 'douyuFont';
- color: #fff;
- transform: translate(-50%, 0);
- }
- }
- }
- }
- }
- :deep .zxm-select-selector {
- width: 100%;
- height: 30px !important;
- padding: 0 11px 0px 25px !important;
- background-color: rgba(8, 148, 255, 0.3) !important;
- border: 1px solid #1d80da !important;
- }
- :deep .zxm-select-selection-item {
- color: #fff !important;
- line-height: 28px !important;
- }
- :deep .zxm-select-arrow {
- color: #fff !important;
- }
- </style>
|