提交饼图并修改部分错误内容

src/echarts/options.js

@@ -878,4 +878,147 @@ export function setOnTimeRate(ele, dataIn) {
 		]
 	};
 	onTimeRate = setOptions(ele, option)
-}
+}
+
+
+
+
+
+
+
+
+
+let onShuJun = null
+export  function setBingtu(ele, trafficWay) {
+	if (onShuJun) {
+		onShuJun.dispose()
+	}
+	let sum = trafficWay.reduce((cur, pre) => {
+		return Math.round(cur + pre.value)
+	}, 0);
+	let data = [];
+	let legendData = [];
+	var color = [
+		'#ffff00',
+		'#00ffd5',
+		'#32ddff',
+		'#ffe000',
+		'#ffa800',
+		'#ff5b00',
+		'#ff3000',
+	];
+	for (var i = 0; i < trafficWay.length; i++) {
+		let name = trafficWay[i].name+' ('+trafficWay[i].danwei+')';
+		legendData.push(name);
+		data.push(
+			{
+				value: trafficWay[i].value,
+				name: name,
+				itemStyle: {
+					borderWidth: 0,
+					borderRadius: 10,
+					shadowBlur: 10,
+					borderColor: color[i],
+					shadowColor: color[i],
+				},
+			},
+			{
+				value: sum / 100, // 控制每个环形之间的间隙
+				name: '',
+				itemStyle: {
+					label: {
+						show: false,
+					},
+					labelLine: {
+						show: false,
+					},
+					color: 'rgba(0, 0, 0, 0)',
+					borderColor: 'rgba(0, 0, 0, 0)',
+					borderWidth: 0,
+				},
+			}
+		);
+	}
+	let seriesOption = [
+		{
+			name: '',
+			type: 'pie',
+			clockwise: false,
+			radius: ['60%', '70%'],
+			center: ['18%', '50%'],
+			emphasis: {
+				scale: false,
+			},
+			label: {
+				show: false,
+			},
+			data: data,
+		},
+	];
+let	option = {
+
+		title: {
+			text: '总量',
+			subtext: sum,
+			textAlign:'center',
+			textStyle: {
+				color: '#19E1E3',
+				fontSize: 16,
+				padding: [0, 0, 0, 0]
+			},
+			subtextStyle: {
+				fontSize: 15,
+				fontWeight: 'bolder',
+				color: '#19E1E3',
+			},
+			x: '17%',
+			y: '40%'
+		},
+		color: color,
+	     tooltip: {
+			show:true
+				// trigger: 'axis',
+				// borderColor: "#092B46",
+				// backgroundColor: "#092B46",
+				// textStyle: {
+				// 	color: "#ddd",
+				// 	fontSize: nowSize(12),
+				// 	align: 'left'
+				// }
+		 },
+		legend: {
+			icon: 'rect',
+			itemWidth: 16,
+			itemHeight: 8,
+			itemStyle: {
+				borderWidth: 3
+			},
+			orient: 'vertical',
+			data: legendData,
+			right: '5%',
+			top: 'center',
+			align: 'left',
+			textStyle: {
+				color: '#fff',
+				fontSize: 13,
+				padding: [0, 0, 0, 10]
+			},
+			formatter: function (params) {
+				if (params.length>20)
+				{
+					let datas=	params.split(' ')
+					return  datas[0].slice(0,20)+'... '+datas[1]
+				}else {
+					return   params
+				}
+
+			},
+			itemGap: 30, // 图例之间的间隔
+		},
+		toolbox: {
+			show: false,
+		},
+		series: seriesOption,
+	};
+	onShuJun = setOptions(ele, option)
+}

src/views/hdsj/Index.vue

@@ -137,7 +137,15 @@
       </div>
     </div>
     <div v-else class="panel-right pr-no-data">无数据</div>
+
+
+
+      <BingTu v-if="showSuJun" :datas="listData_gcxx.value" :types="type" @closeFun="handleCloseBingTu" />
+
+      <ButonSuJun   @backFunction="handleShowBingTu" />
   </div>
+
+
 </template>
 
 <script>
@@ -159,12 +167,19 @@
     ueCallAfterShujun, ueCallBackShujun, ueCallInitWaterShujun, ueCallStartYjyj, ueCallCloseYjyj,
     ueCallOpenWater, ueCallCloseWater, ueCallOpenMaintain, ueCallCloseMaintain
   } from '@/utils/UIInteractions'
+  import BingTu from "@/views/hdsj/cpns/BingTu"
+  import ButonSuJun from "@/views/hdsj/cpns/ButtonSuJun"
+
   import bus from '@/utils/bus';
   import WaterDepthList from './cpns/WaterDepthList.vue'
   import { asideShow } from '@/store/index'
-
+  const type =ref('计划方量')
   const aside_hide = asideShow().isHide
 
+function handleShowBingTu()
+{
+  showSuJun.value=true
+}
   onMounted(() => {
     // setSjjk(document.getElementById('chart_fstj'), chartData_fstj.value)
     // getGctj()
@@ -180,6 +195,8 @@
 
   const listShow_whss = ref(false)
 
+  const showSuJun = ref(false)
+
   function handlePickWhss(item) {
     data_ssgl.value[0].value = Math.abs(+item.height)
     ueCallCloseMaintain()
@@ -188,6 +205,10 @@
     }, 500);
   }
 
+  function handleCloseBingTu() {
+    showSuJun.value=false
+  }
+
   function handleCloseWhss() {
     data_ssgl.value[0].isHighlight = false
     data_ssgl.value[0].value = '-'
@@ -221,17 +242,21 @@
   function handleChangeProject(item) {
     currentProject.id = item.id
     currentProject.name = item.prjName
+    currentProject.status = item.status
+
   }
 
-  const currentProject = reactive({ id: '', name: '' })
+  const currentProject = reactive({ id: '', name: '', status: '' })
   const showRightDetail = ref(true)
   watch(()=>currentProject.id, (val)=> {
-    if(val===null||+currentYear.value>2022) {
+    // if(val===null||+currentYear.value>2023) {
+    if(val===null||currentProject.status==='未进行') {
       showRightDetail.value = false
     } else {
       fstjListShow.value = false
       getFstj(val)
       getYjWarning(val)
+      console.log('工程入参：'+val)
       getBoatNum(val)
       showRightDetail.value = true
     }
@@ -276,10 +301,12 @@
         })
         currentProject.id = res.data.Rows[0].id
         currentProject.name = res.data.Rows[0].prjName
+        currentProject.status = listData_gcxx.value[0].status
       } else {
         listData_gcxx.value = []
         currentProject.id = null
         currentProject.name = null
+        currentProject.status = null
       }
     })
   }
@@ -684,14 +711,14 @@
               margin: 8px 0 6px;
               span {
                 margin-right: 10px;
-                font-size: 15px;
+                font-size: 13px;
                 font-family: BarlowBold;
                 opacity: 0.8;
               }
               span:nth-child(4), span:nth-child(6) {
                 margin-right: 2px;
                 color: #FFFFFF;
-                font-size: 16px;
+                font-size: 13px;
                 opacity: 1;
               }
               span:nth-child {
@@ -703,7 +730,7 @@
             &>div:nth-child(3) {
               height: 20px;
               span {
-                margin-right: 10px;
+                margin-right: 5px;
                 font-size: 12px;
                 font-family: BarlowBold;
                 color: #FFFFFF;

src/views/hdsj/cpns/BingTu.vue

@@ -0,0 +1,255 @@
+<template>
+    <div class="ent-info" >
+        <i class="ei-close" @click="handleClose"></i>
+        <div class="Tool-Headers"  v-on:mouseleave="handerShowList(false)" ><span class="title-dialog">饼图显示</span>
+
+
+
+            <div class="jhmain"  >
+                <div class="inputJH" v-on:mouseover="handerShowList(true)"  ><span>{{findChick()}}</span><i @click="handleClose"></i></div>
+                <div class="BodyJH"  v-if="showList">
+                    <!--                <ul>-->
+                    <li v-for="item,index in checkBody" @click="handerShowBingTu(item,index)"><i></i><span>{{item.name}}</span></li>
+                    <!--                </ul>-->
+                 </div>
+           </div>
+
+
+
+        </div>
+         <div id="chart_sjxm"  ></div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BingTu",
+    }
+</script>
+<script  setup>
+
+    import {onBeforeMount, onMounted, defineProps, watch, nextTick, ref} from 'vue';
+    import { setBingtu } from '@/echarts/options'
+
+    const  propsData=defineProps(['datas','types'])
+    let trafficWay=[]
+
+    watch(propsData,(n,o)=>{
+        nextTick(()=>{
+
+            dataFind(propsData.datas,propsData.types)
+        })
+    },{immediate:true})
+
+function dataFind(values,types) {
+    console.log("入参：",values)
+    trafficWay=[]
+       values.forEach(i=>{
+                let value=null;
+                let danwei='万方';
+                if (types  == '计划方量')
+                {
+                    value= fidexd(i.quantities,10000,2)
+                }else if (types == '实际方量')
+                {
+                    value=Math.floor(i.tonnage)
+                }
+                else if (types == '总投资')
+                {
+                    value=Math.floor(i.investment)
+                    danwei='万元'
+                }
+                let thisData={name:i.prjName,value:Number(value),danwei:danwei}
+                trafficWay.push(thisData)
+            })
+
+
+    setBingtu(document.getElementById('chart_sjxm'), trafficWay)
+}
+    const emit = defineEmits(['closeFun'])
+
+function handleClose() {
+    emit('closeFun')
+}
+
+    function fidexd(arg1,arg2,digit){
+      var result=  arg1/arg2
+        console.log("出于：",result)
+       var  zheng=result.toString().split(".")
+        console.log("入参：",zheng)
+        if (zheng[1])
+        {
+            var  xiaoshu=  zheng[1].length
+            console.log("小数：",xiaoshu)
+            if (xiaoshu>=digit)
+            {
+                return  Number(zheng[0]+'.'+zheng[1].slice(0,digit))
+            }else {
+                return  Number(zheng[0]+'.'+zheng[1])
+            }
+        }else {
+            return  Number(zheng[0])
+        }
+
+    }
+
+
+
+
+    const type =ref('计划方量')
+    // const  propsData=defineProps(['datas','types'])
+    // const  propsData=defineProps(['datas'])
+
+    let checkBody=ref([{name:'计划方量',chick:true},{name:'实际方量',chick:false},{name:'总投资',chick:false}])
+
+    const show =ref(false)
+
+    const showList =ref(false)
+    function findChick() {
+        return checkBody.value.filter(i=>i.chick)[0].name
+    }
+    function handleShow(value) {
+        show.value=value
+    }
+    function handerShowList(value) {
+        showList.value=value
+    }
+
+    function handerShowBingTu(value,index) {
+        console.log('点击：'+index)
+        type.value=value.name
+        dataFind(propsData.datas,value.name)
+        checkBody.value.forEach(i=>{
+            if (i.name==value.name)
+            {
+                i.chick=true
+            }else {
+                i.chick=false
+            }
+        })
+    }
+</script>
+
+
+<style  lang="scss" scoped>
+    ::v-deep #chart_sjxm {
+         canvas{
+               z-index: 1;
+           }
+    }
+    .ent-info {
+        box-sizing: border-box;
+        position: absolute;
+        top: 30vh;
+        right: 35vw;
+        width: 60vh;
+        height: 281px;
+        background: url('@/assets/imgs/page_yyjg/cbxx-bg.png') no-repeat;
+        background-size: 100% 100%;
+        .Tool-Headers{
+            padding-top: 20px;
+            height: 40px;
+            width: 90%;
+            /*background: #FFD400;*/
+            text-align: left;
+            position: relative;
+            padding-left: 20px;
+            span{
+                float: left;
+            }
+
+            .jhmain {
+                position: relative;
+                float: right;
+                margin-right: 20px;
+                width: 30%;
+                height: 40px;
+                z-index: 200;
+                .inputJH {
+                    display: flex;
+                    align-items: center;
+                    height: 2.8vh;
+                    width: 100%;
+                    line-height: 2.8vh;
+                    background: url('@/assets/imgs/header/xialaKuang.png') no-repeat;
+                    background-size: 100% 100%;
+                    span {
+                        display: block;
+                        border: 3px #00EAFF;
+                        text-align: center;
+                        margin-left: 20%;
+                        width: 50%;
+                        color: #FFFFFF;
+                    }
+                    i {
+                        display: block;
+                        width: 1.8vh;
+                        height: 1.8vh;
+                        background: url('@/assets/imgs/header/xiala.png') no-repeat;
+                        background-size: 100% 100%;
+                        background-position: center;
+                        cursor: pointer;
+                    }
+                }
+
+                .BodyJH {
+                    padding-top: 20px;
+                    height: 3vh;
+                    width: 100%;
+                    background: url("@/assets/imgs/tool/toolbox-bg.png") no-repeat;
+                    background-size: 100% 100%;
+                    height: 10vh;
+                    li {
+                        display: block;
+                        list-style: none;
+                        width: 100%;
+                        height: 3vh;
+
+                        i {
+                            display: block;
+                            float: left;
+                            width: 3vh;
+                            height: 3vh;
+                            background: url('@/assets/imgs/header/btn-aside.png') no-repeat;
+                            background-size: 100% 100%;
+                            background-position: center;
+                            cursor: pointer;
+                        }
+
+                        span {
+                            display: block;
+                            float: left;
+                            width: 50%;
+                        }
+                    }
+                    li:hover{
+                        background: #1d63b3;
+                        color: #f0d60d;
+                        width: 90%;
+                        margin: 0 auto;
+                        border-radius: 10%;
+                    }
+                    /*}*/
+
+                }
+            }
+        }
+        div{
+            width: 95%;
+            height: 200px;
+        }
+        .ei-close {
+            position: absolute;
+            top: 8px;
+            right: 16px;
+            display: block;
+            width: 18px;
+            height: 18px;
+            background: url('@/assets/imgs/common/btn-close.png') no-repeat;
+            background-size: 12px 12px;
+            background-position: center;
+            cursor: pointer;
+        }
+    }
+
+</style>

src/views/hdsj/cpns/ButtonSuJun.vue

@@ -0,0 +1,69 @@
+<template>
+
+    <div class="ent-info" >
+        <i class="ei-close" @click="handleShow(true)"></i>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "buttonSuJun",
+    }
+</script>
+<script  setup>
+        const emit = defineEmits(['backFunction'])
+
+    function handleShow() {
+        emit('backFunction')
+    }
+
+//      let trafficWay=[]
+// function dataFind() {
+//             propsData.datas.forEach(i=>{
+//                 let value=0;
+//                 if (propsData.types  == '计划方量')
+//                 {
+//                     value=(i.quantities/10000).toFixed(2)
+//                 }else if (propsData.types == '实际方量')
+//                 {
+//                     value=Math.floor(i.tonnage)
+//                 }
+//                 else if (propsData.types == '总投资')
+//                 {
+//                     value=Math.floor(i.investment)
+//                 }
+//                 let thisData={name:i.prjName,value:value}
+//                 trafficWay.push(thisData)
+//             })
+//     setBingtu(document.getElementById('chart_sjxm'), trafficWay)
+// }
+//     const emit = defineEmits(['closeFun'])
+// function handleClose() {
+//     emit('closeFun')
+// }
+
+</script>
+
+
+<style  lang="scss" scoped>
+    .ent-info {
+        box-sizing: border-box;
+        position: absolute;
+        top: 56vh;
+        left: 28vh;
+        width: 20vh;
+        height: 30px;
+        background-size: 100% 100%;
+        .ei-close {
+            display: block;
+            float: left;
+            width: 3vh;
+            height: 3vh;
+            background: url('@/assets/imgs/header/bt.png') no-repeat;
+            background-size: 100% 100%;
+            background-position: center;
+            cursor: pointer;
+        }
+    }
+
+</style>