样式调整

src/HManagement/serviceDataScreen/components/PieCharts.vue

@@ -99,6 +99,19 @@ export default {
                 fill:'#CFDCE5'
               }
             },
+            pageNavigator:{
+              marker: {
+                style: {
+                  // 非激活，不可点击态时的填充色设置
+                  inactiveFill: '#3685FC',
+                  inactiveOpacity: 0.45,
+                  // 默认填充色设置
+                  fill: '#3685FC',
+                  opacity: 0.8,
+                  size: 10,
+                },
+              },
+            }
           },
           // 添加 中心统计文本 交互
           interactions: [{ type: 'element-single-selected' },{ type: 'element-active' }],

src/HManagement/serviceDataScreen/components/profileTemplate.vue

@@ -1,26 +1,27 @@
 <template>
-  <div class="box-border">
-    <div class="box-margin">
-      <div class="box-content" v-for="item in dataProfile" :key="item.index">
-        <div class="justify">
-          <el-popover
-              v-if="item.tips"
-              :append-to-body="false"
-              placement="top-start"
-              width="200"
-              trigger="hover"
-              >
-            <template slot="default">
+  <div class="box-border-box">
+    <div class="box-border">
+      <div class="box-margin">
+        <div class="box-content" style="float: left" v-for="item in dataProfile" :key="item.index">
+          <div class="justify">
+            <el-popover
+                v-if="item.tips"
+                :append-to-body="false"
+                placement="top-start"
+                width="200"
+                trigger="hover"
+            >
+              <template slot="default">
               <span v-if="item.title == '已转化线索数'">
                 {{$t('①已转化线索数：销售线索应用中，已分配给业务员，已转化状态的线索数量。')}}<br/>
                 {{$t('②一条线索可进行两次转化：转化客户、转化项目，因此，已转化线索数≠转化客户线索数+转化项目线索数。')}}
               </span>
-              <span v-else>
+                <span v-else>
                 {{item.tips}}
               </span>
-            </template>
-            <div slot="reference">
-              <div class="value-style">
+              </template>
+              <div slot="reference">
+                <div class="value-style">
               <span v-if="item.title == '报价总金额' || item.title == '客户报价金额' || item.title == '项目报价金额'">
                 <span v-if="item.value > 10000" >
                   {{tool.formatAmount(tool.unitConversion(item.value,10000),2)}}<span style="font-size: 0.729vw">{{$t('万元')}}</span>
@@ -29,13 +30,13 @@
                   {{tool.formatAmount(item.value,2)}}<span style="font-size: 0.729vw">{{$t(' 元')}}</span>
                 </span>
               </span>
-                <span v-else>{{item.value}}</span>
+                  <span v-else>{{item.value}}</span>
+                </div>
+                <div class="title-style">{{item.title}}</div>
               </div>
-              <div class="title-style">{{item.title}}</div>
-            </div>
-          </el-popover>
-          <div v-else>
-            <div class="value-style">
+            </el-popover>
+            <div v-else>
+              <div class="value-style">
               <span v-if="item.title == '报价总金额' || item.title == '客户报价金额' || item.title == '项目报价金额'">
                 <span v-if="item.value > 10000" >
                   {{tool.formatAmount(tool.unitConversion(item.value,10000),2)}}<span style="font-size: 0.729vw">{{$t('万元')}}</span>
@@ -44,36 +45,37 @@
                   {{tool.formatAmount(item.value,2)}}<span style="font-size: 0.729vw">{{$t(' 元')}}</span>
                 </span>
               </span>
-              <span v-else>{{item.value}}</span>
+                <span v-else>{{item.value}}</span>
+              </div>
+              <div class="title-style">{{item.title}}</div>
             </div>
-            <div class="title-style">{{item.title}}</div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="box-margin" v-if="profileType && profileType.length > 0">
-      <div class="box-content" v-for="k in profileType" :key="k.index">
-        <div class="justify">
-          <el-popover
-              v-if="k.value == '无分类客户'"
-              :append-to-body="false"
-              placement="top-start"
-              width="200"
-              trigger="hover"
-          >
-            <template slot="default">
+      <div style="float: left" class="box-margin" v-if="profileType && profileType.length > 0">
+        <div class="box-content" style="float: left" v-for="k in profileType" :key="k.index">
+          <div class="justify">
+            <el-popover
+                v-if="k.value == '无分类客户'"
+                :append-to-body="false"
+                placement="top-start"
+                width="200"
+                trigger="hover"
+            >
+              <template slot="default">
               <span v-if="k.value == '无分类客户'">
                {{$t('无分类客户数：统计没有客户分类信息的客户数量')}}<br/>
               </span>
-            </template>
-            <div slot="reference">
+              </template>
+              <div slot="reference">
+                <div class="value-style">{{k.qty}}</div>
+                <div class="title-style">{{k.value}}</div>
+              </div>
+            </el-popover>
+            <div v-else>
               <div class="value-style">{{k.qty}}</div>
               <div class="title-style">{{k.value}}</div>
             </div>
-          </el-popover>
-          <div v-else>
-            <div class="value-style">{{k.qty}}</div>
-            <div class="title-style">{{k.value}}</div>
           </div>
         </div>
       </div>
@@ -89,7 +91,7 @@ export default {
 </script>
 
 <style scoped>
-.box-border{
+.box-border-box{
   width: 29.167vw;
   height: 11.146vw;
   background: #001E41;
@@ -97,25 +99,34 @@ export default {
   border-radius: 0.313vw 0.313vw 0.313vw 0.313vw;
   border: 0.052vw solid #CFDCE5;
   margin-top: 1.042vw;
+}
+.box-border{
+  margin: 0.705vw 0 1.042vw 1.042vw;
+  max-width: 28.167vw;
+  max-height: 9.646vw;
   overflow: auto;
-  box-sizing: border-box;
-  -ms-overflow-style: none; /* 适用于 Internet Explorer 和旧版 Edge */
-  scrollbar-width: none; /* 适用于 Firefox */
+}
+.box-border::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background-color: transparent;
+}
+.box-border::-webkit-scrollbar-track {
+  background-color: transparent;
+  background-color: rgb(15, 43, 87);
+}
+.box-border::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background-image: linear-gradient(135deg, #c0c7cc, #c0c7cc);
 }
 .box-border .box-margin{
-  margin: 0 0 1.042vw 1.042vw;
-  overflow: auto;
   box-sizing: border-box;
-  -ms-overflow-style: none; /* 适用于 Internet Explorer 和旧版 Edge */
-  scrollbar-width: none; /* 适用于 Firefox */
 }
 .box-margin .box-content{
   width: 6.609vw;
   height: 2.675vw;
-  /* border: 1px solid #3fc9c9; */
-  float: left;
   margin-right: 0.359vw;
-  margin-top: 0.705vw;
+  margin-bottom: 0.705vw;
 }
 .box-margin .justify {
   display: flex;justify-content: space-between;

src/HManagement/serviceDataScreen/modules/dataProfile.vue

@@ -56,14 +56,18 @@
             <datePicker ref="analyzeDateRef" type="date" @selectTime="analyzeChange" format="yyyy-MM-dd" value_format="yyyy-MM-dd"></datePicker>
           </div>
         </div>
-        <div v-show="typeSelect !== '报价'" style="display:flex;justify-content: left;margin-top: 1.042vw">
-          <PieCharts ref="proTypRef" height="10.844vw" width="12.125vw" h-chart="9.633vw" w-chart="10.125vw" title="项目类型分析"></PieCharts>
-          <PieCharts ref="proFowRef" height="10.844vw" width="11.125vw" h-chart="9.633vw" w-chart="10.125vw" title="项目跟进情况"></PieCharts>
-          <PieCharts ref="cusFowRef" height="10.844vw" width="11.125vw" h-chart="9.633vw" w-chart="10.125vw" title="客户跟进情况"></PieCharts>
-        </div>
-        <div v-show="typeSelect == '报价'" style="margin-top: 1.042vw">
-          <LineCharts ref="analyzeRef" height="10.844vw" width="29.125vw" h-chart="10.633vw" w-chart="29.125vw"></LineCharts>
+        <div v-show="typeSelect === '报价'">
+          <div style="margin-top: 1.042vw">
+            <LineCharts ref="analyzeRef" height="10.844vw" width="29.125vw" h-chart="10.633vw" w-chart="29.125vw"></LineCharts>
+          </div>
         </div>
+       <div v-show="typeSelect !== '报价'">
+         <div  style="display:flex;justify-content: left;margin-top: 1.042vw">
+           <PieCharts ref="proTypRef" height="10.844vw" width="12.125vw" h-chart="9.633vw" w-chart="10.125vw" title="项目类型分析"></PieCharts>
+           <PieCharts ref="proFowRef" height="10.844vw" width="11.125vw" h-chart="9.633vw" w-chart="10.125vw" title="项目跟进情况"></PieCharts>
+           <PieCharts ref="cusFowRef" height="10.844vw" width="11.125vw" h-chart="9.633vw" w-chart="10.125vw" title="客户跟进情况"></PieCharts>
+         </div>
+       </div>
       </template>
     </borderTemplate>
   </div>

src/HManagement/serviceDataScreen/modules/marketingExpenseStatistics.vue

@@ -120,6 +120,19 @@ export default {
                 fill:'#CFDCE5'
               }
             },
+            pageNavigator:{
+              marker: {
+                style: {
+                  // 非激活，不可点击态时的填充色设置
+                  inactiveFill: '#3685FC',
+                  inactiveOpacity: 0.45,
+                  // 默认填充色设置
+                  fill: '#3685FC',
+                  opacity: 0.8,
+                  size: 10,
+                },
+              },
+            }
           },
           // 添加 中心统计文本 交互
           interactions: [{ type: 'element-single-selected' },{ type: 'element-active' }],
@@ -200,6 +213,19 @@ export default {
                 fill:'#CFDCE5'
               }
             },
+            pageNavigator:{
+              marker: {
+                style: {
+                  // 非激活，不可点击态时的填充色设置
+                  inactiveFill: '#3685FC',
+                  inactiveOpacity: 0.45,
+                  // 默认填充色设置
+                  fill: '#3685FC',
+                  opacity: 0.8,
+                  size: 10,
+                },
+              },
+            }
           },
           // 添加 中心统计文本 交互
           interactions: [{ type: 'element-single-selected' },{ type: 'element-active' }],

src/HManagement/serviceDataScreen/modules/salesFunnel.vue

@@ -155,25 +155,16 @@ export default {
   font-family: Microsoft YaHei, Microsoft YaHei;
   font-weight: 400;
   font-size: 0.729vw;
-  color: #E6F4FF;
+  color: #E6F4FF !important;
   text-align: left;
   font-style: normal;
   text-transform: none;
 }
 /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
-  color: #E6F4FF;
+  color: #E6F4FF !important;
+}
+/deep/ .panel .el-checkbox__input.is-checked+.el-checkbox__label{
+  color: #E6F4FF !important;
 }
-/*/deep/ .el-checkbox__inner {*/
-/*  display: inline-block;*/
-/*  position: relative;*/
-/*  border: 1px solid #dcdfe6;*/
-/*  border-radius: 2px;*/
-/*  box-sizing: border-box;*/
-/*  width: 24px;*/
-/*  height: 24px;*/
-/*  background-color: #fff;*/
-/*  z-index: 1;*/
-/*  transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);*/
-/*}*/
 
 </style>

src/HManagement/serviceDataScreen/modules/salesPanel.vue

@@ -437,4 +437,7 @@ export default {
   /deep/ .element.style {
     font-size: 15.9386px;
   }
+::v-deep .el-progress__text {
+  white-space: pre;
+}
 </style>