feat: 要素成本

src/components/element-cost/element-cost.vue

+<template>
+  <div v-if="detail" class="element-cost">
+    <div class="info-cell">
+      <sectionTitle title="供电"></sectionTitle>
+      <div class="tab-btns">
+        <div
+          class="tab-btn"
+          :class="{ active: tabIndex === 0 }"
+          @tap="changeTab(0)"
+        >
+          一般工业用电
+        </div>
+        <div
+          class="tab-btn"
+          :class="{ active: tabIndex === 1 }"
+          @tap="changeTab(1)"
+        >
+          大工业用电
+        </div>
+      </div>
+      <div class="info-line">
+        <div class="info-item" v-for="line of currentTab" :key="line.key">
+          <div class="line-title">{{ line.key }}</div>
+          <div class="line-value double">{{ line.value1 }}</div>
+          <div class="line-value double">{{ line.value2 }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="info-cell">
+      <sectionTitle title="工业用水"></sectionTitle>
+      <div class="info-line">
+        <div class="info-item">
+          <div class="line-title">基本水价</div>
+          <div class="line-value">{{ detail.industrialWaterPrice }}元/m³</div>
+        </div>
+        <div class="info-item">
+          <div class="line-title">污水处理费</div>
+          <div class="line-value">{{ detail.sewageWaterPrice }}元/m³</div>
+        </div>
+      </div>
+    </div>
+    <div class="info-cell">
+      <sectionTitle title="用工"></sectionTitle>
+      <div class="info-line">
+        <div class="info-item" v-for="item of detail.workers" :key="item.key">
+          <div class="line-title">{{ item.key }}</div>
+          <div class="line-value">{{ item.value1 }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="info-cell">
+      <sectionTitle title="工业商用天然气"></sectionTitle>
+      <div class="info-line">
+        <div
+          class="info-item"
+          v-for="item of detail.naturalGass"
+          :key="item.key"
+        >
+          <div class="line-title">{{ item.key }}</div>
+          <div class="line-value">{{ item.value1 }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import sectionTitle from "../section-title/section-title.vue";
+
+export default {
+  name: "ElementCost",
+  props: {
+    detail: {
+      type: Object,
+      default: null,
+    },
+  },
+  components: {
+    sectionTitle,
+  },
+  data() {
+    return {
+      tabIndex: 0,
+    };
+  },
+  computed: {
+    currentTab() {
+      if (this.tabIndex === 0) {
+        return this.detail.bigElectricitys;
+      } else {
+        return this.detail.electricitys;
+      }
+    },
+  },
+  methods: {
+    changeTab(index) {
+      this.tabIndex = index;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.element-cost {
+  padding: 30rpx;
+  background-color: white;
+  .info-cell {
+    .tab-btns {
+      display: flex;
+      align-items: center;
+      margin-bottom: 30rpx;
+      .tab-btn {
+        margin-right: 20rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 22rpx;
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: 500;
+        padding: 0 22rpx;
+        height: 42rpx;
+        border-radius: 21rpx;
+        border: 1rpx solid #e2ecff;
+        color: #606266;
+      }
+      .active {
+        color: white;
+        background: #4374ef;
+      }
+    }
+    .info-line {
+      margin: 40rpx 0;
+      border-radius: 4rpx;
+      font-family: PingFang-SC, PingFang-SC;
+      font-size: 22rpx;
+      font-weight: 500;
+      color: #606266;
+      .info-item {
+        display: flex;
+        align-items: center;
+        height: 64rpx;
+        border: 1rpx solid #e2ecff;
+        & ~ .info-item {
+          border-top: none;
+        }
+        .line-title {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          border-right: 1rpx solid #e2ecff;
+          width: 197rpx;
+          flex: none;
+          background: #e2ecff;
+        }
+        .line-value {
+          flex: 1;
+          display: flex;
+          height: 100%;
+          align-items: center;
+          justify-content: center;
+        }
+        .double {
+          justify-content: unset;
+          padding-left: 50rpx;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages.json

@@ -7,12 +7,6 @@
     }
   },
   "pages": [
-    {
-      "path": "pages/investment/index",
-      "style": {
-        "navigationBarTitleText": "投资舒城"
-      }
-    },
     {
       "path": "pages/index/index",
       "style": {
@@ -55,6 +49,12 @@
         "navigationBarTitleText": "土地详情"
       }
     },
+    {
+      "path": "pages/investment/index",
+      "style": {
+        "navigationBarTitleText": "投资舒城"
+      }
+    },
     {
       "path": "pages/inviteInvestment/policyDetail"
     },

src/pages/inviteInvestment/index.vue

@@ -53,7 +53,7 @@
       </div>
       <!-- 要素成本 -->
       <div v-if="activeBar === 3">
-
+        <ElementCost :detail="detail"></ElementCost>
       </div>
     </div>
     <div>
@@ -67,13 +67,15 @@
 import API from '@/api/url';
 import sectionTitle from '../../components/section-title/section-title.vue';
 import {mapMutations} from 'vuex';
+import ElementCost from '@/components/element-cost/element-cost.vue';
 export default {
-  components: { sectionTitle },
+  components: { sectionTitle, ElementCost },
   data() {
     return {
       tabBarList: ["招商亮点", "重点企业", "招商政策", "要素成本"],
       activeBar: 0,
-      lights: []
+      lights: [],
+      detail: null,
     }
   },
   mounted() {
@@ -82,6 +84,7 @@ export default {
       methods: 'get',
       success: res => {
         console.log(res)
+        this.detail = res;
         this.lights = res.investmentLights;
         this.setPolicyList(res.policys);
         this.setPrimaryIndustryList(res.primaryIndustrys);