暂存

src/DRP/SDrpManagement/saleTarget/index.vue

@@ -1,254 +1,254 @@
 <template>
-<div class='y-container mt-10'>
-  <a-row :gutter="16">
-    <a-col :span="8">
-      <div class="brderRight pd-10 flex">
-        <div>
-          <a-statistic
-            class="mt-10"
-            style="cursor: pointer;"
-            title="本月目标"
-            :value="targetData[`m${new Date().getMonth() + 1}pl`]"
-            :value-style="{ color: '#333' }"
-          >
-          <template #suffix>
-            %&emsp;<small style="font-size: 14px;color:red">{{targetData[`m${new Date().getMonth() + 1}a`] - targetData[`m${new Date().getMonth() + 1}l`]}}</small>
-          </template>
-          </a-statistic>
+  <div class='y-container mt-10'>
+    <a-row :gutter="16">
+      <a-col :span="8">
+        <div class="brderRight pd-10 flex">
           <div>
-            <div class="info"><small>达成金额</small>&nbsp;<small>{{targetData[`m${new Date().getMonth() + 1}a`]}}万元</small></div>
-            <div class="info"><small>目标金额</small>&nbsp;<small>{{targetData[`m${new Date().getMonth() + 1}l`]}}万元</small></div>
+            <a-statistic
+              class="mt-10"
+              style="cursor: pointer;"
+              title="本月目标"
+              :value="targetData[`m${new Date().getMonth() + 1}pl`]"
+              :value-style="{ color: '#333' }"
+            >
+            <template #suffix>
+              %&emsp;<small style="font-size: 14px;color:red">{{targetData[`m${new Date().getMonth() + 1}a`] - targetData[`m${new Date().getMonth() + 1}l`]}}</small>
+            </template>
+            </a-statistic>
+            <div>
+              <div class="info"><small>达成金额</small>&nbsp;<small>{{targetData[`m${new Date().getMonth() + 1}a`]}}万元</small></div>
+              <div class="info"><small>目标金额</small>&nbsp;<small>{{targetData[`m${new Date().getMonth() + 1}l`]}}万元</small></div>
+            </div>
           </div>
+          <ringProgress idname="ringProgress" :percent="(targetData[`m${new Date().getMonth() + 1}a`] / targetData[`m${new Date().getMonth() + 1}l`]).toFixed(2)"></ringProgress>
         </div>
-        <ringProgress idname="ringProgress" :percent="targetData[`m${new Date().getMonth() + 1}a`] / targetData[`m${new Date().getMonth() + 1}l`]"></ringProgress>
-      </div>
-    </a-col>
-    <a-col :span="8">
-      <div class="brderRight pd-10 flex">
-        <div>
-          <a-statistic
-            class="mt-10"
-            style="cursor: pointer;"
-            title="本季目标"
-            :value="targetData[`s${quarter}pl`]"
-            :value-style="{ color: '#333' }"
-          >
-          <template #suffix>
-            %&emsp;<small style="font-size: 14px;color:red">{{targetData[`s${quarter}a`] - targetData[`s${quarter}l`]}}</small>
-          </template>
-          </a-statistic>
+      </a-col>
+      <a-col :span="8">
+        <div class="brderRight pd-10 flex">
           <div>
-            <div class="info"><small>达成金额</small>&nbsp;<small>{{targetData[`s${quarter}a`]}}万元</small></div>
-            <div class="info"><small>目标金额</small>&nbsp;<small>{{targetData[`s${quarter}l`]}}万元</small></div>
-          </div>
-        </div>
-        <ringProgress idname="ringProgress2" :percent="targetData[`s${quarter}a`] / targetData[`s${quarter}l`]"></ringProgress>
-      </div>
-    </a-col>
-    <a-col :span="8">
-      <div class="brderRight pd-10 flex">
-        <div>
-          <a-statistic
+            <a-statistic
               class="mt-10"
               style="cursor: pointer;"
-              title="本年目标"
-              :value="targetData.y1pl"
+              title="本季目标"
+              :value="targetData[`s${quarter}pl`]"
               :value-style="{ color: '#333' }"
             >
-              <template #suffix>
-              %&emsp;<small style="font-size: 14px;color:red">{{targetData.y1a - targetData.y1l}}</small>
-              </template>
-          </a-statistic>
+            <template #suffix>
+              %&emsp;<small style="font-size: 14px;color:red">{{(targetData[`s${quarter}a`] - targetData[`s${quarter}l`]).toFixed(2)}}</small>
+            </template>
+            </a-statistic>
+            <div>
+              <div class="info"><small>达成金额</small>&nbsp;<small>{{targetData[`s${quarter}a`]}}万元</small></div>
+              <div class="info"><small>目标金额</small>&nbsp;<small>{{targetData[`s${quarter}l`]}}万元</small></div>
+            </div>
+          </div>
+          <ringProgress idname="ringProgress2" :percent="(targetData[`s${quarter}a`] / targetData[`s${quarter}l`]).toFixed(2)"></ringProgress>
+        </div>
+      </a-col>
+      <a-col :span="8">
+        <div class="brderRight pd-10 flex">
           <div>
-            <div class="info"><small>达成金额</small>&nbsp;<small>{{targetData.y1a}}</small></div>
-            <div class="info"><small>目标金额</small>&nbsp;<small>{{targetData.y1l}}</small></div>
+            <a-statistic
+                class="mt-10"
+                style="cursor: pointer;"
+                title="本年目标"
+                :value="targetData.y1pl"
+                :value-style="{ color: '#333' }"
+              >
+                <template #suffix>
+                %&emsp;<small style="font-size: 14px;color:red">{{targetData.y1a - targetData.y1l}}</small>
+                </template>
+            </a-statistic>
+            <div>
+              <div class="info"><small>达成金额</small>&nbsp;<small>{{targetData.y1a}}</small></div>
+              <div class="info"><small>目标金额</small>&nbsp;<small>{{targetData.y1l}}</small></div>
+            </div>
           </div>
+          <ringProgress idname="ringProgress3" :percent="targetData.y1a / targetData.y1l"></ringProgress>
         </div>
-        <ringProgress idname="ringProgress3" :percent="targetData.y1a / targetData.y1l"></ringProgress>
-      </div>
-    </a-col>
-  </a-row>
-  
-</div>
-<div class="y-container mt-10">
-  <p class="almm">一季度目标</p>
-  <a-table :data-source="data"
-    class="ant-table-small mt-10"
-    size="small"
-    :pagination="false"
-    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
-    bordered>
+      </a-col>
+    </a-row>
+    
+  </div>
+  <div class="y-container mt-10">
+    <p class="almm">一季度目标</p>
+    <a-table :data-source="data"
+      class="ant-table-small mt-10"
+      size="small"
+      :pagination="false"
+      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+      bordered>
+        <a-table-column-group>
+          <template #title>1季度(万元)</template>
+          <a-table-column title="目标" data-index="s1l">
+          </a-table-column>
+          <a-table-column title="实际" data-index="s1a">
+            <template #default="{ record }"><span :style="record.s1a > record.s1l?{color:'red'}:{color:'green'}">{{record.s1a.toFixed(2)}}</span></template>
+          </a-table-column>
+          <a-table-column title="达成率">
+            <template #default="{ record }"><span>{{(record.s1a.toFixed(2) / record.s1l.toFixed(2) * 100).toFixed(2)}} % </span></template>
+          </a-table-column>
+        </a-table-column-group>
+        <a-table-column-group v-for="item in 3" :key="item">
+          <template #title>{{`${item}月(万元)`}}</template>
+          <a-table-column title="目标" :data-index="`m${item}l`">
+          </a-table-column>
+          <a-table-column title="实际" :data-index="`m${item}a`">
+            <template #default="{ record }"><span :style="record[`m${item}a`] > record[`m${item}l`]?{color:'red'}:{color:'green'}">{{record[`m${item}a`].toFixed(2)}}</span></template>
+          </a-table-column>
+          <a-table-column title="达成率">
+            <template #default="{ record }"><span>{{(record[`m${item}a`].toFixed(2) / record[`m${item}l`].toFixed(2) * 100).toFixed(2)}} % </span></template>
+          </a-table-column>
+        </a-table-column-group>
+    </a-table>
+  </div>
+  <div class="y-container mt-10">
+    <p class="almm">二季度目标</p>
+    <a-table :data-source="data"
+      class="ant-table-small mt-10"
+      size="small"
+      :pagination="false"
+      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+      bordered>
+        <a-table-column-group>
+          <template #title>2季度(万元)</template>
+          <a-table-column title="目标" data-index="s2l" width="100px">
+          </a-table-column>
+          <a-table-column title="实际" data-index="s2a" width="100px">
+            <template #default="{ record }"><span :style="record.s2a > record.s2l?{color:'red'}:{color:'green'}">{{record.s2a.toFixed(2)}}</span></template>
+          </a-table-column>
+          <a-table-column title="达成率" width="100px">
+            <template #default="{ record }"><span>{{(record.s2a.toFixed(2) / record.s2l.toFixed(2) * 100).toFixed(2)}} % </span></template>
+          </a-table-column>
+        </a-table-column-group>
+        <a-table-column-group v-for="item in 3" :key="item">
+          <template #title>{{`${item + 3}月(万元)`}}</template>
+          <a-table-column title="目标" :data-index="`m${item + 3}l`" width="100px">
+          </a-table-column>
+          <a-table-column title="实际" :data-index="`m${item + 3}a`" width="100px">
+            <template #default="{ record }"><span :style="record[`m${item + 3}a`] > record[`m${item + 3}l`]?{color:'red'}:{color:'green'}">{{record[`m${item + 3}a`].toFixed(2)}}</span></template>
+          </a-table-column>
+          <a-table-column title="达成率" width="100px">
+            <template #default="{ record }"><span>{{(record[`m${item + 3}a`].toFixed(2) / record[`m${item + 3}l`].toFixed(2) * 100).toFixed(2)}} % </span></template>
+          </a-table-column>
+        </a-table-column-group>
+    </a-table>
+  </div>
+  <div class="y-container mt-10">
+    <p class="almm">三季度目标</p>
+    <a-table :data-source="data"
+      class="ant-table-small mt-10"
+      size="small"
+      :pagination="false"
+      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+      bordered>
       <a-table-column-group>
-        <template #title>1季度(万元)</template>
-        <a-table-column title="目标" data-index="s1l">
-        </a-table-column>
-        <a-table-column title="实际" data-index="s1a">
-          <template #default="{ record }"><span :style="record.s1a > record.s1l?{color:'red'}:{color:'green'}">{{record.s1a.toFixed(2)}}</span></template>
-        </a-table-column>
-        <a-table-column title="达成率">
-          <template #default="{ record }"><span>{{(record.s1a.toFixed(2) / record.s1l.toFixed(2) * 100).toFixed(2)}} % </span></template>
-        </a-table-column>
-      </a-table-column-group>
-      <a-table-column-group v-for="item in 3" :key="item">
-        <template #title>{{`${item}月(万元)`}}</template>
-        <a-table-column title="目标" :data-index="`m${item}l`">
-        </a-table-column>
-        <a-table-column title="实际" :data-index="`m${item}a`">
-          <template #default="{ record }"><span :style="record[`m${item}a`] > record[`m${item}l`]?{color:'red'}:{color:'green'}">{{record[`m${item}a`].toFixed(2)}}</span></template>
-        </a-table-column>
-        <a-table-column title="达成率">
-          <template #default="{ record }"><span>{{(record[`m${item}a`].toFixed(2) / record[`m${item}l`].toFixed(2) * 100).toFixed(2)}} % </span></template>
-        </a-table-column>
-      </a-table-column-group>
-  </a-table>
-</div>
-<div class="y-container mt-10">
-  <p class="almm">二季度目标</p>
-  <a-table :data-source="data"
-    class="ant-table-small mt-10"
-    size="small"
-    :pagination="false"
-    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
-    bordered>
-      <a-table-column-group>
-        <template #title>2季度(万元)</template>
-        <a-table-column title="目标" data-index="s2l" width="100px">
+        <template #title>3季度(万元)</template>
+        <a-table-column title="目标" data-index="s3l" width="100px">
         </a-table-column>
-        <a-table-column title="实际" data-index="s2a" width="100px">
-          <template #default="{ record }"><span :style="record.s2a > record.s2l?{color:'red'}:{color:'green'}">{{record.s2a.toFixed(2)}}</span></template>
+        <a-table-column title="实际" data-index="s3a" width="100px">
+          <template #default="{ record }"><span :style="record.s3a > record.s3l?{color:'red'}:{color:'green'}">{{record.s3a.toFixed(2)}}</span></template>
         </a-table-column>
         <a-table-column title="达成率" width="100px">
-          <template #default="{ record }"><span>{{(record.s2a.toFixed(2) / record.s2l.toFixed(2) * 100).toFixed(2)}} % </span></template>
+          <template #default="{ record }"><span>{{(record.s3a.toFixed(2) / record.s3l.toFixed(2) * 100).toFixed(2)}} % </span></template>
         </a-table-column>
       </a-table-column-group>
       <a-table-column-group v-for="item in 3" :key="item">
-        <template #title>{{`${item + 3}月(万元)`}}</template>
-        <a-table-column title="目标" :data-index="`m${item + 3}l`" width="100px">
+        <template #title>{{`${item + 6}月(万元)`}}</template>
+        <a-table-column title="目标" :data-index="`m${item + 6}l`" width="100px">
         </a-table-column>
-        <a-table-column title="实际" :data-index="`m${item + 3}a`" width="100px">
-          <template #default="{ record }"><span :style="record[`m${item + 3}a`] > record[`m${item + 3}l`]?{color:'red'}:{color:'green'}">{{record[`m${item + 3}a`].toFixed(2)}}</span></template>
+        <a-table-column title="实际" :data-index="`m${item + 6}a`" width="100px">
+          <template #default="{ record }"><span :style="record[`m${item + 6}a`] > record[`m${item + 6}l`]?{color:'red'}:{color:'green'}">{{record[`m${item + 6}a`].toFixed(2)}}</span></template>
         </a-table-column>
         <a-table-column title="达成率" width="100px">
-          <template #default="{ record }"><span>{{(record[`m${item + 3}a`].toFixed(2) / record[`m${item + 3}l`].toFixed(2) * 100).toFixed(2)}} % </span></template>
+          <template #default="{ record }"><span>{{(record[`m${item + 6}a`].toFixed(2) / record[`m${item + 6}l`].toFixed(2) * 100).toFixed(2)}} % </span></template>
         </a-table-column>
       </a-table-column-group>
-  </a-table>
-</div>
-<div class="y-container mt-10">
-  <p class="almm">三季度目标</p>
-  <a-table :data-source="data"
-    class="ant-table-small mt-10"
-    size="small"
-    :pagination="false"
-    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
-    bordered>
-    <a-table-column-group>
-      <template #title>3季度(万元)</template>
-      <a-table-column title="目标" data-index="s3l" width="100px">
-      </a-table-column>
-      <a-table-column title="实际" data-index="s3a" width="100px">
-        <template #default="{ record }"><span :style="record.s3a > record.s3l?{color:'red'}:{color:'green'}">{{record.s3a.toFixed(2)}}</span></template>
-      </a-table-column>
-      <a-table-column title="达成率" width="100px">
-        <template #default="{ record }"><span>{{(record.s3a.toFixed(2) / record.s3l.toFixed(2) * 100).toFixed(2)}} % </span></template>
-      </a-table-column>
-    </a-table-column-group>
-    <a-table-column-group v-for="item in 3" :key="item">
-      <template #title>{{`${item + 6}月(万元)`}}</template>
-      <a-table-column title="目标" :data-index="`m${item + 6}l`" width="100px">
-      </a-table-column>
-      <a-table-column title="实际" :data-index="`m${item + 6}a`" width="100px">
-        <template #default="{ record }"><span :style="record[`m${item + 6}a`] > record[`m${item + 6}l`]?{color:'red'}:{color:'green'}">{{record[`m${item + 6}a`].toFixed(2)}}</span></template>
-      </a-table-column>
-      <a-table-column title="达成率" width="100px">
-        <template #default="{ record }"><span>{{(record[`m${item + 6}a`].toFixed(2) / record[`m${item + 6}l`].toFixed(2) * 100).toFixed(2)}} % </span></template>
-      </a-table-column>
-    </a-table-column-group>
-  </a-table>
-</div>
-<div class="y-container">
-  <p class="almm">四季度目标</p>
-  <a-table :data-source="data"
-    class="ant-table-small"
-    size="small"
-    :pagination="false"
-    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
-    bordered>
-      <a-table-column-group>
-        <template #title>4季度(万元)</template>
-        <a-table-column title="目标" data-index="s3l" width="100px">
+    </a-table>
+  </div>
+  <div class="y-container">
+    <p class="almm">四季度目标</p>
+    <a-table :data-source="data"
+      class="ant-table-small"
+      size="small"
+      :pagination="false"
+      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+      bordered>
+        <a-table-column-group>
+          <template #title>4季度(万元)</template>
+          <a-table-column title="目标" data-index="s3l" width="100px">
+          </a-table-column>
+          <a-table-column title="实际" data-index="s3a" width="100px">
+            <template #default="{ record }"><span :style="record.s4a > record.s4l?{color:'red'}:{color:'green'}">{{record.s4a.toFixed(2)}}</span></template>
+          </a-table-column>
+          <a-table-column title="达成率" width="100px">
+            <template #default="{ record }"><span>{{(record.s4a.toFixed(2) / record.s4l.toFixed(2) * 100).toFixed(2)}} % </span></template>
+          </a-table-column>
+        </a-table-column-group>
+        <a-table-column-group v-for="item in 3" :key="item">
+        <template #title>{{`${item + 9}月`}}</template>
+        <a-table-column title="目标" :data-index="`m${item + 9}l`" width="100px">
         </a-table-column>
-        <a-table-column title="实际" data-index="s3a" width="100px">
-          <template #default="{ record }"><span :style="record.s4a > record.s4l?{color:'red'}:{color:'green'}">{{record.s4a.toFixed(2)}}</span></template>
+        <a-table-column title="实际" :data-index="`m${item + 9}a`" width="100px">
+          <template #default="{ record }"><span :style="record[`m${item + 9}a`] > record[`m${item + 9}l`]?{color:'red'}:{color:'green'}">{{record[`m${item + 9}a`].toFixed(2)}}</span></template>
         </a-table-column>
         <a-table-column title="达成率" width="100px">
-          <template #default="{ record }"><span>{{(record.s4a.toFixed(2) / record.s4l.toFixed(2) * 100).toFixed(2)}} % </span></template>
+          <template #default="{ record }"><span>{{(record[`m${item + 9}a`] / record[`m${item + 9}l`] * 100).toFixed(2)}} % </span></template>
         </a-table-column>
       </a-table-column-group>
-      <a-table-column-group v-for="item in 3" :key="item">
-      <template #title>{{`${item + 9}月`}}</template>
-      <a-table-column title="目标" :data-index="`m${item + 9}l`" width="100px">
-      </a-table-column>
-      <a-table-column title="实际" :data-index="`m${item + 9}a`" width="100px">
-        <template #default="{ record }"><span :style="record[`m${item + 9}a`] > record[`m${item + 9}l`]?{color:'red'}:{color:'green'}">{{record[`m${item + 9}a`].toFixed(2)}}</span></template>
-      </a-table-column>
-      <a-table-column title="达成率" width="100px">
-        <template #default="{ record }"><span>{{(record[`m${item + 9}a`] / record[`m${item + 9}l`] * 100).toFixed(2)}} % </span></template>
-      </a-table-column>
-    </a-table-column-group>
-  </a-table>
-</div>
-</template>
-<script setup>
-import {ref,onMounted,computed} from 'vue'
-import { RingProgress } from '@antv/g2plot';
-import ringProgress from './ringProgress.vue';
-import Api from '@/api/api'
-const quarter = computed(()=>{
-  var date = new Date();
-  var month = date.getMonth() + 1;
-  if (month >= 1 && month <= 3) {
-    return 1;
-  } else if (month >= 4 && month <= 6) {
-    return 2;
-  } else if (month >= 7 && month <= 9) {
-    return 3;
-  } else {
-    return 4;
-  }
-})
-const targetData = ref({})
-const data = ref([])
-const getYearTarget = async ()=>{
-  const res = await Api.requested({
-    "id": "20230110151902",
-    "content": {
-      where:{
-        year:new Date().getFullYear()
-      }
+    </a-table>
+  </div>
+  </template>
+  <script setup>
+  import {ref,onMounted,computed} from 'vue'
+  import { RingProgress } from '@antv/g2plot';
+  import ringProgress from './ringProgress.vue';
+  import Api from '@/api/api'
+  const quarter = computed(()=>{
+    var date = new Date();
+    var month = date.getMonth() + 1;
+    if (month >= 1 && month <= 3) {
+      return 1;
+    } else if (month >= 4 && month <= 6) {
+      return 2;
+    } else if (month >= 7 && month <= 9) {
+      return 3;
+    } else {
+      return 4;
     }
   })
-  data.value = res.data
-  res.data.length > 0 ? targetData.value = res.data[0] :targetData.value = 'none'
-}
-onMounted(()=>{
-  getYearTarget()
-})
-</script>
-<style scoped >
-.brderRight{
-  height: 100%;
-  border-right:1px solid #f1f2f3;
-}
-.pd-10{
-  padding:10px
-}
-.mt-10{
-  margin-bottom: 10px;
-}
-.flex{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-</style>
+  const targetData = ref({})
+  const data = ref([])
+  const getYearTarget = async ()=>{
+    const res = await Api.requested({
+      "id": "20230110151902",
+      "content": {
+        where:{
+          year:new Date().getFullYear()
+        }
+      }
+    })
+    data.value = res.data
+    res.data.length > 0 ? targetData.value = res.data[0] :targetData.value = 'none'
+  }
+  onMounted(()=>{
+    getYearTarget()
+  })
+  </script>
+  <style scoped >
+  .brderRight{
+    height: 100%;
+    border-right:1px solid #f1f2f3;
+  }
+  .pd-10{
+    padding:10px
+  }
+  .mt-10{
+    margin-bottom: 10px;
+  }
+  .flex{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  </style>