* 数字化施工国际化

src/assets/styles/ruoyi.scss

@@ -47,8 +47,9 @@
 .mb10 {
   margin-bottom: 10px;
 }
+
 .ml10 {
-	margin-left: 10px;
+  margin-left: 10px;
 }
 
 .mt20 {
@@ -62,8 +63,9 @@
 .mb20 {
   margin-bottom: 20px;
 }
+
 .ml20 {
-	margin-left: 20px;
+  margin-left: 20px;
 }
 
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
@@ -73,7 +75,7 @@
   color: inherit;
 }
 
-.el-message-box__status + .el-message-box__message{
+.el-message-box__status + .el-message-box__message {
   word-break: break-word;
 }
 
@@ -88,6 +90,26 @@
   padding: 10px 20px 0;
 }
 
+.el-dialog__body {
+  word-break: break-word;
+}
+
+.el-form-item {
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  .el-form-item__label {
+    width: fit-content !important;
+  }
+
+  .el-form-item__content {
+    margin-left: 0 !important;
+  }
+}
+
 .el-table {
   .el-table__header-wrapper, .el-table__fixed-header-wrapper {
     th {
@@ -153,9 +175,9 @@
 }
 
 /** 表格更多操作下拉样式 */
-.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
-	cursor: pointer;
-	margin-left: 5px;
+.el-table .el-dropdown-link, .el-table .el-dropdown-selfdefine {
+  cursor: pointer;
+  margin-left: 5px;
 }
 
 .el-table .el-dropdown, .el-icon-arrow-down {

src/assets/styles/variables.scss

@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 250px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/components/RightToolbar/index.vue

@@ -1,20 +1,22 @@
 <template>
   <div class="top-right-btn" :style="style">
     <el-row>
-      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
-        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
+      <el-tooltip class="item" effect="dark" :content="showSearch ? $t('common.showSearch') : $t('common.hideSearch')"
+                  placement="top" v-if="search">
+        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()"/>
       </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
-        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
+      <el-tooltip class="item" effect="dark" :content="$t('common.refresh')" placement="top">
+        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()"/>
       </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
+      <el-tooltip class="item" effect="dark" :content="$t('common.showColumn')" placement="top" v-if="columns">
         <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
-        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
-          <el-button size="mini" circle icon="el-icon-menu" />
+        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px"
+                     v-if="showColumnsType == 'checkbox'">
+          <el-button size="mini" circle icon="el-icon-menu"/>
           <el-dropdown-menu slot="dropdown">
             <template v-for="item in columns">
               <el-dropdown-item :key="item.key">
-                <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
+                <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label"/>
               </el-dropdown-item>
             </template>
           </el-dropdown-menu>
@@ -23,7 +25,7 @@
     </el-row>
     <el-dialog :title="title" :visible.sync="open" append-to-body>
       <el-transfer
-        :titles="['显示', '隐藏']"
+        :titles="[$t('common.show'), $t('common.hide')]"
         v-model="value"
         :data="columns"
         @change="dataChange"
@@ -39,7 +41,7 @@ export default {
       // 显隐数据
       value: [],
       // 弹出层标题
-      title: "显示/隐藏",
+      title: this.$t('common.show_hide'),
       // 是否显示弹出层
       open: false,
     };
@@ -123,6 +125,7 @@ export default {
   display: block;
   margin-left: 0px;
 }
+
 ::v-deep .el-transfer__button:first-child {
   margin-bottom: 10px;
 }

src/i18n/en.js

@@ -16,12 +16,28 @@ export default {
     importModeMsg: "Drag your file here or Click.",
     export: "Export",
     typeInfo: "Enter {name}",
+    select: "Select {name}",
     search: "Search",
     reset: "Reset",
     expand_collapse: "Expand/Collapse",
     updateTime: "Last Modified Time",
     createTime: "Creation Time",
     operation: 'Operation',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    addDialog: `Add {name}`,
+    modifyDialog: `Modify {name}`,
+    required: "{name} is required.",
+    showSearch: "Show Search",
+    hideSearch: "Hide Search",
+    refresh: "Refresh",
+    hideColumn: "Hide Column",
+    hide_show: 'Hide/Show',
+    hide: "Hide",
+    show: "Show",
+    content: "Content",
+    loading: "loading ....",
+    noMore: "No More"
   },
   session: {
     invalid: "Invalid session, or session has expired, please log in again.",
@@ -75,10 +91,10 @@ export default {
     "2066": "Campus Overview",
     "2070": "Construction Layout",
     "2071": "Command Dispatch",
-    "2077": "Construction Pile Machine Info",
-    "2083": "Construction Pile Point Info",
+    "2077": "Machine Info",
+    "2083": "Pile Hole Info",
     "2089": "Project Information",
-    "2095": "Project Coordinate Settings",
+    "2095": "Project Settings",
     "2101": "Construction Unit",
     "2102": "Construction Dashboard"
   },
@@ -90,7 +106,8 @@ export default {
   },
   cons: {
     index: "Index",
-    pileHoleImportTitle: "Pile Point CAD Data Import",
+    consUnit: "Construction Unit",
+    pileHoleImportTitle: "Pile Hole CAD Data Import",
     cadAnalysis: "CAD File Parsing...",
     unitName: "Unit Name",
     uploadCAD: "Upload CAD File",
@@ -109,6 +126,34 @@ export default {
     // 施工桩机
     machine: "Piling Machine"  // 括号补充说明施工场景
   },
+  screen: {
+    "title": "Digital Construction Dashboard",
+    "consManage": "Construction Management",
+    "machineList": "Machine List",
+    "onlineMachine": "Online Machine",
+    "offlineMachine": "Offline Machine",
+    "machineConsStat": "Construction Machine Status",
+    "drillRodInclination": "Drill Rod Inclination",
+    "verticalTol": "verticality tolerance",
+    "forward": "Forward",
+    "tilt": "Tile",
+    "notStart": "Not Start",
+    "inProcess": "In Process",
+    "completed": "Completed",
+    "deviation": "Deviation",
+    "pileHoleIndex": "Pipe Hole Construction Info",
+    "pileNumber": "Pile NO",
+    "consStatus": "Status",
+    "machineNum": "Machine NO",
+    "finalVerticalDeviation": "Vertical Deviation",
+    "desDepth": "Design Depth",
+    "actualDepth": "Actual Depth",
+    "pullValue": "Pull",
+    "pressure": "Pressure",
+    "consStartTime": "Start Time",
+    "consEndTime": "End Time",
+    "indexLine": "Pressure and Current Value Data"
+  },
   login: {
     "title": "User Login",
     "username": "Username",

src/i18n/zh.js

@@ -16,6 +16,7 @@ export default {
     importModeMsg: "将文件拖到此处，或点击上传。",
     export: "导出",
     typeInfo: "请输入{name}",
+    select: "请选择{name}",
     search: "搜索",
     reset: "重置",
     expand_collapse: "展开/折叠",
@@ -23,7 +24,21 @@ export default {
     updateTime: "修改时间",
     createTime: "创建时间",
     operation: '操作',
-
+    confirm: '确 认',
+    cancel: '取 消',
+    addDialog: `添加{name}`,
+    modifyDialog: `修改{name}`,
+    required: "{name}不能为空。",
+    showSearch: "显示搜索",
+    hideSearch: "隐藏搜索",
+    refresh: "刷新",
+    hideColumn: "隐藏列",
+    hide_show: "隐藏/显示",
+    hide: "隐藏",
+    show: "显示",
+    content: "内容",
+    loading: "加载中 ....",
+    noMore: "没有更多了"
   },
   login: {
     title: "用户登录",
@@ -109,6 +124,7 @@ export default {
   },
   cons: {
     index: "编号",
+    consUnit: "施工单元",
     pileHoleImportTitle: "桩点CAD数据导入",
     cadAnalysis: "CAD文件解析...",
     unitName: "单元名称",
@@ -128,6 +144,34 @@ export default {
     // 施工桩机
     machine: "施工桩机",
   },
+  screen: {
+    "title": "数字化施工大屏",
+    "consManage": "施工管理",
+    "machineList": "设备列表",
+    "onlineMachine": "在线设备",
+    "offlineMachine": "离线设备",
+    "machineConsStat": "施工机械状态",
+    "drillRodInclination": "钻杆倾斜度",
+    "verticalTol": "垂直度",
+    "forward": "前倾",
+    "tilt": "倾侧",
+    "notStart": "未开始",
+    "inProcess": "进行中",
+    "completed": "已完成",
+    "deviation": "偏差",
+    "pileHoleIndex": "桩孔施工信息",
+    "pileNumber": "桩号",
+    "consStatus": "施工状态",
+    "machineNum": "设备编号",
+    "finalVerticalDeviation": "垂直偏差",
+    "desDepth": "设计深度",
+    "actualDepth": "实际深度",
+    "pullValue": "回带量",
+    "pressure": "灌入压力",
+    "consStartTime": "施工开始时间",
+    "consEndTime": "施工结束时间",
+    "indexLine": "压力和电流监控"
+  },
   search: "搜索",
   // 个人中心  布局设置  退出登录
   sysSetting: {

src/views/cons/consUnit/ConsUnitTree.vue

@@ -1,6 +1,7 @@
 <template>
   <treeselect class="comm-tree" :options="consUnitOptions" :normalizer="normalizer" @input="handleInput"
-              placeholder="选择上级施工单元" :openOnFocus="true" @close="onClose"/>
+              :placeholder="placeholder || $t('common.select', {name: $t('cons.parentUnit')})" :openOnFocus="true"
+              @close="onClose"/>
 </template>
 
 <script>
@@ -12,6 +13,12 @@ export default {
   name: "cons-unit-tree",
   dicts: ['cons_unit_type'],
   components: {Treeselect},
+  props: {
+    placeholder: {
+      type: String,
+      default: null
+    }
+  },
   data() {
     return {
       consUnitOptions: [],

src/views/cons/consUnit/index.vue

@@ -154,21 +154,30 @@
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-row>
           <el-col :span="24" v-if="form.parentId !== 0">
-            <el-form-item label="上级施工单元" prop="parentId">
+            <el-form-item :label="$t('cons.parentUnit')" prop="parentId">
               <treeselect v-model="form.parentId" :options="consUnitOptions" :normalizer="normalizer"
-                          placeholder="选择上级施工单元"/>
+                          :placeholder="$t('common.select',{
+                            name: $t('cons.parentUnit')
+                          })"/>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="单元名称" prop="name">
-              <el-input v-model="form.name" placeholder="请输入单元名称"/>
+            <el-form-item :label="$t('cons.unitName')" prop="name">
+              <el-input
+                v-model="form.name"
+                :placeholder="$t('common.typeInfo',{
+                            name: $t('cons.unitName')
+                          })"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="创建类型" prop="createType">
-              <el-input v-model="form.createType" placeholder="请输入创建类型"/>
+            <el-form-item :label="$t('cons.createType')" prop="createType">
+              <el-input v-model="form.createType" :placeholder="$t('common.typeInfo',{
+                            name: $t('cons.createType')
+                          })"/>
             </el-form-item>
           </el-col>
         </el-row>
@@ -179,8 +188,10 @@
           <!--            </el-form-item>-->
           <!--          </el-col>-->
           <el-col :span="12">
-            <el-form-item label="节点类型" prop="type">
-              <el-select v-model="form.type" placeholder="请选择节点类型">
+            <el-form-item :label="$t('cons.nodeType')" prop="type">
+              <el-select v-model="form.type" :placeholder="$t('common.select',{
+                            name: $t('cons.nodeType')
+                          })">
                 <el-option
                   v-for="dict in dict.type.cons_unit_type"
                   :key="dict.value"
@@ -191,8 +202,13 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="设计文件类型" prop="classifyType">
-              <el-input v-model="form.classifyType" placeholder="请输入设计文件类型"/>
+            <el-form-item :label="$t('cons.designFileType')" prop="classifyType">
+              <el-input
+                v-model="form.classifyType"
+                :placeholder="$t('common.typeInfo',{
+                            name: $t('cons.designFileType')
+                          })"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -208,8 +224,9 @@
         <!--        </el-row>-->
         <el-row>
           <el-col :span="24">
-            <el-form-item label="施工桩机" prop="toMachineId">
-              <el-select style="width: 100%" v-model="form.machineId" multiple placeholder="请选择施工桩机">
+            <el-form-item :label="$t('cons.machine')" prop="toMachineId">
+              <el-select style="width: 100%" v-model="form.machineId" multiple
+                         :placeholder="$t('common.select',{name:$t('cons.machine')})">
                 <el-option
                   v-for="machine in machineList"
                   :key="machine.id"
@@ -222,8 +239,8 @@
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">{{ $t('common.confirm') }}</el-button>
+        <el-button @click="cancel">{{ $t('common.cancel') }}</el-button>
       </div>
     </el-dialog>
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
@@ -251,23 +268,24 @@
         </div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
+        <el-button type="primary" @click="submitFileForm">{{ $t('common.confirm') }}</el-button>
+        <el-button @click="upload.open = false">{{ $t('common.cancel') }}</el-button>
       </div>
     </el-dialog>
-    <el-dialog title="分配施工机械" :visible.sync="assignDialog.open" width="700px" append-to-body>
+    <el-dialog :title="$t('cons.assignMachine')" :visible.sync="assignDialog.open" width="500px" append-to-body>
       <el-form ref="assignform" :model="form" :rules="rules" label-width="120px">
         <el-row>
           <el-col :span="24">
-            <el-form-item label="施工单元">
+            <el-form-item :label="$t('cons.unitName')">
               {{ form.name }}
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="24">
-            <el-form-item label="施工桩机" prop="toMachineId">
-              <el-select style="width: 100%" v-model="form.machineId" multiple placeholder="请选择桩机">
+            <el-form-item :label="$t('cons.machine')" prop="toMachineId">
+              <el-select style="width: 100%" v-model="form.machineId" multiple
+                         :placeholder="$t('common.select',{name:$t('cons.machine')})">
                 <el-option
                   v-for="machine in machineList"
                   :key="machine.id"
@@ -280,8 +298,8 @@
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitAssignForm">确 定</el-button>
-        <el-button @click="assignDialog.open = false">取 消</el-button>
+        <el-button type="primary" @click="submitAssignForm">{{ $t('common.confirm') }}</el-button>
+        <el-button @click="assignDialog.open = false">{{ $t('common.cancel') }}</el-button>
       </div>
     </el-dialog>
   </div>
@@ -359,10 +377,10 @@ export default {
       // 表单校验
       rules: {
         parentId: [
-          {required: true, message: "上级部门不能为空", trigger: "blur"}
+          {required: true, message: this.$t("common.required", {name: this.$t('cons.parentUnit')}), trigger: "blur"}
         ],
         name: [
-          {required: true, message: "施工单元名称不能为空", trigger: "blur"}
+          {required: true, message: this.$t("common.required", {name: this.$t('cons.unitName')}), trigger: "blur"}
         ],
       }
     };
@@ -473,7 +491,7 @@ export default {
         this.form.parentId = row.id;
       }
       this.open = true;
-      this.title = "添加施工单元";
+      this.title = this.$t("common.addDialog", {name: this.$t("cons.consUnit")});
       listConsUnitInfo().then(response => {
         this.consUnitOptions = this.handleTree(response.rows, "id");
       });
@@ -492,7 +510,7 @@ export default {
       getConsUnitInfo(row.id).then(response => {
         this.form = response.data;
         this.open = true;
-        this.title = "修改施工单元";
+        this.title = this.$t("common.modifyDialog", {name: this.$t("cons.consUnit")});
         listAllConsUnitExcludeChild(row.id).then(response => {
           this.consUnitOptions = this.handleTree(response.data, "id");
           if (this.consUnitOptions.length == 0) {

src/views/cons/screen/MachineIndex.vue

@@ -1,5 +1,5 @@
 <template>
-  <content-block title="Piling Machine" class="pile-machine-status">
+  <content-block :title="$t('screen.machineConsStat')" class="pile-machine-status">
     <template v-slot:title-right>
       <slot name="title-right" :data="selectMachine">
 
@@ -8,10 +8,10 @@
     <template v-slot:content>
       <div class="offset-status">
         <div class="offset-title">
-          <span>Drill Rod Inclination</span>
+          <span>{{ $t('screen.drillRodInclination') }}</span>
           <span
               :class="{'verticality-tolerance':true, 'warning': calcDeviation(machineLatextIndex.verticalDeviation) }">
-                verticality tolerance:
+                {{ $t('screen.verticalTol') }}:
                 <span class="value">
                   {{ machineLatextIndex.verticalDeviation * 100 || 0 }} %
                 </span>
@@ -24,13 +24,13 @@
                 backgroundColor: calcDeviation(machineLatextIndex.verticalDeviation) && 'red'
               }"></i>
           <span class="label tilt-angle">
-                <span>侧倾角</span>
+                <span> {{ $t('screen.tilt') }}</span>
                 <span>
                   {{ machineLatextIndex.tiltAngle || '--' }}°
                 </span>
               </span>
           <span class="label forward-tilt-angle">
-                <span>前倾角</span>
+                <span> {{ $t('screen.forward') }}</span>
                 <span>
                   {{ machineLatextIndex.forwardTiltAngle || '--' }}°
                 </span>
@@ -87,6 +87,10 @@ export default {
   },
   methods: {
     init() {
+      this.getMachineRealtimeData();
+      this.realtimeInterVal = setInterval(() => {
+        this.getMachineRealtimeData()
+      }, 3000)
     },
     getMachineRealtimeData() {
       calcPileMachineLatestIndex(this.selectMachine.id).then(response => {

src/views/cons/screen/PileHoleDetail.vue

@@ -1,37 +1,61 @@
 <template>
   <el-dialog
-    class="screen-dialog"
-    title="Vibration Pipe Sinking and Stone Crushing Pile Information"
-    :visible.sync="open"
-    :modal="false"
-    append-to-body
-    :destroy-on-close="true"
-    :before-close="closeDialog"
+      class="screen-dialog"
+      :title="$t('screen.pileHoleIndex')"
+      :visible.sync="open"
+      :modal="false"
+      append-to-body
+      :destroy-on-close="true"
+      :before-close="closeDialog"
   >
     <div class="dialog-content">
       <el-descriptions :column="2">
-        <el-descriptions-item label="Pile Number">{{ realtimeIndex.holeNum }}</el-descriptions-item>
-        <el-descriptions-item label="Status">
+        <el-descriptions-item :label="$t('screen.pileNumber')">
+          {{
+            realtimeIndex.holeNum
+          }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="$t('screen.consStatus')">
           <dict-tag size="small" :options="dict.type.pile_hole_status" :value="realtimeIndex.consStatus"/>
         </el-descriptions-item>
-        <el-descriptions-item label="Machine Number">
+        <el-descriptions-item :label="$t('screen.machineNum')">
           {{
             realtimeIndex.pileMachineInfo && realtimeIndex.pileMachineInfo.machineNum
           }}
         </el-descriptions-item>
-        <el-descriptions-item label="Final Vertical Deviation (%)">
+        <el-descriptions-item :label="`${$t('screen.finalVerticalDeviation')} (%)`">
           {{ realtimeIndex.verticalDeviation }}
         </el-descriptions-item>
-        <el-descriptions-item label="Design Depth (m)">40</el-descriptions-item>
-        <el-descriptions-item label="Actual Depth (m)">{{ realtimeIndex.depth }}</el-descriptions-item>
-        <el-descriptions-item label="Delivery length (m)">{{ realtimeIndex.sprayVolume }}</el-descriptions-item>
-        <el-descriptions-item label="Discharge pressure value">{{ realtimeIndex.sprayPressure }}</el-descriptions-item>
-        <el-descriptions-item label="Start Time">{{ realtimeIndex.startTime || '--' }}</el-descriptions-item>
-        <el-descriptions-item label="End Time">{{ realtimeIndex.endTime || '--' }}</el-descriptions-item>
+        <el-descriptions-item :label="`${$t('screen.desDepth')} (m)`">40</el-descriptions-item>
+        <el-descriptions-item :label="`${$t('screen.actualDepth')} (m)`">
+          {{
+            realtimeIndex.depth
+          }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="`${$t('screen.pullValue')} (m)`">
+          {{
+            realtimeIndex.sprayVolume
+          }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="$t('screen.pressure')">
+          {{
+            realtimeIndex.sprayPressure
+          }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="$t('screen.consStartTime')">
+          {{
+            realtimeIndex.startTime || '--'
+          }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="$t('screen.consEndTime')">
+          {{
+            realtimeIndex.endTime || '--'
+          }}
+        </el-descriptions-item>
       </el-descriptions>
       <div class="machine-realtime-container">
         <div class="realtime-title">
-          Real-time Depth and Current Value Data
+          {{ $t('screen.indexLine') }}
         </div>
         <div class="realtime-chart">
           <line-chart-block v-if="loaded" :optCfg="lineOpt"/>
@@ -98,7 +122,7 @@ export default {
             }
           },
           {
-            name: 'Injection pressure(MPa)',
+            name: 'Pressure(kPa)',
             type: 'value',
             splitLine: false,
             nameTextStyle: {
@@ -120,7 +144,7 @@ export default {
         this.realtimeIndex = response.data
       })
       listPileHoleHisIndex({
-        id: 3,
+        id: pileHolleInfo.id,
       }).then(response => {
         if (response.data && response.data.length > 0) {
           const {data} = response

src/views/cons/screen/index.vue

@@ -1,22 +1,28 @@
 <template>
   <div class="screen-container">
     <bd-map :loaded="loaded"/>
-    <div class="screen-title-container"><span class="title-content">Digital Construction Dashboard</span></div>
-    <content-block title="Construction Management" class="screen-left-container">
+    <div class="screen-title-container"><span class="title-content">{{ $t("screen.title") }}</span></div>
+    <content-block :title="$t('screen.consManage')" class="screen-left-container">
       <template v-slot:content>
         <div class="control-content">
           <div class="ctl-item">
-            <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
+            <el-input :placeholder="$t('common.typeInfo',{name: $t('common.content')})" v-model="searchVal"
+                      class="input-with-select">
               <el-button slot="append" icon="el-icon-search"></el-button>
             </el-input>
           </div>
           <div class="ctl-item">
-            <cons-unit-tree v-model="consUnit"/>
+            <cons-unit-tree
+                :placeholder="$t('common.select', {name: $t('cons.consUnit')})"
+                v-model="consUnit"
+            />
           </div>
         </div>
         <div class="machine-list">
           <div class="list-container-title">
-            Machine List <span v-if="loading" style="font-size: 10px;color: #fefefe;margin-left: 10px">加载中...</span>
+            {{ $t("screen.machineList") }}<span v-if="loading" style="font-size: 10px;color: #fefefe;margin-left: 10px">{{
+              $t("common.loading")
+            }}</span>
           </div>
           <div class="content-list infinite-list-wrapper"
                v-infinite-scroll="loadMachine"
@@ -25,13 +31,13 @@
             <div v-for="item in machineList" class="list-item" :key="item.id" @click="handleMachineClick(item)">
               {{ item.name }}({{ item.machineNum }})
             </div>
-            <p v-if="noMore" class="no-more" style="margin-top: auto">没有更多了</p>
+            <p v-if="noMore" class="no-more" style="margin-top: auto">{{ $t("common.noMore") }}</p>
           </div>
         </div>
       </template>
     </content-block>
     <div class="screen-right-container">
-      <content-block title="Online Machinery" class="online-machine-block">
+      <content-block :title="$t('screen.onlineMachine')" class="online-machine-block">
         <template v-slot:content>
           <div class="online-summery">
             <div class="machine-pie-chart">
@@ -40,12 +46,12 @@
             <div class="machine-pie-legend">
               <div class="legend-item">
                 <i :style="{ backgroundColor:machineOpt.color[0] }"/>
-                <span>Online Machinery</span>
+                <span>{{ $t('screen.onlineMachine') }}</span>
                 <span>{{ machineStatusCnt.online || 0 }}</span>
               </div>
               <div class="legend-item">
                 <i :style="{ backgroundColor:machineOpt.color[1] }"/>
-                <span>Offline Machinery</span>
+                <span>{{ $t('screen.offlineMachine') }}</span>
                 <span>{{ machineStatusCnt.offline || 0 }}</span>
               </div>
             </div>
@@ -104,24 +110,6 @@ import PileHoleDetail from "@/views/cons/screen/PileHoleDetail.vue";
 import {copyObj} from "@/utils";
 import pileMachine from "./img/pile-machine.svg"
 
-const LegendItem = {
-  NotStated: {
-    color: '#C1C1C1',
-    name: 'Not Started'
-  },
-  InProcess: {
-    color: '#FF5454',
-    name: 'In Process'
-  },
-  Completed: {
-    color: '#93D467',
-    name: 'Completed'
-  },
-  Deviation: {
-    color: '#F6E65C',
-    name: 'Deviation'
-  }
-}
 export default {
   components: {
     PileHoleDetail,
@@ -161,7 +149,6 @@ export default {
   },
   data() {
     return {
-      LegendItem,
       mapIns: null,
       consUnit: null,
       searchVal: "",
@@ -219,6 +206,24 @@ export default {
           },
         ],
       },
+      LegendItem: {
+        NotStated: {
+          color: '#C1C1C1',
+          name: this.$t("screen.notStart")
+        },
+        InProcess: {
+          color: '#FF5454',
+          name: this.$t("screen.inProcess")
+        },
+        Completed: {
+          color: '#93D467',
+          name: this.$t("screen.completed")
+        },
+        Deviation: {
+          color: '#F6E65C',
+          name: this.$t("screen.deviation")
+        }
+      }
     };
   },
   // 组件卸载前清空图层信息

src/views/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="app-container home">
-    综合管理后台
-    {{$t("search")}}
+    {{ $t("sysTitle")}}
   </div>
 </template>